Mermaid.js 可视化编辑器与实时图表生成器
Copied!
Mermaid diagram code (graph LR, flowchart, sequenceDiagram, etc.)
Preview
Loading Mermaid preview. If no diagram appears, copy the code into a Mermaid-enabled editor or Markdown viewer.
Quick reference
graph LR = left-right. graph TD = top-down. A --> B = arrow. A --> |label| B = labeled edge.
Mermaid.js 可视化编辑器 — 实时预览与导出
Mermaid 可视化编辑器是一个轻量级、基于浏览器的 Mermaid 图表编辑器（支持流程图、时序图、状态图等）。您可以编写或粘贴 Mermaid 代码，实时预览渲染出的图表（在允许加载 Mermaid.js 的情况下），并可复制源代码用于 Markdown、GitHub、Notion 或任何支持 Mermaid 的查看器。
为何使用此工具？
- 单一工作区： 无需在多个标签页或工具间切换，即可草拟和调整 Mermaid 语法。
- 即时反馈： 调整图表代码时，预览会随着您的输入实时更新，从而快速修复语法或布局问题。
- 即用型输出： 导出纯净的 Mermaid 文本，可直接粘贴到文档、README、维基和笔记应用中。
- 内置参考： 在编辑器旁保留一份快速速查表，用于查阅
graph LR、箭头和边标签。
主要功能
- 代码编辑区： 在专用文本区域编辑 Mermaid 源代码（
graph LR、graph TD、sequenceDiagram、classDiagram等）。 - 实时 Mermaid 预览： 当页面能加载 Mermaid.js 时，预览面板会将您的图表渲染为 SVG，以便直观验证其结构。
- 复制代码按钮： 一键复制当前的 Mermaid 文本，随时准备粘贴到 GitHub、Notion 或 mermaid.live 中。
- 实用的默认设置： 工具启动时提供一个简单的示例图表，您可以立即看到有效的 Mermaid 语法，并根据需要进行修改。
工作原理
在编辑器中输入或粘贴 Mermaid 代码。该工具会保存您的文本，并在 Mermaid.js 可用时，在旁实时渲染图表预览。您可以随时点击复制代码，将原始 Mermaid 源代码放入剪贴板，以便在您首选的 Markdown 或文档环境中重复使用。
即使某些特定环境阻止了外部脚本加载，该编辑器仍可作为纯净的 Mermaid 代码草稿纸和复制助手使用：您在此处编写图表定义，然后将其粘贴到支持 Mermaid 的查看器中渲染。
尝试 Mermaid 可视化编辑器
从默认示例（一个简单的决策流程）开始，或粘贴您自己的 Mermaid 图表。调整节点标签、箭头和方向（LR、TD 等），观察预览更新，并将最终代码复制到您的文档、维基或 Mermaid 实时编辑器中。