Docker を使って以下のコマンドでローカルサーバーが建てれます。

# plantuml という名前で
# ローカルマシンではポート8080を使って、
# プロセスはバックグラウンドで、
# ローカルサーバーを建てる
docker run \
  --name plantuml \
  --publish 8080:8080 \
  --detach \
  plantuml/plantuml-server:jetty

localhost:58080で使えるようにしたい場合は--publish 58080:8080のように変えて実行します。

起動後http://localhost:8080/txt/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000のような URL で正常に図が表示されれば大丈夫です。

ローカルサーバーが要らなくなった場合は以下で削除できます。

docker rm -f plantuml

# 以下は、
# 今はストップして、
# 必要な時再開
#
# docker stop plantuml
# docker start plantuml

VSCode の設定

VSCode の設定で以下の設定を追加すると、図の生成をサーバー側で行うようになりサクサク書けるようになります。

{
  "plantuml.server": "http://localhost:",
  "plantuml.render": "PlantUMLServer"
}

準備

全体を@startmindmap@endmindmapで囲みます。

@startmindmap
' ...
@endmindmap

ノード

ノードは* textのような形で記述します。+の個数で階層を定めます。(3階層目なら+++ text

階層は順番に123と増やしていく必要があります。例えばいきなり++ textのようにっ始めるとエラーになります。

@startmindmap

+ Root
++ Right1
++ Right2

@endmindmap

左側にもノードを置く

左側に置くには+の代わりに-を使います。

@startmindmap

+ Root
++ Right1
++ Right2
-- Left1
-- Left2

@endmindmap

枠なしノードを置く

枠なし(テキスト)だけのノードを置くには+-の後に_を置きます。

@startmindmap

+ Root
++ Right1
++ Right2
-- Left1
-- Left2
---_ Left2-1
---_ Left2-2

@endmindmap
関連

ライフライン

先頭で扱う分類子を定義することで、定義順に並ばせれます。定義時には以下のキーワードが使えます。

  • participant

  • actor

  • boundary

  • control

  • entity

  • database

@startuml

participant A
actor B
boundary C
control D
entity E
database F

@enduml

order <number>を使って<number>キーワードによって見た目が変わります小さいものから並べることもできます。

@startuml

participant A order 3
participant B order 2
participant C order 1

@enduml

付けた名前が長すぎたりで扱いにくい場合はas <name>で別名が付けれます。

@startuml

participant AAAAAA as A

A -> A 

@enduml

'  ┌──────┐   
'  │AAAAAA│   
'  └──┬───┘   
'     │────┐  
'     │    │  
'     │<───┘  
'  ┌──┴───┐   
'  │AAAAAA│   
'  └──────┘   

メッセージ

手続きを表すメッセージは->を使い、手続きメッセージの返しには-->を使います。また非同期な手続きを表すメッセージには->>-->>が使えます。

@startuml

A -> B : Request
B --> A : Response

A ->> C : Request

@enduml

' ┌─┐          ┌─┐          ┌─┐
' │A│          │B│          │C│
' └┬┘          └┬┘          └┬┘
' │  Request   │            │ 
' │───────────>│            │ 
' │            │            │ 
' │ Response   │            │ 
' │<─ ─ ─ ─ ─ ─│            │ 
' │            │            │ 
' │        Request          │ 
' │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─>│ 
' ┌┴┐          ┌┴┐          ┌┴┐
' │A│          │B│          │C│
' └─┘          └─┘          └─┘

手続きの記述の前にautonumberキーワードを置くと手続きメッセージの前に123と番号を置けます。この振る舞いはautonumber stopキーワードを置くまで続きます。

@startuml

autonumber
A -> B : Request
B --> A : Response
autonumber stop
A -> B : Request

@enduml

' ┌─┐          ┌─┐
' │A│          │B│
' └┬┘          └┬┘
' │ 1 Request  │ 
' │───────────>│ 
' │            │ 
' │2 Response  │ 
' │<─ ─ ─ ─ ─ ─│ 
' │            │ 
' │  Request   │ 
' │───────────>│ 
' ┌┴┐          ┌┴┐
' │A│          │B│
' └─┘          └─┘

手続きの後にactivate <name>を置くと、deactivate <name>が置かれるまで活性化されます。またdestroy <name>でライフラインの破壊を表示することもできます。

@startuml

A -> B
activate A
B --> A
destroy B
A -> C
deactivate A

@enduml

' ┌─┐          ┌─┐
' │A│          │B│
' └┬┘          └┬┘
' ┌┴┐           │ 
' │ │ ─────────>│ 
' │ │           │ 
' │ │           │ 
' │ │ <─ ─ ─ ─ ─│ 
' └┬┘           │ 
' │            │ 
' │───────────>│ 
' ┌┴┐          ┌┴┐
' │A│          │B│
' └─┘          └─┘       

手続き間の調整

...を置くと、この部分のラインがドット線に変わり、「しばらく時間が掛かる処理」ということを表現できます。

@startuml

A -> B
...
B --> A
...text...

@enduml

' ┌─┐          ┌─┐
' │A│          │B│
' └┬┘          └┬┘
' │            │ 
' │───────────>│ 
' │            │ 
' .            . 
' .            . 
' .            . 
' .            . 
' │            │ 
' │<─ ─ ─ ─ ─ ─│ 
' │            │ 
' .            . 
' .    text    . 
' .            . 
' .            . 
' ┌┴┐          ┌┴┐
' │A│          │B│
' └─┘          └─┘ 

|||を置くと、手続き間の空間を広く持てます。

@startuml

A -> B
|||
A -> C

@enduml

' ┌─┐          ┌─┐          ┌─┐
' │A│          │B│          │C│
' └┬┘          └┬┘          └┬┘
' │            │            │ 
' │───────────>│            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │            │            │ 
' │────────────────────────>│ 
' ┌┴┐          ┌┴┐          ┌┴┐
' │A│          │B│          │C│
' └─┘          └─┘          └─┘

複合フラグメント

以下のキーワードではメッセージを囲んでグループ化できます。

  • ref over

  • alt/else

  • opt

  • loop/break

  • par

  • critical

  • group

キーワードの範囲はendが置かれるまで続きます。

ref over

この部分は別のシーケンス図を参照してほしい時に使います。

@startuml

ref over A : init

@enduml

alt/else

「もし...ならば真の手続き、...違えば偽の手続き」というように条件分岐を表現したい時に使うものです。

@startuml

alt Trushy
  A -> B
else Falsy
  A -> C
end

@enduml

'           ┌─┐          ┌─┐          ┌─┐          
'           │A│          │B│          │C│          
'           └┬┘          └┬┘          └┬┘          
'             │            │            │           
' ╔══════╤═══╪════════════╪════════════╪══════════╗
' ║ ALT  │  Trushy        │            │          ║
' ╟──────┘   │            │            │          ║
' ║          │            │            │          ║
' ║          │───────────>│            │          ║
' ╠══════════╪════════════╪════════════╪══════════╣
' ║ [Falsy]  │            │            │          ║
' ║          │            │            │          ║
' ║          │────────────────────────>│          ║
' ╚══════════╪════════════╪════════════╪══════════╝
'           ┌┴┐          ┌┴┐          ┌┴┐          
'           │A│          │B│          │C│          
'           └─┘          └─┘          └─┘          

opt

「もし...ならば真の手続き」というalt/elseからelseを落としたような条件分岐を表現したい時に使うものです。

@startuml

opt Trushy
  A -> B
end

@enduml

'           ┌─┐          ┌─┐          
'           │A│          │B│          
'           └┬┘          └┬┘          
'             │            │           
' ╔══════╤═══╪════════════╪══════════╗
' ║ OPT  │  Trushy        │          ║
' ╟──────┘   │            │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╚══════════╪════════════╪══════════╝
'           ┌┴┐          ┌┴┐          
'           │A│          │B│          
'           └─┘          └─┘              

loop/break

loop <条件>で条件が真の間ループする手続きを表現できます。その中でbreak <条件>を使うと、条件が真になった場合ループを抜ける事を表現できます。

@startuml

loop Trushy
  A -> B
  break Trushy
    B --> A
  end
end

@enduml

'                     ┌─┐          ┌─┐                    
'                     │A│          │B│                    
'                     └┬┘          └┬┘                    
'                       │            │                     
' ╔═══════╤════════════╪════════════╪════════════════════╗
' ║ LOOP  │  Trushy    │            │                    ║
' ╟───────┘            │            │                    ║
' ║                    │            │                    ║
' ║                    │───────────>│                    ║
' ║                    │            │                    ║
' ║                    │            │                    ║
' ║         ╔════════╤═╪════════════╪══════════╗         ║
' ║         ║ BREAK  │ │Trushy      │          ║         ║
' ║         ╟────────┘ │            │          ║         ║
' ║         ║          │            │          ║         ║
' ║         ║          │<─ ─ ─ ─ ─ ─│          ║         ║
' ║         ╚══════════╪════════════╪══════════╝         ║
' ╚════════════════════╪════════════╪════════════════════╝
'                     ┌┴┐          ┌┴┐                    
'                     │A│          │B│                    
'                     └─┘          └─┘                                 

par

並行実行される手続きを表現できます。

@startuml

par
  A -> B
else
  A ->> B
else
  A ->x B
end

@enduml

'           ┌─┐          ┌─┐          
'           │A│          │B│          
'           └┬┘          └┬┘          
'             │            │           
' ╔══════╤═══╪════════════╪══════════╗
' ║ PAR  │   │            │          ║
' ╟──────┘   │            │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╠══════════╪════════════╪══════════╣
' ║          │            │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╠══════════╪════════════╪══════════╣
' ║          │            │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╚══════════╪════════════╪══════════╝
'           ┌┴┐          ┌┴┐          
'           │A│          │B│          
'           └─┘          └─┘                     

critical

排他制御(ある資源しかその情報にアクセスできないようにする)を表現できます。

@startuml

critical
  A -> B
end

@enduml

'           ┌─┐          ┌─┐          
'           │A│          │B│          
'           └┬┘          └┬┘          
'             │            │           
' ╔══════════╪╤═══════════╪══════════╗
' ║ CRITICAL  │           │          ║
' ╟───────────┘           │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╚══════════╪════════════╪══════════╝
'           ┌┴┐          ┌┴┐          
'           │A│          │B│          
'           └─┘          └─┘          

group

PlantUML にない複合フラグメントを使いたい時などに使います。例えば、「重要な箇所」や「あまり重要でない箇所」を表現するconsiderignore、「起きたら不正」を表現するnegなどがそれに当たります。

@startuml

group ignore[process]
  A -> B
end

group consider[process]
  A -> B
end

group neg
  B -> A : throw error
end

@enduml

'           ┌─┐          ┌─┐          
'           │A│          │B│          
'           └┬┘          └┬┘          
'             │            │           
' ╔═════════╤╪════════════╪══════════╗
' ║ IGNORE  ││ process    │          ║
' ╟─────────┘│            │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╚══════════╪════════════╪══════════╝
'             │            │           
'             │            │           
' ╔══════════╪╤═══════════╪══════════╗
' ║ CONSIDER  │  process  │          ║
' ╟───────────┘           │          ║
' ║          │            │          ║
' ║          │───────────>│          ║
' ╚══════════╪════════════╪══════════╝
'             │            │           
'             │            │           
' ╔══════╤═══╪════════════╪══════════╗
' ║ NEG  │   │            │          ║
' ╟──────┘   │throw error │          ║
' ║          │<───────────│          ║
' ╚══════════╪════════════╪══════════╝
'           ┌┴┐          ┌┴┐          
'           │A│          │B│          
'           └─┘          └─┘                   

JavaScript で飯食べたい歴約 9 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log