PlantUML 与 IDE 集成：VS Code / JetBrains / Vim 三端实战

puml.online
  2026-07-30 10:05 2026-07-30 10:05 创建   2026-08-14 21:34:29 2026-08-14 21:34:29 更新    

写图代码最怕的不是写代码——是「写完之后看不到结果」。本文整理 PlantUML 在 VS Code / JetBrains / Vim 三大 IDE 的开箱即用方案。

选哪个 IDE？取决于场景

  • VS Code：前端 / TS / Python 同学主力，markdown + puml 一边写文档一边画图
  • JetBrains 全家桶（IDEA / PyCharm / GoLand）：Java / JVM 同学，PlantUML 是 built-in 一等公民
  • Vim / Neovim：server / 嵌入式 / 极致代码党，PlantUML 看代码、看 diff 极舒服

下面分别讲。

VS Code：jebbs.plantuml 插件

安装

打开扩展，搜 PlantUML，安装 PlantUML (作者 jebbs)。

依赖：

  • Java（必需，PlantUML 自己吃 JVM）
  • Graphviz dot（可选，复杂图才需要）
  • 或者用 PlantUML Server 模式（避开本地 Java）

配置 preview

settings.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  // 用本地 plantuml.jar 渲染（需要 Java）
  "plantuml.render": "PlantUMLServer",
  "plantuml.server": "http://www.plantuml.com/plantuml", // 默认

  // 预览图渲染在 markdown 旁边
  "plantuml.previewRenderMethod": "PlantUMLServer",

  // 导出默认格式
  "plantuml.exportFormat": "svg",

  // 自动换行
  "editor.wordWrap": "on",
  "[plantuml]": {
    "editor.wordWrap": "off"
  }
}

关键功能

  • 侧边预览：Ctrl+Shift+D (Mac: Cmd+Shift+D) 打开 PlantUML 预览
  • 导出：Alt+Shift+E (Mac: Option+Shift+E) 导出当前图为 SVG/PNG/PDF
  • 包含子图：!include 支持，但 require plantuml.includepaths 配搜索路径
1
2
3
4
"plantuml.includepaths": [
  "${workspaceFolder}/_diagrams",
  "${workspaceFolder}/docs/diagrams"
]

踩坑

  • !include 子图里的中文乱码：puml 顶部加 skinparam defaultFontName "Noto Sans CJK SC"
  • 预览停滞不刷新：Java 进程死锁——重启 VS Code 或 Pkill plantuml 进程
  • http-server 模式慢：自建 plantuml server 比默认快 5-10 倍（docker plantuml/plantuml-server 跑在本地）

LaTeX 数学公式

VS Code PlantUML 插件支持 !include + jlatexmath，但需要单独安装 jlatexmath-minimal 包。常用写法：

1
Bob -> Alice: $\\alpha + \\beta = \\gamma$

JetBrains IntelliJ：内置 PlantUML 支持

IDEA / PyCharm / WebStorm 全系列官方支持 PlantUML，不需要额外插件。

关键能力

  • .puml 文件高亮：像普通代码一样写
  • 实时预览：Cmd+Shift+P 打开 PlantUML Tool Window，双面板编辑器——左边代码右边渲染
  • Java 集成：可以从 Java 类自动生成 PlantUML class 图（右键 → “Diagrams” → “Show Diagram”）
  • 导出：右键 → “Save Diagram As…”

加速渲染

Help → Find Action → PlantUML，找到 “PlantUML server URL”。改成本地 server：

1
http://localhost:8080

然后跑：

1
docker run -d -p 8080:8080 plantuml/plantuml-server

加速 10 倍以上。

项目级配置

.idea/plantuml.xml：

1
2
3
<application>
  <component name="PlantUml" svg="true" prune="true" />
</application>

或全局 ~/Library/Application Support/JetBrains/<version>/options/plantuml.xml。

配合 UML 类的反向工程

IDEA Ultimate 可以从 Java 代码反向画 class 图（”Show Diagram”），但只画当前模块的内部依赖。如果想手工维护的源码图，推荐用 PlantUML 单独 .puml 文件，IDEA 也能 import PlantUML 图 → UML 类视图（双向）。

Vim / Neovim：纯键盘党

