mermaid是vscode中最稳定的markdown流程图方案，官方推荐、github原生支持，需安装mermaid preview插件，用`mermaid语法实时预览；plantuml适合专业uml图但依赖java；draw.io适合拖拽绘图但脱离markdown文本流。
VSCode 本身不内置流程图渲染能力，但通过插件 + Markdown 扩展语法可以实现「写代码式绘图」——关键不是选哪个工具最炫，而是看它是否真正支持实时预览、导出可靠、且不破坏你已有的写作流。
Mermaid 是当前 VSCode 中最稳的 Markdown 流程图方案
VSCode 官方推荐、GitHub 原生支持、主流博客平台（如 Hexo、VuePress）也默认兼容 mermaid。它用纯文本描述图表，配合插件就能在编辑器里边写边看。
- 必须安装插件：
Mermaid Preview（by bierner）或Markdown Preview Mermaid Support（官方推荐轻量版） - 在 Markdown 文件中用
```mermaid包裹代码块，例如：```mermaid graph TD A[开始] --> B{判断} B -->|是| C[执行] B -->|否| D[结束] ``` - 右键选择「Open Preview to the Side」即可实时渲染，无需刷新页面
- 注意：部分旧版插件不支持
%%{init: {...}}%%初始化配置，如需主题/字体调整，优先选Mermaid Preview
PlantUML 能画更专业的 UML 图，但本地运行门槛略高
如果你需要时序图、类图、状态机等标准 UML，PlantUML 比 mermaid 表达力更强，但它依赖 Java 环境或远程服务，容易卡在「为什么预览没反应」上。
- 必须先装 Java（JRE 11+），再安装插件：
PlantUML（by jebbs） - 插件默认调用本地
plantuml.jar，路径需手动配进 VSCode 设置：plantuml.jar的绝对路径填入plantuml.jar配置项 - 远程渲染虽免配置，但涉及隐私数据上传，不建议在含敏感逻辑的流程图中启用
- 语法示例（时序图）：
@startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response @enduml
Draw.io（diagrams.net）适合拖拽+代码混合场景，但不是纯 Markdown
它不走 Markdown 语法，而是把图表保存为 XML（.drawio 文件），再通过插件嵌入 Markdown 预览——适合「已有手绘草图要转数字版」或「多人协作需图形微调」的情况。
- 安装插件：
Draw.io Integration（by Hediet） - 新建文件时选
.drawio后缀，画完可导出为 PNG/SVG，并自动生成 Markdown 图片引用： - 不能像 mermaid 那样直接在段落中内联写图，每次改图都要切窗口、保存、再刷新预览
- 优点是支持图标库、对齐吸附、多页文档，适合画架构图或部署拓扑
真正难的不是画出来，而是确保别人用同一套环境打开时不丢样式、不报错、不缺字体。mermaid 最接近「开箱即用」，PlantUML 功能强但得调通环境，draw.io 灵活却脱离 Markdown 文本流——选哪个，取决于你下一张图要解决什么问题，而不是它能画多漂亮。
