PlantUML で白黒のシーケンス図を描く

テキストベースで気軽に UML を描くことができる PlantUML ですが、デフォルトでは何か微妙な色が付いています。ついでに＿＿言いにくいけれど＿＿美しいとは言えない配色です。デフォルトは白黒が良かったな...と思う人も多いのではないでしょうか。

この配色には「この図は PlantUML を使って描かれています」と一目で分かるメリットがあります。しかしオフィシャルな書類では白黒で作図したいという要求も、やはり多いでしょう。

この記事では PlantUML を使って、色をコントロールしたシーケンス図を描くことを目指します。

クラス図は先日の記事をご覧下さい。

デフォルトを確認

まずは何もコントロールせず、基本の要素だけで描いてみましょう。

@startuml

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

このようになります。

基本のシーケンス図

白黒にしてみる

コードの先頭に「skinparam monochrome true」と書くと、その図全体をモノクロにするという効果があります。

最初の例は、以下のような描画結果になります。

@startuml

' 全体をグレースケールにする
skinparam monochrome true

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

モノクロにしただけのシーケンス図

skinparam monochrome true の弊害

この「skinparam monochrome true」は、描画結果をグレースケールにします。つまり一旦カラーで描画したあとで全てをモノクロ変換しているのです。従って、完成した画像は元の色が反映されています。

上の図を一見するとモノクロになっていて期待した結果になっている気がします。しかしライフラインの箱（矩形）をよく見ると薄いグレーの色が付いています。ここは完全に白にしたいところですが「skinparam monochrome true」を指定しただけではそうなりません。

また、基本は白黒で、目立たせたい箇所を強調する意味で部分的にカラーにしたいという要求もあるでしょう。「skinparam monochrome true」を使うと、カラーにしたい部分も最後にモノクロ変換されてしまいます。これは望むところではありません。

skinparam monochrome true を使わずに白黒にしてみる

では「skinparam monochrome true」を使わずに白黒表現にしてみましょう。それには構成要素の種類ごとに色を設定する必要があります。

@startuml

skinparam sequence {
    ' 生存線を白黒にする
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ' アクターを白黒にする
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ' 生存線（オブジェクト）を白黒にする
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ' 矢印を黒にする
    ArrowColor #Black
}

' 注釈を白黒にする
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

結果は次のようになります。

白黒をそれぞれの要素に指定

skinparam の色々な書き方

skinparam には様々な書き方ができます。以下の３つの書き方は全て同じ結果になります。

' アクターを白黒にする
skinparam ActorBorderColor #Black
skinparam ActorBackgroundColor #White

' アクターを白黒にする
skinparam Actor {
    BorderColor #Black
    BackgroundColor #White
}

' アクターを白黒にする
skinparam Sequence {
    ActorBorderColor #Black
    ActorBackgroundColor #White
}

影を取り除く

よく見ると影が付いています。要りません。なくしましょう。「skinparam shadowing false」を指定します。

@startuml

' 影をなくす
skinparam shadowing false

skinparam sequence {
    ' 生存線を白黒にする
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ' アクターを白黒にする
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ' 生存線（オブジェクト）を白黒にする
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ' 矢印を黒にする
    ArrowColor #Black
}

' 注釈を白黒にする
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

スッキリしました。

影を取り除いたシーケンス図

生存線（ライフライン）の下の箱（矩形）を非表示にする

PlantUML ではライフラインの上下にオブジェクト名（クラス名）の箱（矩形）があります。UML を学習した際、こんなものはありませんでした。シーケンス図が縦に長くなってくれば有用かもしれませんが、とりあえず不要です。取り除きましょう。

「hide footbox」を使います。

@startuml

' ライフラインの下の箱（矩形）を非表示に
hide footbox

' 影をなくす
skinparam shadowing false

skinparam sequence {
    ' 生存線を白黒にする
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ' アクターを白黒にする
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ' 生存線（オブジェクト）を白黒にする
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ' 矢印を黒にする
    ArrowColor #Black
}

