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 或 SVGPNG 能指定输出宽度或高度也能把图片、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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考