流程图变成一条链接发出去Mermaid Live Editor 3 分钟跑起来【免费下载链接】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 支持的图表类型。它替代的是拖拽画布式方案不摆框、不拉箭头一行一行把结构打出来。对你最划算的情形图表要反复发给不同的人要跟着文档和代码库走不能忍受图片版本漂移。别用的情形你需要像素级控制布局或者做海报级设计这里没有可以拖拽的画布会觉得别扭。Mermaid 语法有一点学习成本——方括号、花括号、箭头各代表什么得先混个脸熟。打开 edit 页粘一段代码第一张图的最短路径进入编辑器的编辑页代码里对应路由 /edit在左侧代码区粘贴graph TD A[收到工单] -- B{能自助解决?} B --|能| C[发送指引并结单] B --|不能| D[转人工] D -- E[记录处理结果]回车后右侧立刻出图。节点、判断、分支标签、流向最常用的四样齐了。左侧有语法高亮和补全写错会当场标红底部错误面板告诉你错在哪一行。如果想在本地跑起来git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor corepack enable pnpm pnpm install pnpm dev -- --open需要 Node.js LTS 和 pnpm。只想部署到自己的服务器不想管源码官方 Docker 镜像一行docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor就能起。和拖拽工具的真正差异URL 就是图表本身截图是照片拍下来就是死的。这里的图表是文字而文字可以塞进地址栏。机制在 src/lib/util/ 里state.svelte.ts 保存着编辑器唯一的输入状态——图表代码、渲染配置、缩放位置serde.ts 把它 deflate 压缩、base64 编码后写进 URL 的 hash。所以你分享的链接不是去服务器取图的索引而是把整张图打包存在了链接里对方打开即渲染不传文件、不注册账号。打个比方把菜谱发给同事他自己会做还能顺手改改把菜的成品照片发过去他只能指着照片提要求。这条链接就是菜谱。校验也是即时的每次改动都会走一遍 mermaid 解析出错会定位到具体行列并在代码区对应位置打上标记而不是等到导出那一刻才炸。两个进阶用法时间线自动存档、嵌入代码一键生成每 60 秒自动存档一次打开编辑器上方的 History 面板Timeline 页签每 60 秒自动存档一次最多保留 30 个版本改崩了点对应条目恢复即可历史还能导出成 JSON 备份、在另一台机器上导入。这两个数字就写在 historyState.svelte.ts 里的 60_000 和 30 两个常量上。把图表嵌进自己的页面Share 面板可以生成 iframe 或 Web Component 两种嵌入代码主题、明暗模式、工具栏、网格背景都能调还带实时预览把一张活的图表嵌进博客或内部 wiki。逻辑在 Share.svelte。今天就能做故意改三次然后发链接现在去编辑器画一张最简流程图再故意改三次加一个分支、换一次箭头方向、删掉一个节点。然后点 Share把链接发给同事请对方改一个框、回传一条新链接。走完这一趟你就知道截图方案是不是该退役了——哪怕最后你仍偏爱拖拽至少多了个把结构想清楚的办法。【免费下载链接】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），仅供参考 流程图变成一条链接发出去：Mermaid Live Editor 3 分钟跑起来
流程图变成一条链接发出去Mermaid Live Editor 3 分钟跑起来【免费下载链接】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 支持的图表类型。它替代的是拖拽画布式方案不摆框、不拉箭头一行一行把结构打出来。对你最划算的情形图表要反复发给不同的人要跟着文档和代码库走不能忍受图片版本漂移。别用的情形你需要像素级控制布局或者做海报级设计这里没有可以拖拽的画布会觉得别扭。Mermaid 语法有一点学习成本——方括号、花括号、箭头各代表什么得先混个脸熟。打开 edit 页粘一段代码第一张图的最短路径进入编辑器的编辑页代码里对应路由 /edit在左侧代码区粘贴graph TD A[收到工单] -- B{能自助解决?} B --|能| C[发送指引并结单] B --|不能| D[转人工] D -- E[记录处理结果]回车后右侧立刻出图。节点、判断、分支标签、流向最常用的四样齐了。左侧有语法高亮和补全写错会当场标红底部错误面板告诉你错在哪一行。如果想在本地跑起来git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor corepack enable pnpm pnpm install pnpm dev -- --open需要 Node.js LTS 和 pnpm。只想部署到自己的服务器不想管源码官方 Docker 镜像一行docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor就能起。和拖拽工具的真正差异URL 就是图表本身截图是照片拍下来就是死的。这里的图表是文字而文字可以塞进地址栏。机制在 src/lib/util/ 里state.svelte.ts 保存着编辑器唯一的输入状态——图表代码、渲染配置、缩放位置serde.ts 把它 deflate 压缩、base64 编码后写进 URL 的 hash。所以你分享的链接不是去服务器取图的索引而是把整张图打包存在了链接里对方打开即渲染不传文件、不注册账号。打个比方把菜谱发给同事他自己会做还能顺手改改把菜的成品照片发过去他只能指着照片提要求。这条链接就是菜谱。校验也是即时的每次改动都会走一遍 mermaid 解析出错会定位到具体行列并在代码区对应位置打上标记而不是等到导出那一刻才炸。两个进阶用法时间线自动存档、嵌入代码一键生成每 60 秒自动存档一次打开编辑器上方的 History 面板Timeline 页签每 60 秒自动存档一次最多保留 30 个版本改崩了点对应条目恢复即可历史还能导出成 JSON 备份、在另一台机器上导入。这两个数字就写在 historyState.svelte.ts 里的 60_000 和 30 两个常量上。把图表嵌进自己的页面Share 面板可以生成 iframe 或 Web Component 两种嵌入代码主题、明暗模式、工具栏、网格背景都能调还带实时预览把一张活的图表嵌进博客或内部 wiki。逻辑在 Share.svelte。今天就能做故意改三次然后发链接现在去编辑器画一张最简流程图再故意改三次加一个分支、换一次箭头方向、删掉一个节点。然后点 Share把链接发给同事请对方改一个框、回传一条新链接。走完这一趟你就知道截图方案是不是该退役了——哪怕最后你仍偏爱拖拽至少多了个把结构想清楚的办法。【免费下载链接】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），仅供参考