VS CodeでPlantUmlを使ってクラス図の書き方

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

タイトル

titleと書きます。

@startuml
title クラス図
@enduml

view raw
gistfile1.txt
hosted with ❤ by GitHub

パッケージ

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

VS CodeでPlantUmlを使ってクラス図の書き方

パッケージのネスト

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

VS CodeでPlantUmlを使ってクラス図の書き方

矢印

矢印の書き方です。

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

VS CodeでPlantUmlを使ってクラス図の書き方

破線の書き方です。

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にすることは無理なようです。

PNG出力

pngファイルで出力する場合にpuファイルに日本語を含む場合は、文字コードをShift-JISにしておきます。

これでsample.pngファイルが作成されます。

SVG出力

svgとして出力するには-tsvgオプションを使用します。

コメント

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

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

以下のようになります。

VS CodeでPlantUmlを使ってクラス図の書き方

複数行コメント

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

note left
ここに書く
end note

view raw
gistfile1.txt
hosted with ❤ by GitHub

note right
ここに書く
end note

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

VS CodeでPlantUmlを使ってクラス図の書き方

フレーム

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

クラス図の記述方法

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

+ public
private
# protected
~ package

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

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

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

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

Javaのクラス図の書き方

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

S3

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

lambda

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

apigateway

https://github.com/awslabs/aws-icons-for-plantuml

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA