今回の記事はVSCodeでUML図を作成する際に便利なPlantUMLの使い方をご紹介する記事です。便利なVSCodeですが、UML作成のプラグインPlantUMLを提供しております。UML初心者でPlantUMLの使い方がわからない方などは是非参考にしてみてください。
今回の操作はMacで行っていますが、Windowsでも手順は同じです。
UML図とは?
簡単に説明するとシステムを設計する際に共通で理解できるようにシステムの流れや、もう少し詳細なクラス図などを同じフォーマットで書いたものがUML図です。
書き方にはコードで書くか手書きチックに図を記載していくかの2通りになりますが、プロジェクト全体の流れが変わることはエンジニアの中でもかなり多いと思います。そう言ったものを管理できるgitとの連携がしやすいのでコードでUML図を書くことをお勧めします。
VSCodeでPlantUMLをインストール
VScode上でエクステンション(拡張機能)でPlantUMLを検索するのみです。有効化してください。また、Javaとgraphvizのインストールが必要です。下記コマンドでインストールできます。
brew install --cask adoptopenjdk
brew install graphviz
以上でPlantUMLを使用する準備は完了です。
UMLでプレビューを確認
Macの場合は「option」+「D」、Windowsの場合は「Alt」+「D」でプレビューが作成できます。
まずは下記サンプルを立ち上げてみましょう。拡張子は「.wsd」でファイル保存しております。
@startuml test
class Test1
class Test2
Test1 <|.. Test2
@enduml
「Option」+「D」で出力すると下記のような表示になっております。

これが簡単な使い方です。では次に線の引き方やクラス以外の記述方法などを紹介していきます。
PlantUMLでクラス図作成
基本的な文は下記のように書きます。
@startuml
class test1{
}
@enduml
PlantUMLでパッケージ作成
@startuml
package {
class test1{
}
}
@enduml
PlantUMLでコメントを記載
@startuml
class test1{
}
note right: test1のメモ
@enduml
PlantUMLで線を引く
class1 --|> class2
class3 ..|> class4
class5 .. class6
class7 --|> class8 :"メッセージ" >
class9 --"メッセージ" class10
PlantUMLのアクセス修飾子
[public]
+ int test1()
[privacy]
- int test2
PlantUMLでアクティビティ図
アクティビティ図の書き初めは下記のような感じです。
@startuml
start
:テスト\n処理1;
:処理2;
stop
@enduml
ではさらに詳しい文構造をみていきましょう。
PlantUMLでwhile文
while (条件)
:処理;
endwhile
PlantUMLでif文
if (条件) then (yes)
:OK;
else (no)
:No;
endif
PlantUMLでプロセスを分ける
|p1|
:テスト\n処理1;
|p2|
:処理2;
他にも多数の便利な描写機能があるので是非使いこなしてみましょう。公式のURLはこちらです。
では今回の記事は以上です。他にも多数の記事を記載しているので是非参考にしてください。
コメント