Mermaid 在线编辑器

EN

01 · 关于

免费的 Mermaid 在线编辑与渲染工具

把 Mermaid 文本代码实时渲染成图表。无需安装任何软件，打开网页、粘贴代码即可看到效果，支持流程图（flowchart）、时序图（sequence diagram）、类图（class diagram）、状态图、ER 图、甘特图、饼图、思维导图等全部 Mermaid 图表类型。

如何使用 Mermaid 在线编辑器

  1. step 1

    粘贴或编写 Mermaid 代码

    在左侧编辑器粘贴代码，或从“示例”里选一个流程图、时序图等模板开始改。

  2. step 2

    选择主题与布局

    在“主题”中挑选配色，复杂子图可把“布局”切换为 ELK，右侧实时显示效果。

  3. step 3

    导出或复制图表

    点击“导出 PNG / SVG”下载图片，或复制 PNG、SVG 到剪贴板，直接粘贴进文档、PPT 或聊天工具。

支持的 Mermaid 图表类型

流程图 Flowchart
用 flowchart / graph 描述流程、判断分支和系统架构，支持子图与多种节点形状。
时序图 Sequence Diagram
展示参与者之间的消息交互顺序，适合描述接口调用、登录流程等。
类图 Class Diagram
描述类、属性、方法和继承关系，用于面向对象设计和 UML 建模。
状态图 State Diagram
表示对象的状态与状态之间的转换，例如订单状态流转。
ER 图 Entity Relationship
描述数据库表和实体之间的一对多、多对多关系。
甘特图 Gantt
按时间轴排布任务和里程碑，用于项目计划与排期。
饼图 Pie Chart
用简单的键值对展示占比数据。
思维导图 Mindmap
用缩进层级组织想法和知识结构。

主要功能

常见问题

什么是 Mermaid？
Mermaid 是一种用文本描述图表的语言，可以用简单的代码生成流程图、时序图、类图、状态图、甘特图、ER 图、饼图和思维导图等，适合写进 Markdown 文档并进行版本管理。
如何把 Mermaid 导出为 PNG 或 SVG 图片？
在左侧编辑器粘贴 Mermaid 代码，右侧会实时渲染。点击顶部的“导出 PNG”或“导出 SVG”即可下载图片，PNG 默认按 2 倍分辨率导出，清晰度更高。
可以修改图表的颜色和主题吗？
可以。工具内置 Klein、默认、中性灰、森林、暗黑、彩虹、马卡龙、海洋、日落、霓虹等主题，多色主题会自动为每个节点使用不同的背景色。代码中用 style 或 classDef 指定的颜色会被保留。
子图里出现大片空白怎么办？
这是 Mermaid 默认排版引擎 dagre 的已知问题，常见于子图里的节点和外部节点有多条往返连线时。把顶部的“布局”切换为 ELK 即可，也可以在代码开头写 config: layout: elk。
我的代码会上传到服务器吗？
不会。渲染完全在浏览器本地完成，代码只自动保存在你自己浏览器的本地存储中。