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 代码，右侧实时出图；支持导出 PNG/SVG、生成分享链接和嵌入代码。本文覆盖画、导、发、嵌四类操作，并给出本地运行入口。
一分钟画出第一张 Mermaid 图表 🎨
页面是双栏布局：左边编辑器，右边预览，默认自带一张示例流程图。把左侧换成自己的代码即可：
graph TD A[接收需求] --> B[设计] B --> C[开发] C --> D[测试] D -->|不通过| C每改一个字符，右侧就重画一次，不用按任何按钮。不熟悉语法时，点左下Sample Diagrams面板的按钮（Flowchart、Class、Sequence、Entity Relationship、State、Mindmap 等），加载完整示例照着改。
语法报错在哪里看
写错时，报错直接标记在代码区的出错位置，不用逐行找。面板上方还有 Code/Config 两个标签，Config 里直接编辑 mermaid 的 JSON 配置。
如何把图表导出成图片 📷
导出操作都在编辑器下方的Actions面板里。
拿到 PNG 或 SVG 的 3 种方式
- 点PNG或SVG，直接下载图片文件；
- 按钮旁的小外链按钮，打开 mermaid.ink 或 Kroki 渲染的同一张图的在线地址，方便外链；
- 点Copy Markdown，得到 Markdown 图片代码，贴进技术文档引用。
如何自定义 PNG 尺寸
PNG 上方是尺寸选择器。Auto按 2 倍渲染大小输出；放进幻灯片时改成Width或Height，填像素值，另一边按比例缩放。预览区左下角还有手绘开关，打开后图表变手绘风，导出同样生效。
如何生成只读或可编辑的分享链接 🔗
同一张图的 2 种链接
图表代码和配置会 deflate 压缩后编码进地址栏的 URL，链接本身就是状态：
- 只读链接：预览区右上角的全屏按钮打开的就是它，复制地址发给对方，对方只能看图；
- 可编辑链接：当前地址栏的 URL。对方改完后回传一个新链接，一轮协作闭环。
来回发的都是链接，不用再传图片文件。
把图表嵌入自己的网站
点顶栏Share打开对话框，可调主题、深浅色、宽度和高度，并生成两种代码：
- iframe片段：直接粘进 HTML 页面；
- Web component片段：引入组件后嵌入。
嵌入的是可交互的活图：查看者能缩放、平移，不是静态截图。
它能帮你完成哪些实际任务？
- 写技术文档的开发者，把调用时序图存成文本；逻辑变了改代码，图随链接一起更新，文档永远指向最新版；
- 排计划的项目经理，画完甘特图在右侧直接预览时间线，把只读链接丢给团队；
- 需要微调别人图表的协作者，收到可编辑链接改几行，回传新链接，全程不装画图软件。
容易踩的坑与对应解法
- 分享链接打不开：URL 必须包含
#及其后全部字符。不完整时编辑器会显示一张内置排错流程图，第一步就是找发送方要完整地址。 - Timeline 只保留最近 30 条：历史面板每 60 秒自动存一条快照。重要图手动存进Saved，或把分享链接发出去。
- 打开陌生来源的链接弹安全提示：编辑器会检查配置里的 XSS 风险项，先提示再剔除；确认信任来源可点取消保留原样。
- 大图节点密到看不清：用
subgraph按层级分组，每层只放三四个节点。
如何本地运行并找到源码入口 🛠
本地跑起来的 3 步
项目基于 SvelteKit，MIT 协议开源。装好 Node.js 24+ 和 pnpm 后：
git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor && pnpm install && pnpm dev -- --open浏览器自动打开本地预览，可以开始改代码。
源码从哪看起
- 界面组件集中在 src/lib/components/，编辑器、预览区、Actions 和 Share 对话框都在这里；
- 状态管理、URL 序列化、安全过滤在 src/lib/util/，其中 state.svelte.ts 是全部数据流的核心；
- 端到端测试在 tests/，跑一遍主流程就能看清页面路径。
下一步就拿一个接口调用时序图开练：打开编辑器贴代码、导出 PNG、复制分享链接，本文四类操作一次全过。
【免费下载链接】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），仅供参考
