@trendtech33566: 致那些在AI diagram-design绘制图表时变成某种“通用框”的人们，约3.4k。精彩之处…

字体族 |title字体 | | `` 字体族 |node-name字体 | | `` / `` 字体 |sublabel` 字体 |

对比度检查自动进行

在写入令牌之前，技能会验证 ink 在 paper 上的 WCAG AA 对比度。如果你的站点在图表尺寸（9–12px）下有颜色无法通过对比度检查，它会提出一个调整后的值并解释原因。

手动覆盖

更想手动设置令牌？打开 skills/diagram-design/references/style-guide.md 并编辑表格。下游的所有内容都从那里读取——全部 27 个图表、注释原语和图库都继承语义角色名称（accent，而不是 #eb6c36）。

首次运行门控

该技能不会默默地将默认外观的图表输出到品牌化项目中。首次在新项目中使用时，它会检查 style-guide.md 是否已被自定义。如果没有，它会暂停并询问：

“这是你在此项目中的第一个图表。样式指南仍处于默认状态。你想运行入门流程、手动粘贴令牌，还是继续使用默认设置？”

完整规范请参阅 skills/diagram-design/references/onboarding.md。

快速开始

# 打开图库查看全部 27 个图表
open ~/.claude/skills/diagram-design/assets/index.html

# 在 Claude Code 中，直接说：
# “给我画一个我的应用的架构图：前端、后端、数据库、Redis 缓存。”
# “我需要一个象限图，按影响力和投入程度展示 Q2 项目。”
# “给我一个 OAuth 握手时序图。”

Claude 会选择正确的类型，构建 HTML 并保存它。你也可以直接从模板开始：

cp assets/template.html my-diagram.html
# 极简浅色版
cp assets/template-full.html my-diagram.html
# 编辑型，带摘要卡片

导出为 PNG / SVG

图表以自包含 HTML 形式交付，但你可以将图表本身导出到 Figma、幻灯片或社交卡片中。使用斜杠命令：

/diagram-design:export path/to/diagram.html
/diagram-design:export path/to/diagram.html --svg-only
/diagram-design:export path/to/diagram.html --png-only --scale=3

或者直接用自然语言说：

“将这个图表导出为 SVG 和 PNG。”
“将 my-diagram.html 保存为 PNG。”

• SVG — 提取 `` 节点并注入 Google Fonts，使其在浏览器、Figma 和 Illustrator 中独立渲染。
• PNG — 默认通过 Playwright 以 2 倍分辨率光栅化图表。一次性安装：pip install playwright && playwright install chromium。

两种格式都仅包含图表本身——-full 变体中的编辑卡片和页眉不会包含在内。若要截取完整编辑布局，请使用浏览器的打印为 PDF 或整页截图功能。完整流程请参阅 skills/diagram-design/references/export.md。

架构

渐进式披露。SKILL.md 是一个精简索引——它告诉 Claude 如何选择类型以及在哪里查找细节。每种类型都放在自己的参考文件中，只在相关时加载。

diagram-design/
├── SKILL.md — 顶层：设计理念、选择指南、检查清单
├── references/ — 仅在选择某种类型或原语时加载
│   ├── style-guide.md — 颜色与字体的唯一权威来源
│   ├── onboarding.md — 从 URL 到令牌的流程
│   ├── type-architecture.md
│   ├── type-flowchart.md
│   ├── type-sequence.md
│   ├── type-state.md
│   ├── type-er.md
│   ├── type-timeline.md
│   ├── type-swimlane.md
│   ├── type-quadrant.md
│   ├── type-nested.md
│   ├── type-tree.md
│   ├── type-org-chart.md
│   ├── type-layers.md
│   ├── type-venn.md
│   ├── type-pyramid.md
│   ├── primitive-annotation.md — 斜体衬线编辑标注
│   ├── primitive-sketchy.md — 手绘风格 SVG 滤镜变体
│   └── primitive-terminal.md — 炭黑色 CLI 窗口变体
├── assets/
│   ├── index.html — 带标签的实时图库
│   ├── template*.html — 新图表的脚手架模板
│   ├── example-*.html — 3 个变体 × 27 种类型
│   ├── example-loop-terminal.html — 终端变体旗舰示例
│   └── example-quadrant-consultant.html — 面向顾问的 2×2 场景矩阵
└── docs/screenshots/ — 本 README 中的图片

这让 Claude 的工作上下文保持精简（只加载你需要的内容），也让技能易于扩展——放入新的 type-*.md 并将其接入选择指南即可。该技能自带 34 个参考文件，涵盖每种图表类型、原语和工具。

贡献 / 外观 lint

在提交新示例之前，运行 python3 scripts/lint-skin.py <path>。仓库级检查 python3 scripts/lint-skin.py --all --baseline 必须保持通过（绿色）。

何时加载什么

顶层的 SKILL.md 始终在上下文中。其他一切只在相关时引入——这使技能即使有 34 个参考文件也能保持快速。

无论存在多少种类型，Claude 只会读取你需要的那一个。明天新增一种类型，其他一切都不会改变。

设计系统（一段话总结）

一种强调色，每个图表 1–2 个焦点元素。三种字体族：Instrument Serif（标题 + 斜体标注）、Geist sans（节点名称）、Geist Mono（技术子标签）。1px 细线边框，无阴影，最大边框圆角 10px。每个坐标、宽度和间距都必须是 4 的倍数——这一点不容商量，正是它让图表看起来不像是 AI 生成的。等宽字体（Mono）用于技术内容（端口、URL、字段类型），而不是笼统的“开发者”美学。珊瑚色调的焦点节点会将视线吸引到最重要的 1–2 个事物上。完整规范见 SKILL.md。

原语

• Annotation callout（注释提示框） — 斜体 Instrument Serif + 虚线贝塞尔引导线，用于放置在页边距中的编辑型旁注。参见 skills/diagram-design/references/primitive-annotation.md。
• Sketchy filter（手绘滤镜） — SVG 湍流 + 位移贴图，用于实现手绘风变体。适合文章随笔，不适合技术文档。参见 skills/diagram-design/references/primitive-sketchy.md。
• Icon set（图标集） — 55 个单色 IT/云图标（笔记本电脑、手机、用户、服务器、数据库、Docker、Kubernetes、AWS、Azure、GitHub、Postgres 等），用于更丰富的架构图和时序图。线性图标来自 Tabler Icons (https://tabler.io/icons) (MIT)；品牌剪影来自 Simple Icons (https://simpleicons.org) (CC0)。每个图标都使用 currentColor，因此会继承编辑外观或你已适配的品牌。参见 skills/diagram-design/references/primitive-icons.md；浏览 [