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が書けるようになります。
プレビューするには、「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
アクティビティ図
アクティビティ図を書くことも可能です。
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
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント