Mermaid 在线编辑器 · 流程图在线制作

Mermaid在线编辑器：左边写 Mermaid 代码，右边实时出图，写错了告诉你第几行。支持流程图（flowchart／graph，四个方向、十几种节点形状、子图、样式）和时序图（sequenceDiagram）。点模板就能改出请假审批、登录流程、if else 程序流程图；导出 SVG、PNG，复制 Markdown 代码块，一键生成分享链接。流程图制作不用装流程图软件，代码只在本机处理，不上传。

怎么用

这是一个 Mermaid 在线编辑器：左边写 Mermaid 代码，停手 0.3 秒右边自动出图，流程图制作不用拖框、不用对齐。第一次打开时编辑区里是一段「登录流程」示例，改改里面的字就能看到效果；上方五个模板点一下就换：请假审批流程、登录流程（含判断）、if／else 程序流程、购物下单时序图、项目分工子图。代码会自动存成草稿，只存在这个浏览器里，不上传。

一、写第一张流程图

第一行写图的类型和方向，下面每行写一条连线：

flowchart TD
    A[开始] --> B{要不要加班？}
    B -->|要| C[点外卖]
    B -->|不要| D[回家做饭]

flowchart 也可以写成 graph；方向 TD（或 TB）从上到下，BT 从下到上，LR 从左到右，RL 从右到左。节点第一次出现时用括号定形状和文字，后面再提到它只写名字就行。

二、Mermaid 流程图语法速查

下面是最常用的几条；每种写法配现场出图、时序图逐条讲解和常见报错对照，看 Mermaid 语法速查。

节点形状（括号里写显示的文字）：

连线：

其它：subgraph 名字[标题] 和 end 之间的节点会被框在一起，可以嵌套；%% 开头的一行是注释，不画；classDef 名字 fill:#色,stroke:#色,color:#色 定义样式，再用 class 节点 名字 或 节点:::名字 套上，style 节点 fill:#色 单独改一个；文字里要换行写 <br>，要写方括号这类符号就用英文双引号把文字包起来。

三、时序图（sequenceDiagram）

时序图画「谁在什么时候给谁发了什么」：

par／and、critical／option、break、rect 这几种框也能画。

四、导出与分享

• 导出 SVG：矢量图，放大不糊，网页和设计软件都能打开；
• 导出 PNG：2 倍清晰度的图片，白底，直接贴进文档、PPT、聊天；
• 复制 SVG 代码：把图的源码放进剪贴板，贴进网页 HTML 里就是这张图；
• 复制 Markdown 代码块：复制成以三个反引号加 mermaid 开头的代码块，贴进支持 Mermaid 的 Markdown 编辑器里会直接显示成图；
• 复制分享链接：代码压进链接里，对方打开就是同一张图。

预览太大或太小，用「放大」「缩小」，「适应宽度」让整张图正好放进右栏。手机上屏幕窄，顶部切「代码」「图」两个标签。

怎么看结果

出错时看状态行

代码写错时，右边的图不会消失，而是变淡、保留上一次画对的样子；图下方的状态行用一句话告诉你第几行哪里不对，左边行号栏里那一行会标红。最常见的几种：

• 「第一行要写图的类型」：第一行漏了 flowchart TD 或 sequenceDiagram，或者拼错了。
• 「这里看不懂：连线要写成 –> 一类」：箭头少了一个短横，A -> B 在流程图里不算，要写 A --> B（时序图里 -> 是合法的）。
• 「没有配对的」：括号没关上，比如 A[开始 少了 ]；或者文字里本身带括号，用英文双引号把文字包起来就行。
• 「多了一个 end」或「没有配对的 end」：subgraph、loop、alt 和 end 要一一对应。
• 「本页暂只支持流程图与时序图」：甘特图、类图、饼图等其它类型本页不画，如实提示。

流程图各形状的通行含义

流程图的形状有一套大家默认的约定：两头圆的框（([ ])）是开始和结束；方框是一步处理；菱形是判断，从菱形出去的线一般写「是」「否」；平行四边形是输入或输出（比如「输入账号密码」「打印结果」）；圆柱是数据库。照着约定画，别人不用看说明就能读懂。

画得好不好看

一张清楚的流程图，主线最好顺着一个方向走（上到下或左到右），判断分支写清楚条件，回头的线（比如「重新输入」）尽量少。步骤超过二三十个时，用 subgraph 把同一阶段的步骤框在一起，或者拆成几张图。如果你要整理的是一个主题的要点、而不是先后步骤，用 思维导图在线制作 更合适。

常见问题

在 GitHub、Typora、Obsidian 里怎么用 Mermaid？

把代码放进以三个反引号加 mermaid 开头、三个反引号结尾的代码块里，就是本页「复制 Markdown 代码块」复制出来的样子。GitHub 的 README 与议题、Typora、Obsidian 等多数支持 Mermaid 的 Markdown 环境会把它直接显示成图；各家用的 Mermaid 版本略有不同，新加的语法个别地方可能不认。在本页先画对，再贴过去最省事。要预览整篇 Markdown 的排版，用 Markdown 在线编辑器。

流程图里能放图片、能随手拖动节点吗？

不能。本页的思路是「写代码出图」，排版全自动，节点位置由程序算；要随手摆放、手绘涂画，用 在线画板。

我有一份 JSON 数据想画成流程图？

Mermaid 不直接读 JSON。可以先用 JSON 在线解析 把数据格式化、看清结构，再按上面的速查表手写成节点和连线。

中文能当节点名吗？

能。登录 --> 首页 这样直接用中文当节点名也认；不过节点名里不能有空格和标点，文字复杂时，建议用英文字母当名字、中文写在括号里，比如 A[用户登录]，后面引用时写 A 更短。

原理与冷知识

Mermaid 的来历

Mermaid 是一个开源项目，2014 年前后由开发者 Knut Sveidqvist 发起，初衷是让文档里的图像代码一样好写、好改、好管理，不用每次都打开画图软件重新导出。后来越来越多的平台直接支持在 Markdown 里渲染 Mermaid 代码块，它就成了「文本画图」最常用的写法之一。

本页怎么排版流程图

本页没有用官方渲染库，解析和排版都是自己写的，大致分五步：

1. 去环：从第一个节点开始顺着箭头走一遍，指回「上游」的线（比如「重新输入」）在排版时暂时当成反向的线，画的时候再把箭头掉回来。所以图里有环也一定能排完，不会卡住页面。
2. 分层：每个节点放在「从起点出发的最长路径」那一层，连线写得越长（--->），两端隔的层数越多。
3. 插虚拟点：跨好几层的线，中间每层插一个看不见的点，让线从节点之间的空当穿过去，不压节点。
4. 减少交叉：每一层里的节点按「连着的上一层节点的平均位置」重新排序，上下来回扫十几轮，取线交叉最少的那一次；同一个子图的成员排在一起，方便框起来。
5. 定坐标与画线：节点往相连节点的平均位置靠拢，同时保证互不重叠；连线画成圆角折线，拐弯和线上文字都放在两层之间的空当里，空当会按文字的大小自动加宽。

每一步的循环次数都有上限，单元测试里拿 200 个节点、300 条线的随机图核过：在普通电脑上几十毫秒就能排完。

时序图怎么排

时序图简单得多：参与者从左到右按第一次出现的顺序排，两个参与者之间要放下最长的那条消息文字，就把右边的参与者整体往右推；消息从上到下按书写顺序排，每条占一行，循环、分支框按它包住的消息和参与者自动定大小。