设计创作
Diagram Design
让编码 Agent 生成符合品牌风格的 HTML/SVG 图表，并导入重绘已有架构图。
价格模式开源
中文支持以英文为主
适用平台Web、Mac、Windows、Linux
资源介绍
Diagram Design 是面向 Agent Skills 宿主的图表设计资源。用户描述架构、流程、时序或数据关系后，Agent 选择图表类型并生成自包含 HTML 与 SVG。项目提供四十四种图表类型、版式参考和图标，强调字体、网格、焦点与连线的一致性。
它可以从网站提取品牌配色与字体，保存客户风格档案，也能读取 draw.io、Mermaid 和 Excalidraw 的结构后重新排版。导入时可指定受众、尺寸和细节等级，输出记录哪些节点被合并、收起或删除，方便将复杂工程图改成文档或演示材料。
生成的 HTML 可在浏览器打开，SVG 可进入设计软件，PNG 导出依赖 Playwright 和 Chromium。Excalidraw 导入接受场景 JSON，不支持从 PNG 或 SVG 截图恢复结构。默认字体可能访问 Google Fonts，离线交付可选择系统字体。资源采用 MIT 许可，运行仍需要兼容的 Agent 宿主。
适合什么人
需要制作品牌一致的架构图、流程图和演示图表的开发者、设计师与咨询团队。
真实使用场景
把系统结构说明生成可编辑的 HTML/SVG 架构图
将 Mermaid、draw.io 或 Excalidraw 场景重排为演示稿配图
按不同客户品牌保存配色字体并批量复用
价格说明
项目采用 MIT 许可，技能与模板可免费获取；Agent 模型调用和本地渲染环境成本另计。
核心特点
四十四种图表类型
自包含 HTML 与 SVG 输出
品牌风格与客户档案
三种图表格式导入重绘
PNG、SVG及结构信息导出
限制与注意事项
需要能够读取 Agent Skills 的宿主，资源本身不是独立绘图模型
PNG 导出依赖 Playwright 与 Chromium，SVG/HTML默认字体可能联网
Excalidraw导入需要场景JSON，PNG或SVG导出图不能恢复原场景结构
常见问题
输出能离线打开吗？
自包含 HTML 可以直接打开；完全离线时应改用系统字体，避免默认 Google Fonts 请求。
可以把 Mermaid 转为演示图吗？
可以读取 Mermaid 文件或 Markdown代码块，按尺寸、受众和细节要求重绘，并列出结构删改记录。
PNG 导出需要什么？
需要本地 Playwright 和 Chromium；SVG导出从生成文件中提取图形，流程不同。
相关链接
编辑：WhosBug团队 · 更新于
