僕的Plant UMLのススメ【Style編】 - Hajimeの妄言とTechの部屋

はじめに

こんにちは
今回から複数回に分けて、Plant UMLに関して書いていこうかと思います。

今回はPlantUMLのフォーマットに関する記事です。
PlantUMLの導入方法や、どうやって書くのかは次回、次次回に書いていこうと思います。
m(＿＿)m < Styleだけでめっちゃボリュームがあったから分割しました。 )

書き始めてから量が多いことに気づいたので
公開順序は勘弁してください m(＿＿;)m

Style編 (これ)
環境構築編 For Mac & PlantUMLとはなんぞや & UMLって何？(次回)
図形描画編 (次次回)

今回はStyle編となっています。
それでは、ネタ画像とともにどうぞー

UMRぢゃないよUML

Plant UML Style編

書き方

接頭語はskinparam
ネイティブなCSSっぽい

skinparam hogehogeParam1 value1 
skinparam hogehogeParam2 value2
skinparam hogehogeParam3 value3

/* 上と下は同じ */

skinparam hogehoge {
  Param1 value1
  Param1 value1
  Param1 value1
}

個別に名称を設定することでそれぞれに反映させることができる

Sample

@startuml
skinparam Usecase {
  BorderColor Black
  FontColor White
  StereotypeFontColor White

  BackgroundColor<<UseCase_01>> Green
  BackgroundColor<<UseCase_02>> Blue
}

title Set styles on Each Contents

usecase (Usecase_01_green) <<UseCase_01>>
usecase (Usecase_02_blue) <<UseCase_02>>

@enduml

Result

クラス名一覧

図名称	クラス名
シーケンス図	sequence
ユースケース図	usecase
クラス図	class
コンポーネント図	component
アクティビティ図	activity
状態遷移(ステート)図	state

一覧

表サンプル

Param Name	説明
sample	図

全体共通

(Class名)FontName
(Class名)FontColor
(Class名)FontSize
(Class名)FontStyle

全体共通一覧

FontColor	対象のフォントの色を指定
`ActivityFontColor red`
FontName	対象のフォントを変更
`DatabaseFontName Papyrus`
FontSize	対象のフォントサイズを変更
`NodeFontSize 18`
FontStyle	対象のフォントのスタイルを変更 normal , plain, italic, bold
`TitleFontStyle italic`

よく触るスタイルたち

アクター(Actor)

ActorBackgroundColor
ActorBorderColor
ActorStereotypeFontName
ActorStereotypeFontColor
ActorStereotypeFontSize
ActorStereotypeFontStyle

アクタースタイル一覧

BackgroundColor	アクターの頭の色を変更
`ActorBackgroundColor lawnGreen`
BorderColor	アクターの枠線の色を変更
`ActorBorderColor red`
StereotypeFont<HOGEHOGE>	ステレオタイプ部分のフォント設定の指定 `ActorStereotype`をクラス名として、共通指定部分と同様

エージェント(Agent)

AgentBackgroundColor
AgentBorderColor
AgentBorderThickness
AgentStereotypeFontName
AgentStereotypeFontColor
AgentStereotypeFontSize
AgentStereotypeFontStyle

エージェントスタイル一覧

BackgroundColor	内部背景色の指定
`AgentBackgroundColor lawnGreen`
BorderColor	枠線の色を変更
`AgentBorderColor blue`
BorderThickness	枠線の太さを変更
`AgentBorderThickness 5`
StereotypeFont<HOGEHOGE>	ステレオタイプ部分のフォント設定の指定 `ActorStereotype`をクラス名として、共通指定部分と同様

矢印(Arrow)

AgentBackgroundColor
AgentBorderColor
AgentBorderThickness
AgentStereotypeFontName
AgentStereotypeFontColor
AgentStereotypeFontSize
AgentStereotypeFontStyle

矢印スタイル一覧

BackgroundColor	内部背景色の指定
`AgentBackgroundColor lawnGreen`
BorderColor	枠線の色を変更
`AgentBorderColor blue`
BorderThickness	枠線の太さを変更
`AgentBorderThickness 5`
StereotypeFont<HOGEHOGE>	ステレオタイプ部分のフォント設定の指定 `ActorStereotype`をクラス名として、共通指定部分と同様

バウンダリー(Boundary)

BoundaryBackgroundColor
BoundaryBorderColor
BoundaryStereotypeFontName
BoundaryStereotypeFontColor
BoundaryStereotypeFontSize
BoundaryStereotypeFontStyle

