前言

作为一名开发人员，你是否也曾为画架构图、时序图或流程图而头疼？需要手动调整每个框线、箭头和布局，耗时长且难以修改。现在，借助 AI 大模型 Claude 和 Mermaid 语法，只需一句话描述需求，即可快速生成专业级图表！

Mermaid 是一种基于文本的图表描述语言，可以用于生成流程图、时序图、架构图

本文将手把手教你如何用​Claude Code 生成 Mermaid 代码​，并在 Mermaid 官网、draw.io、ProcessOn 等工具中渲染成精美图表。

用 Claude Code 生成 Mermaid 代码

小编使用的工具是 Cursor + Claude Code，在 Claude Code 中输入结构化提示词，让它生成总体架构图，输出Mermaid代码。

使用 Mermaid 工具渲染图表（最快捷）

打开 Mermaid 官网，在 Dashboard 页面，选择“New diagram”新建图表

将 Mermaid 代码复制到左侧的 CODE 位置，右侧自动会生成架构图表，可以使用工具进行架构图风格的调整

使用 draw.io 工具渲染图表（功能最全面）

打开 draw.io 网站，点击“+”—>Mermaid…，将 Mermaid 代码粘贴到弹框中，点击“插入”即可生成架构图，可以使用工具进行架构图风格的调整

使用 ProcessOn 工具渲染图表（国内用户首选）

打开 rocessOn 网站，点击“新建”—>Mermaid，将 Mermaid 代码粘贴到页面左侧，则自动生成Mermaid 图表，有条件的可以进行“图形化编辑”

生成时序图、流程图

有了 Mermaid 代码，那么生成时序图、流程图等图表也是同样的简单

总结

通过 Claude + Mermaid 的组合，我们实现了：

• ​效率提升​：从小时级到分钟级的图表生成速度
• ​质量提升​：专业统一的图表风格
• ​维护便捷​：文本格式方便迭代和版本管理

现在就开始你的 AI 绘图之旅吧！生成架构图、时序图、流程图、甘特图、状态图，你必须记住这个高效工作流：

描述需求 → 生成 Mermaid 代码 → 粘贴到渲染工具 → 精细化调整