Mermaid 离线图编辑器：一条命令构建完全本地、零 CDN 依赖的本地图编辑器

Mermaid 离线图编辑器一条命令构建完全本地、零 CDN 依赖的本地图编辑器【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid内网、断网机器或者办公网 Wi-Fi 抽风的时刻在线画图工具会跟着网络一起阵亡。Mermaid 官方仓库内置的mermaid-local-editor本地编辑器就是为这类场景准备的完全本地化、离线可用、零外部请求。设计思路这个小包凭什么能离线离线化的第一个问题是依赖谁来提供。这个子包的答案很朴素构建期把mermaid.min.js与purify.min.js两个运行时文件连同编辑器自身全部收进同一个 dist 目录的vendor/子目录static/index.html 只按本地相对路径引用它们。整个服务器在构建完成后就是一个文件夹——没有后端、没有数据库目录拷到任何一台内网机器都能跑。依赖本地化只解决了一半更棘手的是渲染用户输入这件事。编辑器并不信任自己渲染出来的 SVG先净化再写进一个沙箱 iframesandboxallow-same-origin不放行脚本预览区与主页面之间因此隔出明确的边界。这正是它敢不对源码做任何服务端校验的底气。至于状态干脆全部留在浏览器里。每张图的源码、缩放与平移位置都写进 localStorage——没有账号、没有同步代价是只在当前机器有效但这恰恰符合内网工具的简洁不依赖任何基础设施。 一条命令构建本地预览产物与验证方式在仓库根目录只需执行一条命令pnpm build:mermaid:full这一行的背后是清理旧产物、编译 Mermaid 运行时、把 static/ 下的编辑器源码与 vendor 依赖一并拷入输出目录最后起一个本地静态服务。最终产物在packages/mermaid/dist/mermaid-local-editor/是纯静态站点顶层index.html、styles.css、app.jsjs/里是 config、renderer、storage、ui、navigation 五个模块vendor/装着mermaid.min.js和purify.min.js。验证同样直接浏览器打开http://localhost:8081就能看到编辑器。而因为产物零网络依赖你甚至可以把目录拷到离线机器上直接打开全程不需要网。 实际能干什么三个使用场景边写边预览缩放、平移与报错提示左侧文本框里每敲一个字右侧预览即时刷新语法写错不会白屏预览区会直接弹出红色错误信息。图太大时滚轮缩放被钳制在 0.24 倍之间、拖拽平移±20000px 兜底Reset View 一键回到 1:1。多图表管理、自动保存与 SVG 一键导出编辑器不止装得下一张图顶部下拉框可切换多张命名图New / Delete 都是一次点击。更关键的是 300ms 防抖自动保存——忘记点 Save 也不会丢内容。Export SVG 会把当前 SVG 从 iframe 里取出、转成 Blob以图名.svg下载这是离线环境下画完图→交付的最后一步。缩放位置按图分别记忆切回去仍在原来的位置。不用鼠标键盘在节点间跳转面向可访问性static/js/navigation.js 做了节点巡览按 ArrowDown 走到下一个节点ArrowUp 退回。当前节点有蓝色描边加光晕视口还会自动平移跟随——偏移被故意取 1/6 而非严格居中让下一个节点始终留在视野里可以顺着整张流程图一路走下来。注意焦点在源码框时按键不会被劫持打字照旧。主链路深潜你敲的每行字到画面之间发生了什么这条链路是典型的 XSS 攻击面任意文本 → SVG → 插入 DOM。它的解法是一道三道关层层补漏。第一关在渲染端。static/js/config.js 初始化时设置的关键项mermaid.initialize({ startOnLoad: false, theme: dark, securityLevel: strict, deterministicIds: true, htmlLabels: false, flowchart: { useMaxWidth: false }, });securityLevel: strict在解析层就掐掉点击链接与脚本注入deterministicIds让生成的节点 id 稳定导航模块才能可靠地定位g.node。第二关在内容层。static/js/renderer.js 拿到mermaid.render的 SVG 字符串后先过一遍DOMPurify.sanitize()仅放行渲染必需的foreignObject与xmlns再遍历 DOM 剥掉所有on*内联事件属性。最后一关在执行层。净化后的 SVG 被写进沙箱 iframe不授予allow-scripts残余载荷只能被看见、无法被执行。链路上任何异常也会被捕获成可读的红色错误提示而不是白屏。复用清单可以搬进自己项目的四个离线化模式模式做法适用场景构建期 vendor 本地化构建时把运行时与 purify 拷进vendor/HTML 只引相对路径任何需要私有化、内网化的前端子应用strict 渲染 净化 沙箱strict配置 → DOMPurify → 沙箱 iframe 三道关一切渲染用户生成 HTML/SVG 的地方localStorage 多图管理{name: {src, view}}结构 300ms 防抖自动保存无需后端的轻量工具状态共享视图状态单例{scale, panX, panY, iframeRef}由渲染/缩放/导航共用需要同步同一画布视图的多个模块整个编辑器的业务代码不到十个文件。如果你也想在内网里用上 Mermaid或给自己的项目搭一个渲染→净化→沙箱的预览工作台这是很干净的起点。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考