用 Mermaid 写代码，图实时生成。
一个专注的编辑器，一份覆盖全部 Mermaid 图表类型的深度参考——流程图、时序图、类图、状态图、ER、甘特图、饼图、用户旅程、思维导图、时间线、Git 图、C4。无需登录，没有阻碍。
每种 Mermaid 图表都有完整文档
每种图表都有独立页面：语法、坑点、精选模板，以及一键「在编辑器中打开」。
查看全部 →为习惯文字思考的人而生
一切交互优先键盘。一切产物可以带走。每种图表类型都有内嵌文档。
分屏实时预览
左边敲代码，右边图在 30 毫秒内更新。报错精确指向出问题的那一行。
12 种图表全支持
流程图、时序图、类图、状态图、ER、甘特图、饼图、旅程、思维导图、时间线、Git 图、C4——无需插件。
像素级导出
SVG、PNG @1×/2×/3×、PDF，以及可在任意 Markdown 渲染器中使用的嵌入代码。
主题可定制
自带调色板、字体、线条样式。内置六套主题，包括手绘风格。
链接即文档
图表保存在 URL 里。无需账号，无需后端。链接就是文档本身。
八种界面语言
今日支持 English、中文、日本語;西班牙语、法语、德语、葡萄牙语、韩语即将到来。
应用场景
选一种图表，直接上手
每篇指南都是单页文档：既是教程，也是参考。没有登录墙，没有废话。
为团队真实的文档习惯打造的 Mermaid 编辑器
软件工程师、产品经理、技术作家、教育者都在用 diagram-as-code，但出发点各不相同。MERMAIDEDITOR 一并照顾——在浏览器里打开 Mermaid 实时编辑器，写 Mermaid 语法，几毫秒内拿到干净的 SVG 流程图、时序图、ER 图或甘特图。
面向软件工程师
用 C4 图记录微服务架构、用时序图勾勒 OAuth2 流程、用 ER 图建模数据库 schema，把 Mermaid 流程图与代码一起提交到 Git。
面向产品经理
用 Mermaid 甘特图 制定季度路线图、绘制 onboarding 旅程、勾画用户流程——一切都是文字，评审照常走 PR 流程。
面向技术作家
用 diagram-as-code 替换易过时的截图，让图表与产品同步更新。Mermaid 语法可嵌入 MkDocs、Docusaurus、GitBook 以及几乎所有静态站点生成器。
面向教师与学生
用免费的在线图表编辑器讲解状态机、有限自动机、UML 类图、数据库建模。无需登录，可离线工作，导出干净的 SVG 与 PDF 用于讲义。
一键复制的 Mermaid 示例
每个片段都是即用型 Mermaid 模板。复制代码，粘贴到 Mermaid 编辑器，调整标签，导出为 SVG 或 PNG——无需账号。
你的文档在哪里，Mermaid 就渲染在哪里
Mermaid 语法是 diagram-as-code 的通用语言。在 MERMAIDEDITOR 画的图，可以直接插入团队已经在用的平台——无需插件、无需导出器、无需重构。
从空白画布到上线，三步搞定
无论你画的是 Mermaid 流程图、时序图、UML 类图还是 ER 图，diagram-as-code 的流程都一样。
写 Mermaid 语法
在左侧编写 Mermaid markdown。自动补全、语法高亮、行内错误提示会在渲染失败之前抓出错别字。
实时渲染
右侧 30 毫秒内更新。切主题、换方向、换渲染器——每次按键都立刻看到反馈。
导出或嵌入
下载 SVG、PNG 或 PDF；复制 Mermaid 代码块；把可分享的 URL 粘到文档、README 或 Notion 页面。你的图就是 diagram-as-code 了。
为什么团队都在转向 diagram-as-code
过去二十年，软件团队靠 Visio、OmniGraffle、draw.io、Lucidchart 维护架构图。这些工具能用——直到你试图在 PR 里评审一张图、对比两个版本，或者一个服务改名时要改五十张图。当系统持续演化，拖拽式编辑器就成了死胡同。
Mermaid 把版本控制的问题解决了。Mermaid 流程图是纯文本，时序图是纯文本，类图、ER 图、状态图、甘特图、饼图、用户旅程、思维导图、时间线、Git 图、C4 上下文图——全部都是纯文本。纯文本可以干净地 diff、干净地 review、扩展到一百名贡献者、上千张图也不会失控。
MERMAIDEDITOR 就是围绕这套工作流打造的在线 Mermaid 编辑器。左边写 Mermaid markdown，右边看图，导出 SVG 或 PNG，把 Mermaid 代码块复制进 README，发布。无需登录，无追踪，第二张图还没画就要你升级团队套餐这种事不会发生。
用过官方 Mermaid live editor 的话，你会一上手就熟悉。MERMAIDEDITOR 在此之上加了那些日常工作里真正在乎的东西：深度速查表、240+ 经过实战检验的 Mermaid 模板、按图表类型分类的示例库、3 种界面语言（路线图上还有 5 种）、深色模式、键盘优先的导航、离线可用，以及为高频用户准备的三栏聚焦布局。
切换之前团队最常问的问题
把 Mermaid 说得像你写的规范
整理你在文档、速查表和按图表类型的指南里会遇到的术语。