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 文本流——选哪个,取决于你下一张图要解决什么问题,而不是它能画多漂亮。










