Mermaid Live Editor 快速入门：3 种方式在浏览器里编辑和预览 Mermaid 图表

Mermaid Live Editor 快速入门3 种方式在浏览器里编辑和预览 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 语法的人大概都有过这种经历改一行代码存盘、重新构建、刷新页面结果还是报错而且错误信息只告诉你第几行附近有问题。Mermaid Live Editor 就是一个把这段循环拆掉的开源工具——左侧输入语法右侧立刻渲染出图改完就能生成链接发给别人。它支持流程图、时序图、甘特图、类图、饼图等 Mermaid 的全部图表类型适合写技术文档的开发者、画业务流程的产品经理以及任何不想为一张图专门装软件的人。 快速上手3 条路径跑起来最短路径是直接使用官方在线版浏览器打开就能画不用注册不用配置。打开后在左侧随便输入几行试试graph LR A[开始] -- B{是否通过} B --|是| C[结束]右侧会同步出现渲染结果语法写错时错误信息会直接标在预览区。需要离线或内网使用的话一条 Docker 命令就能部署到本地docker run --platform linux/amd64 -p 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor然后访问http://localhost:8000。注意这个发布镜像用的是默认构建参数如果你要改渲染服务等配置得自己构建镜像构建参数说明见 README.md。要二次开发就克隆源码git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev项目基于 SvelteKit 开发跑起来需要较新的 Node24 及以上和 pnpmcorepack enable pnpm可启用。 功能详解先认识这 3 个最实用的点左侧改代码、右侧出图的实时预览编辑器带语法高亮和提示右侧预览区在你停笔的瞬间完成渲染。图越大、调整越频繁这个功能的价值越明显调一个节点的位置或连线方向不用再走保存—刷新的流程。对工作流的改变是把反复验证结构正确性的时间从分钟级压到秒级你可以连续快速地试错。用一条 URL 传递图表点 Share 按钮会生成两种链接只读链接给别人看图可编辑链接则允许对方改完后生成新链接发回给你。图表内容被编码进链接地址本身服务端不存你的图。这个设计让把图发出去变成复制一行文字的事不依赖共享文档权限也不留存在服务器端。相关实现在 src/lib/components/Share.svelte。导出 SVG 与嵌入网页Actions 面板里可以把当前图导出为 SVG 等格式也可以直接复制一段 iframe 或 Web Component 代码。当图表要长期放在博客、内部 wiki 或产品页面里时嵌入代码比贴一张静态图更省事页面加载时实时渲染不会出现图片失效。 使用场景3 个具体做法开发者写接口文档要在文档里展示一次 API 调用的完整交互 → 写一段sequenceDiagram时序图确认渲染无误后把只读分享链接贴进文档或复制 iframe 代码嵌入 → 文档里只有一个链接后续图有改动时换掉链接即可不用重新导图和排版。技术负责人做复盘时间线故障复盘需要一张各步骤起止时间清晰的图 → 用甘特图语法画出各阶段调好样式后导出 SVG 放进复盘报告 → 报告在任意设备上打开都是一致的矢量图放大不糊。产品经理拉齐多方理解画完业务流程图后需要开发、测试各提一轮意见 → 发可编辑链接给团队谁改完都把新链接发回 → 几轮迭代下来你手里始终是最新版链接不需要维护一个共享文档的权限和版本。⚠️ 常见坑4 个容易踩到的问题图太大看不清全貌预览区自带平移和缩放工具条拖拽平移、滚轮缩放比反复改代码缩小节点更直接。语法报错不知道在哪行预览区的错误信息是可点击的点一下会定位到对应位置别手动数行号。内网部署时图片链接打不开默认构建会依赖外部渲染服务mermaid.ink生成 PNG/SVG 链接纯内网环境下构建镜像时把对应参数设成空值即可关闭这两类链接。直接npm install跑不起来项目要求 Node 24 和 pnpm版本不够会先卡在依赖安装这一步先把环境对上再谈其他。一句话总结Mermaid Live Editor 把写语法—看到结果—把结果发出去压缩进了同一个页面在线版零门槛Docker 一条命令就能私有化。建议的第一步很简单——打开在线版用上面的示例画一张流程图点 Share 复制只读链接发给自己把整条链路走一遍你就知道它适合放进你的哪些文档里了。【免费下载链接】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），仅供参考