改字、调布局、修报错

先在编辑器里打开这段带一处错误的代码，边看边试：

flowchart LR
    A[用户下单] --> B{库存充足?}
    B -- 是 --> C[扣减库存]
    B -- 否 --> D[提示缺货]
    C --> E[创建订单]
    E --> F[支付]
    F --> G([完成])

打开后可以改文字、换主题、下载 PNG / Word / PPT。

改文字：双击节点

预览里双击一个节点，节点上出现输入框，改完回车生效，Esc 取消。改动会直接回写到左边的代码——代码仍然是唯一的真相，导出、分享链接、云端保存看到的都是改过的代码。目前流程图和思维导图支持双击改字，其他图类型在代码里改。

加一步、加分支、改形状、改颜色、删除：单击节点

流程图里单击一个节点，旁边弹出一小组操作（手机上贴在预览底部）：

改文字：和双击一样，就地改。
改形状：矩形、圆角、体育场形、菱形、圆柱、圆、平行四边形，换的是代码里那对括号。
颜色：描边、背景各一排 Excalidraw 那套快捷色，想突出某一步（风险点标红、完成的标绿）点一下就行；写成代码里的一行 style，「恢复默认颜色」去掉。
在后面加一步：新节点插在这个节点和它所有出边之间（A→B、A→C 在 A 后面加一步，变成 A→新、新→B、新→C），新节点直接进入改字，输入名字回车即可。
加分支：从这个节点新拉一条边到新节点；菱形判断节点的分支默认带「否」，单击那条连线可以改。
删除：删掉这个节点，它前后的连线自动接上（A→B→C 删掉 B 变成 A→C）；改错了点预览右下角的撤销，或按 Ctrl（⌘）+Z。

单击一条连线（或它上面的文字）可以改连线文字、删除连线。这些都是确定的代码改写，不经过 AI、不联网，改完 0.5 秒内重新出图；遇到改不了的写法会提示你在代码里改。

思维导图里单击节点也有菜单：改文字、改形状（方形、圆角、圆形、爆炸、云朵、六边形）、颜色、加子节点、加同级、删除（连同下面的整枝，可撤销）。状态图、类图、ER 图单击节点直接出色板，给某个状态或实体上色。细节见帮助在预览里直接改。

改方向和间距：「布局」

预览上方的「布局」按钮（手机在「主题」面板底部）只对流程图有效：

方向：上→下、左→右、下→上、右→左，改的是第一行 flowchart TD 里的方向。汇报里放横版的图，切「左→右」最常用。
节点间距 / 层间距：两条滑杆，写进代码顶部的 %%{init: …}%% 一行；「恢复默认」会把它去掉。

因为改的是 Mermaid 原生语法，把代码贴到任何支持 Mermaid 的地方都会得到同样的布局。想把某个节点挪个地方，直接在预览里按住拖过去（流程图、状态图、类图、ER 图），位置记在代码最后一行的注释里；要在图上圈重点、加箭头和说明，点预览左上角的「标注」，画的东西也记在这一行；想要手绘的样子换手绘主题。

其它改法：改代码

单击菜单覆盖不到的，直接改代码，最常改的几处照着写就行：

加一步：在两个节点之间插一行，C --> C2[校验地址] 再 C2 --> E，同时删掉原来的 C --> E。
连线上的文字：B -- 是 --> C，或者 B -->|是| C。
节点形状：[方框]、(圆角)、([体育场形，常用作开始 / 结束])、{菱形，判断}、[(圆柱，数据库)]、((圆))。
文字里有括号或引号：整段用双引号包起来，A["登录(手机号)"]，否则会报「括号没有闭合」。
换行：节点文字里写 <br>。
分组：subgraph 名称 … end，泳道图就是这么画的，见用 AI 画流程图。

改完不用点任何按钮，0.5 秒内自动重新渲染。

代码报错了

代码有语法问题时，预览保留上一次成功的图，编辑器下方的报错条用中文说明原因并标出行号：

点「跳到第 N 行」直接定位；编辑器里那一行也有标记。
点「查看常见报错 →」跳到帮助中心对应的说明，每种报错都有例子和改法。
点「AI 修复」：当前代码和报错信息会发给 AI 引擎处理一次，回来先在你的浏览器里试渲染一遍，再把逐行改动对比给你看，你决定采纳还是放弃。免费额度每月 20 次。

AI 回复里最常见的几种错：-> 写成了流程图的箭头（应为 -->）、end 当了节点名、中文括号出现在语法位置、subgraph 缺 end。报错条会点名是哪一种。

试试把上面那段代码里的某个 --> 改成 ->，看报错条怎么说，再点「AI 修复」。

不想碰代码：AI 改图

一次改多处、调整顺序、按一句话加一串步骤，单击菜单一步步点太慢的，交给 AI：代码能正常渲染时，状态行「已识别：流程图」旁边有「AI 改图」，点开写一句话——「把审批和付款调换顺序」「在每个判断后面都加一步记录」「给判断加一个不通过的分支」——按「改图」。AI 只做这一句话说的事，其余节点、文字、方向原样保留，也不写配色。回来先在你的浏览器里试渲染，再把逐行改动对比给你看，你决定采纳还是放弃；不满意点「改指令」换个说法再来。免费每天 2 次，和美化、画成图合计（AI 修复另算）。

试试对上面那张图说「在每一步后面都加上记录日志」。只加一步、只改一个字，单击 / 双击节点更快。

顺手整理写法：AI 美化

「AI 改图」旁边还有「AI 美化」。它不改图的含义、不增删步骤、不写任何配色，只整理写法：按语义换形状（开始 / 结束用圆角，判断用菱形）、按图的形状选方向、明显同属一个阶段的步骤分组、太长的文字换行。结果同样先给你看改动对比。和改图、画成图合计每天 2 次免费。

接下来

打开编辑器试试找具体问题的答案？去帮助中心

其他教程

全部教程