Claude Code + 这个Skill，五秒钟出一张专业架构图

说真的，架构图这件事折磨我很久了。

每次要给项目写 README、给老板汇报系统设计、或者在 issue 里解释一个复杂流程，我都得打开 Draw.io 或者 Excalidraw，一顿拖拽排版，完了还得导出、截图、再贴回去。费时费力，回头改起来更费劲。

然后我遇到了 diagram-creator-skill，一个 Claude Code 的 Skill。它干的事情很简单：你随便丢给它一个文件、一段配置、甚至一句话，它直接给你生成一张漂亮的架构图，输出是一个可以直接打开的 HTML 文件。

它是怎么工作的

安装好之后，你只需要说一句话：

"Create a diagram of OAuth 2.0 flow"

Claude 直接给你生成一个 diagram-oauth2-flow.html，用浏览器打开就是一张完整的流程图，Pan、Zoom、主题切换全支持，零依赖。

它支持的输入类型非常广：

• 代码文件：Python、JS、Go，什么都行
• 配置文件：Docker Compose、Kubernetes YAML、CI/CD 流水线
• 文档：API 规范、数据库 schema、甚至 PDF 和 Excel
• 纯自然语言：”帮我画一个微服务架构图”

输入格式不需要你做任何预处理，直接丢，它会自动识别。

五套主题，八种布局

图生成出来之后，有 5 套主题可以切换：Dark（默认，技术文档感）、Light（适合演示）、Blue（商务风）、Minimal（极简白板）、Handwritten（手绘风格）。

布局也很讲究，针对不同场景自动选最优：

• Left-to-Right：OAuth 流程、CI/CD 流水线、用户旅程
• Hub-and-Spoke：API 网关、微服务架构、负载均衡
• Nested：Docker 网络、K8s Pod、VPC
• Timeline：部署流水线、项目 roadmap
• Grid/Matrix：功能对比表、技能图谱

用起来有多简单

安装一条命令：

npx skills add https://github.com/ferdinandobons/diagram-creator-skill

重启 Claude Code，直接开用。生成的文件是纯 HTML，没有任何外部依赖，分享给谁都能直接打开。

团队里设计师不在？自己动手，五秒钟出图，改需求也不心疼。

谁适合用

• 后端/架构师：系统设计、模块关系图随手出
• DevOps：Docker、K8s、CI/CD 流程可视化
• 产品/项目经理：业务流程、泳道图不用找设计
• 技术博主：README 里插图，截图都省了

GitHub：ferdinandobons/diagram-creator-skill

一个让 AI 直接帮你画图的想法本身就已经很聪明了，而它真正难得的地方在于——真的做到了零门槛，零依赖，输出即用。

GitHub: https://github.com/ferdinandobons/diagram-creator-skill