Vim 没有开箱即用的 PlantUML 插件，社区方案是 gardenapple/plantuml-syntax + 自定义预览命令。

必备：语法高亮

1
2
3
4
" ~/.vimrc
Plug 'gardenapple/plantuml-syntax'

au BufRead,BufNewFile *.puml,*.iuml set filetype=plantuml

实时预览（异步，无需离开编辑器）

1
2
3
4
5
6
7
8
9
" 调用 plantuml.jar 渲染当前 buffer 到 /tmp，然后 :!open
function! RenderPlantuml()
  let l:tmp = tempname() . '.svg'
  call system('plantuml -tsvg -o ' . shellescape(fnamemodify(l:tmp, ':h')) . ' ' . expand('%:p'))
  let l:svg = substitute(l:tmp, '\.svg$', '.svg', '')
  call system('open ' . shellescape(l:svg))
endfunction

autocmd FileType plantuml nnoremap <leader>p :call RenderPlantuml()<CR>

<leader>p 按下后渲染并用系统默认应用打开 SVG（macOS 预览 / Linux xdg-open / Windows start）。

Telescope + live_preview

Neovim 的 image.nvim 可以在 terminal 里 inline 显示 SVG（在 kitty / wezterm 这种支持 Sixel/iTerm 协议的终端里）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-- init.lua
require("image").setup({
  backend = "kitty",
  max_width = 80,
  max_height = 30,
})

-- 触发 PlantUML 文件渲染后展示：
vim.api.nvim_create_autocmd("FileType", {
  pattern = "plantuml",
  callback = function()
    -- 你的渲染逻辑
  end,
})

好用 workflow

  1. vim foo.puml 编辑
  2. <leader>p 渲染 + 浏览器打开
  3. <leader>d 跳到下一个 participant
  4. 关闭，回到 vim

三个 IDE 的对比

维度 VS Code JetBrains Vim/Neovim
安装难度 一键装插件 内置，无需插件 手写 .vimrc
实时预览 Alt+D 侧边面板 双面板编辑器 调用外部命令
中文支持 需配 font family 需配 font family 需配 font family
Server 提速 改 server URL 改 server URL 完全取决于 shell
适合人群 通用开发者 JVM 开发者 极致党 / sysadmin
反向工程 需第三方插件 内置（UML 类图） 不可

一份统一的 PlantUML 「工位配置」

适用所有 IDE。~/.plantuml-config/:

1
2
3
4
5
6
skinparam defaultFontName "Noto Sans CJK SC"
skinparam shadowing false
skinparam ArrowColor #5B7C99
skinparam ArrowThickness 1
skinparam nodesep 50
skinparam ranksep 50

IDE 启动时 -Dplantuml.config=~/.plantuml-config 加载全局默认皮肤。

小结

  • VS Code：用 jebbs PlantUML，本地 Java + 自建 server 最快
  • JetBrains：内置 + 切本地 server + Java 反向工程自动 class 图
  • Vim：语法高亮 + system('plantuml -tsvg') 一键渲染
  • 共同点：中文 defaultFontName、自建 server、避免被 plantuml.com 跨境卡

下一步

  • 标题: PlantUML 与 IDE 集成：VS Code / JetBrains / Vim 三端实战
  • 作者: puml.online
  • 创建于 : 2026-07-30 10:05:00
  • 更新于 : 2026-08-14 21:34:29
  • 链接: https://puml.online/blog/plantuml-ide-integration/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
PlantUML 与 IDE 集成：VS Code / JetBrains / Vim 三端实战
  1. 选哪个 IDE？取决于场景
  2. VS Code：jebbs.plantuml 插件
    1. 安装
    2. 配置 preview
    3. 关键功能
    4. 踩坑
    5. LaTeX 数学公式
  3. JetBrains IntelliJ：内置 PlantUML 支持
    1. 关键能力
    2. 加速渲染
    3. 项目级配置
    4. 配合 UML 类的反向工程
  4. Vim / Neovim：纯键盘党
    1. 必备：语法高亮
    2. 实时预览（异步，无需离开编辑器）
    3. Telescope + live_preview
    4. 好用 workflow
  5. 三个 IDE 的对比
  6. 一份统一的 PlantUML 「工位配置」
  7. 小结
  8. 下一步