plantUMLとは

ダイアグラムを素早く作成するためのコンポーネントです。

サーバー上でも作成可能ですが今回はVS Codeにインストールして使いたいと思います。

インストール

Java

必須。

$ java --version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

もしインストールされていなければ公式サイトからダウンロードしてください。

https://www.java.com/en/download/

Graphviz

シーケンス図とアクティビティ図（新構文）のみ使用するのであれば、これは不要です。

VS Codeの拡張機能

VS Codeで使用するために必要です。

拡張機能でplantUMLを検索し、Previewerも同時にインストールします。

拡張子

PlantUMLのファイルとして認識させるためには以下の拡張子で保存します。

.wsd
.pu
.puml
.plantuml
.iuml

今回は.puで作成しています。

画像出力

command + shift + Pでメニューが出るので「plantUML」を入力して実行したいメニューを選択します。画像出力なので「エクスポート」です。

ファイルフォーマットを選択すると出力されます。

サンプルコード

@startuml

title サンプルコード

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response

@enduml

デザイン

デザインを指定することもできます。

skinparam {
    monochrome true
    padding 2
}

@startuml

skinparam {
  monochrome true
  padding 5
}

title サンプルコード

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response

@enduml

デザインテーマ

テーマも提供されています。

Use themes in your diagrams

メッセージの色を変更したりも可能です。

$success("<msg>")
$failure("<msg>")
$warning("<msg>")

@startuml

title テーマサンプルコード

!theme spacelab

Bob -> Alice :  hello
Bob <- Alice :  $success("success: hello B.")
Bob -x Alice :  $failure("failure")
Bob ->> Alice : $warning("warning")

@enduml