Mermaid Live Editor 快速入门：3 种方式在浏览器里编辑和预览 Mermaid 图表

Mermaid Live Editor 快速入门：3 种方式在浏览器里编辑和预览 Mermaid 图表

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor

写过 Mermaid 语法的人大概都有过这种经历：改一行代码，存盘、重新构建、刷新页面，结果还是报错，而且错误信息只告诉你"第几行附近有问题"。Mermaid Live Editor 就是一个把这段循环拆掉的开源工具——左侧输入语法，右侧立刻渲染出图，改完就能生成链接发给别人。它支持流程图、时序图、甘特图、类图、饼图等 Mermaid 的全部图表类型，适合写技术文档的开发者、画业务流程的产品经理，以及任何不想为一张图专门装软件的人。

🚀 快速上手：3 条路径跑起来

最短路径是直接使用官方在线版，浏览器打开就能画，不用注册，不用配置。打开后在左侧随便输入几行试试：

graph LR A[开始] --> B{是否通过} B -->|是| C[结束]

右侧会同步出现渲染结果，语法写错时错误信息会直接标在预览区。

需要离线或内网使用的话，一条 Docker 命令就能部署到本地：

docker run --platform linux/amd64 -p 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor

然后访问http://localhost:8000。注意这个发布镜像用的是默认构建参数，如果你要改渲染服务等配置，得自己构建镜像，构建参数说明见 README.md。

要二次开发就克隆源码：

git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev

项目基于 SvelteKit 开发，跑起来需要较新的 Node（24 及以上）和 pnpm（corepack enable pnpm可启用）。

🧩 功能详解：先认识这 3 个最实用的点

左侧改代码、右侧出图的实时预览

编辑器带语法高亮和提示，右侧预览区在你停笔的瞬间完成渲染。图越大、调整越频繁，这个功能的价值越明显：调一个节点的位置或连线方向，不用再走"保存—刷新"的流程。对工作流的改变是把反复验证结构正确性的时间从分钟级压到秒级，你可以连续快速地试错。

用一条 URL 传递图表

点 Share 按钮会生成两种链接：只读链接给别人看图，可编辑链接则允许对方改完后生成新链接发回给你。图表内容被编码进链接地址本身，服务端不存你的图。这个设计让"把图发出去"变成复制一行文字的事，不依赖共享文档权限，也不留存在服务器端。相关实现在 src/lib/components/Share.svelte。

导出 SVG 与嵌入网页

Actions 面板里可以把当前图导出为 SVG 等格式，也可以直接复制一段 iframe 或 Web Component 代码。当图表要长期放在博客、内部 wiki 或产品页面里时，嵌入代码比贴一张静态图更省事：页面加载时实时渲染，不会出现图片失效。

📌 使用场景：3 个具体做法

开发者写接口文档：要在文档里展示一次 API 调用的完整交互 → 写一段sequenceDiagram时序图，确认渲染无误后，把只读分享链接贴进文档，或复制 iframe 代码嵌入 → 文档里只有一个链接，后续图有改动时换掉链接即可，不用重新导图和排版。

技术负责人做复盘时间线：故障复盘需要一张各步骤起止时间清晰的图 → 用甘特图语法画出各阶段，调好样式后导出 SVG 放进复盘报告 → 报告在任意设备上打开都是一致的矢量图，放大不糊。

产品经理拉齐多方理解：画完业务流程图后需要开发、测试各提一轮意见 → 发可编辑链接给团队，谁改完都把新链接发回 → 几轮迭代下来，你手里始终是最新版链接，不需要维护一个共享文档的权限和版本。

⚠️ 常见坑：4 个容易踩到的问题

• 图太大看不清全貌：预览区自带平移和缩放工具条，拖拽平移、滚轮缩放，比反复改代码缩小节点更直接。
• 语法报错不知道在哪行：预览区的错误信息是可点击的，点一下会定位到对应位置，别手动数行号。
• 内网部署时图片链接打不开：默认构建会依赖外部渲染服务（mermaid.ink）生成 PNG/SVG 链接，纯内网环境下构建镜像时把对应参数设成空值即可关闭这两类链接。
• 直接npm install跑不起来：项目要求 Node 24+ 和 pnpm，版本不够会先卡在依赖安装这一步，先把环境对上再谈其他。

一句话总结：Mermaid Live Editor 把"写语法—看到结果—把结果发出去"压缩进了同一个页面，在线版零门槛，Docker 一条命令就能私有化。建议的第一步很简单——打开在线版，用上面的示例画一张流程图，点 Share 复制只读链接发给自己，把整条链路走一遍，你就知道它适合放进你的哪些文档里了。

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor