输入内容
转换结果
等待输入
行数: 6字符数: 108
等待输入缩放: 100%
什么是 Mermaid 图表编辑器？
Mermaid 是一款基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的文本语法来生成各种图表。无需手动拖拽图形，只需编写简单的文本描述，即可自动生成精美的流程图、时序图、类图等。
本工具提供在线 Mermaid 编辑环境，支持实时预览、拖拽缩放和导出功能，帮助开发者快速创建和分享图表。
使用方法
基本使用
- 在左侧编辑器中输入 Mermaid 语法
- 右侧将实时渲染图表预览
- 使用鼠标拖拽移动图表，滚轮缩放
- 点击导出按钮保存为 PNG 或 SVG 格式
支持的图表类型
流程图graph/flowchart，展示流程和决策路径
时序图sequenceDiagram，展示对象间的交互时序
类图classDiagram，展示类的属性和关系
状态图stateDiagram，展示状态转换
ER 图erDiagram，展示实体关系
甘特图gantt，展示项目时间线
饼图pie，展示数据占比
思维导图mindmap，展示思维结构
用户旅程图journey，展示用户体验流程
示例
流程图
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E时序图
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send Response类图
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- Cat常见问题
支持哪些图表类型？
支持流程图(graph/flowchart)、时序图(sequenceDiagram)、类图(classDiagram)、状态图(stateDiagram)、ER图(erDiagram)、甘特图(gantt)、饼图(pie)、思维导图(mindmap)和用户旅程图(journey)共9种图表类型。
如何导出图表？
点击右侧面板的「导出 PNG」或「导出 SVG」按钮即可下载图表。PNG 格式适合插入文档，SVG 格式适合矢量编辑和打印。
图表可以缩放和移动吗？
可以。使用鼠标滚轮可以缩放图表，按住鼠标左键拖拽可以移动图表位置。双击预览区域可以重置视图到初始状态。
数据是否会上传到服务器？
不会。所有 Mermaid 语法的解析和图表渲染都在浏览器本地完成，数据不会离开您的设备，完全保护隐私。