粘贴 Mermaid,查看图表。 即时呈现。

粘贴 Mermaid,即时预览,导出 SVG/PNG,上传文件,拖拽平移,并通过 URL 分享。

快速模板
打开 Mermaid 文件拖放到任意位置 — .mmd · .mermaid · .md · .txt · 如何打开 .mmd 文件
正在加载 Mermaid... 1, 1
提示:在预览中点击并拖拽(或触摸拖拽)即可平移。将文件拖到预览区即可加载。

什么是 Mermaid?

Mermaid 是一款基于 JavaScript 的制图与图表工具,使用受 Markdown 启发的文本定义来动态创建和修改图表。这是一个开源项目,可让你用简单的文本描述生成图表。

无需复杂的绘图工具,只需编写类似代码的语法来描述图表,Mermaid 就会将其渲染为可视化图表。这种方式让图表易于版本控制、更新方便,非常适合文档。

Mermaid 可无缝集成到文档平台、Wiki 和 Markdown 文件中,因此深受开发者和技术写作者的喜爱。

为什么使用 Mermaid?

  • 版本控制:图表是文本文件,因此可以与代码一起在 Git 中跟踪
  • 快速更新:修改几行文本即可,无需重画整个图表
  • 一致性:Mermaid 自动处理布局与样式,确保图表一致
  • 无需设计工具:不需要 Visio、Lucidchart 等昂贵工具
  • 文档即代码:将图表与文档放在同一仓库中
  • 跨平台:可在浏览器和 Node.js 中运行,并可与多种平台集成
  • 免费开源:无需许可费用,社区活跃
  • 多种图表类型:支持流程图、时序图、类图等
广告

Mermaid 图表完整指南

学习使用简单的文本语法创建专业图表

常见问题

关于使用 Mermaid Viewer 和创建图表的常见问题

这个 Mermaid 编辑器真的免费吗?
是的,完全免费。你可以无限创建图表、导出为 SVG/PNG、通过 URL 分享,并且无需注册或付费即可使用全部功能。该工具由不干扰体验的广告支持。
需要安装什么吗?
不需要安装任何东西。这是一个完全在浏览器中运行的网页工具。打开网站即可开始创建图表,桌面端、平板和手机都可用。
如何保存我的图表?
你可以通过多种方式保存:1)导出为 SVG 或 PNG;2)通过 URL 分享(图表代码编码在 URL 中);3)复制 Mermaid 文本代码到自己的文件;4)上传/下载 .mmd 或 .mermaid 文件。
可以在文档中使用这些图吗?
当然可以。将图表导出为 SVG(可缩放)或 PNG 后,可用于文档、演示或网站。你也可以在 GitHub、GitLab、Notion 等平台直接嵌入 Mermaid 代码。
SVG 和 PNG 有什么区别?
SVG 是矢量格式,任意缩放都清晰,非常适合文档和网页。PNG 是位图格式,便于快速分享,但缩放后会有画质损失。
为什么图表没有渲染出来?
请检查 Mermaid 代码中的语法错误。常见问题包括:引号未闭合、缺少冒号或分号、节点 ID 错误、或使用了不受支持的语法。可先简化图表定位问题。
可以和他人协作吗?
虽然不支持实时协作,但你可以通过 URL 轻松共享图表。其他人可以打开、编辑并回传他们的版本。Mermaid 是文本格式,也非常适合用 Git 协作。
可以离线使用吗?
首次加载需要联网。加载完成后,基础编辑通常可离线使用。但导出等部分功能可能仍需要网络连接。
如何学习 Mermaid 语法?
建议先阅读我们的 Mermaid 完整指南,里面有各类图表示例。也可以使用模板面板快速开始,并结合 mermaid.js.org 的官方文档学习。
可以自定义图表外观吗?
可以。图表会跟随网站主题:通过顶部栏的“主题”按钮在浅色与深色之间切换,图表会以对应的 Mermaid 主题重新渲染。若需高级自定义,可使用 %%{init:...}%% 指令设置颜色、字体和其他视觉属性。
支持哪些图表类型?
该编辑器支持 Mermaid 的主要图表类型:流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 图、用户旅程图等。
我的图表数据是私密的吗?
你的图表代码不会发送到我们的服务器。所有渲染都在你的浏览器本地完成。通过 URL 分享时,代码保存在 URL 本身中;我们不会存储或跟踪你的图表内容。
为什么使用文本化图表?
文本化图表有很多优势:可版本控制(非常适合 Git)、更新快、风格一致、可搜索、轻量,并可通过程序自动生成。在 Pull Request 中也更易审阅。
可以把 Mermaid 嵌入网站吗?
可以。你可以在网站中引入 Mermaid JavaScript 库并添加 Mermaid 代码块。很多平台已原生支持 Mermaid,如 GitHub、GitLab、Notion、Obsidian 等。
建议的最大图表规模是多少?
没有硬性上限,但非常大的图表(约 100+ 节点)在某些设备上可能渲染较慢。对于复杂系统,建议拆分为多个更小、更聚焦的图表。