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 的思路是把图写成文本，改一行图就变。mermaid-live-editor 是 mermaid 团队出品的免安装在线图表编辑器：浏览器打开即写即画，地址栏里的链接直接当分享用，还能导出 PNG/SVG 或生成嵌入页面的代码片段。

最小体验：把示例图换成你的

打开在线版，页面就是两栏：左侧代码、右侧预览，示例图已经放好，照着改就行。把左侧示例替换成自己的语法，比如这段判断流程：

写错的地方会在对应代码行标出来，停笔右侧自动重画。底部的 Actions 卡片里可下载 PNG 或 SVG，PNG 能指定输出宽度或高度，也能把图片、Markdown 引用直接拷进剪贴板。

反复改图：时间线自动存档

History 面板的 Timeline 每分钟自动存一份快照，想固定某个版本就点 Save 打个书签，快照还能整体导出成 JSON。从 Gist 载入图时，各次修订会列在 Revisions 标签里，可以逐个回看。来回改好几轮的架构图，这条时间线省掉了"最终版2、最终版3"式的文件名焦虑。

不传文件的分享方式

每次改动后，整张图会被压缩塞进地址栏，链接本身就等于图，这套压缩逻辑在 src/lib/util/serde.ts。对方只想看，发 /view 路由，页面只剩预览区、没有编辑按钮；想让对方顺手改两句，发 /edit 路由，对方改完地址栏自动变成新版本，把新链接拷回来，一次协作就结束。目标是自己的博客或文档站时，点 Share 能生成 iframe 或 web component 片段，挑主题、调宽高，贴进页面图就"活"着，不再是截图。分享弹窗里还写明：图的内容不离开浏览器，内部架构图也可以放心画。

主题被自动改掉是预期行为

配置里的 theme 字段由编辑器托管：每次校验后，主题若缺失、或是该图类型默认主题家族（含对应暗色变体），会被重置为该图类型的默认值，并跟随站点明暗切换；只有你手动选了家族之外的主题才会原样保留。所以别惊讶于"我在 config 里写了主题，它自己变了"，判断逻辑在 src/lib/util/mermaid.ts。

自建部署时关掉外部渲染依赖

页面上的 PNG/SVG 远程链接依赖 mermaid.ink 服务，Kroki 按钮依赖 Kroki 服务。自建部署时把构建变量 MERMAID_RENDERER_URL、MERMAID_KROKI_RENDERER_URL 置空即可关掉这些入口，你的部署就不再依赖外部服务。

本地跑起来的最小命令

需要 Node.js 和 pnpm，克隆后启动开发服务器：

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

界面代码在 src/lib/components/，README 里还有自建部署的完整配置项。

先打开在线版，把示例图改成自己的，第一张图不到一分钟。

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