不打开画图工具，三分钟画出一张流程图：Mermaid Live Editor 在线流程图编辑器

不打开画图工具三分钟画出一张流程图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 官方的免费在线流程图编辑器左侧写代码右侧实时出图画完一条链接发出去或嵌进任意网页。功能总览实时预览、链接分享、嵌入与导出一次到位先给结论这是一套写文本画图的在线图表编辑器覆盖流程图、时序图、甘特图、类图的实时编辑与预览全程不需要账号也能私有化部署。实时预览每敲一个字符右侧图就更新语法错误立刻标红错误面板直接指出问题行链接分享生成只读或可编辑链接不传文件、不注册账号嵌入一键生成 iframe 或 Web Component 代码主题、明暗模式、宽高、工具栏与网格均可定制版本历史手动快照 每分钟自动存档的时间线可导出/导入 JSON导出交付SVG、PNG可指定宽高或自动适配、复制图片到剪贴板、复制 Markdown 链接。实时渲染的逻辑在src/lib/util/下的state.svelte.ts与renderView.ts负责文本变图这一段。三分钟画出第一张 mermaid 流程图进入编辑页把这段粘贴进左侧输入框右侧立刻出一张带五个节点、两条分支的流程图。这段代码覆盖了最常用的四件套节点、判断、分支标签、流向时序图、甘特图、类图都是同一套谁连接谁的逻辑换开头声明行即可。代码区有语法高亮和补全写错会直接指出错误行mermaid 语法不需要背。三个使用场景分享图表、版本备份、嵌入站点把图发给别人打开 Share 面板复制当前地址得到只读链接切到可编辑模式则生成可编辑链接对方打开就能改改完再生成新链接发回。全程不传文件、不注册账号。“你创建的图表内容不会离开浏览器。”——这句话就写在 Share 面板里。图表内容只序列化进链接不上传服务器对数据敏感的场景友好。怕改崩想回退History 面板分三个页签Saved手动快照相当于给某个版本贴书签Timeline每分钟自动存档保留最近 30 个版本Revisions从 Gist 等来源加载时留下的修订记录。改崩了点恢复即可回到任意时刻。全部历史还能导出成 JSON 文件文件名带时间戳换台设备再导入。相关逻辑在src/lib/components/History/。交付成品Actions 面板支持导出 SVG、导出 PNG可指定宽高也可自动适配、把图片直接复制进剪贴板、复制 Markdown 引用链接代码存成.mmd文件随时重开继续编辑。图放进博客或 wiki的场景更适合 Share 面板里的嵌入选主题、明暗模式、宽高、是否显示工具栏和网格面板带实时预览看到的就是生成结果。一条命令私有化部署本地开发启动数据不能出内网的场景项目提供了官方 Docker 镜像命令在 README 里docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor跑完访问该机器的 8000 端口就是同一套编辑器图表内容完全留在自己的服务器。想改代码克隆仓库本地启动即可git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev -- --open项目基于 SvelteKit要求 Node.js LTS 与 pnpmcorepack enable pnpm可直接装上。界面组件集中在src/lib/components/核心逻辑在src/lib/util/结构清楚适合当开源项目练手。什么时候该用什么时候不必用场景建议方案说明结构频繁变更加分支、换顺序Mermaid Live Editor改文本自动重排不手动对齐图表要跟着代码一起 reviewmermaid 文本 版本管理文本可 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），仅供参考