和 Mermaid 完全兼容吗？

支持 Mermaid flowchart 最常用的部分：graph / flowchart 方向、各种节点形状、-->、---、-.->、==>、--o、--x、连线、|文字| 与 -- 文字 --> 两种连线文字写法、& 多节点、链式连线、subgraph 分组、style 节点配色和 %% 注释。classDef、class、click、linkStyle 等语句会被忽略，不会报错。排版算法是本工具自己实现的，与 Mermaid 官方渲染的位置不完全相同。

中文节点名怎么写？特殊符号怎么办？

节点 id 可以直接用中文，如开始 --> 结束，也可以用英文 id 加中文文字：A[开始]。如果文字里有括号、竖线等符号，用英文双引号包起来，例如 A["价格 (元)"]；需要换行时写，例如 A["第一行第二行"]。过长的文字会按大约 220 像素宽度自动换行。

自动布局是怎么排的？能手动拖动吗？

工具使用分层布局算法：先按连线方向把节点分成若干层，回退的连线（如“否”回到上一步）会被识别出来单独绕行，再用重心法调整每层节点的顺序减少交叉，最后让节点尽量对齐到相连节点的中间。布局完全由代码决定，不能手动拖动节点；想调整位置可以改变连线顺序、使用 subgraph 分组，或切换 TD / LR 方向。

导出的图片可以用在哪里？代码保存在哪里？

导出的 SVG 是矢量图，放大不失真，可以插入 Word、PPT、Keynote、Notion 或网页；PNG 按 2 倍分辨率导出，适合发聊天软件和文档。流程图代码会自动保存在当前浏览器，也可以“保存 .mmd”下载到本地，以后“打开 .mmd”继续编辑，或粘贴到其他支持 Mermaid 的工具（如 Markdown 编辑器）中使用。

⛓️

⛓️流程图在线制作 - 用文字生成流程图，兼容 Mermaid

Q: 中文节点名怎么写？特殊符号怎么办？

节点 id 可以直接用中文，如 开始 --> 结束，也可以用英文 id 加中文文字：A[开始]。如果文字里有括号、竖线等符号，用英文双引号包起来，例如 A["价格 (元)"]；需要换行时写 ，例如 A["第一行 第二行"]。过长的文字会按大约 220 像素宽度自动换行。

不用拖拽对齐，写几行文字就能生成整齐的流程图。语法兼容 Mermaid 的 flowchart 常用写法：第一行写 graph TD（上到下）或 graph LR（左到右），然后用 A[文字] 表示矩形、B(文字) 圆角、C{文字} 菱形判断、D((文字)) 圆形，还有体育场形、子程序、数据库、六边形、平行四边形和旗帜形；用 --> 连接节点，-.-> 是虚线，==> 是粗线，--- 是无箭头连线，-->|是| 或 -- 是 --> 给连线加文字，A --> B & C 一次连多个节点，subgraph 标题 … end 画分组框，style 可以单独给节点配色。输入的同时右侧实时渲染，工具会自动分层排版、尽量减少连线交叉，回退的连线也能正确绕行；语法有误时会指出第几行出了什么问题。中文、英文混排的文字按真实宽度测量，长文字自动换行。提供默认蓝、森林绿、暖橙、多彩、深色等主题和曲线、折线、直线三种连线风格，可以导出 SVG 矢量图或高清 PNG，也能保存 .mmd 文件下次继续编辑。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用流程图制作

1在左侧按示例写流程图代码，或从“示例”中选一个模板修改
2在右侧实时预览，调整主题、连线风格、字号和间距
3点击“导出 PNG”或“导出 SVG”，或保存 .mmd 文件

常见问题

和 Mermaid 完全兼容吗？: 支持 Mermaid flowchart 最常用的部分：graph / flowchart 方向、各种节点形状、-->、---、-.->、==>、--o、--x、<--> 连线、|文字| 与 -- 文字 --> 两种连线文字写法、& 多节点、链式连线、subgraph 分组、style 节点配色和 %% 注释。classDef、class、click、linkStyle 等语句会被忽略，不会报错。排版算法是本工具自己实现的，与 Mermaid 官方渲染的位置不完全相同。
中文节点名怎么写？特殊符号怎么办？: 节点 id 可以直接用中文，如开始 --> 结束，也可以用英文 id 加中文文字：A[开始]。如果文字里有括号、竖线等符号，用英文双引号包起来，例如 A["价格 (元)"]；需要换行时写 <br>，例如 A["第一行<br>第二行"]。过长的文字会按大约 220 像素宽度自动换行。
自动布局是怎么排的？能手动拖动吗？: 工具使用分层布局算法：先按连线方向把节点分成若干层，回退的连线（如“否”回到上一步）会被识别出来单独绕行，再用重心法调整每层节点的顺序减少交叉，最后让节点尽量对齐到相连节点的中间。布局完全由代码决定，不能手动拖动节点；想调整位置可以改变连线顺序、使用 subgraph 分组，或切换 TD / LR 方向。
导出的图片可以用在哪里？代码保存在哪里？: 导出的 SVG 是矢量图，放大不失真，可以插入 Word、PPT、Keynote、Notion 或网页；PNG 按 2 倍分辨率导出，适合发聊天软件和文档。流程图代码会自动保存在当前浏览器，也可以“保存 .mmd”下载到本地，以后“打开 .mmd”继续编辑，或粘贴到其他支持 Mermaid 的工具（如 Markdown 编辑器）中使用。