mermaid-live-editor：免费在线 Mermaid 图表编辑器，几行文本即可预览、导出并分享

【免费下载链接】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 是用文本语法描述图表的工具），你在左侧敲几行代码，右侧的流程图、时序图、甘特图就实时画出来；画完之后，可以直接下载图片，也可以把链接发给别人，全程不用注册。

画一张能跟着逻辑走的流程图

打开编辑页就是左右两栏：左边代码区，右边预览区，中间可以拖动分隔条调整比例。代码区带了语法高亮和补全（桌面端用 Monaco 编辑器，移动端用 CodeMirror），写错语法时会在代码区直接标出出错位置，预览也随之暂停更新，改对即恢复。

不知道从哪下手的话，左下角的 Sample Diagrams 卡片按类型提供示例：Flowchart、Class、Sequence、Gantt、Entity Relationship、State、Mindmap 等，点一下就把示例代码填进编辑器。最简的一张流程图长这样：

graph LR A[接收需求] --> B[设计] B --> C[开发] --> D[测试] D -->|不通过| C D -->|通过| E[发布]

两个让图更好读的小技巧：节点太多时，用subgraph把相关节点分组（比如把网关、服务、数据库各归一组）；时序图里参与者太长时，用participant U as 用户给它起个直观的显示名。

如何导出：PNG、SVG 和 Markdown 三种拿法

画完之后，所有导出操作都集中在左下方的Actions卡片里：

• 点PNG或SVG直接下载当前图表。PNG 的尺寸有三档：Auto 自动适配，或者手动指定 Width / Height，方便控制它放进文档或幻灯片之后的实际大小；
• 两个按钮旁各有一个外链入口，分别指向 mermaid.ink 和 Kroki 这两个远程渲染服务，点开会得到同一张图的在线地址，图由服务器渲染托管，你不用自己存文件；
• Copy Markdown复制的是一段 Markdown 图片代码，粘进技术文档即可直接引用这张图。

拿两种链接：只读的给观众，可编辑的给同事

这张工具最核心的设计藏在地址栏里：URL 的 hash 部分就是整张图表的状态——代码和配置先经过 deflate 压缩再 Base64 编码（序列化逻辑在 src/lib/util/serde.ts），所以大图对应的链接也不会特别长，而且图表内容不需要服务器存储，从不离开你的浏览器。

同一张图因此能发出两种链接：

• 只读链接（/view 页面）：对方只能看图，不能改，适合发给评审方和团队群里；
• 可编辑链接（/edit 页面）：对方拿到后可以直接改，改完把新链接回传给你，一轮协作就闭环了，不用来回传图片文件。

架构变了怎么办？改文本代码就行。图、分享链接、嵌入片段全部由同一个 URL 驱动，评审方打开链接看到的永远是最新版本，图不会过期。

把活图嵌入博客：iframe 与 Web component 两种方式

需要图表长期挂在网站或博客上的话，用顶部工具栏的Share按钮打开分享对话框，下半部分是 Embed 区域：

• 可以选主题（theme）、外观（classic / handDrawn / neo）、浅色或深色、宽高，还能开关缩放控件和背景网格；
• 生成的嵌入片段有两种格式可切换：iframe和<mermaid-embed>自定义元素，都是复制即可用；
• 勾选 Preview 还能在对话框里先看看嵌入后的效果。

粘进博客之后，读者拿到的不是一张静态截图，而是一张可以缩放、可以平移的活图。

历史面板：每 1 分钟自动存档，改飞了也能找回

编辑器里的 History 面板（点顶栏的时钟图标展开）分两个标签页：

• Timeline：整个会话期间每 1 分钟自动保存一个快照（最多保留 30 条），每一行都带一个独立链接，可以直接在新标签页打开对比；
• Manual：点 Save 手动给当前状态打个书签，之后随时一键恢复。

整份历史还能导出为 JSON 文件，换台电脑再导入回来，做过的版本不会丢。

打开别人的链接时，它先替你查一遍配置

分享链接里除了代码还带着 Mermaid 配置，而配置里可能藏有危险项：放宽安全等级、__开头的原型污染键、带 HTML 或url(data:)的值（潜在的 XSS 向量）。加载来自 URL 的状态时，编辑器会先过一遍 src/lib/util/sanitize.ts 的安检，发现风险项会弹窗列出具体内容，确认后剔除；如果你信任链接来源，点取消则原样保留。来源不明的链接可以放心点开。

本地跑起来：克隆后两条命令

项目基于 SvelteKit + Svelte 5 构建，MIT 协议开源，用 Docker 也能直接起。本地开发需要 Node.js 24 及以上版本和 pnpm：

git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install && pnpm dev

启动后打开 http://localhost:3000 就是和线上同一套编辑器。想参与贡献的话，两个目录最值得先读：src/lib/components/ 放编辑器、预览、Actions、Share 等界面组件；src/lib/util/ 放状态管理、URL 序列化、渲染与安检等核心逻辑。页面路由在 src/routes/，端到端测试在 tests/。

有图要画、有图要分享的时候，打开编辑器敲上第一行代码，一分钟就能把图画完发出去。

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor