改一张流程图要推倒重来？免费的 Mermaid Live Editor 值得试试-港品优选

改一张流程图要推倒重来？免费的 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

Mermaid Live Editor 是 Mermaid 开源项目官方的免费在线图表编辑器：左边是文本代码区，右边是实时预览区，敲一个字符图就刷新一次。流程图、时序图、甘特图等十余种图表都支持，免安装、免注册，浏览器打开就能用。它最适合经常写文档的开发者、常画测试流程的测试同学，以及需要快速把结构讲清楚的产品和运营。

需求方说"这两步换个顺序"的时候

想象这个场景：上午你用一个拖拽工具画好了工单处理流程，八个方框排得整整齐齐，连线一根不歪。下午产品经理丢过来一句："把'能否自助解决'放到'转人工'前面吧。"

你打开文件，挪一个框，三根连线跟着跑偏，中间的分支标签挤成一团。重新对齐、调间距，二十分钟过去，自己的活还没动。更烦的是，这种"小改"一周来好几次，每次都得把排版重做一遍——真正花在"画"上的时间，其实只占零头。

像给导航软件说目的地，而不是手绘地图

Mermaid 和画布类工具的区别，一句话能说清：不摆放元素，用文本写关系。

语法和图上一一对应：方括号是普通节点，花括号是判断节点，箭头是流向。你只声明"A 连到 B，B 分两条路"，位置、间距、走向全由引擎自动算——像用导航：你只说起点和终点，路线是软件画的，你不用一根一根插路牌。

写错也不会拖到导出才暴露。语法不对，编辑器立刻标红，底部面板告诉你卡在第几行、错在哪。

能带走的结论是：结构越复杂、改动越频繁，越值得用文本写，因为"谁连着谁"本来就是文字最擅长表达的事。

粘贴一段代码，第一张流程图就出来了

打开线上编辑页（源码入口在 edit 路由/edit/)），在左侧输入区粘贴：

graph TD A[收到工单] --> B{能自助解决?} B -->|能| C[发送指引并结单] B -->|不能| D[转人工] D --> E[记录处理结果]

右侧立刻出现一张流程图 ✅。左侧代码区自带语法高亮和补全，改一个字右边就跟着变。上面这段几乎覆盖了日常用法：节点、判断、分支标签、流向——画时序图、甘特图时只是换了开头的类型声明，"谁连接谁"的逻辑不变。

三个高频用法：进代码库、发链接、嵌进页面

图表跟着代码库走，review 图和审代码一样

架构 diagram 长期以图片形式躺在 wiki 里，改了没人知道。Mermaid 是文本，天然能进版本控制、能 diff：谁改了哪个节点、什么时候改的，PR 里一目了然；也可以直接写进 Markdown 文档，不用另传截图。

手滑改崩了也不怕，编辑器上方的历史面板每分钟自动存档一次，保留最近 30 个版本，手动保存相当于给关键版本贴书签，还能导出/导入 JSON 备份，换电脑不丢。历史面板逻辑

发一条分享链接，对方打开就能接着改

交付给协作者不用传文件。Share 面板里生成只读或可编辑链接，对方浏览器打开就能看、能改，改完再发回一条新链接。全程不传文件、不注册账号，协作成本和共享一个文档差不多。分享面板实现

嵌进博客或内部 wiki，图表一直是活的

文档站、内部系统里想放一张"活的"图？同一面板可一键生成 iframe 或 Web Component 代码，主题、明暗模式、宽高、是否显示工具栏和背景网格都能配，下面带实时预览，所见即所得。

要成品时，Actions 面板可导出 SVG、PNG（可指定宽度或高度）、复制图片到剪贴板，代码本身存成 .mmd 文件随时继续编辑；在意数据存哪的话，项目有官方 Docker 镜像，一条命令就能部署到自己服务器：

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

它适合你吗

一句话判断：画的是流程图、时序图、依赖关系、排期这类"结构图"，而且会反复改的，Mermaid Live Editor 会让你省心；手绘风格插画、视觉要求极高的信息图，它不是合适的工具。

下次要交图时，先别打开拖拽软件：打开编辑器，把"谁连着谁"写出来，合不合适一试就知道。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析