VS Code需依赖插件绘制流程图或架构图：PlantUML适合程序员写代码生成可版本控制的流程图，需Java环境；draw.io Integration支持拖拽式架构图，离线可用、格式兼容；Mermaid Preview仅适合简单草稿，存在中文渲染、功能缺失和导出限制等问题。
vs code 本身不内置流程图或架构图绘制能力，但通过插件可以高效完成这类工作——关键不是“能不能画”，而是“选哪个插件、怎么配、画出来能不能导出和协作”。
用 PlantUML 写代码生成流程图（适合程序员）
这是最主流的方案：用文本语法描述结构，实时预览成图，版本友好、可复用性强。
-
PlantUML插件（作者：jebbs）必须配合 Java 运行时，安装后需确认java -version可执行；否则预览会报错Cannot find Java - 新建文件命名为
xxx.puml，输入：@startuml start :用户登录; if (验证成功?) then (yes) :跳转主页; else (no) :提示错误; endif stop @enduml
- 按
Ctrl+Shift+P→ 输入PlantUML: Preview Current Diagram即可看到渲染图；导出为 PNG/SVG 需右键预览窗口 →Export As - 注意缩进和空行会影响解析——
if块内不能混用 tab 和空格，建议全用 2 空格缩进
用 Draw.io Integration 拖拽画架构图（适合快速原型）
本质是把 VS Code 当作 draw.io（现名 diagrams.net）的本地编辑器，支持离线使用、自动保存到本地文件，且格式与在线版完全兼容。
- 安装插件后，新建文件 → 右下角点击
draw.io→ 选择Create New Diagram，会自动生成.drawio文件 - 所有操作和网页版一致：拖组件、连箭头、双击编辑文字；右键节点可设样式、添加超链接，适合画微服务部署图、K8s 架构等
- 导出时注意：默认导出为 XML（即
.drawio），如需分享给非技术人员，务必手动导出为 PNG 或 SVG（右键画布 →Export As） - 不支持直接嵌入 Mermaid 或 PlantUML 代码块——想混排需另存为 HTML 后手动插入，不是开箱即用的“混合语法”
为什么别轻易用 Mermaid Preview 插件画复杂流程图？
它对简单序列图、状态图很轻量，但流程图（graph TD）在 VS Code 中存在几个硬伤：
- 中文节点常出现换行错位或字体缺失，需手动配置
mermaid.theme和系统字体路径，Windows 上尤其麻烦 - 不支持子图嵌套（
subgraph）、跨层级连接线（linkStyle）等进阶功能，一加就报错Parse error on line 1 - 预览窗口无法缩放、不能导出高清图，仅适合临时草稿，不适合交付文档
- 如果你已在用 GitBook 或 Typora，Mermaid 渲染更稳；但在 VS Code 里，它只是“能看”，不是“能用”
真正卡住多数人的不是插件装不上，而是画完图之后发现：导出格式不匹配需求、协作时同事打不开、或者改了代码逻辑却忘了同步更新图。所以优先选 PlantUML（代码即图）或 draw.io（所见即所得），别为了“看起来高级”去折腾冷门插件。
