🎨 创意设计 进阶 📦

diagram-design 快速入门

供编码助手读取的图表设计技能，以HTML/SVG输出架构与流程图，支持品牌配置和重绘；生成内容仍需人工核对，默认字体可能联网。

8.3 /10 ★★★★☆
#开源工具#图表设计#Agent Skills

📊 评分明细

📦 打包完整度
2.1 2.1 / 2.5
🎯 实用性
2.1 2.1 / 2.5
📖 文档清晰度
1.7 1.7 / 2
👥 社区影响力
1.2 1.2 / 1.5
🔗 集成度
1.2 1.2 / 1.5

🎯 适用场景

开源工具图表设计Agent Skills

diagram-design 快速入门：让编码助手画出可交付的结构图

这是什么？适合谁？

diagram-design 是供 AI 编码助手读取的技能，不是独立绘图模型或托管 SaaS。 它把图表类型、版式、品牌和可访问性规则组织成指令、模板与本地脚本，让宿主生成 HTML 与 SVG。 适合要给技术方案、产品说明或演示文稿制作结构图的开发者、技术写作者与设计协作者。

原候选链接是官方图集，不是技能安装页面。 项目的产品官网链接到 cathrynlavery/diagram-design，仓库 README 又同时回链官网与该图集。 图集的 HTML 也与仓库 skills/diagram-design/assets/index.html 对应，不能把任意同名仓库当作来源。

技能使用 MIT 许可；宿主助手、模型调用、字体和外部服务有各自条件。 它不是用确定性语法替代全部绘图步骤，内容正确性与布局质量仍受宿主模型、输入和人工检查影响。 如果你的团队要求 Mermaid 代码自动渲染并直接进入文档流水线，不应把二者当成完全相同的输出格式。

核验日期：2026-10-27。本文依据官方 README、技能文件及隐私说明整理。 以下命令和提示词均为操作示例，没有在本文环境安装技能、运行脚本或生成图片。

准备工作

  • 准备一个支持 Agent Skills 的宿主，以及可用的模型权限。
  • 确认宿主可以读取技能目录、写入当前项目文件；联网和执行命令分别审批。
  • 准备一份只含必要节点与关系的架构说明，不先追求复杂视觉效果。
  • 如果使用命令行安装路线，准备 Node.js 与可运行的 npx。
  • 明确图的受众、投放尺寸和是否包含机密系统信息。

首次任务建议只画前端、后端、数据库和缓存，边数控制在能人工逐条核对的范围。 不把生产密码、完整客户数据或内网凭据写进图表提示词。 如果宿主使用云端模型，本地技能并不意味着输入内容一定只留在本机。

安装与启用

通用 Agent Skills 路线

按照仓库安装章节，可在自己授权的环境执行：

npx skills add cathrynlavery/diagram-design

这条命令会获取外部内容，并可能询问安装宿主、路径或链接方式。 先查看目标目录和技能源码，再确认安装；不要给它当前任务不需要的系统级权限。 安装内容应包含 skills/diagram-design/SKILL.md 及配套的 references/、assets/、scripts/，不能只复制一段介绍文字。

如果选择多个宿主，符号链接与独立副本会影响后续更新方式。 Windows 环境不支持符号链接时，安装器可能回退到复制；这不等于每个副本都会自动同步更新。 通用安装路线与宿主的原生插件市场路线不同，不要同时维护两份来源不明的副本。

Claude Code 原生插件路线

如果你用的是 Claude Code，可按当前 README 在其交互环境中执行：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

命令属于宿主插件界面，不是通用操作系统终端命令。 插件命令、通用 Skill 安装和宿主版本的兼容情况应分别确认。 安装后按宿主提示重新加载插件或开启新会话，再请助手说明它读取了哪份技能文件。

仅能列出技能名称还不足以证明启用成功。 还要确认宿主能读取对应参考文件，且不会把同名普通提示词误认为完整技能。

首个任务：绘制一个小型 Web 应用

把下面的提示词放进已经启用技能的宿主会话。 这是教学输入，不是对某个真实项目的架构事实声明。

使用 diagram-design 画一张面向新同事的 Web 应用架构图。
节点只有 Browser、API、PostgreSQL、Redis。
关系：Browser 通过 HTTPS 请求 API；API 读写 PostgreSQL；API 读写 Redis 缓存。
请先列出节点和边，等我确认后再绘制。
输出到 docs/web-architecture.html，使用默认浅色静态样式。
不要添加未提供的队列、云厂商或鉴权服务，不运行导出和部署命令。

