はじめに
テキストベースで気軽に UML を描くことができる PlantUML ですが、デフォルトでは微妙な色が付いています。ついでに＿＿言いにくいけれど＿＿美しいとは言えない配色です。デフォルトは白黒が良かったな...、とは誰もが思うところではないでしょうか。
この配色には「この図は PlantUML を使って描かれています」と一目で分かるメリットがあります。しかし公的な書類に使用する上では、やはり白黒で作図したいという要求も多いでしょう。
この記事では PlantUML を使って、色をコントロールしたクラス図を描くことを目指します。
デフォルトを確認
まずは何もコントロールせず、基本の要素だけで描いてみましょう。
@startuml SuperClass <|-- SubClass @enduml
このようになります。
白黒にしてみる
コードの先頭に「skinparam monochrome true」と書くと、その図全体をモノクロにするという効果があります。
最初の例は、以下のような描画結果になります。
@startuml ' 全体をグレースケールにする skinparam monochrome true SuperClass <|-- SubClass @enduml
skinparam monochrome true の弊害
この「skinparam monochrome true」は、描画結果をグレースケールにします。つまり一旦カラーで描画したあとで全てをモノクロ変換しているのです。
しかし、基本は白黒で、目立たせたい箇所を強調する意味で部分的にカラーにしたいという要求もあるでしょう。
「skinparam monochrome true」を使うと、カラーにしたい部分も最後にモノクロ変換されてしまいます。これは望むところではありません。
skinparam monochrome true を使わずに白黒にしてみる
では「skinparam monochrome true」を使わずに白黒表現にしてみましょう。それには構成要素の種類ごとに色を設定する必要があります。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' (C) マークの背景色を White にする
skinparam stereotypeCBackgroundColor White
SuperClass <|-- SubClass
@enduml
結果は次のようになります。
影を取り除く
よく見ると影が付いています。要りません。なくしましょう。「skinparam shadowing false」を指定します。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' (C) マークの背景色を White にする
skinparam stereotypeCBackgroundColor White
' 影をなくす
skinparam shadowing false
SuperClass <|-- SubClass
@enduml
(C) マークを取り除く
クラス名の左側には「クラス」を表す(C)というマークが付いています。UML を学習した時に、こんなものはありませんでした。取り除きましょう。
「hide circle」を用います。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
SuperClass <|-- SubClass
@enduml
メンバーの可視性を普通に（記号に）する
そろそろメソッドやフィールドを追加してみましょう。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
class SuperClass {
+field1
~field2
#field3
-field4
}
class SubClass {
+method1()
~method2()
#method3()
-method4()
}
SuperClass <|-- SubClass
@enduml
おや？可視性を示す記号がアイコンになっていますね。かわいいですが、普通に記号にしてくれた方が分りやすいという人も多いでしょう。「skinparam classAttributeIconSize 0」でアイコン表示を記号表示に替えることができます。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
' メンバーの可視性を記号にする
skinparam classAttributeIconSize 0
class SuperClass {
+field1
~field2
#field3
-field4
}
class SubClass {
+method1()
~method2()
#method3()
-method4()
}
SuperClass <|-- SubClass
@enduml
空の部屋を非表示にする
最初の例に戻ります。
@startuml SuperClass <|-- SubClass @enduml
クラスを示す矩形に、フィールドやメソッドを記述するための「部屋」が描画されています。記述がないので空っぽのままです。
UML の規格では、空の場合は描画しなくても良いことになっています。好みにもよりますが、これを隠してしまいましょう。
「hide empty member」を使います。また、フィールドだけを隠したい場合「hide empty field」を、メソッドを隠したい場合は「hide empty method」を使います。
@startuml ' 空の部屋を非表示にする hide empty member ' 空のフィールドを非表示にする 'hide empty field ' 空のメソッドの部屋を非表示にする 'hide empty method SuperClass <|-- SubClass @enduml
空ではない部屋を強制的に隠すこともできます。「hide member」「hide field」「hide method」を使います。
一部のクラスに強調色を用いる
特定のクラスだけを目立たせたい場合、色をつける場所によって方法が異なります。
まず、特定のクラスに背景色を付ける場合は、クラス定義の後ろにカラーコードを又は色の名前を指定します。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
' 特定のクラスの背景色を変更する
class SuperClass #ffccff {
}
SuperClass <|-- SubClass
@enduml
ちなみに、ここで色指定を「#white-ffccff」などとするとグラデーションを表現できます。
クラスの枠線やフォントに色をつけたい
特定のクラスの枠線やフォントに対してだけ色をつけたい場合は一手間必要です。キーワード（ステレオタイプ）を指定して、そのキーワード（ステレオタイプ）に対して「skinparam」で色をつけるのです。
そのままだとキーワード（ステレオタイプ）も表示されてしまうので「hide stereotype」を指定して非表示にしています。特定のキーワード（ステレオタイプ）だけを指定することで狙って隠すことができます。以下の例を参照してください。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
' <<Foo>> のクラスの枠線を Red にする
BorderColor<<Foo>> Red
' <<Foo>> のクラスのフォント色を Blue にする
FontColor<<Foo>> Blue
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
' Foo キーワード（ステレオタイプ）を隠す
hide <<Foo>> stereotype
class SuperClass <<Foo>> {
}
class SubClass <<Bar>> {
}
SuperClass <|-- SubClass
@enduml
特定の矢印だけ色をつける
特定の矢印に色をつけるには、矢に直接記述します。
@startuml
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
' この矢印だけ red にする
SuperClass <|-[#red]- SubClass
' この矢印は skinparam で指定した Black
SubClass <|-- BarObject
@enduml
注釈を白黒にする
注釈も白黒にできます。簡単な例を示します。
@startuml
' 注釈の枠線を Black にする
skinparam noteBorderColor Black
' 注釈の背景色を White にする
skinparam noteBackgroundColor White
' 注釈。
note left of SuperClass
This is
note.
end note
' 影をなくす
skinparam shadowing false
class SuperClass
@enduml
特定の注釈だけ色をつける
では注釈も特定のものだけ色をつけてみましょう。クラスの背景色を設定するのと同様に、注釈の定義に直接カラーコードや色名で背景色を設定できます。
グラデーションにしてみました。
@startuml
' 注釈の枠線を Black にする
skinparam noteBorderColor Black
' 注釈の背景色を White にする
skinparam noteBackgroundColor White
skinparam class {
' 枠線を Black にする
BorderColor Black
' 背景色を White にする
BackgroundColor White
' 矢印を Black にする
ArrowColor Black
}
' 影をなくす
skinparam shadowing false
' クラス名の左側にある丸囲み文字を取り除く
hide circle
' 注釈１。skinparam で指定した既定色が使われる。
note left of SuperClass
This is
note-1.
end note
' 注釈２。色を指定する。
note right of SuperClass #white-ffccff
This is
note-2.
end note
class SuperClass
@enduml
さいごに
いかがでしたでしょうか。今回は PlantUML で描くクラス図の「色」をシンプルにする方法についてまとめてみました。微妙な既定色に惑わされず、PlantUML を華麗に使いこなしてみてください。
