让 Claude 一键生成架构图！这个 Mermaid Skill 把文档效率拉满

每次跟同事解释系统架构，键盘敲了半天，写出来的文字人家还是一脸懵——”你说的这个模块在哪？数据流向是什么？”

来回描半天，不如一张图说清楚。但打开 draw.io、Figma 或者在线画图工具，光是拖拽对齐就耗掉十分钟。写代码的人都知道，这事儿性价比太低。

最近发现一个叫 mermaid-skill 的 Agent Skill，彻底把这个流程自动化了。

它做了什么？

你在 Claude Code（或者 Cursor、Copilot、OpenClaw）里，直接用自然语言描述你要的图：

“画一个 JWT 登录的时序图：Client 把账号密码发给 API Gateway，Gateway 调 Auth Service，Auth Service 查 User DB、校验密码哈希，然后把签名后的 JWT 沿路径返回给 Client。同时画出密码错误的失败分支。”

技能自动判断你需要的图表类型（这里用了 sequenceDiagram），写出 .mmd 源代码，本地跑 mmdc 渲染成 PNG/SVG/PDF，整个过程不需要你手动操作任何画图工具。

核心亮点

• 验证优先：每次导出前先做语法校验，.mmd 写错格式不会导出废图，直接在循环里修复
• 11+ 图表类型：流程图、时序图、类图、ER 图、状态机、甘特图、饼图、Git Graph、C4 上下文图、脑图……基本上覆盖了工程师日常要用到的所有图
• Kroki 零安装 fallback：本地没装 mmdc？自动切换到 Kroki API，只需要 curl 就能导出
• 主动触发：你跟 AI 聊系统聊到 3 个组件以上，技能自动激活，不用每次都说”帮我画个图”
• 文本格式，版本友好：.mmd 是纯文本，PR 里有 diff，架构图永远和代码保持同步

适合谁？

写技术文档、画架构图、做 ADRs（架构决策记录）的工程师团队；需要经常向非技术背景的人解释系统的技术负责人；以及——每次想画图又懒得打开画图工具的所有人。

怎么装？

一条命令搞定，支持所有主流 AI 编程工具：

/plugin marketplace add Agents365-ai/365-skills
/plugin install mermaid

或者：npx skills add Agents365-ai/365-skills -g

装完直接描述你要的图，坐等 PNG 出来。整个过程不超过 30 秒。

说实话，用了几天下来，最爽的不是”省了画图时间”，而是架构图终于可以跟代码一起进 Git 了——每次 review PR，diff 里就能看到架构变更，不再是孤立的图片文件不知道谁改了啥。这才是工程基本功和 AI 效率工具真正该有的结合方式。

GitHub 地址：https://github.com/Agents365-ai/mermaid-skill

GitHub: https://github.com/Agents365-ai/mermaid-skill