在VSCode中编写预览PlantUML与Mermaid图表需正确安装插件、配置环境并使用快捷键：PlantUML依赖Java和Graphviz，推荐官方插件并用Ctrl+Alt+P预览；Mermaid在VSCode 1.84+原生支持，需开启mermaid.enabled，用Ctrl+K V预览；两者均支持分栏编辑与热重载，注意语法版本与中文字体配置。
在 VSCode 中编写和预览 PlantUML 与 Mermaid 图表，关键在于装对插件、配好环境、用对快捷键——不需要离开编辑器就能实时看到图表效果。
PlantUML 依赖 Java 运行时（JRE/JDK ≥ 8），部分图形（如部署图、对象图）还需 Graphviz 的 dot 命令支持。Windows 用户建议直接下载安装包；macOS 可用 Homebrew：brew install graphviz；Linux 用户按发行版安装 graphviz 包即可。
VSCode 插件推荐使用官方维护的 PlantUML（作者：jebbs）。安装后，在设置中确认以下两项：
https://www.plantuml.com/plantuml（在线渲染，无需本地 Java）写完 @startuml 开头的代码块后，按 Ctrl+Alt+P（Windows/Linux）或 Cmd+Option+P（macOS），选择 Preview Current Diagram，右侧就会弹出 SVG 预览窗。
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 或 ```mermaid
图表不渲染？先看右下角状态栏有没有报错提示。PlantUML 常见报错如 java not found，说明没配好 JDK；Mermaid 报 Parse error，大概率是缩进错误或用了新语法但插件版本旧了。
字体中文乱码？PlantUML 默认不支持中文字体。可在 diagram 开头加：
skinparam defaultFontName Noto Sans CJK SC（需系统已安装该字体，或换用 Microsoft YaHei 等本地常见中文字体）
基本上就这些。配一次，以后写图就跟写代码一样顺手。
以上就是在VSCode中编写和预览PlantUML及Mermaid图表的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
337
收藏
