PlantUML是一个通用性很强的工具，可以快速、直接地创建各种图表。用来画组件图、部署图、状态图、时序图、甘特图等UML以及非UML图。

线上版 https://www.planttext.com/
示例

Hexo PlantUML插件

hexo-tag-plantuml

安装:

1
npm install hexo-tag-plantuml --save

编辑Hexo目录下的_config.yml:

1
2
tag_plantuml:
	type: static

用法：

1
2
3
{% plantuml %}
    Bob->Alice : hello
{% endplantuml %}

显示：

hexo-filter-plantuml

安装：

1
npm install hexo-filter-plantuml --save

无需配置即可使用，或者你可以参考Advanced configuration

用法：

puml 和 plantuml 指令都有效。

示例1

或者

示例2

hexo-filter-kroki[推荐]

这个插件是上一个插件hexo-filter-plantuml的升级版本，不仅支持plantuml图，还支持其他的绘图方式。

安装：

1
npm install hexo-filter-kroki --save

用法和hexo-filter-plantuml一样，无需配置即可使用，或者你可以参考Advanced configuration

查看支持的图表类型：https://kroki.io/health

查看图表示例：https://kroki.io/examples.html

wavedrom示例

我的流程图：

时序图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@startuml
skinparam backgroundColor #FEFEFE
skinparam sequenceArrowThickness 2
skinparam roundcorner 20
skinparam maxmessagesize 60

actor Developer
participant "GitHub" as GH
box "GitHub Actions" #LightBlue
    participant "build_env" as BE
    participant "build_app" as BA
    participant "release" as R
end box

Developer -> GH : 推送 v* 标签或手动触发
activate GH

GH -> BE : 触发工作流
activate BE

BE -> BE : 生成版本号
BE -> BE : 更新 pubspec.yaml
BE -> BE : 上传 pubspec.yaml
BE --> BA : 完成环境准备
deactivate BE

activate BA
BA -> BA : 下载 pubspec.yaml
BA -> BA : 设置 Flutter

par 并行构建
    BA -> BA : 构建 Android
    BA -> BA : 构建 Android AAB
    BA -> BA : 构建 Web
    BA -> BA : 构建 Linux
    BA -> BA : 构建 Windows
    BA -> BA : 构建 iOS
    BA -> BA : 构建 macOS
end

BA -> BA : 压缩构建结果
BA -> BA : 上传 artifacts
BA --> R : 完成所有构建
deactivate BA

activate R
R -> R : 下载所有 artifacts
R -> R : 创建 GitHub Release
R -> R : 上传 Release 资产
R --> GH : 完成发布
deactivate R

GH --> Developer : 工作流完成通知
deactivate GH

@enduml