Mermaid 代码生成流程图全攻略！办公绘图不要太简单！

Mermaid 是一个多义词，直译为美人鱼，但在绘图的语境下，Mermaid 是一个专有名词，是一种基于文本的图表生成工具，通过简洁的代码语法（类似 Markdown）快速绘制流程图、时序图、思维导图等。

各种 AI 工具兴起之后，尽管不是所有 AI 工具支持绘图，但绝大部分 AI 工具都支持生成 Mermaid 代码这种“中间形态”的文本内容，得到 Mermaid 代码后，再借助 Mermaid 编译器或渲染工具，将 Mermaid 代码一键转换为对应的可视化图形。

那问题来了，AI 工具生成的 Mermaid 代码，如何快速生成流程图呢？有哪些好用的 Mermaid 编辑器或渲染工具？这篇文章逐一为大家答疑解惑。

Mermaid代码生成流程图

Mermaid 代码如何生成流程图？

想把 AI 工具生成的 Mermaid 代码，一键生成流程图，离不开 Mermaid 编译器。Mermaid 编译器对初学者学习成本较高，如果不想去深究 Mermaid 代码的语法，更建议使用智能渲染 Mermaid 代码的 AI 工具，譬如 AI 绘图工具 boardmix，其内部集成了 AI 流程图智能体，支持粘贴 Mermaid/PlantUML 代码，一键渲染为可视化的流程图，方便又快捷！

想要基于 AI 智能体将 Mermaid 代码生成流程图，可跟着下面的步骤操作：

在浏览器打开 AI 绘图软件 boardmix 的首页，如下图，点击左侧“在线使用”，进入 boardmix 工作台。

点击 boardmix 工作台的“AI 一键生成流程图”，打开 boardmix AI 流程图智能体。

首次唤醒 AI 生成流程图智能体，它会弹出下边的指引，智能体支持直接生成流程图、时序图、甘特图或组织架构图，同时也支持解析粘贴的 Mermaid 或 PlantUML 代码，自动生成可视化的流程图。

Mermaid 代码生成的流程图，会置入左侧的 boardmix 画布中，这里生成的可视化流程图，为完全可编辑的状态，你可以直接修改流程图文本或节点的位置。

用鼠标框选整个流程图，点击上方浮窗工具栏的“流程图主题”，从 boardmix 内置的流程图主题中任选一个主题，可一键更换流程图的外观样式。

Mermaid 在线编译器有哪些？

除了使用 AI 智能体，有些朋友可能倾向于使用 Mermaid 编译器，将 Mermaid 代码直接渲染为视觉化的图表，在这方面也有对应的工具可供使用——Mermaid 在线编译器。

Mermaid Live Editor 是一款 Mermaid 在线编译器，既可以在线使用，也可嵌入第三方软件中使用，基于 AI 绘图软件 boardmix 的开放性，可将 Mermaid Live Editor 在线嵌入 boardmix，实现在 boardmix 画布将 Mermaid 代码一键转为流程图。

使用 Mermaid 在线编译器渲染代码的步骤如下：

在 boardmix 画布粘贴 Mermaid Live Editor 首页地址，选择预览视图，将 Mermaid Live Editor 嵌入 boardmix 画布中。

将鼠标指针置于预览窗口的右下角，长按拖拽，拉大整个 Mermaid Live Editor 的显示窗口。

Mermaid Live Editor 窗口左侧是编辑代码的窗口，把 AI 工具生成的 Mermaid 代码粘到 Mermaid Live Editor 左侧面板，在右侧就能实时看到渲染后的流程图。

以上就是本次想和各位分享的所有内容，希望能帮到有需要的朋友。如果你有其他疑问，或是想进一步了解的内容，欢迎在下方的评论区留言，我们一起交流探讨。