先审阅助手的节点与边计划，确认方向和含义。 如果它加了不存在的负载均衡或消息队列，先修正内容，不让美观掩盖错误。 确认后允许它只在指定输出路径写入图表。

使用浏览器打开 docs/web-architecture.html，检查文字、连线、标题和描述。 成功判据是：文件能打开、四个节点完整、三组关系表达正确、文字不重叠，缩放后仍能看清。 还应确认输出是可保存的 HTML/SVG 文件，而不是只在聊天窗口给出一张无法继续修改的预览。

默认模板可能加载 Google Fonts；断网时应回退系统字体，但排版可能改变。 “单文件”指图表载体，不代表完全没有外部字体请求，也不保证所有环境像素级一致。

初级用法

先指定受众与目的：架构图解释组件和连接，序列图解释交互先后，流程图解释判断与分支。 让助手先选择类型并说明原因，再绘制；不要把所有需求都塞进同一张图。

可以从官方图集选择相近示例，但示例不是你的系统设计依据。 若选用 assets/template.html，应按实际安装目录定位，不假设所有宿主都使用同一绝对路径。 页面里展示的 Minimal light、Minimal dark 和 Full editorial 是版式选择，不是三种不同架构语义。

一次只修正一个问题，例如先修连线方向，再处理标签换行，最后调整留白。 保留提示词、节点边清单和 HTML 成品，便于后续改图时检查有没有丢内容。

高级玩法

1. 品牌接入与命名配置

官方提供 onboard diagram-design to https://yoursite.com 的自然语言入口，读取网站颜色与字体。 只对你有权使用且允许访问的站点授权抓取，不把品牌接入当成任意网站扫描器。

多项目使用时可保存命名 profile，并在项目 .diagram-design 标记中指定 profile: <slug>。 资料位于 ~/.diagram-design/profiles/；详见profiles.md。 把品牌留在 profile 中，比直接修改安装目录中的 style-guide.md 更能避免更新覆盖。

2. 从 Mermaid、draw.io 或 Excalidraw 重绘

给助手明确源文件、目标尺寸和保留的节点关系，而不是只说“美化一下”。 官方把此能力描述为重绘，不是无损格式转换；输出结构与布局可能重新组织。

若使用原生插件命令，可以先查当前宿主的 /import-mermaid 或对应命名空间帮助。 通用 Skill 安装不必然提供这些命令，缺少命令时可用自然语言要求读取支持的源文件。 重绘后逐条核对条件分支、边方向和文字，不以“没有报错”作为等价证明。

3. 导出与交付

优先保留 HTML 母版，再按导出说明选择 SVG 或 PNG。 PNG 导出涉及浏览器渲染及依赖，不要假设基础 Skill 安装就已准备好导出环境。 SVG 便于继续编辑，但字体引用和嵌入方式仍影响离线展示。

如需动效，先完成静态版，再使用 template-motion.html 的受限控制方式。 对外发布时检查减少动态效果偏好与完整静态首帧，不为了演示效果加入任意远程脚本。

五个小技巧

  1. 提示词先写“节点、边、受众、输出路径”，比只写“画得专业”更容易复核。
  2. 把 unknown 写成未知，不让助手替你补出未部署的基础设施。
  3. 在修改版式前保存语义清单，用它检查重绘有没有漏关系。
  4. 团队品牌使用命名 profile，避免多人并行修改共享安装目录。
  5. 交付前同时检查浅色背景、打印尺寸和离线字体回退，不只看宿主预览。

常见踩坑

以下为文档边界与输出机制带来的排障建议，不是本站实测记录。

坑 1：装了 Skill 却找不到斜杠命令

症状：宿主不识别 /export-diagram。原因：通用 Skill 与原生插件命令面不是同一套安装结果。 解决：使用自然语言触发，或按该宿主原生插件路线安装；先确认当前 README 的支持范围。

坑 2：更新后品牌样式丢失

症状：颜色回到默认样式。原因：直接改了可能被包更新替换的 style-guide.md。 解决：使用命名 profile 与项目标记，并备份已有品牌配置，不把修改安装文件当成长久配置方案。

