在 VS Code 中本地配置 Markdown Preview Enhanced + PlantUML + Graphviz(dot)

原创于 2026-03-30 14:35:11 发布 · 386 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#linux #vscode #uml

【Linux 实战】在 VS Code 中本地配置 Markdown Preview Enhanced + PlantUML + Graphviz(dot)

适用场景：
✅ Linux 开发环境
✅ 技术文档 / 架构设计 / 流程图
✅ 企业内网 / 安全敏感环境（不走公网）
✅ Markdown 一体化预览 UML

一、背景与目标

在日常开发和技术分享中，我们经常需要在 Markdown 文档中绘制：

时序图（Sequence Diagram）
活动图（Activity Diagram）
架构示意图

PlantUML + Markdown 是非常理想的组合。

但在 Linux + VS Code 环境下，常见问题包括：

VS Code 自带 Markdown Preview 不渲染 PlantUML
使用在线 PlantUML Server 存在内容泄露风险
本地渲染报错：plantuml.jar not found
已安装 Graphviz，但 dot 不生效

本文将完整介绍如何在 Linux 下 配置：

✅ VS Code
✅ Markdown Preview Enhanced（MPE）
✅ 本地 PlantUML（jar）
✅ Graphviz（dot）
✅ 完全离线、无公网依赖的 UML 渲染方案

二、整体方案架构

VS Code
 └─ Markdown Preview Enhanced
      └─ Java
           └─ plantuml.jar
                └─ Graphviz (dot)

关键原则：

不配置 plantumlServer
UML 内容只在本机渲染
可断网使用
符合企业信息安全规范

三、环境准备

1. 操作系统与工具

Linux（RHEL 等）
VS Code

2. Java（必需）

java -version

推荐版本：

✅ Java 11 / Java 17（LTS）

示例（RHEL 系）：

sudo dnf install java-17-openjdk

3. Graphviz（dot）

dot -V

未安装时：

sudo dnf install graphviz   # RHEL 系
sudo apt install graphviz   # Debian / Ubuntu

确认路径：

which dot

4. 下载 PlantUML（jar）

官方地址：

https://plantuml.com/download

建议路径：

/opt/plantuml/plantuml.jar

四、安装 VS Code 扩展

安装以下扩展：

✅ Markdown Preview Enhanced

VS Code 内置 Markdown Preview 无法渲染 PlantUML

五、Linux 下打开 settings.json

方法 1：命令面板

Ctrl + Shift + P
> settings json
> Preferences: Open User Settings (JSON)

方法 2：直接打开文件（推荐）

code ~/.config/Code/User/settings.json

六、核心配置（本地 PlantUML + dot）

{
  "markdown-preview-enhanced.plantumlJarPath": "/opt/plantuml/plantuml.jar",
  "markdown-preview-enhanced.javaPath": "/usr/lib/jvm/java-17/bin/java",
  "markdown-preview-enhanced.plantumlGraphvizDotPath": "/usr/bin/dot",
  "markdown-preview-enhanced.enableScriptExecution": true
}