逛 GitHub 的时候就看到了这个开源项目。
这是一个做图表的，登上 GitHub 开源热榜，而且已经到了 2.8 万的 star。
研究了一下，他这个画的图表的好处是能够直接拿去用。
啥意思呢？
很多用 AI 生成流程图啊、系统架构图、甘特图什么乱七八糟的各种图表，最终的成图总会有一些瑕疵。
比如说颜色问题、线重叠问题，反正用 AI 做过图表的人都应该都明白我在说啥。
这种图表自己看一看还行，但如果说是插入到文章里，或者提交去汇报，就比较难搞。
开源项目 Diagram Design 这么火，就是最后收尾工序做得好一些。
01 开源项目简介
现在的模型其实已经能读懂流程、模块和依赖关系。
你把一段产品逻辑扔进去，它很快就能生成 Mermaid、SVG，或者一页带流程图的 HTML。
但其实只靠模型的 Coding 能力，一次性能把关系画清楚，其实目前应该还不太行。
文字密度、留白、连线不对、重叠等等毛病很难靠一句提示词解决。
Diagram Design 这个开源项目把字号、间距、配色、节点数量和视觉层级写成规则，让 Agent 照着执行。
开源地址：https://github.com/cathrynlavery/diagram-designDiagram Design 目前覆盖 39 种图表。
常见的流程图、系统架构图、时序图、状态机、数据流都支持，另外还有甘特图、桑基图、鱼骨图、Wardley Map、看板和用户旅程。
而且 Diagram Design 还可以读取一个网址，在大约 60 秒内提取这个网站的字体和色调，应用到生成的图表中。
这样你不用每次重新告诉 AI 主色是什么、标题该用什么字体，看起来和自己要汇报材料的主题很协调。
如果你有 Mermaid 或 draw.io 文件，Skill 能直接读取。
会先保留原图里的组件、关系、分组和方向，再让你选择输出格式、画布尺寸、细节级别和目标受众。
这个开源项目输出默认是一份网页 HTML，也可以导出 SVG 和 PNG。
02 安装不复杂
如果你用 Claude Code，可以直接安装：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designCodex 用户可以执行：
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design或者直接把我的这篇微信公众号文章丢给 Agent，让它读取然后安装一下这个 skill。
本文由作者@逛逛GitHub，授权发布于平台，未经许可禁止转载。