在vscode中编写预览PlantUML与Mermaid图表需正确安装插件、配置环境并使用快捷键：PlantUML依赖java和Graphviz，推荐官方插件并用Ctrl+Alt+P预览；Mermaid在VSCode 1.84+原生支持，需开启mermaid.enabled，用Ctrl+K V预览；两者均支持分栏编辑与热重载，注意语法版本与中文字体配置。
在 VSCode 中编写和预览 PlantUML 与 Mermaid 图表，关键在于装对插件、配好环境、用对快捷键——不需要离开编辑器就能实时看到图表效果。
PlantUML：先装 Java 和 Graphviz，再配插件
PlantUML 依赖 Java 运行时（JRE/JDK ≥ 8），部分图形（如部署图、对象图）还需 Graphviz 的 dot 命令支持。windows 用户建议直接下载安装包；macOS 可用 Homebrew：brew install graphviz；linux 用户按发行版安装 graphviz 包即可。
VSCode 插件推荐使用官方维护的 PlantUML（作者：jebbs）。安装后，在设置中确认以下两项：
- plantuml.jar 路径是否正确（可留空让插件自动下载，或手动指定本地路径）
- plantuml.server 可设为
https://www.plantuml.com/plantuml（在线渲染，无需本地 Java）
写完 @startuml 开头的代码块后，按 Ctrl+Alt+P（Windows/Linux）或 Cmd+Option+P（macOS），选择 Preview Current Diagram，右侧就会弹出 svg 预览窗。
Mermaid：开箱即用，但要注意语法版本
Mermaid 插件（如 Mermaid Preview 或 VSCode 内置支持）基本无需额外配置。VSCode 1.84+ 已原生支持 mermaid 代码块渲染（需开启 "mermaid.enabled": true）。
注意：不同 Mermaid 版本语法有差异。比如旧版用 graph td，新版推荐 flowchart TD；类图中 classDef 必须放在定义之后才生效。建议在文件顶部加注释注明版本：
保存文件后，右键点击代码块 → Open Preview，或用快捷键 Ctrl+K V（聚焦预览窗）。
并排编辑与预览，提升效率
别让预览窗口遮住代码。推荐将编辑器分成左右两栏：左写代码，右点开预览（拖动预览标签到右侧分组即可）。PlantUML 预览支持热重载——改完保存，预览图自动刷新；Mermaid 预览默认也支持，若不生效可检查插件设置中的 autoUpdate 是否开启。
小技巧：
- PlantUML 支持导出 PNG/SVG：预览页右上角三个点 → Export as PNG
- Mermaid 预览页右键可复制 SVG 源码，粘贴到支持 html 的地方直接显示
- 在 markdown 文件里混写图表？确保代码块语言标识准确：
```plantuml或```mermaid
常见问题速查
图表不渲染？先看右下角状态栏有没有报错提示。PlantUML 常见报错如 java not found，说明没配好 JDK；Mermaid 报 Parse Error，大概率是缩进错误或用了新语法但插件版本旧了。
字体中文乱码？PlantUML 默认不支持中文字体。可在 diagram 开头加：
skinparam defaultFontName Noto Sans CJK SC
（需系统已安装该字体，或换用 microsoft YaHei 等本地常见中文字体）
基本上就这些。配一次，以后写图就跟写代码一样顺手。