Mermaid Visual Editor 应该何时使用可视化编辑器或文本编辑器？

作者：袖梨 2026-09-13

Mermaid Visual Editor 与文本编辑器始终可用并保持同步，选择标准不是“会不会写代码”，而是哪种方式更快、更可控。搭建初始结构、拖拽连线、改形状颜色时优先可视化编辑器；精确修改语法、连接逻辑、子图或复杂流程时优先文本编辑器。

两种编辑器的核心区别

任务	优先使用	原因
快速画出第一版结构	可视化编辑器	通过点击和拖拽即可建立节点与连线
改变节点形状或颜色	可视化编辑器	能直接看到样式结果
快速连接多个节点	可视化编辑器	拖拽关系比手写 ID 更直观
修改一条确定的边	文本编辑器	起点、终点和标签表达精确
处理子图和复杂流程	文本编辑器	层级与依赖更容易审查
批量改名或统一代码	文本编辑器	适合搜索、替换和差异比较
要求保留源码原始排版	文本编辑器	可视化编辑会自动格式化代码

官方文档明确说明，两种编辑器的变更会相互反映。实际工作不必固定只用一种，可以在画布中构思、在代码中精修，再回画布验收。

什么时候优先使用可视化编辑器

当任务还处于探索阶段，节点名称和关系尚未完全确定时，可视化编辑器更合适。它能让用户先看到整体结构，再逐步补充细节。

从空白画布快速搭建流程骨架。
试验横向、纵向或层次布局。
为决策、数据库、文档等语义选择形状。
通过颜色区分状态或节点类别。
把已有节点拖入子图形成分组。
与不熟悉 Mermaid 语法的同事共同评审。

可视化编辑器适合回答“图应该长什么样”和“关系是否直观”，尤其适合流程图的初稿。

什么时候优先使用文本编辑器

当目标已经明确，修改范围可以精确描述时，文本编辑器通常更高效。

修正节点 ID、箭头方向或边标签。
建立嵌套子图和复杂连接。
处理循环、条件分支和多条并行路径。
批量复制相似结构。
检查代码差异并纳入版本控制。
保留团队约定的缩进、换行和注释格式。

文本编辑器适合回答“图的逻辑是否精确”和“这次到底改了什么”。

保留源码格式时只能用文本编辑器

这是两种方式之间最容易忽略的边界。当前官方文档说明，Visual Editor 在生成变更时会美化并重构代码格式。图表语义可能不变，但缩进、换行或声明顺序可能变化。

如果 Mermaid 源码需要保持极小差异，例如代码评审只允许修改一条边，或者文件包含团队固定排版，应在该次任务中只使用文本编辑器。否则一次视觉操作可能产生大量无关格式差异。

用可视化编辑器搭建第一版

官方界面提供基础形状、流程形状和技术形状三类选择。可按以下顺序建立流程：

添加开始、处理、判断和结束节点。
双击标签填写简短动作或问题。
拖拽建立连接，并为判断出口添加标签。
使用对齐或自动排列整理结构。
检查自动生成的 Mermaid 代码。

形状要表达含义：菱形用于判断，圆或终止形状用于事件，圆柱常用于数据库。不要只为装饰随意混用。

形状和样式为何适合视觉操作

节点工具可以调整形状、边框样式、边框颜色、背景色和文字色。样式变化会自动生成相应的 classDef 代码，因此无需手工记忆全部样式语法。

flowchart LR
    A[接收请求] --> B{校验通过？}
    B -- 是 --> C[执行任务]
    B -- 否 --> D[返回错误]

    classDef decision fill:#fff3bf,stroke:#d18b00,color:#222;
    classDef error fill:#ffe3e3,stroke:#c92a2a,color:#222;
    class B decision;
    class D error;

视觉设置完成后仍应查看生成代码，避免为每个节点产生大量难以维护的重复样式。

如何选择自动布局

当前 Visual Editor 提供层次布局和自适应布局。层次布局适合组织结构与决策树，自适应布局更适合连接关系复杂的流程。

自动排列只是布局建议，不会判断业务主次。应用后应确认：

主路径是否仍按自然阅读方向展开。
异常分支是否压过主流程。
边标签是否与其他连线重叠。
子图边界是否仍能表达责任范围。

复杂关系为何适合文本编辑

以下关系用代码更容易准确表达：

flowchart TD
    subgraph Client[客户端]
        A[提交请求]
        B[显示结果]
    end

    subgraph Server[服务端]
        C{鉴权成功？}
        D[执行业务]
        E[记录审计日志]
    end

    A --> C
    C -- 否 --> B
    C -- 是 --> D
    D --> E
    E --> B

通过文本可以快速看出所有跨子图连线。若只在画布中拖动，容易漏掉一条绕过鉴权或审计的路径。