开发者 / 图表
Mermaid在线编辑器
编写Mermaid代码并在输入时查看图表：支持流程图、时序图、类图、甘特图和饼图，并可下载SVG和PNG。
Mermaid在线编辑器: 此编辑器使用Mermaid绘制图表。Mermaid是一个开源库，GitHub、GitLab和许多文档工具都使用它来绘制以文本编写的图表。编辑器以严格模式运行，因此其他人的代码无法运行脚本或添加点击处理程序。SVG下载在任意尺寸下都能保持清晰；PNG下载会在白色背景上以屏幕显示尺寸的两倍进行绘制。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
图表由Mermaid在浏览器中以严格模式绘制，因此图表代码无法运行脚本。将相同代码粘贴到GitHub、GitLab或Notion Markdown的mermaid代码块中，即可在那里显示。
以文本表示图表
在图形软件中绘制的图表会因修改必须再次打开文件而逐渐过时。Mermaid图表只是几行文本，可以与其描述的代码或文档放在一起，在同一次提交中修改，并在代码审查中以易读的差异形式显示。
每个图表都以类型开头：带有TD（从上到下）或LR（从左到右）等方向的flowchart、sequenceDiagram、classDiagram、gantt或pie。节点只需连同标签定义一次，例如A[Start]，之后通过名称引用，例如A --> B。
导出
SVG无论尺寸多大都能保持线条和文本清晰，更适合文档和幻灯片；PNG适合聊天应用以及不接受SVG的场景。若要手动编辑导出的SVG，请在SVG编辑器中打开。
使用方法
- 从示例开始，或粘贴自己的Mermaid代码。
- 编辑代码；图表会随着输入实时重绘，或显示错误信息。
- 将图表下载为SVG或PNG，或复制代码。
隐私与限制
图表会在你的浏览器中绘制，你的代码只保存在此浏览器中，因此下次仍会保留。
相关工具
常见问题
Mermaid是什么？
一种将图表写成文本的方法。例如，像A --> B这样的行会绘制两个由箭头连接的框，因此图表可以保存在Markdown文件和代码审查中，并通过编辑文本而不是使用绘图工具来修改。
如何在GitHub上显示图表？
在Markdown文件、议题或拉取请求中，将代码放入标记为mermaid的围栏代码块：先写三个反引号和单词mermaid，再写代码，最后写三个反引号。GitHub、GitLab和Notion会在原位置绘制图表。
为什么我的图表显示错误？
错误信息会指出Mermaid无法读取的行。常见原因包括第一行缺少图表类型，例如flowchart TD；括号或引号未闭合；以及包含特殊字符、需要用引号括起来的文本。
支持哪些图表类型？
编辑器所加载的Mermaid版本支持的所有类型，包括流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、思维导图、时间线和Git图。示例涵盖最常用的五种类型。
免费工具·使用在浏览器中次·无需账户