Draw.io Integration插件可在VSCode中本地绘制、保存和导出流程图，无需浏览器或在线服务：安装后新建.drawio文件，使用内嵌编辑器拖拽绘图，支持XML保存与PNG/SVG/PDF导出，且图表可随代码纳入Git版本管理。
直接在 VS Code 里画流程图，不需要切浏览器、不依赖在线服务、图和代码同目录管理——这事现在靠 Draw.io Integration（现名 Diagrams）就能稳稳落地。它不是“能用”，而是真正适配开发者工作流：改完代码顺手更新流程图，提交 Git 时图表自动版本化，预览无延迟，导出不糊。
装 Draw.io Integration 前先确认 VS Code 版本和文件后缀
插件要求 VS Code 1.70+，旧版可能加载失败或导出异常；安装后它只对 .drawio 后缀文件生效，新建文件必须手动命名为 xxx.drawio（不是 .xml 或 .png），否则编辑器不会触发 Draw.io 编辑界面。
- Windows/macOS/Linux 都支持，无需额外 Java 或 Node 运行时
- 别搜 “vscode-drawio” —— 那是旧版已停更的分支，当前官方维护的是
hediet.vscode-drawio - 装完不用重启，新建
.drawio文件后，右下角状态栏会显示 “Draw.io: Ready”，说明加载成功
Mermaid Preview 渲染失败？大概率是语法或插件冲突
如果你在 Markdown 里写 mermaid 代码块却预览空白、报 Mermaid syntax error，90% 是语法版本错位或插件打架。Mermaid v10 不再兼容 v9 的写法，而网上大量示例仍沿用老语法。
- 中文节点必须加双引号：
"用户登录" --> "验证 Token"，不能写用户登录 --> 验证 Token - 禁用已废弃指令：删掉
linkStyle、classDef中含空格的类名（如classDef red-bg→ 改成classDef red_bg） - 别同时启用
Markdown Preview Mermaid Support和Markdown Preview Enhanced，后者常拦截渲染通道，留一个即可 - 检查右下角是否弹出错误提示 —— 有就点开看具体哪行，通常定位到
graph TD后第一行中文节点没引号
导出 PNG 模糊？关键在导出路径和分辨率设置
Draw.io Integration 默认导出为 SVG，但很多人右键选 “Export as PNG” 却忽略右上角齿轮图标里的分辨率开关，结果导出 96dpi 位图，放大就发虚、字体锯齿。
- 导出前务必点击画布右上角齿轮 →
Export→ 勾选Use higher resolution (2x) - 别用右键菜单里的 “Copy as PNG”，它固定走 1x 分辨率，无法调整
- 图中含等宽字体（如代码块）时，可先手动把画布缩放调到 150%，再导出，缓解字体渲染模糊
- 插件低于 v1.5.0 存在 DPI 计算 bug，升级到最新版（截至 2026 年 4 月已是 v1.6.2）
真正难的不是画图，而是让图和代码保持同步。很多人画完就扔在文档角落，等代码重构后流程图早就不对了。用 .drawio 文件配合 Git 提交，每次 git diff 都能看到图形逻辑变更，这才是程序员该有的绘图姿势。
