diagram-design

给 Claude Code 装上后，跟它说"画个微服务架构图"之类的需求，它会输出自包含的 HTML+SVG 文件，浏览器直接打开就能用，不用 Mermaid 也不用自己拖 Figma。
内置 27～28 种编辑级图表类型，涵盖架构、流程、时序、状态机、ER、泳道、金字塔等常见场景，并能从网站自动提取配色字体做品牌适配，省去手动调色。
优点是审美约束写得比较死板，4px 网格、节点连线数量上限、强调色只用一两种，告别那种 AI 千篇一律的圆角方框；社区实测反馈是放进文章直接能交，不需要二次修。
安装后默认不会自动启用，需要到插件市场手动开启，否则 Claude 不会调用；从实测看导出 PNG 得另装 Playwright 和 Chromium，且 README 里号称 28 类，仓库 About 又写 29 类，实际可核验是 27 类，存在表述不一致。
适合写技术博客、做架构文档或内容创作的人，用来快速产出能直接发版的图；如果只是想画个简单流程图，这个 Skill 反而显得重，普通需求用 Mermaid 就够了。