AI 画架构图，已经可以交作业了

给 Claude Code 装个”绘图脑”，一句话出图

你有没有这种感觉：2026 年 AI 编程助手已经很强了，但每次要把代码结构、服务依赖、网络拓扑”画出来”的时候，还是要手动打开 draw.io 或 Miro，拖半天节点——然后发现跟代码实际结构已经对不上了。

Diagram Creator Skill 就是专门解决这个问题的。它是 ferdinandobons 开源的一个 Claude Code 插件，安装后直接对 Claude 说”画一张我的微服务架构图”或者丢给它一个 docker-compose.yml，几秒钟后就能输出一张完整的交互式 HTML 架构图。

为什么我说它”可以交作业”？

市面上的 AI 画图工具很多，但 Diagram Creator 的不同之处在于输出物是可直接交付的 HTML 文件，不是截图、不是 JSON、不是要再进 Figma 修一修的半成品。打开就能看，缩放、拖拽、动画都在，连样式都做好了——5 套主题、8 种拓扑布局，从 OAuth 流程到 K8s 网络拓扑都覆盖。

能画什么？给你几个真实场景

• 技术文档配图：README 里要一张架构图？直接对 Claude 说”基于这个项目生成架构图”，秒出。
• CI/CD 流程可视化：把 GitHub Actions workflow 丢进去，自动变成流水线时间线图。
• 业务需求对齐：给产品经理或客户看，把 SaaS 销售漏斗、用户旅程转成可视化，零设计基础也能做出专业级图表。
• 数据库设计评审：ER 图、表关系结构，直接在代码审查环节可视化。

技术细节：纯前端、零依赖、开箱即用

生成的 HTML 是完全自包含的——没有 CDN 引用，没有外部 JS/CSS 依赖，离线也能打开。画布支持 Miro 式的无限平移和缩放，键盘快捷键齐全（+/- 缩放，0 重置），自带 Syne + JetBrains Mono 专业字体组合。对做技术博客截图、写架构设计文档的人来说，这张图拿出去完全不像 AI 随手画的东西。

适合谁？

如果你平时要写技术文档、做架构评审、画流程图，又不想在绘图工具上浪费半小时——这个 Skill 值得装。它支持的 Agent 范围也广：Claude Code、Gemini CLI、Cursor、Windsurf、OpenClaw、Codex 等 40+ 个平台都能用，安装成本极低。

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

如果你也在用 Claude Code 做架构设计，不妨一试——以后 README 里的架构图，可能真的是 AI 替你画的。

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