VS CodeでPlantUMLを使ってクラス図,アクティビティ図,シーケンス図の書き方

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.

拡張子

VS Codeで拡張子を.puとすればPlantUMLが書けるようになります。(pumlも可)

プレビューするには、「Alt + d」と押します。

記述

以下のように@startuml～@endumlの間に書いていきます。

@startuml

'ここに書く

@enduml

タイトル

titleと書きます。

@startuml
title クラス図
@enduml

パッケージ

パッケージを表示します。以下はcommonと言うパッケージに所属するUtility,Logを表示する例です。

@startuml
title クラス図
package 共通 {
  class ユーティリティ
  class ログ
}
@enduml

パッケージのネスト

パッケージをネストするには、構文もそのままネストしてあげればよいです。

@startuml
title クラス図
package controller {
  class 車
  package common {
    class ユーティリティ
    class ログ
  }
}
@enduml

矢印

矢印の書き方です。

@startuml
title クラス図
車 <|-- ユーティリティ
自転車 <|-- ユーティリティ
車 <|--- コンスタント
自転車 <|--- コンスタント
車 <|---- ログ
自転車 <|---- ログ
@enduml

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が出力されます。

コメント

エクセルのコメントのような機能があります。

note left of クラス名: コメント～～というように記述します。

@startuml
title クラス図
package controller {
  package common {
    class utility
    class log
  }
}
note left of utility: コメントA
note right of utility: コメントB
@enduml

以下のようになります。

複数行コメント

複数行コメントを記述したい場合は以下のように書きます。

note left
ここに書く
end note

note right
ここに書く
end note

具体的には以下のように記述します。

@startuml
title クラス図
package controller {
  package common {
    class utility
    class log
  }
}
note left of log
コメントA
コメントA
end note
@enduml

クラス図は以下のようになります。

フレーム

クラス図で良く使うフレームの表示方法です。

@startuml
title クラス図
frame pkg {
  class Foo
}
@enduml

これでフレームが表示されます。

クラス図の記述方法

クラス図の書き方には決まりがあります。

+	public
–	private
#	protected
~	package

下線が引かれたフィールドまたはメソッドは、staticを意味します。

インタフェースはクラス名の上に<<Interface>>と記述します。

フィールドとメソッド間は線で区切ります。

以下、Testクラスの例です。

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

GitHub - awslabs/aws-icons-for-plantuml: PlantUML sprites, macros, and other includes for Amazon Web Services services and resources

PlantUML sprites, macros, and other includes for Amazon Web Services services and resources - awslabs/aws-icons-for-plan...

github.com

コメント(アクティビティ図)

アクティビティ図を書くことも可能です。

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

デフォルトテーマを変更

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

分類子(シーケンス図)

分類子の表示方法です。

@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