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 图的人 |
| 双格式导出 | 在 Actions 区把当前图存成 SVG（矢量）或 PNG（位图） | 需要插图进 PPT、文档的人 |
| 只读分享 | 复制链接发给对方，打开即看图，对方改不了 | 发布团队、评审场合 |
| 可编辑分享 | 对方打开链接可继续改，改完回传新链接 | 需要协作改图的场景 |
| 代码辅助 | mermaid 语法高亮、补全，报错位置直接在代码区标出 | 常写图表语法的人 |
| 外部渲染服务 | 可对接 mermaid.ink、Kroki 获取远程图片链接（可通过 Docker 构建参数配置） | 需要把图嵌进外部系统的开发者 |
🎯 实战场景
- 写技术文档的开发者：架构图直接以 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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
