干货：Claude Code + Mermaid 一键生成架构图、时序图、流程图

今日快讯 2025年09月18日 01:39 0 aa

前言

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

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

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

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

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

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

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

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

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

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

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

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

发表评论