在线Mermaid编辑器 - 流程图/时序图/类图在线绘制
Mermaid 代码
实时预览
Mermaid 快速入门
流程图 Flowchart
graph TD
A[开始] --> B{判断}
B -->|是| C[执行]
B -->|否| D[结束]时序图 Sequence
sequenceDiagram
Client->>Server: 请求
Server->>DB: 查询
DB-->>Server: 返回
Server-->>Client: 响应类图 Class
classDiagram
class Animal {
+name: string
+makeSound()
}
class Dog {
+breed: string
}
Animal <|-- DogMermaid编辑器使用说明
在线Mermaid编辑器，支持流程图、时序图、类图、ER图、甘特图等图表在线绘制，实时预览，支持导出SVG，数据本地处理不上传服务器。
功能特点
- 实时预览：输入Mermaid代码即时渲染图表
- 多类型支持：流程图、时序图、类图、ER图、甘特图、饼图、Git图、思维导图
- 模板丰富：内置8种常用图表模板，一键加载
- 导出SVG：生成的图表可导出为SVG矢量图
- 代码复制：一键复制Mermaid代码用于文档或README
- 纯浏览器端：数据不上传服务器，隐私安全
使用步骤
- 选择图表类型模板，或直接在左侧输入Mermaid代码
- 右侧实时预览渲染效果，根据错误提示调整语法
- 调整满意后，可复制Mermaid代码或导出SVG图片
- 将代码嵌入Markdown文档、README或Notion笔记中
常见问题
Mermaid是什么？
Mermaid是一个用文本语法绘制图表的JavaScript库，支持流程图、时序图、类图等，广泛集成于Markdown、Notion、GitHub等平台。
渲染结果可以嵌入GitHub README吗？
可以。GitHub原生支持Mermaid代码块，只需用```mermaid包裹代码即可在README中直接渲染。
支持哪些图表类型？
支持流程图(graph/flowchart)、时序图(sequenceDiagram)、类图(classDiagram)、ER图(erDiagram)、甘特图(gantt)、饼图(pie)、Git图(gitGraph)、思维导图(mindmap)等。
导出图片模糊怎么办？
建议使用导出SVG格式（矢量图，无损缩放），如需PNG请使用浏览器截图功能或调整SVG尺寸后转换。