VSCode 中用 Mermaid 实时画流程图需安装 Mermaid Preview 或 Markdown All in One 插件，写 mermaid flowchart LR 代码块后 Ctrl+Shift+V 预览；架构图推荐 PlantUML；常见报错源于语法过时、Graphviz 未安装或文件语言模式错误。
用 Mermaid 插件在 VSCode 里实时画流程图
VSCode 本身不内置绘图功能，但通过 Mermaid Preview 或更推荐的 Markdown Preview Mermaid Support（配合官方 Markdown 预览），能直接在 .md 文件里写代码生成流程图。关键不是“画”，而是“写描述，自动渲染”。
实操建议：
- 装插件：
Mermaid Preview（独立预览）或Markdown All in One+ 开启 Mermaid 支持（集成度更高） - 新建
diagram.md，输入以```mermaid开头的代码块，比如：
```mermaid
flowchart LR
A[用户登录] --> B{验证成功？}
B -->|是| C[进入主页]
B -->|否| D[提示错误]
```
按 Ctrl+Shift+V（Windows/Linux）或 Cmd+Shift+V（macOS）唤起预览，图就出来了。注意：不要用 ```graph TD 这类旧语法，新版统一用 flowchart LR/TB。
画架构图时该选 PlantUML 还是 Mermaid
Mermaid 对简单流程图、状态图友好，但画带容器分组、跨服务边框、图标标注的典型架构图（比如微服务部署图）容易力不从心；PlantUML 更适合这类场景，尤其配合 cloud、aws、azure 等官方扩展库。
实操建议：
- 装插件：
PlantUML（作者：jebbs），并本地安装 Graphviz（dot命令必须可用）和可选的 PlantUML jar - 新建
arch.puml，写：
@startuml
package "Frontend" {
[Vue App] as fe
}
package "Backend" {
[Spring Boot] as be
[PostgreSQL] as db
}
fe --> be : HTTPS
be --> db : JDBC
@enduml
右键 → Preview PlantUML，即时出图。Mermaid 的 flowchart 不支持 package 分组语义，硬套会丢失层次感。
为什么预览空白或报错 Parse error on line 1
最常见原因是语法版本错位或插件没生效。Mermaid v10+ 强制要求声明图表类型，且不兼容旧版 graph LR 写法；PlantUML 报错则多因 dot 命令未加入系统 PATH。
排查要点：
- 确认插件已启用：打开命令面板（
Ctrl+Shift+P），搜Mermaid: Toggle Preview，能触发说明插件正常 - Mermaid 错误：把
graph LR全部换成flowchart LR，删掉所有中文标点（如全角括号、顿号） - PlantUML 错误：终端运行
dot -V，若提示 command not found，需重装 Graphviz 并重启 VSCode - 文件关联：右下角检查当前文件语言模式是否为
Mermaid或PlantUML，不是的话点它手动切
导出图片时模糊或缺字体
Mermaid 预览默认导出 SVG，缩放无损，但复制到 Word/PPT 可能糊；PlantUML 默认导出 PNG，中文字体常显示为方块。
解决办法：
- Mermaid：右键预览页 →
Save As SVG，用浏览器打开再另存为 PNG（质量可控） - PlantUML：在
.puml头部加字体声明，例如：skinparam defaultFontName "Microsoft YaHei"（需系统已安装该字体） - 通用技巧：VSCode 设置里搜
mermaid.theme，设为neutral可避免暗色主题下文字隐形
真正卡住人的往往不是语法，而是插件链路中某个环节没打通——比如忘了装 Graphviz，或者用了带空格的路径装 PlantUML jar。先跑通一个最简例子，再叠复杂度。
