6 行文本生成 Mermaid 流程图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 官方的免费在线图表编辑器左侧是代码区右侧是实时预览流程图、时序图、甘特图全靠文本来描述写完即出图。30 秒画出第一张 Mermaid 流程图发布评审前你需要一张发布上线流程图。打开 Mermaid Live Editor免安装、不用注册浏览器里就能用。在左侧输入框粘贴这段代码graph TD A[开始] -- B{通过?} B --|是| C[执行] B --|否| D[回退]右侧立刻出图A 是起点B 是判断箭头是流向是和否是分支标签。没有画布、没有对齐、没有图层管理4 行就覆盖了节点、判断、分支、流向。而谁连接谁这一套逻辑时序图、甘特图、类图都是同样的写法学一遍就够用。文本生成图表为什么快语法与即时报错很多人的直觉是图才是资产。反过来说更准确——图是结构的副产品真正值得维护的是文本。手摆出来的图像一次性的构建产物任何小改动都可能让它失效文本图表更像源码你每改一小处右边的图就自动重渲染一次。语法上方括号是普通节点花括号是判断节点箭头是流向。写错了怎么办编辑器当场标红底部错误详情面板会告诉你问题出在哪一行——体验和编译器报错一致不用等到导出才发现问题。想深挖文本如何变成图可以从 src/lib/util/ 下的 state.svelte.ts 与 renderView.ts 读起。画布工具给不了的三件事拖拽类工具擅长画但不擅长管。Mermaid Live Editor 补上了三个缺口。图表版本管理把图推进代码仓库文本图表能直接进仓库跟代码一起被 review逐行 diff、谁改了什么、什么时候改的一目了然。语法还能直接写进 Markdown 文档PR 里不必再单独传一张截图——图变了文本变差异就在 diff 里。链接协作只读链接与 iframe 嵌入打开 Share 面板src/lib/components/Share.svelte协作被压缩成两个动作一是生成链接分只读和可编辑两种对方打开就能看、或打开继续改不用注册、不用传文件二是一行 iframe 或 Web Component 代码把实时图表嵌进博客、wiki 或内部系统主题、明暗模式、宽高、工具栏与网格都能定制还带实时预览。面板里明确写着你创建的图表内容不会离开浏览器。三页签历史记录Saved、Timeline 与 JSON 备份怕改崩历史记录面板src/lib/components/History/分三个页签Saved 是手动快照相当于给某个版本贴书签Timeline 每分钟自动存档保留最近 30 版Revisions 来自 Gist 等来源加载时留下的修订。点一下即可恢复全部还能导出成 JSON 备份、再从文件导入换电脑不丢东西。带走成品导出、存档与私有化部署要交付时打开 Actions 面板src/lib/components/Actions.svelte导出 SVG、PNG可指定宽度或高度也可自动适配、把图片复制到剪贴板、一键复制 Markdown 引用链接。代码本身存成.mmd文件随时重开继续编辑。担心数据落在别人的服务器上项目提供官方 Docker 镜像一条命令部署到自己的机器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即可本地启动。项目基于 SvelteKit 构建界面组件集中在 src/lib/components/核心工具逻辑在 src/lib/util/。今天下午先别急着打开拖拽软件找一份文档里现成的流程图用 6 行文本把它重写一遍再把这份文本推进仓库提交信息就写把图转成文本。明天同事要改一个分支时他做的是一行 diff而不是重新摆图。第一次不顺也不打紧把结构想清楚本来就占了一半功夫。【免费下载链接】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），仅供参考