diagram-design：让智能体按品牌画出 44 种编辑级图表

当开发者让智能体“画一张架构图”时，常见的结果是一段 Mermaid 代码，渲染出来灰蒙蒙、带阴影、字体随机的方框。cathrynlavery/diagram-design 针对的正是这个小而真实的痛点。它是一个智能体技能（Agent Skill），让智能体把图画成一个自包含的 HTML 加 SVG 文件，双击即可打开，并且遵循你自己的品牌。项目自称提供 44 种图表类型，口号很直接：没有阴影，没有 Mermaid 式的粗糙输出。README 还挂着 Trendshift 榜单徽章，说明它正在被开发者圈子关注。

使用方式刻意做得很轻。用户用自然语言提需求，例如“给我的应用画一张架构图：前端、后端、数据库、Redis 缓存”，或者“用象限图展示第二季度项目的影响与投入”。智能体自己挑选图表类型，先说明计划，再写出一个 .html 文件。安装也只有一行命令 npx skills add cathrynlavery/diagram-design。它面向所有能读取 Agent Skills 的宿主，README 列出 Cursor、Claude Code、Codex、GitHub Copilot、Gemini CLI、Cline、Windsurf 和 Amp。这种跨宿主的写法，让技能不再绑定某一家工具，是它值得关注的第一个原因。

第二个原因是品牌入驻。用户可以对智能体说“把 diagram-design 入驻到我的网站”，技能会拉取该网站的配色和字体，此后生成的每一张图都与网站保持一致。这一步把“图表风格”从每次对话里的临时提示词，变成可复用的持久设定。对内容团队和设计团队而言，这比反复在提示词里描述颜色可靠得多。README 还提供从 draw.io、Mermaid 和 Excalidraw 导入的路径，以及导出 PNG 和 SVG 的路径，所以旧资产不必丢弃，成品也能放进文档与幻灯片。 分发方式也值得细看。在 Claude Code 中，可以通过插件市场安装，获得更新和斜杠命令，如 /export-diagram、/import-mermaid、/profile 和 /doctor。通过 skills CLI 的独立安装只装 Agent Skill 本体，不含这些命令，更新需要手动执行 npx skills update diagram-design。当所选宿主目录不止一个时，CLI 推荐符号链接：一份标准副本，链接到各个目录，一次更新即可覆盖全部；也可以用 --copy 为每个宿主单独复制。在无法使用符号链接的环境，例如未开启开发者模式的 Windows，CLI 会退回复制并报告结果。这些细节说明作者认真考虑过多宿主环境里最常见的版本漂移问题。

信任与来源方面，README 说得克制。官方版本只来自这个仓库；发布插件目录条目的是作者 Cathryn Lavery 的公司 LittleMight，其他名称下的条目属于非官方副本。PRIVACY.md 列出技能会通过网络发送的内容。项目采用 MIT 许可证，并有持续集成徽章和版本徽章。对于一个会在你的代码库里被智能体执行的技能，这种来源声明和网络行为披露，是企业采用时必须先看的底线。 从行业角度看，这个项目反映了智能体工具的一种新分工。一个常见现象是，编码智能体的竞争集中在谁写代码更准，而交付物周边的小环节，例如图表、文档封面和演示稿，大多被留给默认模板。diagram-design 把其中一个环节单独拎出来，用一份技能说明，加上参考资料、素材和脚本，去约束智能体的审美与输出格式。技能目录里包含 references、assets 和 scripts，说明它不是一段冗长的提示词，而是一个有结构的小型工程。这种做法的好处是可维护：风格规则写在文件里，可以被评审、被回滚，也可以随版本更新分发给所有宿主。

再看具体场景。技术写作者需要给博客配一张系统结构图，产品经理需要一张影响对投入的象限图，后端工程师需要一张带令牌刷新的调用时序图，这些都出现在 README 的示例请求里。它们的共同点是：内容简单，但外观要求高，而且要与站点风格保持一致。传统做法是在白板工具里手绘，再导出图片，之后很难修改。单文件 HTML 加 SVG 的形式，让修改回到文本层面：改一个标签、换一种颜色，只需要让智能体重写文件，差异也能在版本库里逐行查看。这正是文本化图表相对于位图的长期优势，也是它适合进入团队工程流程的根本原因。 与同类方案相比，还有一点值得注意。Mermaid、draw.io 和 Excalidraw 各自都有稳定的用户群，diagram-design 并不要求用户放弃它们，而是提供导入路径，把旧图重新画成统一的风格。这意味着它更像一层风格与流程的外壳，而不是替代品。对已经积累大量 Mermaid 文档的团队，这是一种低风险的试点方式：先挑出最常被引用的一批图，让智能体按品牌重画，再比较可读性与维护成本。如果结果令人满意，再把技能纳入团队的标准配置，并通过插件市场的自动更新保持版本一致。 我们的判断是：diagram-design 的价值不在于又多了一个画图工具，而在于它把“设计约束”打包成智能体可调用的技能。输出是单文件 HTML 加 SVG，可以纳入版本管理，可以审查差异，也不依赖外部渲染服务。风险同样清楚：44 种类型的实际质量需要用户自行在画廊里评估；品牌入驻依赖目标网站的样式是否规整；技能生态仍在快速变化，跨宿主行为未必完全一致。建议团队先用它画两三类最常用的图，例如架构图和时序图，与现有 Mermaid 流程对比后，再决定是否推广。