项目简介
包含 29 种自包含 HTML+SVG 编辑级图表类型，以 Agent Skill 形式供 Claude Code、Codex、Pi 等使用，支持通过风格指南匹配品牌配色与字体，并输出浅色、深色及完整编辑风格三种变体。
README 预览
# Diagram Design\n\n**Editorial diagrams your designer won't hate.**\n\n\n\n\n\n*New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.*\n\n27 types. One agent skill for Claude Code, Codex, and Pi. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. Already have diagrams in draw.io? Point it at the file and it redraws them at the format, size, and level of detail your audience needs.\n\nNo Figma. No generic rounded boxes. No 30-minute color-picking sessions.\n\n---\n\n## Why I built it\n\nI write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.\n\nSo I built a Claude Code skill for it. Twenty-seven types, editorial quality, matches your brand in 60 seconds by reading your website.\n\n> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.\n\n---\n\n## What it makes\n\nAll 27 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.\n\n\n\n ArchitectureComponents + connections\n FlowchartDecision logic\n SequenceMessages over time\n\n\n State machineStates + transitions\n ER / data modelEntities + fields\n TimelineEvents on an axis\n\n\n SwimlaneCross-functional flow\n QuadrantTwo-axis positioning\n NestedHierarchy by containment\n\n\n TreeParent → children\n
常见问题 (5)
故障排除如何修复架构图中自定义纸张或皮肤上区域标签几乎不可见的问题？
在 2.4.0 版本中，type-architecture.md 中的区域眉标（zone eyebrow）硬编码了 fill="rgba(45,49,66,0.40)"，该颜色仅针对默认纸张色 #f5f5f5 进行了调优。在更浅或更暖的纸张色（如 #faf8f6）上，其对比度可能会降至约 2.22:1。
请将硬编码的颜色和字体替换为语义化的皮肤角色：
-<text … fill="rgba(45,49,66,0.40)" font-size="7"
- font-family="'Geist Mono', monospace" …>LAYER</text>
+<text … fill="{soft}" font-size="7"
+ font-family="{sublabel font}" …>LAYER</text>soft 是子标签和边界标签的预期角色，因此它会自动跟随当前激活的皮肤和深色模式。随后即可移除单独的深色模式 rgba 覆盖。
要永久修复，请升级到包含针对 issue #65 的 type-reference 皮肤令牌（skin-token）修复的版本。如果必须修补已固定为 2.4.0 版本的安装，请编辑其版本化缓存路径下的文件，例如：
plugins/cache/diagram-design/diagram-design/2.4.0/skills/diagram-design/references/type-architecture.md其他 SVG 片段也应使用 {ink}、{paper}、{accent @ 0.50}、{callout font} 和 {sublabel font} 等占位符，而不是字面的十六进制颜色值或字体族名。
故障排除为什么 verify-geometry.py 会对平移后的 SVG 面板误报 label-mask 裁剪？
几何检查器在局部 SVG 坐标中比较标签遮罩和节点矩形，而没有将它们转换为画布坐标。请将 scripts/verify-geometry.py 更新为针对 issue #293 的修复，该修复在检查相交之前，将现有的受支持的 translate() 计算应用于标签遮罩和较晚绘制的节点。更新后，重新运行：
python3 scripts/verify-geometry.py <file>.svg平移后的面板不应再产生误报的重叠发现，同时能够检测到在画布坐标中实际重叠的遮罩。该修复不会添加通用的 SVG transform 支持；仅处理已支持的组/元素平移。
故障排除为什么 verify-motion.py 对 aria-hidden 装饰性图标报告缺少 SVG title/description 的错误,而 lint-skin.py 却能通过?
这是 verify-motion.py 中的一个 bug：它对所有根 SVG 元素都应用了图表命名检查，包括标记为 aria-hidden="true" 的装饰性图标。请更新到包含 PR #295 的版本，然后按如下方式标记装饰性 SVG 根元素：
<svg aria-hidden="true" focusable="false">
<!-- decorative icon -->
</svg>重新运行：
python3 scripts/verify-motion.py <file>.html修复后的脚本会使装饰性 SVG 根元素免于命名和计数检查，同时仍要求有意义的动态图表具备无障碍命名。如果无法立即更新，请仅在验证期间移除装饰性图标，或应用 PR 补丁；切勿从真正属于装饰性的图标中移除 aria-hidden。
故障排除如何修复爆炸图或轴测验证器拒绝以科学记数法表示的有效 SVG 路径坐标的问题？
这是由共享的 verify-exploded.parse_path 分词器中的一个 bug 引起的：它将 1e-3 或 -2.5E2 等有效的 SVG 数字拆分为独立的操作数，并报告无法读取的轮廓。请将验证器更新到包含 fix(verifiers): read scientific notation in projected SVG path coordinates 的版本。该修复支持绝对 M/L/A/Z 命令中的符号、前导小数和指数，同时将弧线标志保持为字面量 0 或 1。作为临时变通方案，可在验证前将科学计数法坐标规范化为等效的十进制表示，例如 1e-3 → 0.001、-2.5E2 → -250。该几何图形是有效的；Playwright 1.62.0 搭配 Chromium 151 可以正确渲染等效路径。
故障排除如何修复热力图验证器对超过 10 亿的有效计数报告"no parseable cells"的问题？
验证器会错误地拒绝 value >= 1e9 的有限非负值，尽管热力图格式并没有计数上限。请升级到包含 PR fix(heatmap): accept finite billion-scale counts 修复的版本；解析器现在接受任何有限非负数，同时仍会拒绝 NaN、Infinity 和负值。作为临时解决方法，可以将每个单元格的计数除以同一个正数因子，使最大值低于 1,000,000,000，然后重新标注图例/单位；由于缩放是均匀的，这样做可以保持相对顺序和不透明度。