mermaid.live 免费在线编辑器：画流程图、导出与分享
【免费下载链接】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（Mermaid 在线编辑器）是省事的选择：浏览器左侧代码区输入几行文本，右侧预览区实时渲染出图，零安装、零注册。画完能把文件直接拿走，用链接发给同事，也能嵌进网页里当活图用。
从打开页面到拿到文件：PNG 导出步骤
这一节解决从零到拿到成品 PNG 文件的问题，一共 5 步。
- 打开 mermaid.live。左边是代码区，右边是预览区，不需要注册。
- 在代码区粘贴几行 Mermaid 文本，可以直接抄下一节的例子。每敲一个字符，预览区就重绘一次，没有刷新按钮。
- 想换图型，改第一行关键字即可，例如 flowchart、sequenceDiagram、gantt。
- 打开 Actions 面板，点 PNG。尺寸可选自动、按宽、按高，选了宽或高再填一个像素值，文件直接进下载目录。
- 要矢量版点 SVG；要粘进文档，用 Copy Image 把图片放进剪贴板，再 Ctrl+V 到任意文档。
导出相关代码在 Actions.svelte，按钮各司其职，全部在前端完成。
先选图型，再抄例子
这一节解决选什么图型、例子去哪里抄两个问题。图型完全由第一行关键字决定，这也是 mermaid 编辑器怎么用问题的第一问。这个免费在线流程图工具同时覆盖三种最常用的图型。
| 使用场景 | 图型关键字 | 一句话说明 |
|---|---|---|
| 订单、审批这类环节串环节的流程 | flowchart | 画业务流程，分支写在箭头上 |
| 请求、令牌、校验的跨方调用 | sequenceDiagram | 时序图在线画，一行一次调用 |
| 项目排期、任务起止日期 | gantt | 甘特图在线生成，日期依赖写成文本 |
flowchart 适合带判断分支的流程：
flowchart TD A[收到订单] --> B{库存充足} B -->|是| C[扣减库存] B -->|否| D[转预售]-->|文字|写分支标注，两条走向一眼分清。
sequenceDiagram 是时序图在线画的高频需求来源：
sequenceDiagram 用户->>前端: 提交账号密码 前端->>后端: POST /login 后端-->>前端: 返回 JWT 前端-->>用户: 登录成功实线箭头是请求，虚线是响应，整张图按时间从上往下排，不用画框对齐。
gantt 是甘特图在线生成的典型用法，一行一个任务：
gantt title 发布计划 dateFormat YYYY-MM-DD section 开发 编码 :a1, 2026-10-30, 5d 联调 :a2, after a1, 3d日期和依赖写成文本，条形起止位置由渲染器算好，改任务名或天数不用挪任何图元。
图交给谁：四种分发方式
这一节解决"图怎么到别人手里"，按从轻到重排。
- 导出文件：Actions 面板点 PNG 或 SVG，文件在自己手里，最稳，不依赖网络。
- 只读 view 链接：Share 面板复制 view 链接，对方免登录打开看到同样的图，不能改。只读分享链接怎么生成就是这一步。
- 可编辑 edit 链接：Share 面板复制 edit 链接，对方接着画，改完回传新链接，适合协作改图。
- 嵌入网页：Share 面板还能生成 iframe 或 web component 两种嵌入代码，主题、宽高、控制条参数都能调。
分享逻辑在 Share.svelte，链接在浏览器端生成，对方打开页面即可看图。
两行配置的进阶：换主题、嵌网页
这一节解决换主题和嵌网页两个高频调整需求。
代码第一行加一行配置，整张图换主题：
%%{init: {'theme': 'dark'}}%%dark 主题立即生效，forest、neutral 也是现成的，文档底色变了不用重新导。
嵌入代码的 web component 形态长这样：
<script src=".../embed.js" async></script> <mermaid-embed src="..." height="480"> 你的图表代码 </mermaid-embed>嵌入的不是截图，是可缩放、可交互的活图，粘进博客即生效。
断网环境：一条命令自建
这一节解决公网站点连不上的问题。用仓库自带的 Docker 配置，就能得到一份与公网功能一致的本地 Mermaid 在线编辑器：
docker compose up --build
构建完成打开 http://localhost:3000，双栏编辑、PNG/SVG 导出、分享链接一应俱全，图表代码与历史快照只落在本机，不出内网。
常见问题
图表数据存在哪里？代码与历史快照只存在于浏览器本地，每 60 秒自动存一版，最多 30 条，没有账号，也没有服务端存储。
PNG 与 SVG 怎么选？贴进 PPT、Word 用 PNG；要大幅打印或进矢量工具，用 SVG，放大不糊。
发链接和嵌网页有什么区别？链接是独立页面，适合发给读者；嵌入把图放进你自己页面，主题和尺寸参数可调，图在页面里保持可交互。
内网怎么部署？docker compose up --build，访问 http://localhost:3000，快照与代码都不出本机。
现在打开 mermaid.live，把上面第一段图表文本贴进代码区，右侧预览区会立刻出现你的第一张图。
【免费下载链接】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），仅供参考
