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 图表编辑这件事：打开浏览器输入代码，图就在右边出现，画完直接导出或把链接发出去。

🧩 图在文档里总是对不上

架构图画完三个月，流程变了，原始文件却难找。导出成图片后，改一个节点得回原工具重画；同事想微调，文件来回传好几轮。绕开这些麻烦的办法很直接：把图写成文本。mermaid 流程图在线编辑就是这条路线——图本身只是几行代码，图文永远同步。

🖥️ 打开浏览器，三步把图画出来

① 用浏览器打开在线版。默认双栏布局：左边代码编辑区，右边预览区，编辑区自带示例图表，可以直接改。

② 在编辑区输入图的描述，例如一段简单的流程图：

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

右侧随即画出判定节点 B，以及"否"分支回到 B 的回退线。

③ 到顶部的 Actions 区域，把当前图下载为 SVG 或 PNG，一次完成 mermaid 导出 SVG；该区域还提供 mermaid.ink 与 Kroki 的远程渲染链接，可直接取用。想把图发给别人，最省事的是 mermaid 链接分享——复制地址栏即可。

✨ 编辑、导出、分享各管一段

实时渲染与语法提示

编辑区每次改动都会触发重新校验和渲染，语法错误直接在代码里标出行号。底层是 SvelteKit，桌面端接 Monaco、移动端接 CodeMirror，项目以 MIT 协议开源。

多格式导出

Actions 里的 SVG/PNG 本地下载适合插图进文档，mermaid.ink 与 Kroki 给出的是远程图片地址，矢量、位图、远程图三种形态按需取用。

URL 编码分享

代码和配置被编码进 URL，链接本身成为分享介质。只读链接打开即看图；可编辑链接则让同事改完后回传一条新链接。

📐 两个写法让图更清楚

节点一多，用 subgraph 把相关的框在一起，层次一目了然：

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

想表达先后交互时，时序图里给参与者起个别名：

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

participant 后跟 as 和显示名，图里出现的就是直观的中文名字。这两种写法在 mermaid 流程图在线编辑里输入即出效果。

🔧 想改源码，环境这样搭

前置要求是 Node.js 与 pnpm，装好后一条命令启动本地开发：

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

界面相关的编辑器、预览区等组件集中在 src/lib/components/，状态管理、URL 序列化和渲染封装等工具函数在 src/lib/util/。分工清晰，改功能时很快能定位；其中序列化逻辑直接决定 mermaid 链接分享的编码是否正确，改动时多留个心眼。

下次要 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