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 图表编辑器，无需注册、不依赖图片托管，产出的是链接，而不是要来回传的图片文件。
写 5 行文本，流程图就出来了 📝
打开在线版会直接落在编辑页：左边是代码编辑器（桌面端为 Monaco，带 Mermaid 语法高亮和补全），右边是预览区。清掉默认示例，换成你自己的：
graph LR A[接收需求] --> B[设计] B --> C[开发] C --> D[测试] D -->|不通过| C D -->|通过| E[发布]每保存一次内容，预览就同步刷新；语法写错时，报错位置直接标在代码区，不用点任何"渲染"。
顺手可以养成两个习惯：
- 图节点多到看不清时，用
subgraph按层级分组； - 时序图里参与者名字过长时，用
participant U as 用户给它起个显示名； - 想让图表不那么"工程风"，工具栏里的 Hand-Drawn 开关可一键切换手绘风格。
编辑器还会把本次会话的改动自动记进 History 时间线，状态也存在本地，关掉页面再打开也不丢。
怎么把图表变成能用的图片 🖼️
所有导出动作都在下方的 Actions 卡片里：
- 点PNG或SVG直接下载。PNG 支持尺寸选择：Auto 按 2 倍分辨率出图，Width/Height 则指定一边、另一边按比例缩放，放进文档或幻灯片尺寸可控；
- 每个下载按钮旁带一个外部链接小箭头，点开是 mermaid.ink 或 Kroki 渲染服务给出的同一张图的在线地址；
- Copy Image把 PNG 直接放进剪贴板，粘到聊天或文档里就能用；Copy Markdown生成带渲染地址的 Markdown 图片代码，可直接引用进技术文档。
图表代码如果存放在 Gist，把 Gist 地址粘进 Actions 的输入框、点 Load Gist，就能拉进编辑器继续改。
发链接：一张图生成三种链接 🔗
这个工具的分享逻辑是：链接即图表。代码经过 deflate 压缩编码进地址的 hash 部分，所以大图对应的链接也不会特别长。
三种链接，对应三种用途：
- 可编辑链接：直接复制地址栏 URL。对方打开即可改，改完再回传一个新 URL，协作闭环完成，不用传图片文件；
- 只读链接：把地址路由从
/edit换成/view，hash 保持不变，打开的页面只有图表、没有编辑器； - 嵌入链接：生成可嵌入片段的入口，下一节细说。
一点安全说明：打开来源不明的分享链接时，编辑器会检查链接携带的配置，发现风险项会先提示你，确认后才剔除再渲染，不用担心直接打开。
把一张"活"的图嵌进博客 📄
静态截图放大会糊，移动端也更难看清。点Share打开对话框，里面有一块 Embed 区域：可选主题、外观（classic / handDrawn / neo）、宽高、浅色或深色模式，还能开关缩放控件和背景网格，改完可现场预览。
然后选格式，二选一：
- iframe：整段拷贝进页面即用；
- Web component：引入
embed.js后使用<mermaid-embed>标签，图表代码直接写在标签体内，结构更干净。
iframe 片段大致长这样：
<iframe src="https://mermaid.live/embed#pako:..." width="100%" height="480" style="border:0" loading="lazy" title="Mermaid diagram" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>嵌进页面的是可缩放的活图。架构变了，你只需要改 Mermaid 文本、重新生成一段片段，读者打开看到的就是最新版，文档和图从此不用手动对版本。
本地跑起来：3 条命令开始参与开发 🛠️
项目基于 SvelteKit 构建，MIT 协议开源。装好 Node.js（当前 LTS）和 pnpm（可用corepack enable pnpm安装）后：
git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor && pnpm install && pnpm dev -- --open开发服务器会在 http://localhost:3000 启动；也支持用 README 中的 Docker 命令跑一个自托管版本。
想参与贡献，入口不分散：
- 界面组件集中在 src/lib/components/，Actions、Share、View 等都在其中；
- 状态管理、URL 序列化、配置安全过滤在 src/lib/util/，核心是
state.svelte.ts与serde.ts； - 单元测试与源码同目录（
*.test.ts），端到端测试在 tests/。
改完先本地验证一遍：pnpm dev预览效果，pnpm check和pnpm test过一遍检查。
下次要画图的时候，打开编辑器敲几行文本，图、导出图片和分享链接就在同一个页面里等着被复制。
【免费下载链接】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），仅供参考
