改一次图就重排一次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-editorMermaid Live Editor 是 Mermaid.js 官方的免费在线图表编辑器支持流程图、时序图、甘特图的实时编辑与预览导出、分享一条链接搞定。这篇文章只讲一件事画布类工具和文本类编辑工具的分野不在画而在画完之后——画布工具让你画完文本工具让你能一直改下去。两种画图方式摆在一起看你要一张图通常有两条路画布拖拽新建画布、拖框、连线、对齐、调间距。图是漂亮的但每个元素的位置都靠手工维持。写成文字Mermaid 是用纯文本描述图表关系的语法——方括号是节点花括号是判断箭头是流向。Mermaid Live Editor 就是这套语法的官方在线工具左边写代码右边实时预览每敲一个字符图刷新一次。第二条路有学习成本但只有几行符号。算笔账画布工具贵在后半程画布的第一次绘制其实不贵贵的是后半程需求方一句这里加个判断你之前的对齐和间距基本作废——照片不能只换一个细节就得整张重拍。画完是一张死图不能 diff、不能进版本管理、进不了 PR review只能截图单独上传。文本图则像填空模板结构不动换掉一个字就行。而且对齐的工作从来不是你在做所以它永远不会作废。怎么选先问自己一个问题只问一句这张图之后还会被改吗要不要进文档或代码库只画一次、再也不会碰什么工具都行。需求还在动或者图要被 review、被追踪、被嵌入别处就选文本路线。大多数正式的图属于后者。三分钟画出第一张流程图不用注册不用设置。进入编辑页源码在src/routes/(app)/edit/把下面这段粘进左侧代码区右侧立刻出现一张带分支、带返工回环的流程图graph TD A[提交 PR] -- B{CI 通过?} B --|是| C[请求 Review] B --|否| D[修复后重新提交] D -- B C -- E[合入主干]写错了也不用猜编辑器标出问题底部弹出错误详情面板直接告诉你是哪一行的锅。这套语法覆盖了日常 90% 的用法时序图、甘特图都是同一个谁连接谁的逻辑触类旁通。为什么改图免费一行字就是数据这件事的关键不是打字快而是图的结构和图本身是同一份数据。左边改代码右边就重新渲染整条链路两件事状态管理 渲染落位。想深挖文本如何变成图的读者从src/lib/util/state.svelte.ts保存代码与配置和src/lib/util/renderView.ts把代码渲染成 SVG 放进预览区看起。隐藏福利图在画完之后还活着历史顶部面板三个页签——Saved 是手动快照Timeline 每分钟自动存档一次、保留最近 30 个Revisions 是从 Gist 等来源加载时的修订记录。改崩了点一下恢复。历史还能导出成 JSON 再导入换电脑不丢。分享Share 面板生成只读或可编辑链接对方打开、点两下就能继续改改完把新链接发回来全程不传文件、不注册账号也能一键生成 iframe 或 Web Component 代码把实时图嵌进博客、wiki主题、明暗、宽高、工具栏都可调。面板里写明你创建的图表内容不会离开浏览器。交付Actions 面板支持导出 PNG、SVGPNG 可指定宽度或高度、复制到剪贴板图的源就是文本存成本地文件随时重开接着改。私有部署对数据有顾虑一条命令把整个工具搬进自己服务器图不出门。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本地跑起来。今天就能做的小实验下次要画图时先别开拖拽软件把这张图说进 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考