免费的 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-editormermaid-live-editor是一款免费的 Mermaid 在线图表工具你在文本框里敲几行描述它当场把流程图、时序图、甘特图画出来帮你省掉装绘图软件、手动导出、再贴回文档这一整套麻烦。 一条命令把编辑器搬进内网公司内网常连不上外网而画图这件事还得接着干。仓库自带 Docker 配置两条命令就能在你自己的机器上跑起同款git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor docker compose up --buildbuild 完成后浏览器打开 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考