企业官网建设流程全解析

Diagram Design 完整指南：用一句话生成 39 种编辑级图表

【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design

Diagram Design 是让 Claude Code 等 AI 编程助手画出编辑级图表的技能（Skill，可以理解为你给 AI 助手装的一个插件）：你用一句话描述需求，它交付一个自带内联 SVG 和 CSS 的 HTML 文件。它解决的具体麻烦是——AI 默认画出来的图，同款圆角框、紫蓝渐变、阴影满天飞，放进博客或幻灯片里只会减分。

从一个真实请求开始："给我画张架构图"

对 Claude Code 说一句"画一个我应用的架构图：前端、后端、数据库、Redis 缓存"，AI 会先报出它选的图表类型、尺寸预设、以及准备砍掉什么，然后生成一个自包含的.html文件。双击就能在浏览器打开，没有构建步骤、不跑 JavaScript、不引用外部图片。

同一张图默认有三种变体：

仓库里的 index.html 是个本地画廊，全部 39 种图都能在这三个标签页之间一键切换预览。

Diagram Design 到底是什么

一句话：它是装进 AI 编程助手的图表设计系统，支持 Claude Code、Codex、Factory Droid 和 Pi 四个宿主。核心规则集中在 SKILL.md，39 种图表类型每种各有一份独立的排版参考文档，按需加载。

这个"按需加载"值得多说一句：你请求一张流程图时，AI 只读 SKILL.md 加流程图那一份参考，其余 38 种类型一个字都不会读。以后每新增一种图表，都不会让 AI 的工作上下文变重——这是它敢把类型数量堆到 39 的底气。

为什么画出来不像 AI 画的：四条硬规则

这套系统的哲学只有一句话：最高级的操作通常是删除。具体落成四条可执行的规则，全部写在 style-guide.md 里统一管理：

字体也只允许三种角色：Instrument Serif 管标题、Geist 无衬线管节点名、Geist Mono 只管端口和 URL 这类技术标注。想改皮肤时只改 style-guide.md 这一个文件，39 种图全部继承。

39 种类型，覆盖你大概率要画的东西

按用途粗分五类，每类都有独立规范和三种变体：

• 讲流程：流程图、泳道、时序图、状态机、多角色流程、数据流
• 画系统：架构图、分层栈、端到端 High-Level、IT 现状图、部署图、依赖图、UML 类图
• 看数字：柱状、折线、散点、雷达、四象限、维恩、树图、甘特、时间线、Polar 极坐标
• 摆结构：树状、组织架构图、金字塔、嵌套、飞轮 Loop
• 专业场景：ER 数据模型、数据库表结构、Sankey 桑基、鱼骨图、Wardley 地图、看板、用户旅程、故事地图、Medallion 数据湖、DP 集成与安全矩阵

其中 Loop 飞轮图是 2.0 新加入的：以一个共享内存枢纽为中心，把"捕获→研究→决策→行动"这类自我强化循环画清楚。v2.5.10 又补齐了 Sankey、鱼骨、看板等 10 种。另外每种图还可以叠选手绘风（sketchy）或终端窗口风变体。

三个实战技能：品牌适配、旧图重绘、格式导出

60 秒品牌适配

说一句"把 diagram-design onboard 到我的网站"，它会抓取你的首页，提取主色板和字体栈，映射成语义角色：页面背景变成图表底色，CTA 按钮色变成焦点强调色，正文字体变成节点标签字体。写入前会先做 WCAG AA 对比度检查，不达标就给出调整值并解释原因，还会附上一张"保真收据"——采样了哪个 URL、用了哪些颜色和字体，全部可查。之后这个项目里每张新图都自动用你的品牌。

把 draw.io 和 Mermaid 旧图重绘成编辑级作品

注意是重绘，不是转格式。它能读.drawio、.drawio.xml、.drawio.png、.drawio.svg、.mmd、.mermaid以及 Markdown 里的 mermaid 代码块，全程纯文本解析，不渲染、不联网。重绘前设四个旋钮：

结束时会输出一份保真清单：哪些节点被合并、折叠或删除，一目了然。流程细节见 import-drawio.md。

导出 SVG / PNG

图表本体是 HTML，但随时可以说"把这张图导出为 PNG"：SVG 提出来后可直接进 Figma 和 Illustrator 继续编辑，PNG 默认 2 倍分辨率、透明背景，丢进任何底色的幻灯片都不带白边。

3 步出第一张图

1. 安装（以 Claude Code 为例）：

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

2. 看画廊：clone 仓库后双击打开skills/diagram-design/assets/index.html，把 39 种图、三种变体都过一遍，心里先有个底。
3. 用自然语言点单："给我画一个带 token 刷新的 401 重试时序图。"AI 先报类型、尺寸和裁剪计划，确认后落盘成文件。

新项目的头一次调用会多一步：它会先问你要不要做品牌适配、手动贴 token 还是先用默认色板——这个"门禁"是设计好的，不是故障。

什么时候不该用它

作者把这条规则直接写进了技能定义：先问自己，读者从这张图里学到的东西，是否比从一段写好的文字里多。答案是否就画。

• 三列表格能说清的对比 → 用表格
• 任何"一堆东西的列表" → 表格或列表
• 前后对比 → 表格
• 一个框加一个标签的"单形状图" → 直接写那句话

最小行动路径：装好插件，先开画廊看一圈，然后用一句话让它画你手里最想甩掉的那张旧图。而克制建议同样来自这个项目：图表的存在理由是让读者比读文字多学到一点，凑数的那张图，不画才是编辑级的决定。

【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design