PlantUML#

Plantuml 是一个支持用文本描述生成UML图的工具.

plantuml website

使用#

安装vscode 中 Markdown Preview Enhanced 插件。该插件内置 plantuml.jar 包，不需要另外安装。需要安装Java 环境，并添加到环境变量。该插件同时可使用mermaid 画图。

plantuml 程序#

apt install plantuml

#usage

# channel.puml : file to gen
# -tsvg : gen channel.svg
# -o .  : gen file channel.svg in cur folder
plantuml channel.puml -tsvg -o .

example#

活动图#

示例：

@startuml
start
: muti process;
fork
  :process1;
  repeat: step0
    #lightgreen : step1;
    -[#blue]->
    note left : run step1
    if (err?) then (Y)
        -[#blue,dashed]-> 
        : clear;
        -[#blue,dashed]-> 
        break
    endif
    -[#blue,dashed]->  N ;
    : step2;
  repeat while (cond ?)
fork again
  :process2;
  group #lightgreen g1
    floating note right : g1 group
    :step2.1;
    :step2.2;
  end group
end fork
stop
@enduml

渲染：

509.

400.

泳道 (swimlanes)#

示例：

@startuml
|#palegreen|f| fisherman
|c| cook
|#gold|e| eater
|f|
start
:go fish;
|c|
:fry fish;
|e|
:eat fish;
stop
@enduml

渲染：

定时图#

示例：

@startuml
clock   "Clock_0"   as C0 with period 50
clock   "Clock_1"   as C1 with period 50 pulse 15 offset 10
binary  "Binary"  as B
concise "Concise" as C
robust  "Robust"  as R
analog  "Analog"  as A

@0
C is Idle
R is Idle
A is 0

note top of C : first

@R
@0 <-> @100 : 100 ms

@100
B is high
C is Waiting
R is Processing
A is 3

@300
R is Waiting
A is 1
@enduml

渲染：

Network#

示例：

@startuml
!include <office/Servers/application_server>
!include <office/Servers/database_server>

nwdiag {
  group {
    color = "#FFaaaa";
    web01;
    db01;
  }
  group {
    color = "#aaaaFF";
    web02 [description = "<$application_server>\n web02"];
    db02  [description = "<$database_server>\n db01"];
  }
  network dmz {
      color = "lightblue"
      address = "210.x.x.x/24"

      web01 [address = "210.x.x.1"];
      web02 [address = "210.x.x.2"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01 ;
      db02 ;
  }
}
@enduml

渲染：

400.

MindMap#

示例：

@startmindmap
*[#lightgreen] root node
** some first level node
***_ second level node
***_ another second level node
***_ foo
***_ bar
***_ foobar
** another first level node
@endmindmap

渲染：

WBS#

示例：

@startwbs
+[#SkyBlue] Project
++ Part One
+++ Task 1.1
++++ LeftTask 1.2
+++ Task 1.3
++ Part Two
+++ Task 2.1
+++ Task 2.2
---_ Task 2.2.1 To the left boxless
---_ Task 2.2.2 To the Left boxless
+++_ Task 2.2.3 To the right boxless
@endwbs

渲染：

json/yaml#

示例：

@startjson
#highlight "lastName"
#highlight "address" / "city"
#highlight "phoneNumbers" / "0" / "number"
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 28,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

渲染：

@startjson
#highlight "lastName"
#highlight "address" / "city"
#highlight "phoneNumbers" / "0" / "number"
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 28,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

Theme 配置#

https://the-lum.github.io/puml-themes-gallery/themes/index.html