vscode #05 : PlantUMLを使ってみる [Mac][Windows]

どうも、もりもりです。

以前ブログメンバーのよっしーさんの記事で、仕事先での設計書作成が「脱Excel」の流れになってきてるということで draw.ioの紹介がありましたが今回はUMLをテキストベースで書けるPlantUMLについて紹介したいと思います。

draw.ioの記事はこちら。

目次
■ 導入
■ vscodeでプラグインをインストール
■ 動作確認
■ 画像出力
■ さいごに

導入

PlantUMLはJavaが必要なのでまずはJavaを入れてください。Macの方はHomebrewで入れてもOKです。（というかそっちのがラク）
シーケンス図、アクティビティ図以外も使うならGraphvizも必要になるようです。

◆ Macの場合

$ brew install plantuml
$ brew install graphviz

※記事を書いた時点(2021/02/12)ではplantumlのインストール時にgraphvizも一緒に入ったようです。

◆ Windowsの場合

> winget install -e --id Oracle.JavaRuntimeEnvironment
> winget install graphviz

vscodeでプラグインをインストール

拡張機能より「plantuml」と入力して下記画像のプラグインをインストール

動作確認

xxxx.puという拡張子でファイルを作成します。

下記のようにファイルを作成して入力します。

sequence-sample.pu

@startuml
participant "View" as V
participant "User Class" as U

activate V
V -> V: click button
V -> U: create instance
activate U
V -> U: GetUsers()
U --> V: List
deactivate U
V -> V: bind users to GridView
@enduml

option + D（Windowsならalt + D）でプレビュー表示してみると、あらゴイゴイスー。

公式ドキュメントはこちらを。

画像出力

作成したUMLを画像に出力してみましょう。 Command + Shift + P（WindowsならCtrl + Shift + P）で 「uml」と入力します。 「Export Current Diagram」を選択し、「出力形式」を選択します。

markdownファイルに挿入するとこんな感じに。
※Darkテーマだとシーケンス図のメッセージが黒で見えなかったのでLightテーマにしてます。

さいごに

画像出力もできるし慣れてしまえばこっちの方がサクっと作れそうですね。 設計書をMarkdownやasciidocなどで作成してる人はぜひ使ってみてください。 mermaid.jsの方も以前チラッと触ってみたことがあり、同じようなUMLを作成できるのでまた違いなどが判れば紹介したいと思います。

以上、もりもりでした。