vscode 安装 drawio-diagrams 插件后可直接内嵌编辑流程图；需用 .drawio/.dio 后缀、配置文件关联、ctrl/cmd+enter 渲染、调高缩放导出清晰 png，utf-8 编码与 lf 换行保障协作。
VSCode 本身不带流程图功能，但装上正确的 drawio-diagrams 插件后，就能直接在编辑器里画专业流程图——不是预览、不是跳转浏览器，是真正在 VSCode 窗口里拖拽节点、连线、导出 SVG/PNG。
关键不是“能不能”，而是“装对没、配好没、用对后缀没”。下面直奔实操。
怎么装对插件？别被名字骗了
VSCode 扩展市场里搜 draw.io 会出来一堆同名插件，但只有两个是当前可用的官方维护版本：
-
drawio-diagrams（作者hediet），最新版已支持 VSCode 1.85+ 的签名验证 -
Draw.io Integration（作者jgraph），功能更贴近原生 draw.io Web 版
必须避开这些名字：
-
vscode-drawio（已停更，2024 年起不再维护） -
draw.io（无连字符，旧版，不支持内嵌编辑）
安装失败常见原因：ERR_CONNECTION_REFUSED 或证书错误。国内用户可临时配置 http.proxy，或去 GitHub Releases 下载 .vsix 文件，用命令面板执行 Extensions: Install from VSIX 离线安装。
新建文件为什么打不开编辑器？后缀和关联是硬门槛
插件只响应 .drawio 和 .dio 后缀。哪怕你把合法 XML 内容粘进 flow.md 或 arch.xml，双击也只会显示源码，不会启动图形界面。
- 正确做法：右键资源管理器 → 新建文件 → 命名为
deploy.drawio（必须含.drawio） - 如果双击仍显示 XML，右键 →
Open With→ 选Draw.io Diagram - 一劳永逸：在
settings.json中加这一行："files.associations": { "*.drawio": "drawio" }
注意：Ctrl+Enter（Windows）或 Cmd+Enter（macOS）是触发 XML 解析的关键快捷键，不是 Ctrl+S。粘贴完 XML 后按它，才能让图形渲染出来。
微软正式发布 Visual Studio Code 1.118 版本 。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话 。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本 。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控 。
导出 PNG 模糊、文字发虚？缩放值决定清晰度
VSCode 内嵌的 draw.io 渲染器默认以 1x 缩放渲染，直接导出 PNG 必然模糊，尤其小字号中文或英文细体字。
- 导出前先调高视图缩放：右下角状态栏点击缩放百分比 → 选
200%或300% - 再点
File → Export as → PNG，勾选Transparent background和Include a copy of the diagram - 如果仍有锯齿，检查字体：避免用系统未安装的
Helvetica Neue，改用Verdana或Segoe UI，并在样式栏手动设fontFamily=Verdana
SVG 格式不受影响，放大不失真，适合嵌入 Markdown 或技术文档。
中文乱码、协作冲突、图层混乱？编码和 Git 配置不能省
团队共用 .drawio 文件时，最容易踩的不是绘图问题，而是基础环境不一致：
- 文件编码必须是
UTF-8（VSCode 右下角确认，不是GBK或UTF-8 with BOM） - 换行符统一为
LF（Windows 用户注意：设置"files.eol": "\n"） - 多人编辑同一文件时，不要手动合并 XML；用
Git工具对比差异，重点看<mxgraphmodel></mxgraphmodel>内部的<root></root>结构变化 - 复杂架构图建议启用图层（
View → Layers），比如分infra、app、monitoring层，避免节点堆叠难维护
真正卡住人的往往不是“怎么画”，而是“为什么改完别人打不开”“为什么导出图片糊成一片”“为什么 Git diff 一堆乱码”。这些细节不提前对齐，协作效率反而比用 Visio 还低。
