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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
