画图这事，终于不用再开draw.io了——Claude里直接生成专业Mermaid图表

画图这事，终于不用再开draw.io了

程序员画架构图、流程图，第一反应是什么？大概率是打开draw.io或者Excalidraw，手拖组件、反复调位置。一张图花20分钟，代码早写完了。

今天介绍一个Claude Code里的Mermaid图表技能，叫visualizing-with-mermaid，来自海外开发者 rileyhilliard 的 Claude Essentials 插件。装上之后，直接在对话里生成专业级图表，想改哪里说一句话就行，不用再切窗口。

它能做什么

输入自然语言描述，Claude就能生成以下类型的图表：

• 流程图（Flowchart）：适合业务流程、系统架构
• 时序图（Sequence Diagram）：服务间调用顺序一目了然
• 状态机（State Machine）：复杂对象的状态流转
• 类图（Class Diagram）：OOP设计文档必备

最关键的是它自带语义样式——颜色、形状、布局都有视觉约定。不是随便堆出来的图块，而是符合工程阅读习惯的专业图表。

适用场景

• PRD/技术文档里的架构图
• Code Review时画服务依赖关系
• 新人 onboarding 时的系统漫游图
• 设计评审时的状态流转图

安装方式

在Claude Code里一行命令搞定：

npx skills add https://github.com/rileyhilliard/claude-essentials --skill visualizing-with-mermaid

或者如果你用的是 Claude Code 插件生态：

/plugin install rileyhilliard-claude-essentials

装完直接喊：帮我画一个用户登录的时序图，Claude就给你吐出完整的Mermaid代码，复制到任何支持Mermaid的编辑器就能渲染。

我的感受

程序员写文档最烦的就是画图——打开一个独立的工具、打断思路、画完还得截图插回来。visualizing-with-mermaid把这个环节彻底消解了：你在写代码的同一个窗口，图表就出来了，改图也是一句话的事。

repo本身是 Claude Essentials 套件，除了这个图表技能，还打包了10个命令、13个技能、3个Agent——基本上覆盖了开发日常的各个高频场景。

GitHub：https://github.com/rileyhilliard/claude-essentials

GitHub: https://github.com/rileyhilliard/claude-essentials