diagram-design 上手：给编程智能体装上画图 Skill，一句话生成可离线打开的杂志风 HTML 图表

01第一步：安装

npx skills add cathrynlavery/diagram-design
# 只装给 Claude Code，跳过交互：
npx skills add cathrynlavery/diagram-design -a claude-code -y

这条命令适用于 Cursor、Claude Code、Codex、Gemini CLI、Windsurf 等支持 Agent Skills 的环境。本站在 Linux 沙箱用 skills CLI 1.7.4 加上 -a claude-code -y 装过，得到 .claude/skills/diagram-design/，里面有 SKILL.md、references/、scripts/ 和 assets/（本次共 217 个示例文件，每类图有浅色、深色和完整排版三种变体）。

Claude Code 想要斜杠命令和自动更新，改用插件市场：

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

装完后在 Claude Code 里运行 /plugin，进入 Marketplaces 选中 diagram-design 开启 auto-update；第三方市场默认不自动更新。官方强调正式版本只来自这个仓库，其他名字的上架版本属于非官方副本。

02第二步：让智能体画图

直接用自然语言描述，例如：“给我的应用画一张架构图：前端、后端、数据库、Redis 缓存。”或“画一张季度项目的影响—投入四象限图”。智能体会先说明选了哪种图、计划砍掉哪些细节，再写出一个 .html 文件，双击用浏览器打开即可。45 类图包括架构、流程、时序、状态机、ER、泳道、甘特、桑基、看板、UML 类图等。

03第三步：检查输出

Skill 自带校验脚本，路径以实际安装位置为准：

python3 .claude/skills/diagram-design/scripts/self_check.py my-diagram.html
# 通过时输出：OK my-diagram.html
# 加 --offline 会额外要求文件不再加载 Google Fonts

本站对安装包里自带的 template.html 实测：不加参数输出 OK，加 --offline 则失败，提示文件加载了 Google Fonts。这符合官方说法：默认字体（Instrument Serif、Geist、Geist Mono）从 Google Fonts 加载，是它唯一的网络请求。

04第四步：想完全离线，就用系统字体

对智能体说“用系统字体”，或在 references/style-guide.md 里把字体来源设为 system，生成的文件就不再请求任何网络资源，字体回落到系统自带的衬线、无衬线和等宽字体。之后用 --offline 校验应当通过。这一步本站未实际让智能体生成，按官方文档整理。

05按自己的品牌出图

对智能体说“onboard diagram-design to https://你的网站”，它会抓取首页，把底色、文字色、强调色和字体映射成角色，列出改动供你确认，再写入 references/style-guide.md。写入前会检查文字对比度是否达到 WCAG AA，不达标会给出调整建议。要同时服务多个客户，可以保存命名配置，再在各项目里放一个写着 profile: <名称> 的 .diagram-design 标记文件。

06导入与导出

• 导入：可把 .drawio、Mermaid（.mmd 或 Markdown 里的 mermaid 代码块）和 .excalidraw 文件重绘成这套风格，并给出“合并、折叠、舍弃了什么”的清单。
• 导出：Claude Code 里用 /diagram-design:export-diagram my-diagram.html，加 --svg-only 或 --png-only --scale=3；PNG 依赖 Playwright，需先 pip install playwright 和 playwright install chromium。导出只含图本身，不含完整排版里的标题和卡片。

07限制

• 导入和导出的命令、brand onboarding 的效果本站未实测，按官方文档整理。
• 官方也说明不适合的场景：要放进 Git 并频繁修改的图用 Mermaid 更合适；只有一个框的“图”直接写句子；列表用表格或项目符号。
• 它按固定的设计规则出图（一种强调色、1 到 2 个焦点、坐标都是 4 的倍数），风格统一但可调范围有限。
• 安装后的 Skill 能让智能体执行脚本，装之前建议读一遍 SKILL.md；隐私方面，官方 PRIVACY.md 称它没有服务器、账号或遥测，网络请求仅限 Google Fonts 和你要求抓取的品牌网站。