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 官方做的实时编辑器。

📌 项目速览

Mermaid Live Editor 的定位很直接：编辑、预览、分享三合一。技术栈是 SvelteKit + Svelte，桌面端内嵌 Monaco 编辑器，移动端用 CodeMirror，MIT 协议开源。仓库地址：https://link.gitcode.com/i/f8cce19ddb4e5cab568287995739131d，功能与部署细节见 README。

🚀 最短上手路径

打开在线页面，默认是双栏布局：左边代码区、右边预览区，且自带一段示例图表。清空示例，输入下面这段：

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

右侧立刻画出判定分支和回退线。接着到 Actions 区域下载 SVG 或 PNG，或者直接把地址栏链接发给同事——链接本身就是分享链接，因为代码已经编码在里面了。

🧩 核心能力清单

🎯 实战场景

• 写技术文档的开发者：架构图直接以 mermaid 文本维护在文档里，逻辑变了改代码就行，不再维护一堆过期图片。收益是图和代码永远同步。
• 排项目计划的项目经理：甘特图写好后右侧直接看时间线，把只读链接丢进团队群。收益是没人再问"这图谁发我的、最新版在哪"。
• 需要他人微调的协作者：发一个可编辑链接过去，对方改完回传新链接。收益是一轮协作不用走任何文件传输。

🛠️ 进阶玩法

节点一多，用 subgraph 把相关节点圈成分组，层次立刻清楚起来：

graph TB subgraph 前端 A[界面] --> B[状态管理] end B --> C[API]

时序图里用 as 给参与者起显示名，对外分享时不用解释 U、S 分别是谁：

sequenceDiagram participant U as 用户 U->>S: 请求数据 S-->>U: 返回结果

🤝 参与贡献

本地跑起来只需要 Node.js（当前 LTS 版本）和 pnpm：

git clone https://link.gitcode.com/i/f8cce19ddb4e5cab568287995739131d cd mermaid-live-editor && pnpm install && pnpm dev -- --open

打开 http://localhost:3000 就能看到开发中的编辑器。想读源码，两处最值得看：编辑器组件在 src/lib/components/，状态管理和 URL 序列化逻辑在 src/lib/util/——状态经 pako 压缩编码进地址栏，正是分享链接能"带着图走"的原因。

写在最后

现在打开 mermaid-live-editor 的在线页面，把上面那段三行流程图敲进去，十秒内你就会得到一张能直接发的图。

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