' 注釈を白黒にする
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

記述量は増えていきますが、図はスッキリしていきます。

下の箱を消したシーケンス図

特定のものに色をつける

特定の箱（矩形）、特定の矢印、特定の注釈に色をつけて強調します。

PlantUML のコードを示します。コメントは必要なもの以外は省略しました。

@startuml

hide footbox

skinparam shadowing false

skinparam sequence {
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ArrowColor #Black
    
    ' 生存線<<Foo>>の色を変える
    ParticipantBorderColor<<Foo>> #Red
    ParticipantBackgroundColor<<Foo>> #Yellow
    ParticipantFontColor<<Foo>> #Blue
}

' Foo キーワード（ステレオタイプ）の表示を隠す
hide <<Foo>> stereotype

skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A <<Foo>>
participant "ObjectB" as B

User -> A : Request
activate A
' 特定の矢印の色を変える
A -[#Blue]> B : SendMessage
activate B
note right of B #white-ffccff
    色をつけた注釈
end note
' 特定の矢印の色を変える
A <-[#Red]- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

様々な要素に色をつける方法

クラス名の箱（矩形）のフォント色のみ、変えることができませんでした（version 1.2019.06 を使用）。キーワード（ステレオタイプ）を指定せず、図全体の participant のフォント色を変えることはできます。

【2019/07/27 追記】PlantUML では色々なところに Creole フォーマットを使う事ができ、生存線（ライフライン）のフォントとか、メッセージ文字列に任意のスタイルを適用する事ができました。

@startuml

hide footbox
skinparam shadowing false

skinparam sequence {
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    ActorBackgroundColor #White
    ActorBorderColor #Black
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    ArrowColor #Black
}
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

' アクターのフォントを緑にする
actor "<color: #green>User</color>" as User

' 最初の生存線（ライフライン、ObjectA）のフォントを赤にする
participant "<color: #red>ObjectA</color>" as A

' 二番目の生存線（ライフライン、ObjectB）に色付きの波線をつける
participant "<w:orange>ObjectB</w>" as B

' メッセージのフォントを青にする
User -> A : <color: #blue>Request</color>
activate A
' メッセージを斜体にして取り消し線を付ける
A -> B : //--SendMessage--//
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

PlantUML シーケンス図のフォントに色など様々なスタイルを適用してみる

特定の生存線（ライフライン）に色をつけることはできるか

特定の生存線（ライフライン）に色をつけることはできないようでした。

代替として、その背景色に色をつけてみます。

@startuml

hide footbox

skinparam shadowing false

skinparam sequence {
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ArrowColor #Black
    
    ' Box（ライフラインをグループ化するもの）の枠線を白にする。
    ' 白にするのはつまり見えなくするということ。
    BoxBorderColor #White
    
    ' Box の幅を調整するために、生存線（ライフライン）の外側
    ' の間隔を調整する。
    ParticipantPadding 10
}

skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
box #FFCCFF
    participant "ObjectA" as A
end box
participant "ObjectB" as B

User -> A : Request
activate A
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

特定のライフラインを強調

特定の生存期間に色をつける

これは簡単で、「activate」に続けて色を指定するだけです。

@startuml

' ライフラインの下の箱（矩形）を非表示に
hide footbox

' 影をなくす
skinparam shadowing false

skinparam sequence {
    ' 生存線を白黒にする
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ' アクターを白黒にする
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ' 生存線（オブジェクト）を白黒にする
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ' 矢印を黒にする
    ArrowColor #Black
}

' 注釈を白黒にする
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
' 特定の生存期間のみ色を設定する。
activate A #FFCCFF
A -> B : SendMessage
activate B
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

特定の生存期間を強調する

特定の処理に色をつける

縦方向ではなく横方向、つまり特定の処理群に背景色を設定して強調することはできるでしょうか。

「group」を使ってみましょう。

@startuml

' ライフラインの下の箱（矩形）を非表示に
hide footbox

' 影をなくす
skinparam shadowing false

skinparam sequence {
    ' 生存線を白黒にする
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ' アクターを白黒にする
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ' 生存線（オブジェクト）を白黒にする
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ' 矢印を黒にする
    ArrowColor #Black
    
    ' グループの枠線を白にする（目立たなくする）
    GroupBorderColor #White
    GroupBackGroundColor #FFCCFF
}

' 注釈を白黒にする
skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
group #FFCCFF 注目！
    A -> B : SendMessage
    activate B
end group
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

特定の処理を強調する

微妙！w

group を左右いっぱいにする

ちょっと微妙ですね。先ずは左右いっぱいに group を広げてみましょう。

@startuml

hide footbox

skinparam shadowing false

skinparam sequence {
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ArrowColor #Black
    
    ' グループの枠線を白にする（目立たなくする）
    GroupBorderColor #White
    GroupBackGroundColor #FFCCFF
}

skinparam NoteBorderColor #Black
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
group #FFCCFF 注目！
    ' 左側を広げるために背景色と同じ矢印を描画する。
    User -[#FFCCFF]> A
    
    A -> B : SendMessage
    activate B
    
    ' 右側を広げるために背景色と同じ矢印を描画し、
    ' 全角スペースを描画する。
    B -[#FFCCFF]> B :　　　　　　　　
end group
note right of B
    何らかの処理
end note
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

特定の処理を強調する２

左側はアクターから ObjectA に向かって背景色と同じ色の矢印を描画しています。これにより、group の左辺がアクターの左側まで延びています。

右側はやはりダミーの矢印を描画し、それだけではなく矢印のラベルとして全角スペースを複数記述しています。このことで group の右辺を右側に延ばすことができます。

さらに group の枠線を背景色と同じにします。目立たなくなりますが、最前面に描画されるようで、完全にその存在を隠すことはできないようです。

group のラベルにあった「注目！」の文字は全角スペースに置き換えました。ただ、ラベルの背景の五角形自体は最前面に描画されているので、その背面にあるライフラインが消えてしまっています。これを解消するには、もう少し左側まで group の矩形を延ばすことですが、ちょっと難しい。コメント（note left of User）を追加すれば更に左側に延ばすことはできます。そのコメントの色を調整すれば「見えないコメント」にすることもできますが、コメントは個別に変えられる色が背景色だけです。他にコメントがなければこの手段が使えます。

@startuml

hide footbox

skinparam shadowing false

skinparam sequence {
    LifeLineBorderColor #Black
    LifeLineBackgroundColor #White
    
    ActorBackgroundColor #White
    ActorBorderColor #Black
    
    ParticipantBorderColor #Black
    ParticipantBackgroundColor #White
    
    ArrowColor #Black
    
    ' グループの枠線を目立たなくする
    GroupBorderColor #FFCCFF
    GroupBackGroundColor #FFCCFF
}

' 注釈を目立たなくする
skinparam NoteBorderColor #FFCCFF
skinparam NoteBackgroundColor #White

actor User
participant "ObjectA" as A
participant "ObjectB" as B

User -> A : Request
activate A
group #FFCCFF 　
    ' 左側を広げるために背景色と同じ矢印を描画する。
    
    note left of User #FFCCFF
        <font color="#FFCCFF">注釈</font>
    end note
    
    A -> B : SendMessage
    activate B
    
    ' 右側を広げるために背景色と同じ矢印を描画し、
    ' 全角スペースを描画する。
    B -[#FFCCFF]> B :　　　　　　　　
end group
A <-- B
deactivate B
destroy B
User <-- A
deactivate A

@enduml

特定の処理を強調する３

さいごに

いかがでしたでしょうか。今回は PlantUML で描くシーケンス図の「色」をシンプルにしたり強調するために色をコントロールする方法についてまとめてみました。微妙な既定色で PlantUML に懐疑的だった方も、これを機に PlantUML を始めてみてはいかがでしょうか。

UML2.0クイックリファレンス