一张流程图改到第 8 版还在手动重排试试 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 官方的免费在线图表编辑器专门用来编辑、预览和分享流程图、时序图、甘特图而它把改的成本压到了接近零——因为图表在它眼里就是一段文本左边敲代码右边实时出图。改图的时间到底花在了哪里画过几张正经图的人都熟悉这个循环新建画布、拖框、连线、对齐、调间距、改文字、重排、再对齐。真正吃掉时间的是后半段。尤其是当对方说这里加个判断把这两步换一下顺序时之前的对齐基本全部作废。这就像装修第一次贴砖不贵贵的是每次换墙纸都得先把墙敲了重来。画布类工具的每一次小改动都是一次敲墙。Mermaid 的答案很干脆别在画布上摆元素了把关系写成文字剩下的交给它。文本敲进去图怎么自己长出来Mermaid 是一种用纯文本描述图表的语法方括号是普通节点花括号是判断节点箭头是流向每一行都对应图上的一种元素。编辑器左侧是带语法高亮和补全的代码区右侧是实时预览区每敲一个字符图就跟着刷新一次。语法写错也不会留到导出才被发现——编辑器当场标红底部弹出错误面板说清楚是哪一行出了问题。改图从此变成纯粹的文本编辑删两个字、加一个节点、换个箭头方向图自动重新排版。想看文本怎么变成图的细节可以从 src/lib/util/ 下的状态机与渲染函数 里的 state.svelte.ts 和 renderView.ts 开始读。打开就能跑的 5 行流程图示例打开编辑页在左侧输入框粘贴下面这段代码右边立刻出一张图。不用装任何东西不登录不配置graph TD A[收到工单] -- B{能自助解决?} B --|能| C[发送指引并结单] B --|不能| D[转人工] D -- E[记录处理结果]这段代码覆盖了 90% 的日常用法节点、判断、分支标签、流向。学会这套谁连接谁的逻辑时序图、甘特图、类图都是同一套规则不必重复学习。改崩了从历史时间线里翻回来担心手滑改坏编辑器上方的历史记录面板分三个页签。Saved 是你手动保存的快照相当于给某个版本贴书签Timeline 是自动时间线每隔 60 秒存档一次最多保留最近 30 个Revisions 记录从 Gist 等来源加载时留下的修订。改崩了不用慌像翻相册一样把某个历史瞬间点回来就行。历史记录还能导出成 JSON 文件备份换台电脑导入即可不丢。图怎么交出去一条 URL 加一段嵌入代码点右上角的 Share 面板整张图被压缩进一条 URL。对方点开就是只读视图想继续改也能拿到可编辑链接改完再发一条新链接给你——全程不传文件、不注册账号。它还能生成 iframe 或 Web Component 代码把实时图表嵌进博客或内部 wiki主题、明暗模式、宽高、工具栏和网格都能定制还带实时预览。Share 面板里明确写着一句话你创建的图表内容不会离开浏览器数据敏感的场合也放心用。什么时候别用它交付对象是视觉而不是结构时别用它。Mermaid 的自动排版优先保证结构清晰不会让你像设计软件那样微调间距、圆角、阴影到像素级。PPT 首页那种级别的视觉效果还是交给 Figma。下次画图之前可以先做这件事下次要画流程、时序或甘特图时先别打开拖拽软件去 Mermaid Live Editor 里把这张图说成文字。哪怕只画一张三个节点的小流程也请故意改三次需求——加一个分支、换一个箭头方向、删掉一个节点亲身体验改图接近零成本到底是什么感觉。如果三分钟后你还是觉得拖拽更顺手关掉它也不亏如果它让你第一次意识到图原来可以这么轻你就多了一个把结构想清楚的思考工具。对数据存在别人服务器上有顾虑的话官方 Docker 镜像一条命令就能部署到自己的服务器克隆仓库https://gitcode.com/GitHub_Trending/me/mermaid-live-editor后执行pnpm install和pnpm dev即可本地启动。项目基于 SvelteKit 构建界面组件集中在 src/lib/components/核心工具逻辑在 src/lib/util/结构清晰很适合当开源项目练手。【免费下载链接】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），仅供参考