坑 3：图很漂亮，但连线表达错了

症状：缓存方向、权限边界或分支条件与原系统不符。原因：模型进行了语义推断或重绘压缩。 解决：先比对节点与边清单，再让领域负责人确认；不能只做视觉验收。

坑 4：离线或另一台电脑的字体不同

症状：文字换行或布局发生变化。原因：模板可能请求 Google Fonts，失败后使用系统字体。 解决：按隐私说明移除外部字体或接受回退，再检查版式；不要声称默认输出零网络请求。

坑 5：导出 PNG 失败

症状：HTML 能打开，但导出没有结果。原因：导出依赖与普通浏览器查看不是同一条运行链。 解决：读导出与 cookbook 的当前要求，确认宿主允许所需浏览器与脚本，不通过放开全部权限排障。

常见问题 FAQ

Q1：需要单独购买 diagram-design 吗？

A：技能仓库使用 MIT 许可，没有把它描述为收费账号服务。宿主、模型和外部服务费用仍需另算。

Q2：它能替代 Mermaid 的确定性渲染吗？

A：不能等同看待。这里由 Agent 生成或重绘 HTML/SVG，Mermaid 则按其图表语法渲染，协作和复现方式不同。

Q3：HTML 单文件代表绝对离线吗？

A：不代表默认完全无网络。模板字体可能来自 Google Fonts，隐私说明给出移除链接或离线回退的方法。

Q4：私密架构能直接交给它吗？

A：先核对宿主模型的数据处理与保留政策。Skill 不收集数据的声明不能替代宿主服务的隐私条款。

Q5：安装一次就能在所有助手里自动更新吗？

A：不一定。通用安装、副本、符号链接和原生插件市场有不同更新机制，需要分别确认。

成本、权限与平台限制

MIT 许可针对该仓库代码与素材，不自动授予第三方商标、客户内容或所用字体的无限使用权。 宿主可能需要付费订阅或按量模型调用；绘图复杂度、上下文和反复修改都会影响成本。

PRIVACY.md说明技能自身没有服务器、账号、分析或遥测。 同时明确：宿主会按其政策处理输入，Google Fonts 会接收浏览器请求，品牌接入会访问你指定的网站。 按最小权限允许读文件、写文件和联网，不给绘图任务部署权限或生产凭据。

Windows 的链接方式、宿主版本和浏览器导出依赖可能影响体验；支持 Agent Skills 不等于每项原生命令均已兼容。 对外发布生成 HTML 前审阅脚本与外链，保留人工语义、版权和可访问性检查。

免责声明

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。 文中安装、品牌接入、重绘与导出为文档流程示例，不代表已经生成或验收某个项目的图表。

参考链接

📊 评分与标签

核验口径：已按现行口径通过，待按新证据契约复核

评分说明

总分 8.3/10 · P_优选

核验日期：2026-10-27。对象为 cathrynlavery/diagram-design 的 Agent Skill 与配套模板，不把官网图集当成独立在线绘图 SaaS。 评分依据可追溯至产品官网、官方仓库、核心技能、许可与竞品自身说明；未安装或运行技能，没有生成图表的实测结果。

📦 可安装性：2.2/2.5

README 安装章节提供 npx skills add cathrynlavery/diagram-design 和多个宿主原生插件入口。 核心资源路径明确，能区分 Skill 目录与原生命令；但宿主版本、Windows 链接方式与导出依赖仍影响安装结果，因此不满分。

  • 竞品对比 1：Mermaid是按文本定义渲染图表的 JavaScript 工具，安装与接线围绕渲染器；diagram-design 需要支持技能的 Agent，不能把两种安装前提混为一谈。
  • 竞品对比 2：Excalidraw既有可访问的网页应用，也有用于集成的编辑器包；diagram-design 没有独立画布账号，而是把能力装入现有宿主，适合已有 Agent 环境的用户。

🎯 实用性：2.2/2.5

