企业官网建设流程全解析

6 行文本生成 Mermaid 流程图：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.js 官方的免费在线图表编辑器：左侧是代码区，右侧是实时预览，流程图、时序图、甘特图全靠文本来描述，写完即出图。

30 秒画出第一张 Mermaid 流程图

发布评审前，你需要一张"发布上线"流程图。打开 Mermaid Live Editor，免安装、不用注册，浏览器里就能用。在左侧输入框粘贴这段代码：

graph TD A[开始] --> B{通过?} B -->|是| C[执行] B -->|否| D[回退]

右侧立刻出图：A 是起点，B 是判断，箭头是流向，"是"和"否"是分支标签。没有画布、没有对齐、没有图层管理，4 行就覆盖了节点、判断、分支、流向。而"谁连接谁"这一套逻辑，时序图、甘特图、类图都是同样的写法，学一遍就够用。

文本生成图表为什么快：语法与即时报错

很多人的直觉是：图才是资产。反过来说更准确——图是结构的副产品，真正值得维护的是文本。手摆出来的图像一次性的构建产物，任何小改动都可能让它失效；文本图表更像源码，你每改一小处，右边的图就自动重渲染一次。

语法上，方括号是普通节点，花括号是判断节点，箭头是流向。写错了怎么办？编辑器当场标红，底部错误详情面板会告诉你问题出在哪一行——体验和编译器报错一致，不用等到导出才发现问题。想深挖"文本如何变成图"，可以从 src/lib/util/ 下的 state.svelte.ts 与 renderView.ts 读起。

画布工具给不了的三件事

拖拽类工具擅长"画"，但不擅长"管"。Mermaid Live Editor 补上了三个缺口。

图表版本管理：把图推进代码仓库

文本图表能直接进仓库跟代码一起被 review：逐行 diff、谁改了什么、什么时候改的，一目了然。语法还能直接写进 Markdown 文档，PR 里不必再单独传一张截图——图变了，文本变，差异就在 diff 里。

链接协作：只读链接与 iframe 嵌入

打开 Share 面板（src/lib/components/Share.svelte），协作被压缩成两个动作：一是生成链接，分只读和可编辑两种，对方打开就能看、或打开继续改，不用注册、不用传文件；二是一行 iframe 或 Web Component 代码，把实时图表嵌进博客、wiki 或内部系统，主题、明暗模式、宽高、工具栏与网格都能定制，还带实时预览。面板里明确写着：你创建的图表内容不会离开浏览器。

三页签历史记录：Saved、Timeline 与 JSON 备份

怕改崩？历史记录面板（src/lib/components/History/）分三个页签：Saved 是手动快照，相当于给某个版本贴书签；Timeline 每分钟自动存档，保留最近 30 版；Revisions 来自 Gist 等来源加载时留下的修订。点一下即可恢复，全部还能导出成 JSON 备份、再从文件导入，换电脑不丢东西。

带走成品：导出、存档与私有化部署

要交付时，打开 Actions 面板（src/lib/components/Actions.svelte）：导出 SVG、PNG（可指定宽度或高度，也可自动适配）、把图片复制到剪贴板、一键复制 Markdown 引用链接。代码本身存成.mmd文件，随时重开继续编辑。

担心数据落在别人的服务器上？项目提供官方 Docker 镜像，一条命令部署到自己的机器：

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

想动代码也行：克隆仓库（https://gitcode.com/GitHub_Trending/me/mermaid-live-editor）后执行pnpm install和pnpm dev即可本地启动。项目基于 SvelteKit 构建，界面组件集中在 src/lib/components/，核心工具逻辑在 src/lib/util/。

今天下午，先别急着打开拖拽软件：找一份文档里现成的流程图，用 6 行文本把它重写一遍，再把这份文本推进仓库，提交信息就写"把图转成文本"。明天同事要改一个分支时，他做的是一行 diff，而不是重新摆图。第一次不顺也不打紧，把结构想清楚，本来就占了一半功夫。

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