Mermaid 在线编辑器
左侧写 Mermaid，右侧即时预览。导出、URL 分享或插入片段——数据默认不出浏览器。
All processing on this page runs locally in your browser unless noted otherwise.
源码
预览
100%
语法合法✓
How to use
- 选择图表类型与示例，或导入 .mmd / Markdown 文件。
- 用布局 / 分栏切换左右、上下、仅代码或仅预览。拖拽/滚轮平移缩放；「大图」打开全屏预览。
- 片段、分享/嵌入、清理与导出均在浏览器本地完成。
FAQ
我的图会上传吗？
不会。Mermaid 在浏览器中运行。草稿保存在本机 localStorage。分享链接把图编码进 URL hash — 仍无服务端存图。
支持哪些图表类型？
捆绑的 Mermaid 版本支持的类型均可 — 流程图、时序、类图、ER、甘特、状态等。每种类型在第二个下拉里有多个示例。
分享和嵌入如何工作？
在编辑器复制分享链接或 iframe 片段。对方在浏览器中解码；图数据在 URL 里。超大图可能超出 URL 长度限制 — 请改用下载 .mmd。嵌入方页面需允许 iframe（勿设 X-Frame-Options: DENY / 拦住我们的 CSP frame-ancestors）。
如何平移和缩放预览？
拖拽平移、滚轮缩放，预览工具栏有 + / − / Reset。点「大图」进入全屏（Esc 关闭）。布局可左右/上下，或仅代码/仅预览。
编辑器支持 Mermaid 语法高亮吗？
支持。源码区使用 CodeMirror，含 Mermaid 高亮、行号、Tab 缩进，以及关键词与片段本地补全。不涉及 AI。