
什么是 PlantUML ?
PlantUML
是一种开源工具,允许用户从纯文本语言创建图表。除了各种UML
图之外,PlantUML
还支持各种其他软件开发相关格式,以及JSON
和YAML
文件的可视化。PlantUML
语言是特定领域语言的一个示例。
什么是 PlantUML Server ?
PlantUML Server
是一个用于动态生成UML
图的Web
应用程序,能够直接在浏览器中创建PlantUML
图。

安装
在群晖上以 Docker 方式安装。
在注册表中搜索 plantuml
,选择第一个 plantuml/plantuml-server:jetty
,版本选择 latest
。
本文写作时,
latest
版本对应为jetty
,具体的说是jetty-v1.2023.12
;

端口
本地端口不冲突就行,不确定的话可以用命令查一下
bash
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 | 容器端口 |
---|---|
8284 |
8080 |

环境
老苏没有设置,但是实际上 PlantUML
支持环境变量设置,可以参考官方文档:https://github.com/plantuml/plantuml-server#how-to-set-plantuml-options,根据需要进行设置
命令行安装
如果你熟悉命令行,可能用 docker cli
更快捷
bash
# 运行容器
docker run -d \
--restart unless-stopped \
--name plantuml-server \
-p 8284:8080 \
plantuml/plantuml-server:latest
也可以用 docker-compose
安装,将下面的内容保存为 docker-compose.yml
文件
yaml
version: '3'
services:
plantuml-server:
image: plantuml/plantuml-server:latest
container_name: plantuml-server
restart: unless-stopped
ports:
- 8284:8080
然后执行下面的命令
bash
# 新建文件夹 plantuml
mkdir -p /volume1/docker/plantuml
# 进入 plantuml 目录
cd /volume1/docker/plantuml
# 将 docker-compose.yml 放入当前目录
# 一键启动
docker-compose up -d
运行
在浏览器中输入 http://群晖IP:8284
就能看到主界面

可以设置主题

软件本身比较简单,重要是学会使用简单直观的语言来创建图表,可以参考官方的 PlantUML
语言参考指引,文档有中文版:https://plantuml.com/zh/guide
VSC 集成
PlantUML
集成在多种外部工具中,比如 Visual Studio Code
。直接安装 PlantUML Extensions

安装完成后,需要设置服务器地址

支持的文件类型:.wsd,.pu,.puml,.plantuml,.iuml

所以我们新建一个 test.puml
文件,内容如下
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

在 Windows
上可以用 Alt + D
预览,在 MacOS
上则是 option + D

参考文档
plantuml/plantuml: Generate diagrams from textual description
地址:https://github.com/plantuml/plantuml
plantuml/plantuml-server: PlantUML Online Server地址:https://github.com/plantuml/plantuml-server
使用简单的文字描述画UML图的开源工具。