- VS CodeでPlantUMLを使ってクラス図,アクティビティ図,シーケンス図の書き方
- PlantUMLの拡張子
- VS Codeプレビュー表示
- PDF出力（コマンド）
- PNG出力（コマンド）
- SVG出力（コマンド）
- VSCodeのコマンドパレットから画像出力
- デフォルトテーマを変更
- start~end記述（共通）
- タイトル（共通）
- フレーム（共通）
- 凡例（共通）
- バージョン確認（共通）
- パッケージ（クラス図）
- クラス、インタフェース、抽象、列挙子（クラス図）
- パッケージのネスト（クラス図）
- 矢印（skinparam linetype normal）（クラス図）
- 矢印（skinparam linetype ortho）（クラス図）
- 矢印（skinparam linetype polyline）（クラス図）
- クラス間の関係（クラス図）
- クラス間の関係のラベル（クラス図）
- 1行コメント（クラス図）
- 複数行コメント（クラス図）
- クラス図の記述方法（クラス図）
- aws-icons-for-plantumlの使い方
- S3
- Lambda
- APIGateway
- コメント(アクティビティ図)
- 分岐（アクティビティ図）
- ループ（アクティビティ図）
- コメント（アクティビティ図）
- ノード（アクティビティ図）
- 分類子(シーケンス図)
- 分類子を囲むbox(シーケンス図)
- ライフライン(シーケンス図)
- アクティブ(シーケンス図)
- メッセージ(シーケンス図)
- メッセージラベル(シーケンス図)
- メッセージラベル位置指定(シーケンス図)
- 各オブジェクト間の長さを指定する(シーケンス図)
- 分岐(シーケンス図)
- ループ(シーケンス図)
- メインフレーム(シーケンス図)
- 変数定義(シーケンス図)
- 関連
VS CodeでPlantUMLを使ってクラス図,アクティビティ図,シーケンス図の書き方
Windows環境でVS Codeを使用してクラス図やアクティビティ図、シーケンス図などを書いてみます。
VS CodeのプラグインPlantUMLをインストールします。
その次にgraphvizをhttps://graphviz.gitlab.io/download/からインストールします。
| アプリ | バージョン |
|---|---|
| java | openjdk 11.0.3 2019-04-16 LTS |
| graphviz | 2.38 |
graphvizは2.38をインストールしました。javaのバージョンは11にしました。
Requirements for Local render
It’s necessary to have following installed:
- Java : Platform for PlantUML running.
- Graphviz : PlantUML requires it to calculate positions in diagram.
※追記
Win環境でサーバーレンダリング機能を使用すれば、graphviz不要、java不要、plantuml.jar不要でも、VS Code+PlantUml拡張プラグインのみでプレビューやpng生成が出来るようです。
以下のようにサーバーレンダリングの設定を行います。
settings.json
{
"plantuml.render": "PlantUMLServer",
"plantuml.server": "https://www.plantuml.com/plantuml"
}
PlantUMLの拡張子
VS Codeで拡張子を.puとすればPlantUMLが書けるようになります。(pumlも可)
VS Codeプレビュー表示
プレビューするには、「Alt + d」と押します。
PDF出力（コマンド）
PDF出力するにはplantuml.jarが必要です。
http://plantuml.com/downloadよりダウンロードします。
plantuml.jarを以下コマンドを実行する直下に配置します。また、http://beta.plantuml.net/batikAndFop.zipよりダウンロードしてライブラリ類が必要になります。
plantuml.jarと同じディレクトリに配置します。
PDFを作成するコマンドです。sample.puがVS Codeで作成したファイルでUTF-8で保存しておきます。日本語をそのままPDFにすることは無理なようです。
C:\test>java -jar plantuml.jar -pdf sample.pu
PNG出力（コマンド）
pngファイルで出力する場合にpuファイルに日本語を含む場合は、文字コードをShift-JISにしておきます。
java -jar plantuml.jar -png sample.pu
これでsample.pngファイルが作成されます。
SVG出力（コマンド）
svgとして出力するには-tsvgオプションを使用します。
java -jar plantuml.jar -tsvg sample.pu
VSCodeのコマンドパレットから画像出力
コマンドパレット(ctrl + shift + p)から画像出力します。
PlantUML:Export Current File Diagramsよりsvgやpngを指定すればカレントディレクトリにoutフォルダが作成されます。その中にsvgやpngが出力されます。
デフォルトテーマを変更
https://plantuml.com/ja/newsを見ると、デフォルトのテーマが変更されたようです。
February 25, 2022: Make PlantUML diagrams easily accessible from markdown, GitHub flavored.
February 16, 2022: You can restore the old theme using skin rose directive.
昔と同じテーマにしたい場合、skin roseと記述する必要があります。
@startuml skin rose @end
その他、`skin debug`やデフォルトの`skin plantuml`が指定可能です。
start~end記述（共通）
以下のように@startuml～@endumlの間に書いていきます。
@startuml 'ここに書く @enduml
VS Codeでは、@startumlの後にダイヤグラム名を書かないと「ダイアグラム名が未設定です。 “@startuml name” のように設定してください」と言う警告が出るようです。
タイトル（共通）
titleと書きます。
@startuml title クラス図 @enduml
フレーム（共通）
クラス図で良く使うフレームの表示方法です。シーケンス図などでも使用されます。
@startuml
title クラス図
frame pkg {
class Foo
}
@enduml
これでフレームが表示されます。
凡例（共通）
各種の図に凡例を表示するには、legend~endlegendを使います。
@startuml
skinparam rectangle {
BackgroundColor<<Internal>> LightBlue
BackgroundColor<<External>> LightGray
}
rectangle "社内システム" <<Internal>>
rectangle "外部API" <<External>>
legend right
|= 色 |= 意味 |
|<#LightBlue>| 社内ネットワーク内のシステム |
|<#LightGray>| 外部ベンダーのシステム |
endlegend
@enduml
バージョン確認（共通）
以下のコードでバージョン確認が出来ます。
@startuml version @enduml
パッケージ（クラス図）
パッケージを表示します。以下はcommonと言うパッケージに所属するUtility,Logを表示する例です。
@startuml
title クラス図
package 共通 {
class ユーティリティ
class ログ
}
@enduml
クラス、インタフェース、抽象、列挙子（クラス図）
class、interface、abstract、enumキーワードを使用してクラスを表示します。
<<interface>>、<<abstract>>、<<enum>>などはステレオタイプです。
@startuml
title クラス図
interface "支払い機能" <<interface>> {
}
abstract cl"注文ベース" <<abstract>> {
}
class "通常注文" {
}
enum "注文ステータス" <<enum>> {
新規
完了
}
' 継承と関連
"注文ベース" ..|> "支払い機能" : 実現
"通常注文" --|> "注文ベース" : 継承
"通常注文" --> "注文ステータス" : 参照
@enduml
パッケージのネスト（クラス図）
パッケージをネストするには、構文もそのままネストしてあげればよいです。
@startuml
title クラス図
package controller {
class 車
package common {
class ユーティリティ
class ログ
}
}
@enduml
矢印（skinparam linetype normal）（クラス図）
矢印のタイプです。skinparam linetype未指定時はnormalとなります。
@startuml title クラス図 車 <|-- ユーティリティ 自転車 <|-- ユーティリティ 車 <|--- コンスタント 自転車 <|--- コンスタント 車 <|---- ログ 自転車 <|---- ログ @enduml
矢印（skinparam linetype ortho）（クラス図）
矢印にはorthogonal（直交）の略でortho（オルソ）を指定できます。
skinparam linetype orthoを記述します。
@startuml skinparam linetype ortho title クラス図 車 <|-- ユーティリティ 自転車 <|-- ユーティリティ 車 <|--- コンスタント 自転車 <|--- コンスタント 車 <|---- ログ 自転車 <|---- ログ @enduml
矢印（skinparam linetype polyline）（クラス図）
矢印にはpolyline（ポリライン）を指定できます。多角線（直線＋角付き）で描画します。
skinparam linetype polylineを記述します。
@startuml skinparam linetype polyline title クラス図 車 <|-- ユーティリティ 自転車 <|-- ユーティリティ 車 <|--- コンスタント 自転車 <|--- コンスタント 車 <|---- ログ 自転車 <|---- ログ @enduml
クラス間の関係（クラス図）
クラス間の関係を表す線の種類です。
| 線の種類 | 記法例 | 用途 |
|---|---|---|
| 実線 | --, -->, <-- |
双方向／単方向関連 |
| 実線＋三角 | <|-- |
継承 |
| 破線＋三角 | <|.. |
汎化／インタフェース実装 |
| 破線 | ..> |
依存 |
| 実線＋ダイヤ | o-- |
集約（弱い所有） |
| 実線＋塗りつぶしダイヤ | *-- |
コンポジション（強い所有） |
@startuml
' ==== クラス定義 ====
class Vehicle {
+speed : int
+move()
+name : String
+color : String
+start()
+stop()
}
class Car
class Bike
class Engine
interface Movable
class Wheel
class Garage
' ==== 継承（Inheritance） ====
Vehicle <|-- Car
Vehicle <|-- Bike
' ==== 汎化 / インターフェース実装 ====
Car <|.. Movable
Bike <|.. Movable
'==== 単方向・双方向関連 (Association) ====
' 単方向関連
Car --> Engine
Bike --> Engine
' 双方向関連
Garage -- Car
Garage -- Bike
' ==== 集約・コンポジション ====
' 集約（弱い所有）
Car o-- Wheel
' コンポジション（強い所有）
Bike *-- Wheel
' ==== 依存 (Dependency) ====
' Car は Garage に依存
Car ..> Garage
Bike ..> Garage
@enduml
クラス間の関係のラベル（クラス図）
クラス間の関係を表す線にラベルを付けることが出来ます。`:`にテキストを続けることによってラベルが付けれます。
改行は\n（中央寄せ改行）、\r（右寄せ改行）、\l（左寄せ改行）が使えます。
@startuml
' ==== クラス定義 ====
class Vehicle {
+speed : int
+move()
+name : String
+color : String
+start()
+stop()
}
' ==== 継承（Inheritance） ====
Vehicle <|--- Truck: hoge\nfuga\npiyo 中央寄せ
Vehicle <|--- Car: hoge\rfuga\rpiyo 右寄せ
Vehicle <|--- Bike : hogehoge\lfuga\lpiyo 左寄せ
@enduml
1行コメント（クラス図）
エクセルのコメントのような機能があります。
クラス図で、note left of クラス名: コメント～～というように記述します。
@startuml
title クラス図
package controller {
package common {
class utility
class log
}
}
note left of utility: コメントA
note right of utility: コメントB
@enduml
以下のようになります。
\nを入れると複数行のコメントにもなりますが、SmetanaやVizJS、Graphvizなどによって動作が異なるようです。公式ドキュメント上は、コロン記法は 1 行ノートであることが前提のようです。
複数行コメント（クラス図）
クラス図で、複数行コメントを記述したい場合は以下のように書きます。
note left of Xxx ここに書く end note
note right of Xxx ここに書く end note
具体的には以下のように記述します。
@startuml
title クラス図
package controller {
package common {
class utility
class log
}
}
note left of log
コメントA
コメントA
end note
@enduml
クラス図は以下のようになります。
of log部分を省略すると、PlantUMLが「直前に定義されたクラスに自動で紐付ける」という仕様があるようです。
@startuml
title クラス図
package controller {
package common {
class utility
class log
}
}
' logが直前に定義されたクラスとなる
note left
コメントA
コメントA
end note
@enduml
クラス図の記述方法（クラス図）
クラス図の書き方は以下の通りです。
| + | public |
| – | private |
| # | protected |
| ~ | package private |
下線が引かれたフィールドまたはメソッドは、staticを意味します。
フィールドとメソッド間は「--」で、線で区切ります。
以下は、SampleClassのフィールド、メソッドの記述例です。
@startuml
class SampleClass {
+publicField : int
-privateField : String
#protectedField : boolean
{static} +staticPublicField : double
{static} -staticPrivateField : int
{static} #staticProtectedField : String
--
+publicMethod()
-privateMethod(param1 : int)
#protectedMethod() : boolean
{static} +staticPublicMethod()
{static} -staticPrivateMethod(param1 : int) : String
{static} #staticProtectedMethod() : int
}
@enduml
aws-icons-for-plantumlの使い方
AWSのアイコンを使ってネットワーク構成図を書きたいときに「https://www.draw.io/?lang=ja」を使っていたりしたのですが、plantumlでもaws-icons-for-plantumlを使えば記述することが可能です。
S3
S3の図を表示したい場合はSimpleStorageServiceS3を使います。
一番目の引数はエイリアス名です。
@startuml !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/master/dist !includeurl AWSPuml/AWSCommon.puml !include AWSPuml/Storage/all.puml title AWS SimpleStorageServiceS3(s3, "S3 ", "ストレージ", "テスト用バケット") @enduml
Lambda
Lambdaの図を表示したい場合はLambdaを使います。
一番目の引数はエイリアス名です。
@startuml !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/master/dist !includeurl AWSPuml/AWSCommon.puml !includeurl AWSPuml/Storage/all.puml !includeurl AWSPuml/Compute/all.puml title AWS Lambda(lambda, "データ取得", "データ取得するLambdaです") @enduml
APIGateway
APIGatewayの図を表示したい場合はLambdaを使います。
一番目の引数はエイリアス名です。
@startuml !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/master/dist !includeurl AWSPuml/AWSCommon.puml !includeurl AWSPuml/Mobile/all.puml title AWS APIGateway(api, "共通API", "説明") @enduml
コメント(アクティビティ図)
アクティビティ図を書くことも可能です。
startが始点、endが終点を表示します。
@startuml title アクティビティ図 start :処理A; :処理B; stop @enduml
分岐（アクティビティ図）
分岐を記述します。
@startuml title アクティビティ図 start if (x > 10) then (true) :処理A; else if (x <= 10 && x >= 0) then (true) :処理B; else (false) :処理C; endif stop @enduml
ループ（アクティビティ図）
ループを記述します。
@startuml title アクティビティ図 start repeat :処理A; repeat while (i < 10) stop @enduml
前判定のループを記述します。
@startuml テスト title アクティビティ図 start while (1 < 10) is (yes) :処理A; endwhile stop @enduml
while(条件) is (～～)とすることでyesとかハイとか表示することが出来ます。省略しても可です。
前判定では、is (yes) not (no)は使えないようです。
コメント（アクティビティ図）
アクティビティ図にもコメントを書くことが出来ます。
@startuml title アクティビティ図 start repeat :処理A; note left 注釈 処理Aのコメントです end note repeat while (i < 10) stop @enduml
ノード（アクティビティ図）
ノードの色々な表示方法です。
@startuml テスト title アクティビティ図 start :処理| :処理< :処理> :処理/ :処理\\ :処理] :処理} stop @enduml
分類子(シーケンス図)
分類子の表示方法です。
@startuml テスト participant "Client" as cli participant "Server" as serv cli -> serv @enduml
分類子を囲むbox(シーケンス図)
分類子をbox,end boxキーワードで囲む方法です。
@startuml テスト box participant "Client" as cli end box box コメント participant "Server" as serv end box cli -> serv : リクエスト @enduml
ライフライン(シーケンス図)
ライフラインはデフォルトは破線(nosolid)ですが、実線に変更することができます。
| 種類 | 記述 |
|---|---|
| 実線 | skinparam lifelineStrategy solid |
| 点線 | skinparam lifelineStrategy dotted |
| 破線 | skinparam lifelineStrategy nosolid |
@startuml テスト skinparam lifelineStrategy solid cli -> serv : リクエスト @enduml
実線
@startuml テスト skinparam lifelineStrategy dotted cli -> serv : リクエスト @enduml
点線
アクティブ(シーケンス図)
ライフラインの線をアクティブにする方法です。
@startuml テスト participant "Client" as cli participant "Server" as serv cli -> serv : リクエスト activate cli activate serv serv -> cli : レスポンス deactivate cli deactivate serv cli -> serv : リクエスト serv -> cli : レスポンス @enduml
ライフラインをネストする方法です。
@startuml テスト participant "Client" as cli participant "Server" as serv activate cli cli -> serv : リクエスト activate cli cli -> cli : リクエスト @enduml
メッセージ(シーケンス図)
メッセージの表示方法です。実線や破線、その他いくつかあります。
| 種類 | 記述 |
|---|---|
| 実線 | -> |
| 点線 | --> |
| 応答(実線) | <- |
| 応答(点線) | <-- |
| 非同期 | ->> |
@startuml テスト participant "Client" as cli participant "Server" as serv cli -> serv cli <- serv cli --> serv cli <-- serv @enduml
非同期メッセージは矢印の先端が変わります。
@startuml テスト participant "Client" as cli participant "Server" as serv cli ->> serv : 非同期リクエスト @enduml
メッセージラベル(シーケンス図)
メッセージ上にコメントを表示する方法です。
@startuml テスト participant "Client" as cli participant "Server" as serv cli -> serv : リクエスト cli <- serv : レスポンス @enduml
メッセージラベルは\nで改行することができます。
@startuml テスト participant "Client" as cli participant "Server" as serv cli -> serv : リクエ\nスト cli -> serv : レスポ\nンス @enduml
メッセージラベル位置指定(シーケンス図)
全体のメッセージラベルの位置を指定することができます。メッセージごとに位置指定することはできません。
| 種類 | 記述 |
|---|---|
| 左寄せ | skinparam sequenceMessageAlign left |
| 中央寄せ | skinparam sequenceMessageAlign center |
| 右寄せ | skinparam sequenceMessageAlign right |
@startuml テスト skinparam sequenceMessageAlign center participant "Client" as cli participant "Server" as serv cli -> serv : リクエスト cli <- serv : レスポンス cli -> serv : リクエスト cli <- serv : レスポンス @enduml
各オブジェクト間の長さを指定する(シーケンス図)
各オブジェクトの長さを指定することができます。オブジェクトごとに位置指定することはできません。
@startuml テスト skinparam ParticipantPadding 120 participant "Client" as cli participant "Server" as serv cli -> serv : リクエスト cli <- serv : レスポンス @enduml
分岐(シーケンス図)
分岐を表示する方法です。
@startuml テスト
participant "Client" as cli
participant "Server" as serv
cli -> serv : 認証リクエスト
alt 認証成功
serv --> cli: ログイン成功
else 認証失敗
serv --> cli: ログイン失敗
end
@enduml
ループ(シーケンス図)
forなどのループを表示する方法です。
@startuml テスト participant "Client" as cli participant "Server" as serv loop 3回 cli -> serv : リクエスト serv -> cli : レスポンス end @enduml
メインフレーム(シーケンス図)
メインフレームを表示する方法です。
@startuml テスト mainframe XXX participant "Client" as cli participant "Server" as serv cli -> serv : リクエスト serv -> cli : レスポンス @enduml
変数定義(シーケンス図)
変数を定義することができます。!$変数名="xxx"というように定義します。
文字列はダブルクォーテーションで囲みます。
使用するときは$変数名で使用します。
@startuml テスト ' 変数定義 !$req = "リクエスト" !$res = "レスポンス" participant "Client" as cli participant "Server" as serv cli -> serv : $req serv -> cli : $res @enduml
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
