Mermaid Live Editor：免费即用在线 mermaid 图表编辑器

Mermaid Live Editor：免费即用在线 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 Live Editor 是官方的在线 mermaid 图表编辑器，左边写文本，右边立刻出图；画完把代码压进链接，分享只发一条 URL，不用来回传文件。

它替你解决了什么麻烦

跟同事讲一个流程，画图工具画好、导出图片、发过去；逻辑一变再导一次，对方还想改都没法改。或者你早就会写 mermaid，但为了预览一张图专门搭本地渲染环境，不值当。这个项目是官方实现，不是第三方仿站：SvelteKit 框架开发，桌面端用 Monaco 编辑器（VS Code 里那套编辑组件），MIT 协议开源。

第一次跑起来

最短路径三步：浏览器打开 mermaid.live；左侧编辑区自带一段示例流程图；把示例改成自己的代码。

graph TD A[开始] --> B{是否可行} B -->|是| C[执行] B -->|否| D[重新评估] D --> B

右边预览随改随刷新；语法写错时，报错位置直接标在编辑区对应行，不用猜错在哪。

3 个真正好用的地方

改代码等于改图，大图的报错还指到行

图就是文本，流程变了不用重画，改完代码链接重新生成即可。节点多的大图也不怕，语法错误会定位到具体行号并标出来，修起来不用全文扫。

SVG 拿矢量，PNG 拿位图

Actions 区域里 PNG 和 SVG 各一个下载按钮，同一张图两种格式一次导齐。PNG 还能按宽度或高度指定导出尺寸（默认 1080 像素）；两个按钮旁边各配一个外链按钮，走 mermaid.ink 渲染服务，用不了就切 Kroki 链接。

只读链接给人看图，可编辑链接给人改图

代码和配置会压缩编码进 URL 本身，不上传服务器。Share 面板给出两种链接：/view 是只读页面，/edit 让对方改完回传一条新链接，协作一轮就闭环。

自己跑一份

需要 Node.js 当前 LTS 版本和 pnpm，三行命令：

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

仓库里的 README 还给了 docker run 和 docker compose 两种跑法，渲染服务地址等配置项都写在构建参数里。

几个老手才知道的细节

• Actions 区域有 Copy Markdown 按钮，复制的是一条 mermaid.ink 图片的 markdown 代码，贴进 README 直接渲染；同一区域还能粘贴 Gist URL 把代码拉进来继续编辑。
• History 面板里有本地自动记录的 Timeline，刷新页面后之前的版本还在，找不回改坏的那一步时先翻翻它。

谁用得最顺手

• 【维护技术文档的开发者】架构图跟着代码频繁变，贴的图总是过期；把图写成文本，改完重发链接，比开画图工具快。
• 【排计划的项目经理】甘特图时间线常调，浏览器里直接预览，把 /view 只读链接丢给团队即可。
• 【需要微调图表的协作者】打开 /edit 链接改几处，回传新链接，不用从零重画。

边界说明：如果你习惯拖拽节点画画布，这里会别扭——mermaid 是文本，不是画布。

画、预览、分享挤在一个页面里，打开 mermaid.live 试一次就行；想弄清链接是怎么装下整张图的，读读 src/lib/util/serde.ts 这段压缩编码的实现。

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