免费的 Mermaid 在线编辑器：敲几行文本，3 分钟拿到能直接导出分享的图

免费的 Mermaid 在线编辑器：敲几行文本，3 分钟拿到能直接导出分享的图

【免费下载链接】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 在线图表工具：你在文本框里敲几行描述，它当场把流程图、时序图、甘特图画出来，帮你省掉"装绘图软件、手动导出、再贴回文档"这一整套麻烦。

🏠 一条命令把编辑器搬进内网

公司内网常连不上外网，而画图这件事还得接着干。仓库自带 Docker 配置，两条命令就能在你自己的机器上跑起同款：

git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor && docker compose up --build

build 完成后浏览器打开 http://localhost:3000，得到的编辑界面和在线版一模一样，数据全留在本地。

✏️ 改开头关键字，图表类型当场切换

写文档最常做的就是随手画个流程。把几行文本贴进编辑器，右边立刻出图，边敲边重绘，不用点任何刷新按钮：

flowchart TD A[开始] --> B[需求确认] B --> C[开发] C --> D[评审]

想换成时序图或甘特图，只需把首行的flowchart改成sequenceDiagram或gantt，其余语法几乎照旧——类型切换就是这么低门槛。渲染相关的组件都放在 src/lib/components/ 里，想确认某种行为怎么实现的，翻起来不费劲，各图类型的完整支持情况可看 README。

📦 一键导出 PNG、SVG 和 Markdown 图链

图改到满意，下一步就是带走它。Actions 面板里三种常用方式都现成：下载 PNG 直接当插图；下载 SVG 拿矢量文件，放大不糊、跨设备显示一致；嫌下载麻烦就点"复制 Markdown"，得到的是一段按当前代码实时渲染出的图链，贴进文档立刻出图，代码一改链接内容跟着变，省去每次重新导出的动作。

🔗 生成分享链接，版本快照自动兜底

把图发给同事不用传附件：拷一个查看链接，对方打开就是只读页面，免注册免安装；发编辑链接，对方改完还能回传新链接。与此同时，编辑器会自动保留最近 30 次改动（每分钟存一次），你也可以手动命名快照给关键节点打标，回头按名字找回那一版。这些记录只落在你自己的浏览器 localStorage 里，不落任何服务器，逻辑在 src/lib/util/persist.svelte.ts 里可以直接验证。

技术栈是 Svelte Kit + TypeScript + Vite，本地开发两条命令就够：pnpm install然后pnpm dev。把图写成文本还有个附带的好处：图源文件能直接进版本库，改图的 diff 像代码一样可读，这比一张"改了点什么"看不出来的图片文件省心太多。

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