Claude Code 里直接画图！这个 Skill 支持 23 种 Mermaid 图表

Claude Code 写代码已经够强了，但每次要画个流程图、架构图，还得切换到别的工具——说实话，挺割裂的。最近我发现了一个叫 mermaid-skill 的 Claude Skill，能直接在对话里生成 Mermaid 图表，23 种类型全覆盖，体验意外地顺。

它能做什么？

这个 Skill 装进 Claude Code 后，用一条斜杠命令就能触发：

• /mermaid create a flowchart for user login process
• /mermaid draw a sequence diagram for API authentication
• /mermaid ER diagram for an e-commerce database

支持的图类型分六大类：

• 流程类：Flowchart、State Diagram、User Journey
• 结构类：Class Diagram、ER Diagram、C4 Diagram、Architecture Diagram
• 时序类：Sequence Diagram、Gantt Chart、Timeline、Git Graph
• 数据可视化：Pie Chart、XY Chart、Sankey Diagram、Quadrant Chart、Radar Chart、Treemap
• 组织类：Mindmap、Kanban、Block Diagram、Requirement Diagram
• 技术类：Packet Diagram、ZenUML

实际体验怎么样？

我试了一下”画一个用户登录流程的 flowchart”，Claude 直接生成 Mermaid 代码，渲染出来就是一个完整的流程图，包含登录验证、错误处理、跳转逻辑。23 种类型基本覆盖了日常开发中会用到的所有图表场景。

有意思的是，这个 Skill 还自带 GitHub Action，会自动同步 Mermaid 官方文档——意味着语法参考永远是最新的，不用担心用到过时写法。

怎么安装？

两种方式：

• 直接克隆到本地：git clone https://github.com/WH-2099/mermaid-skill.git 然后把 mermaid 文件夹拷贝到项目 .claude/skills/ 下
• 或者用 git submodule 方式引入，方便跟着项目一起版本管理

适合谁用？

如果你经常需要画技术文档、架构图、流程图，这个 Skill 值得一试。告别在 Mermaid Live Editor 和 Claude 之间来回切换的烦恼，一切都在对话里搞定。

GitHub 链接：https://github.com/WH-2099/mermaid-skill

GitHub: https://github.com/WH-2099/mermaid-skill