零安装免费上手 Mermaid 在线编辑器：3 分钟导出可分享的 SVG/PNG
项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor 打开浏览器就能用纯文本写出专业图表：Mermaid 在线编辑器把你往左栏敲的 Mermaid 语法，实时渲染成右栏里的甘特图、时序图、流程图等 9 大类图表，还自带 SVG/PNG 导出和一键分享链接。从打开页面到导出第一张图，全程大约 3 分钟，不用装任何软件。
一句话讲透："文本变图表"是怎么跑的 🔍
Mermaid 在线编辑器的原理一句话说清：你输入的都是纯文本，图只是渲染结果。Mermaid 语法用文本一行行写出节点和连线，双栏界面让浏览器每敲一笔都实时校验、重绘右边预览。更妙的一层：当前图表和配置被压缩进 URL 哈希——地址栏就是现成的分享链接，图表数据默认只待在你自己浏览器里。核心状态逻辑在 state.svelte.ts，完整架构见 CLAUDE.md。
快速上手：从空白页到可分享图表的 4 个步骤 ⚡
- 打开 Mermaid 在线编辑器页面：左边是代码输入区，右边是实时预览区，顶部是示例图表面板。
- 先试示例面板：顶部 Sample Diagrams 面板内置 Flowchart / Class / Sequence / ER / State / Mindmap 等示例，点一下就填入左栏并当场渲染；带箭头的按钮能展开更多同类示例。
- 不想挑示例，就把下面这段最小流程图直接贴进左栏，方括号里的文字改成你的会议主题即可。
- 点工具栏导出按钮拿到 SVG 或 PNG，点 Share 拿到链接，收工。
走捷径的话，复制这段进左栏：
graph TD
A[开始] --> B{通过审核?}
B -->|是| C[发布上线]
B -->|否| D[打回修改]
style C fill:#bfe,stroke:#333
右栏会实时重绘，不用按任何东西。改完做两件事：一点工具栏导出按钮，选 SVG 矢量（放大无损，放文档）或 PNG 位图（贴 PPT），导出文件名以 mermaid-diagram 开头，后接时间戳；二点 Share，地址栏 URL 就是现成分享链接，他打开就是你的图，还能接着继续改。
两个真实工作场景：系统架构图与接口时序图怎么画 📐
系统架构图：改文本等于改图
痛点一句话：文档配图维护成本高，架构一变动，截图就得重画。在 Mermaid 在线编辑器里，架构图就是几行文本：方括号当节点、箭头当连线、subgraph 圈模块。
graph TB
subgraph 前端
A[用户界面] --> B[API 客户端]
end
subgraph 后端
C[认证服务] --> D[数据处理]
end
B --> C
效果：预览区直接画出带分组框的分层架构，之后架构有变，改几行文本再导一份 SVG 就行。
接口时序图：把"表单提交后发生了什么"说清楚
痛点一句话：口头讲"用户提交表单之后会怎样"半天说不完，画框线箭头又费时。时序图则一行写一个动作，参与方和请求方向全清楚。
sequenceDiagram
用户->>前端: 提交表单
前端->>API: POST /orders
API->>DB: 写入数据
DB-->>API: 写入成功
API-->>用户: 返回 200
效果：预览区产出带实线箭头与虚线返回的时序图，每一步谁发了什么消息一眼看清，贴进设计评审文档就能直接用。
用了就回不去的三个功能
如何导出高清 SVG 与 PNG
导出选项在工具栏 Actions 区（实现在 Actions.svelte）：选 SVG 或 PNG，尺寸也能调。细节加分：深色背景会跟着当前主题一起进图，文件下载下来直接能用。
分享链接的正确用法
记住一条：每改一笔，状态就重新编码进 URL 哈希，地址永远停在你最新版本上。点 Share 复制链接甩给同事，他打开看到的就是同一张图。要可编辑的版本，就把当前页面地址发过去，他改完回传一条新链接，轻量协作闭环就形成了。
大图缩放查看与 rough 手绘风开关
预览区轮子一滚就缩放、按住就能平移，旁边还有同步的缩放工具栏，几百个节点的大图照样能逐块看。rough 开关更省事：一键把整张图变成马克笔手绘风，博客、演示里用更亲和。
排错速查：现象与处理对照表 🛠️
| 现象 | 原因 / 处理 |
|---|---|
| 页面底部冒出语法错误提示，带行号 | 校验发现了问题，回到提示指出的那一行去改。错误没清掉前，预览区一直显示上一版有效图 |
| 标签里带括号、冒号导致解析失败 | 给标签套上引号，如 A["状态: 待处理"] |
| 分享链接长得离谱 | 整个图表状态被压缩编码后塞进了 URL，长是正常的，别手动删减 |
| 导出 PNG 失败 | PNG 出图依赖在线渲染服务，内网离线部署需自建渲染服务，构建镜像时通过 MERMAID_RENDERER_URL 指向它；设为空字符串，PNG/SVG 链接功能关闭 |
自托管部署：Docker 一条命令与源码本地开发 🐳
Docker 一条命令（内网自托管）
前提：本机装好 Docker，在本地终端执行：
docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor
启动完成后打开 http://localhost:8000，得到完整编辑器。记住一个坑：镜像容器内部监听的是 8080，官方命令已做 8000:8080 映射，换成自己的端口时两边要对应。
源码本地开发
前提：本机已装 Node 24 以上版本与 pnpm，在仓库根目录执行：
pnpm install && pnpm dev -- --open
跑完浏览器直接跳到 http://localhost:3000，
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
