说人话就能画C4架构图？这个AI插件让系统设计不再靠手画

你有没有过这种经历——跟产品经理解释系统架构，对方听得一头雾水；或者接手一个老项目，看代码看到崩溃，就是找不到一张能说明白的架构图？

C4 模型 就是来解决这个问题的。

C4 模型把软件架构分成四个层次：系统上下文（Context）、容器（Container）、组件（Component）、代码（Code）。每一层都有明确的关注点，从”这个系统是干嘛的”一直到”这个类是怎么实现的”。亚马逊、微软等大厂内部都在用，是目前最被认可的架构图绘制方法论。

但问题是——画 C4 图挺费时间的。要记住每层用什么符号、箭头怎么连、要不要画数据库、API 要不要拆出来……手动画一张像样的 C4 图，半小时算快的。

最近发现了一个叫 c4-diagrams 的 Skill，装进 AI 编程助手之后，事情变了。

装完之后怎么用？

直接跟 AI 说人话就行。比如：

“帮我画一个用户认证系统的 C4 图，包含前端 Web App、后端 API、数据库，还有一个第三方登录服务”

AI 会自动生成对应的 C4 模型——从 Context 层描述整体关系，到 Container 层拆分出各个进程/容器，再到 Component 层画出关键模块的内部结构。全程不需要你懂 C4 符号语法。

生成的图可以输出成两种格式：
– Mermaid：直接粘贴进 README、文档或者任何支持 Mermaid 的笔记工具（Notion、飞书、GitLab……）
– Excalidraw JSON：拖进 Excalidraw 里面自由修改、加上手绘风格，演示的时候特别好看

跟现有的画图方案有什么不同？

传统画图要先想好画什么、再查符号、再动手。c4-diagrams 彻底反过来了——你只需要描述意图，剩下的全部 AI 代劳。而且因为 Skill 里的指令包含了 C4 方法论本身，AI 生成的不是随便的方块图，而是严格符合 C4 规范的层级结构。

适合谁用？

• 写技术文档写到崩溃的后端工程师
• 需要快速产出架构图做技术方案的开发者
• 想让产品/设计看懂系统结构的前端同学
• 任何想用 AI 做”可视化知识沉淀”的人

安装方式：

Skill 在 intent-driven-dev/skills 这个仓库里，支持 Claude Code、Cursor、Codex 等主流 AI 编程工具。直接 clone 仓库，把对应的 SKILL.md 放到项目或用户级别的 skills 目录即可。

GitHub 链接：

https://github.com/intent-driven-dev/skills

GitHub: https://github.com/intent-driven-dev/skills