文本画图的 Mermaid Live Editor：5 行代码出一张流程图
【免费下载链接】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 图表类型
写文档、排方案时想插入一张图，不想打开画图软件一个个拉框连线，直接在左侧代码区敲几行：
flowchart TD A[开始] --> B[需求] B --> C[设计] C --> D[开发]第一行就是图表类型关键字，改掉即换图：sequenceDiagram是时序图，gantt是甘特图，classDiagram是类图。所以"用 Markdown 画 Mermaid 甘特图"本质上只是改开头一行，语法不用死记。
顺手说个配置技巧，文件第一行加一行主题声明：
%%{init: {'theme': 'dark'}}%%dark、forest、neutral都是现成的。同一张图要放进浅色和深色的文档里时，换一下这行就行。
用 subgraph 给大图分块，用 click 让节点可点
节点一多，图容易变成"毛线团"。用subgraph把相关节点圈成一块，可读性马上回来：
flowchart TD subgraph 前端 A1[页面] --> A2[状态] end subgraph 后端 B1[接口] --> B2[数据库] end A2 --> B1想让某个节点点了能跳页面或弹提示，再补一行click A "detail.html" _blank，静态图就变交互图了。渲染相关的行为代码在src/lib/components/下，结构直白，想搞懂某块逻辑花不了几分钟。
导出 PNG 或 SVG，把 Mermaid 图直接贴进 Markdown
预览满意后，导出都在 Actions 面板里。常用三种：
- PNG：可以按宽度、高度指定像素，直接当插图
- SVG：矢量，放大不糊。跨设备、跨分辨率都要显示一致时选它最稳
- 复制 Markdown / 复制图片：前者给一段按当前代码实时渲染的图片链接，贴进文档就出图；后者把图放进剪贴板，到任何编辑器 Ctrl+V
放进技术文档时"复制 Markdown"最省事，链接内容跟着代码走，改完图不用重新导出。导出逻辑的完整清单可以看 src/lib/components/Actions.svelte。
嵌入网页，生成只读查看与编辑链接
图要放进个人博客或内网 wiki，Actions 面板的 embed 选项能直接生成 iframe 或<mermaid-embed>web component 代码，粘进去就出图，宽高可调。生成逻辑在src/lib/util/embedCode.ts，图会压缩编码进 URL，整张图就是一个链接。
顶部还有两个链接：查看链接和编辑链接。发查看链接，对方打开就是只读页，免安装、免注册；发编辑链接，对方可以直接接着改，再回传一条新链接。
自动存 30 条历史，手动快照随时留痕
编辑器每分钟自动存一次快照，最多保留 30 条；也可以手动命名一条，在方案评审、定稿这类节点打个标记，回头按名字找那一版。
这些记录只写在你自己浏览器的本地存储里，不上传别处，实现就在 src/lib/util/persist.svelte.ts，读一遍就能确认。
本地部署也简单，clone 后跑docker compose up --build，访问 http://localhost:3000 就是同一套双栏界面；技术栈是 Svelte Kit + TypeScript + Vite + pnpm。相比拖拽软件，本质差别在于：图是文本，能进 Git、能 diff、能随文档一起版本化。写技术文档时，打开 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），仅供参考
