最稳的离线导出方案是使用 cli 工具生成自包含 html：mermaid 用 npx @mermaid-js/mermaid-cli，plantuml 用 plantuml -thtml，draw.io 用官方 drawio-cli，均支持离线打开且不依赖 vs code。
vscode 插件画的流程图怎么导出成网页能直接打开的格式
VS Code 里用 PlantUML、Mermaid Preview 或 Draw.io Integration 画的流程图，默认只是编辑器内预览，不生成独立 HTML 文件。想在浏览器里打开，得手动导出或配置自动渲染。
关键不是“显示”，而是“导出为静态可执行的 HTML / SVG / PNG”——否则换台电脑、关掉 VS Code 就看不到了。
-
Mermaid Preview插件：右键预览窗口 →Export as HTML，生成带内联 JS 的单 HTML 文件，双击即可打开（注意：部分 Mermaid 版本导出后需联网加载 CDN 脚本，离线打不开） -
PlantUML插件：默认只支持导出 PNG/SVG，要 HTML 得装本地 PlantUML 服务 + 配置plantuml.server，再用Preview Diagram右键选Copy HTML手动粘贴 -
Draw.io Integration：文件 →Export As→HTML，勾选Include a copy of draw.io，导出的是自包含 HTML，离线可用
为什么直接复制预览页源码粘到 HTML 里常失败
因为 VS Code 预览页是 Webview，用了私有 CSS 类名、非标准 DOM 结构，还可能依赖插件注入的 JS 模块。直接扒源码粘过去，mermaid.initialize 不执行、drawio 初始化脚本缺失、SVG 坐标错乱都是常态。
- Mermaid 预览页通常用的是
mermaid@10.x，但你本地 HTML 引的 CDN 可能是11.x，语法不兼容（比如flowchart TD在 11.x 必须写成flowchart LR才渲染） - Draw.io 预览页的图表数据存在
window.parent通信里，没初始化drawio编辑器实例就拿不到 JSON 数据 - 所有插件预览页都禁用了
file://协议下的 fetch/XHR，所以导出 HTML 若引用外部 JS，双击打开必报CORS错误
最稳的离线方案：用 CLI 工具生成 HTML
绕过 VS Code 插件限制，用命令行工具把源码转成真正自包含的 HTML。适合需要发给同事、嵌入文档、或做 CI 渲染的场景。
- Mermaid：
npx @mermaid-js/mermaid-cli -i input.mmd -o output.html -t dark，输出 HTML 自带压缩版 mermaid.min.js，离线可用 - PlantUML：启动本地服务
java -jar plantuml.jar -picoweb，再用 curl 提交文本生成 SVG/HTML；或用plantuml -thtml直接吐 HTML 片段（需自己补骨架） - Draw.io：用官方
drawio-cli（非 npm 包，得下 release），命令如drawio -x -f html -o out.html diagram.drawio
注意：mermaid-cli 默认用 securityLevel="loose"，若流程图含 JS 逻辑（比如 click 事件），导出 HTML 里会失效——这是故意设计，防 XSS，别硬改。
浏览器打不开？先查这三件事
不是代码问题，大概率卡在协议、路径或 MIME 类型上。
- 双击打开 HTML 文件，地址栏是
file:///xxx.html？Mermaid/Draw.io 的某些版本会拒绝在file://下运行，必须起个本地 server（npx serve或python3 -m http.server） - 图表是空的，控制台报
Cannot read property 'insertBefore' of null？说明容器 DOM 元素没找到，检查导出 HTML 里有没有对应<div id="graph"></div>，且 mermaid.render() 调用时机是否早于元素挂载 - 用 VS Code Live Server 插件打开却显示白屏？确认插件没把
.mmd或.drawio文件当成静态资源拦截了，这类文件默认不被服务，得手动加 mime 映射
真正的麻烦点不在“怎么画”，而在于“谁负责渲染”——VS Code 插件只管编辑时预览，不承诺交付能力。一旦离开编辑器环境，就得明确指定渲染链路：是前端 JS 动态解析？还是构建时静态生成？漏掉这一环，所有“显示”都是临时的。