官网和图集展示架构、流程、序列、轴测等类型，README 说明品牌接入、重绘与 HTML/SVG 输出。 对技术写作与统一视觉风格有明确用途，但重绘不是无损转换，领域关系和布局必须人工检查，模型也可能补出不存在的节点。

  • 竞品对比 1：Mermaid强调 Markdown 风格文本定义与动态渲染，便于把源图纳入文档；diagram-design 更偏向让 Agent 根据视觉规则制作可交付 HTML/SVG，不应宣称替代全部确定性渲染场景。
  • 竞品对比 2：Excalidraw提供手绘风格画布、箭头、图形与协作；diagram-design 提供受规则约束的 Agent 生成与品牌化，不能据此声称具有 Excalidraw 同等实时协作编辑体验。

📖 文档质量：1.8/2.0

README、cookbook与类型参考覆盖安装、品牌、导入、导出与排障。 PRIVACY.md还明确字体联网和宿主数据边界，信息较具体；但不同宿主的命令命名与更新方式增加阅读负担，本次未逐宿主验证。

  • 竞品对比 1：Mermaid 文档围绕语法和图表类型展开，强调可编写的文本定义；diagram-design 的文档同时解释视觉、品牌和 Agent 操作，两者服务的复现方法不同。
  • 竞品对比 2：Excalidraw README区分编辑器包功能与 excalidraw.com 应用功能；diagram-design 也需要区分通用 Skill 与原生插件命令，这种边界有说明但并非零学习成本。

👥 社区活跃：1.0/1.5

仓库 API显示近期推送、未归档，并可读取 stars 与 forks；README 提供问题反馈和贡献入口。 仓库规模不等于长期维护承诺，也没有宿主安装成功率、活跃维护者分布或持续使用率数据，故保留分数。

  • 竞品对比 1：Mermaid 官方介绍公开维护、贡献和文档体系；它是渲染器社区，diagram-design 是 Agent Skill 社区，不能仅凭 stars 直接推断长期支持或生态成熟度相同。
  • 竞品对比 2：Excalidraw 仓库公开编辑器、协作应用和贡献入口，项目范围与单个技能不同；本次没有对竞品调用实时指标 API，因此不写未核实的 stars 排名或增长倍数。

🔗 兼容性：1.1/1.5

安装说明列出多个 Agent Skills 宿主，HTML/SVG 输出可在常见浏览器查看。 但通用安装不提供所有原生命令，PNG 导出依赖浏览器运行链，模板默认外部字体也影响离线显示；这些都不能被“单文件”概括为完全一致体验。

  • 竞品对比 1：Mermaid围绕 JavaScript 渲染与文本语法，不要求 Agent 读取技能；diagram-design 产出的 HTML/SVG 易交付，但生成与重绘阶段仍依赖宿主能力，不能声称兼容所有编辑器。
  • 竞品对比 2：Excalidraw提供 .excalidraw 开放格式及 PNG/SVG 导出，网页应用还有离线 PWA；diagram-design 的 HTML 母版、SVG 与品牌配置是另一种资产链，不保证无损往返 Excalidraw 文件。

可观测社区指标

GitHub API在核验日返回 61,348 stars、3,994 forks，pushed_at 为 2026-10-26T08:34:58Z，仓库未归档。 数据不代表独立使用者或付费用户；最近推送也不等于每个宿主均已通过兼容性测试。

标签说明

  • 开源工具：LICENSE为 MIT；宿主、模型和外部资产条件另行确认。
  • 图表设计：官网及图集展示架构、流程等图表与品牌化输出。
  • Agent Skills：核心技能文件和安装章节表明其由宿主读取，不是独立模型服务，也不是多个不同技能组成的目录合集。

身份与许可边界

产品官网直接链接到官方仓库；README回链该官网和原候选图集，并说明官方构建来自该仓库。 原图集本身没有仓库导航，不据相似名称猜测来源；其首页内容与仓库 skills/diagram-design/assets/index.html 对应，结合官网双向链接建立身份链。 隐私政策注明发布者为 LittleMight（Cathryn Lavery），技能自身没有服务器、账号、分析或遥测。 宿主模型仍按宿主政策处理输入；Google Fonts 请求和品牌网站访问有单独数据边界，不能把作者不收集数据解释成所有链路零外发。

局限与声明

没有实际安装、品牌抓取、生成、重绘或导出；没有验证每一种类型、宿主和 Windows 链接回退行为。 官网类型数量和生成速度宣传不作为独立质量或效率实验结论。 对机密架构应先核实宿主政策与数据授权，对生成 HTML、外链和脚本进行审阅；内容正确性仍需领域负责人确认。 本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。

来源核实