messykitchenなブログ

ただひたすらに散らかった台所や人生やその他を晒す。

脱W〇rd, 脱E×cel, 脱@st@h : #9

PlantUML : コンポーネントに色を付ける with ステレオタイプ

skinparam を定義することで、コンポーネントのデフォルトの見た目を指定することができます。
個別に色を与えたい場合は、色コードを追加すればその値が反映されます。

rectangle の背景色デフォルトを #green にし、個別に #gray を指定して作図してみた例。(文字のデフォルトは、白・太)

rectangle    "rectangle 1"   as rect1
rectangle   "rectangle 2"   as rect2    #gray

skinparam   rectangleFontColor      #white
skinparam   rectangleFontStyle      bold
skinparam   rectangleBackgroundColor    #green

skinparam   backgroundColor         #fdfbf4

個別に設定すれば、すべて変更できる。

rectangle    "rectangle 3"   as rect3    #royalblue
rectangle   "rectangle 4"   as rect4    #red

skinparam   rectangleFontColor      #white
skinparam   rectangleFontStyle      bold
skinparam   rectangleBackgroundColor    #green

skinparam   backgroundColor         #fdfbf4

1つ2つ程度なら、個別対応で十分だと思います。

でも、たとえば「たくさんある重要な箱は全て赤色にしたい!」とかになると、全てに色設定を書くのはとても面倒。
さらに、「やっぱり青色にしたい!」となったりすると、とても悲しい事態に。

ステレオタイプ を利用すると、少し幸せになれるかもしれません。

この例では、<<だいじ>><<とてもだいじ>> というステレオタイプを定義しています。
そして、それぞれのステレオタイプの場合の色設定を skinparam で定義しています。

こうしておけば、<<だいじ>><とてもだいじ<>> な印をつけていたものを全て一度に、見た目を変更することが楽にできるようになりそうです。

rectangle    "rectangle 1"   as rect1
rectangle   "rectangle 2"   as rect2    #gray

rectangle   "rectangle 3"   <<だいじ>>   as rect3
rectangle   "rectangle 4"   <<とてもだいじ>>  as rect4

skinparam   rectangleFontColor      #white
skinparam   rectangleFontStyle      bold
skinparam   rectangleBackgroundColor    #green
skinparam   backgroundColor         #fdfbf4

skinparam   rectangleBackgroundColor<<だいじ>>   #royalblue
skinparam   rectangleBackgroundColor<<とてもだいじ>>  #red

まあ、あまり色付けを多用すると、散らかった感が出てしまうので気を付けたいと思います。