Mermaid 图表编辑器

Mermaid 代码

预览

用文本语法描述图表，右侧实时渲染成矢量图。支持流程图、时序图、甘特图、类图、状态图、饼图、实体关系图等 Mermaid 全部常用图形，渲染完全在浏览器本地完成，代码不会上传。

第一行声明图表类型，例如 graph TD（自上而下的流程图）、sequenceDiagram（时序图）、gantt（甘特图）。不确定语法时，先点击上方模板按钮填入示例，再在示例基础上修改。

流程图方向可选 TD（上下）、LR（左右）、BT、RL。节点形状由括号决定：[] 矩形、() 圆角、{} 菱形判断、(()) 圆形。

连线写法：A --> B 实线箭头，A --- B 实线无箭头，A -.-> B 虚线，A ==> B 粗线，A --> |条件| B 带标签。

停止输入约 0.5 秒后自动渲染。语法有误时右侧会保留上一次渲染成功的图形，并在下方给出错误提示，定位到出问题的行，不会白屏。

节点文字中若包含 ()、: 等特殊字符，请用英文双引号包裹，例如 A["计算 (含税)"]。

「导出 SVG」保存为矢量图，可无限缩放，适合插入文档或用 Illustrator 二次编辑；「导出 PNG」按所选倍数把矢量图栅格化为位图，2x 及以上在高分屏与打印时更清晰。

渲染引擎体积较大（约 3.5MB），首次进入本页时才会按需加载，加载完成后同一次会话内不再重复下载。