把内容画成好看的图表（Diagram Design）
用户给一段长文字、一套流程或一堆知识点，你把它画成一张整洁、有设计感的图。底层用开源的 diagram-design（MIT 许可证，作者 Cathryn Lavery）：45 种图表类型，成品是一个自包含的 HTML 文件（里面是内嵌的 SVG），双击就能在浏览器里打开，也能导出成 SVG 或 PNG。
它的风格很克制：一种强调色只用在最重要的一两处，细线边框，没有阴影，所有坐标都落在 4 像素的网格上。
触发
用户想把内容变成图：架构图、流程图、时序图、状态机、数据库结构、时间线、泳道图、象限图、雷达图、桑基图、甘特图、看板、用户旅程、依赖图等；或者想把已有的 Mermaid、draw.io、Excalidraw 图重画得更好看；或者想让图表用上自己网站的配色和字体。
先判断值不值得画
画之前问一句：读者看图，比看一段写得好的文字学到更多吗？ 不是的话就别画。仓库明确建议这些情况不要用它：
- 放在 Git 里、每个迭代都要改的图：用 Mermaid，它能对比差异，GitHub 能直接渲染。
- 只有一个框的"图"：直接写一句话。
- 只是列清单：用表格或项目符号。
- 前后对比：用表格。
硬性规则
- 忠实于用户的内容。 不编节点、数字、百分比和因果关系。缺数据就问，或者留占位，不要凑。
- 先说计划再画。 动手前说明选哪种图、什么尺寸、打算删掉什么，再出图。好的图靠删减：每个节点都要有存在的理由。
- 只访问用户指定的网站。 提取品牌配色和字体时，只抓用户给的那个网址，用户没提就不要去抓。
- 说明网络请求。 默认生成的图会从 Google Fonts 加载字体，这是唯一的网络请求。用户要完全离线，就改用系统字体。
- 不覆盖已有文件。 输出放在项目文件夹里，同名文件已存在时换个名字或先问。
- 装之前先说一声。
npx skills add会把第三方技能装进用户电脑，装之前告诉用户。
安装
先检查：
ls ~/.claude/skills 2>/dev/null | grep -i diagram || echo "未安装"
没装的话，二选一：
# 方式一：通用安装
npx skills add cathrynlavery/diagram-design
# 方式二：在 Claude Code 里装成插件（能收到更新，并带斜杠命令）
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
装完重开一次 Claude Code。
让图用上用户自己的品牌
默认是黑底橙色的配色。第一次在一个新项目里画图时，如果样式还是默认的，先问用户：做一次品牌适配、手动填色，还是先用默认？
品牌适配的做法：用户说一个网址，例如"把 diagram-design 适配到 https://用户的网站"。你抓取这个网站的主色和字体，对应到纸面色、墨色、辅助色、强调色等角色，列出修改内容，用户同意后写进样式文件。写入前会检查文字和背景的对比度是否达标，不达标会提出调整。
常用请求
帮我画一张架构图：前端、后端、数据库、Redis 缓存。
我要一张象限图，按影响和投入给第二季度的项目定位。
把这篇文章的核心流程画成一张流程图，只保留 6 个步骤以内。
把这个 Mermaid 图重画得好看一点，用在 16:9 的幻灯片里。
导入已有的图
可以把 draw.io、Mermaid、Excalidraw 里已有的图重画成这个风格：内容不变，样式统一。支持 .drawio、.mmd 和 Markdown 里的 mermaid 代码块，以及 .excalidraw 场景文件。可以指定尺寸（比如 16:9 幻灯片）和详细程度（忠实原样、均衡、简化）。具体的命令格式看仓库 README 的导入一节。
导出
默认成品是 HTML。要放进 Figma、幻灯片或社交卡片，可以用仓库自带的导出命令导出 SVG 或 PNG，命令用法见 README 的导出一节。
画完检查
- 打开 HTML，看有没有文字重叠、被裁掉或溢出。
- 运行仓库自带的检查脚本，输出
OK才算通过：
python3 skills/diagram-design/scripts/self_check.py 你的图.html
- 内容逐项对照用户原文，确认没有多出来的、编出来的东西。
要注意
- 输出质量取决于你用的模型，同一个提示词两次画出来的布局可能不一样。
- 成品不是可编辑的源码格式：没有文本可以对比，也没有画布可以拖框。要改就让 Agent 重画，或者直接改 SVG。
- 用户想反复修改、长期放在代码仓库里的图，建议改用 Mermaid。
输出格式
- 先说选了哪种图、为什么，以及删掉了哪些内容。
- 给出文件路径，说明用浏览器打开即可。
- 说明字体来源（Google Fonts 或系统字体），以及检查脚本的结果。
- 列出需要用户确认的地方：缺的数据、不确定的关系。
评论（0）
还没有评论，来说第一句。