Mermaid 图表编辑器
蜜蜂工具箱的免费在线 Mermaid 图表编辑器支持流程图、时序图、甘特图、类图、状态图、饼图、ER 图等多种图表,内置 5+ 套示例,实时渲染,可一键导出 SVG 与 PNG 高清图,完全在浏览器本地绘制,代码可直接嵌入 GitHub、Notion。
用文本语法绘制专业图表,所见即所得实时渲染。 用 Mermaid 声明式图表语法描述你想要的图,蜜蜂工具箱在浏览器内本地渲染成清晰的矢量图,支持导出 PNG/SVG 满足文档、PPT、博客展示需求。
Mermaid 语法速查
Mermaid 是什么
Mermaid 由 Knut Sveidqvist 在 2014 年创建,是一种用文本描述图表的声明式语言。与传统拖拽式画图工具相比,Mermaid 让图表本身也成为可版本控制的源代码。
常用图表速查
- flowchart TD/LR —— 流程图,
A-->B表示连接,A{?}表示判断,A([开始])表示圆角矩形。 - sequenceDiagram —— 时序图,
Alice->>Bob: Hello表示同步消息,Bob-->>Alice: Hi表示返回消息。 - gantt —— 甘特图,用
dateFormat YYYY-MM-DD指定日期格式。 - classDiagram —— 类图,
class Animal定义类,Animal <|-- Dog表示继承。 - stateDiagram-v2 —— 状态机图,适合描述 UI 状态、订单状态流转。
- pie —— 饼图,
"Apple" : 40等描述各扇区比例。
实战建议
- 节点命名建议使用简短英文,过长节点会导致布局变形。
- 复杂图表建议拆成多个子图,再以
subgraph嵌套。 - 配色可使用
classDef自定义,提升可读性。 - 嵌入时使用
%% 注释增加可维护性。
你可以直接在左侧文本框修改示例,右侧实时看到渲染结果。
常见问题
什么是 Mermaid?
Mermaid 是一种基于 JavaScript 的图表绘制语言,通过类 Markdown 的文本描述流程图、序列图、甘特图等,Docusaurus、GitHub、Obsidian 等都已原生支持。
支持哪些图表类型?
支持 flowchart、sequenceDiagram、gantt、classDiagram、stateDiagram、pie、erDiagram、gitGraph、requirementDiagram 等。
图表会保存或上传吗?
不会。所有绘图在你的浏览器本地完成,关闭标签页后随之消失。
导出 SVG/PNG 会失真吗?
SVG 是矢量,任意放大都不会模糊;PNG 以 canvas 2 倍像素渲染,适配多数文档插图。
如何把代码嵌入 Markdown?
用 `mermaid` 代码块包围,GitHub、GitLab、Hugo、Hexo、Obsidian 等都自动渲染。