バウンダリースタイル一覧

BackgroundColor	バウンダリーの色を変更
`BoundaryBackgroundColor lawnGreen`
BorderColor	バウンダリーの枠線の入を変更
`BoundaryBorderColor red`
StereotypeFont<HOGEHOGE>	ステレオタイプ部分のフォント設定の指定 `ActorStereotype`をクラス名として、共通指定部分と同様

凡例(Legend)

LegendBackgroundColor
LegendBorderColor
LegendBorderThickness

凡例スタイル一覧

BackgroundColor	凡例の色を変更
`LegendBackgroundColor GreenYellow`
BorderColor	凡例の枠線の入を変更
`LegendBorderColor red`
BorderThickness	凡例の枠線の太さを変更
`LegendBorderThickness 1`

ノード(Node)

NodeBackgroundColor
NodeBorderColor
NodeStereotypeFontName
NodeStereotypeFontColor
NodeStereotypeFontSize
NodeStereotypeFontStyle

Nodeスタイル一覧

BackgroundColor	Nodeの色を変更
`NodeBackgroundColor lawnGreen`
BorderColor	Nodeの枠線の入を変更
`NodeBorderColor red`
StereotypeFont<HOGEHOGE>	ステレオタイプ部分のフォント設定の指定 `ActorStereotype`をクラス名として、共通指定部分と同様

メモ(Note)

NoteBackgroundColor
NoteBorderColor
NoteBorderThickness
NoteShadowing
NoteTextAlignment

メモスタイル一覧

BackgroundColor	Noteの色を変更
`NoteBackgroundColor PapayaWhip`
BorderColor	Noteの枠線の入を変更
`NoteBorderColor red`
NoteBorderThickness	Noteの枠線お太さを変更
`NoteBorderThickness 5`
Shadowing	Noteの影の有無
`NoteShadowing true`
TextAlignment	Noteの文字の配置動いてない？と公式が言ってる
`NoteTextAlignment left`

アクティビティ図 ( `Activity` )

ActivityBackgroundColor
ActivityBarColor
ActivityBorderColor
ActivityBorderThickness
ActivityEndColor
ActivityStartColor
activityDiamondBackgroundColor
activityDiamondBorderColor
activityDiamondFontColor
activityDiamondFontStyle

アクティビティ図スタイル一覧

BackgroundColor	ノードの背景色を変更
`ActivityBackgroundColor lightCyan`
BarColor	フォークノード・ジョインノードの色を指定
`ActivityBarColor red`
BorderColor	ノードの枠線の色を変更
`ActivityBorderColor red`
BorderThickness	ノードの枠線の太さ
`ActivityBorderThickness 5`
EndColor	最終ノードの色を変更
`ActivityEndColor Fuschia`
StartColor	初期ノードの色を変更
`ActivityStartColor aqua`
DiamondBackgroundColor	ディメンジョン・マージノードの背景色を変更
`activityDiamondBackgroundColor lawnGreen` 以下、Camel-caseに注意
DiamondBorderColor	ディメンジョン・マージノードの枠線の色を変更
`activityDiamondBorderColor red`
Diamond<HOGEHOGE>	ディメンジョン・マージノード内のフォントの設定 `activityDiamond`をクラス名として共通指定と同様

ユースケース図 ( `Usecase` )

UsecaseBackgroundColor
UsecaseBarColor
UsecaseBorderColor
UsecaseBorderThickness
UsecaseStereotypeFontName
UsecaseStereotypeFontColor
UsecaseStereotypeFontSize
UsecaseStereotypeFontStyle

ユースケースのスタイル一覧

BackgroundColor	ユースケースの背景色を変更
`UsecaseBackgroundColor GreenYellow`
BarColor	ユースケースの枠線の色を指定
`UsecaseBorderColor red`
BorderColor	ユースケースの枠線の太さを変更
`UsecaseBorderThickness 5`
StereotypeFont<HOGEHOGE>	Usecase Stereotypeのフォントの設定 `activityDiamond`をクラス名として共通指定と同様

特殊コマンド群

デフォルト ( `Default` )

すべてのグラフに反映させるというとても便利なやつ

MonospacedFontName
TextAlignment

一覧

MonospacedFontName	指定されていないすべてのフォント名を指定する
`DefaultMonospacedFontName Papyrus`
TextAlignment	指定されていないすべての敵スノの配置を指定する `right` 右側に配置するとクラッシュするらしい
`DefaultTextAlignment left`