画图不用再开 Figma，Diagram Design 让 Claude 直接输出 39 种专业图表

做技术文档的时候，最头疼的不是写代码，是画图。架构图、流程图、用户旅程图……每次都要在 Figma 里折腾半天，最后出来的效果还特别”AI“。

现在 Claude Code 有了一个新 Skill——Diagram Design（GitHub ⭐ 31k），它能直接生成 39 种编辑级图表，而且完全不用 Mermaid 那一套”程序员审美”的语法。

它的逻辑很简单：描述你要的图表类型和内容，Claude 用纯 HTML + SVG 给你渲染出来。支持 Sankey 图、鱼骨图、沃德利地图、用户旅程图、部署图、UML 类图、数据库 Schema 图……39 种视觉类型，涵盖技术文档里 99% 的画图场景。

最骚的是：它会读取你的网站，直接匹配你的品牌配色。也就是说，你不用手动调颜色，60 秒内生成的图表就能和你的官网风格一致。

输出是纯静态 HTML，可以直接嵌入文档、博客或者幻灯片。没有第三方依赖，不掉字体，不乱跑版。

我自己试了一下”帮我画一个微服务架构图，包含 API Gateway、Auth Service、User Service、Order Service，用深色主题”，10 秒出来一张可以直接截图用的图，节点关系清晰，配色专业。

如果你经常要写技术文档、技术方案、RFC 或者 PRD，这个 Skill 值得加到你的 .claude/skills/ 里。

GitHub：https://github.com/cathrynlavery/diagram-design

GitHub: https://github.com/cathrynlavery/diagram-design