VS CodeでPlantUmlを使ってクラス図の書き方
Windows環境でVS Codeを使用してクラス図を書いてみます。
VS CodeのプラグインPlantUMLをインストールします。
その次にgraphvizをhttps://graphviz.gitlab.io/download/からインストールします。
アプリ | バージョン |
---|---|
graphviz | 2.38 |
graphvizは2.38をインストールしました。
拡張子
VS Codeで拡張子を.puとすればPlantUMLが書けるようになります。
プレビューするには、「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にすることは無理なようです。
1 |
java -jar plantuml.jar -pdf sample.pu |
PNG出力
pngファイルで出力する場合にpuファイルに日本語を含む場合は、文字コードをShift-JISにしておきます。
1 |
java -jar plantuml.jar -png sample.pu |
これでsample.pngファイルが作成されます。
SVG出力
svgとして出力するには-tsvgオプションを使用します。
1 |
java -jar plantuml.jar -tsvg sample.pu |
コメント
エクセルのコメントのような機能があります。
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 |
https://github.com/awslabs/aws-icons-for-plantuml
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^