企业官网建设流程全解析

免费在线图表编辑器 Mermaid Live Editor 完整指南：4 步画出、导出并分享 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 图表编辑器。输入文本代码，右侧实时渲染出流程图、时序图或甘特图，还能导出 SVG/PNG 并直接生成分享链接，画图、导出、分享一站完成。

🧭 项目定位：在线图表编辑器为何比图片文件更省心

如果你经常把架构图贴进文档，却发现架构一改图就过期，那这个项目解决的就是这个麻烦。

它的工作方式是双栏页面：左侧代码编辑器，右侧预览区，支持流程图、时序图、甘特图等类型。你创建的图表内容保留在浏览器本地，不会上传到服务器。

📝 使用流程：写代码、预览、导出、分享共 4 步

从打开页面到拿到分享链接只需要 4 步，下面逐步说明每一步的动作和结果。

第一步：写 Mermaid 代码，右侧实时预览

打开在线版后，左侧自带一张示例图。清空后输入自己的代码即可，比如一张简单的流程图：

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

编辑器提供语法高亮和补全，语法写错时会在代码区直接标出报错位置。你每敲一下，右侧就重画一次，全程不用按任何刷新按钮。

第二步：如何导出 SVG/PNG 图表

在页面下方的 Actions 区域操作：

• 点击 PNG，图表即以图片形式下载；可选 Auto 或自定义宽/高，方便控制放进文档或幻灯片后的尺寸；
• 点击 SVG，得到矢量文件，放大不失真；
• PNG/SVG 旁还有 mermaid.ink 和 Kroki 两个远程渲染入口，点击后得到同一张图的在线地址；
• 也可以直接复制 Markdown 图片代码，粘进技术文档里引用。

第三步：如何复制图表的分享链接

地址栏的 URL 就是分享链接：图表代码和配置经过 deflate 压缩后编码进链接，大图链接也能保持较短。Share 对话框里还能拿到另外两种东西：

• 只读链接：对方只能看图；
• 可编辑链接：对方改完代码后回传一个新链接；
• 嵌入片段：可生成 iframe 或 Web component 两种格式，主题、深浅色、宽高都可调，粘进博客即得一张可缩放的活图。

🤝 场景实践：团队评审、嵌入博客与文档图同步

下面 3 个真实协作场景，你可以直接对号入座。

团队评审：一条链接完成一轮协作

评审架构或排期计划时，把只读链接发给团队，不再先导出图片再群发文件。评审人想补一个节点，就把可编辑链接发给他，他改几行代码后回传新链接，一轮协作就此结束，全程不装任何工具、不传图片文件。项目经理画完甘特图也可以直接把只读链接发给团队预览时间线。

嵌入博客：粘一段代码得到可交互图表

写技术文章时不必给图表截静态图。在 Share 对话框生成嵌入片段、贴进页面，文中的图就能随页面缩放，深浅色主题也可以单独指定。

文档与图同步：图永不过期

架构变了就改文本代码，图表、分享链接、嵌入代码都跟着同一个 URL 更新，评审方打开链接看到的永远是最新版本。这是把图以文本形式维护在文档流程里的开发者最在意的收益。

❓ 常见问题：大图如何组织、长名称怎么简、链接是否安全

这里回答 4 个高频问题，覆盖大图排版、命名、链接安全与数据去向。

大图节点太多看不清怎么办

用 subgraph 按层级分组，把图拆成几个区块，结构立刻清晰：

graph TB subgraph 后端 A[API 网关] --> B[订单服务] B --> C[(数据库)] end

时序图参与者名字太长怎么办

用participant U as 用户的写法，给参与者起一个短的显示名，图面立刻简洁。

分享链接是否安全

收到来源不明的链接时，打开前编辑器会检查链接里携带的配置，发现风险项会先提示再剔除，不会直接执行。图表内容本身也只保存在你的浏览器里。

免费吗，数据存在哪

全程免费、无需注册，图表代码不上传服务器，存在你本地浏览器中。

📦 项目信息与贡献：技术栈、源码目录与本地启动

如果你想看源码或跑一个本地实例，这里有技术栈、目录入口和启动命令。

• 技术栈：SvelteKit + Svelte 5 构建，桌面端使用 Monaco 编辑器、移动端使用 CodeMirror，MIT 协议开源；
• 源码入口：编辑器相关组件集中在 src/lib/components/，状态管理与序列化等核心工具在 src/lib/util/，想参与贡献可以从这两个目录入手；
• 本地启动：装好 Node.js LTS 和 pnpm 后执行：

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

本地开发服务器运行在 http://localhost:3000，打开即可体验完整功能。

有图要画、有图要分享时，打开在线版即可，不装任何软件，一分钟完成画图、导出和发链接。

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