VSCodeをUML図やフローチャート作成に使ってみよう

開発用エディタのド定番「VSCode」を使いこなそう　第11回

UML図の作成に便利な「PlantUML」

　PlantUMLは、UML図の作成のためのツールです。シーケンス図やユースケース図をはじめとするUML図の他に、ネットワーク図、マインドマップ図などの作成もサポートします（図6）。このPlantUMLのVSCode版が、jebbsによる拡張機能「PlantUML」です。

図6：PlantUMML

　PlantUMLを利用するには、Javaのランタイムと、プレビュー描画のためのライブラリGraphvizがプラットフォームに必要なので、インストールしておいてください。Graphvizについては、ダウンロードページに案内がある通り、macOSではHomebrewを用いたインストールが簡単です。Windowsではインストーラをダウンロードし、実行してインストールできます。

　作図に入るには、新規作成したファイルを拡張子.puで保存します。PlantUMLにおける作図は、基本的にテキストベースで行います。例えば、ファイルに以下のリストのようにクラス定義を記述すると、クラス図を作成できます。

@startuml one
class Fighter {
    - string name
    + void attack()
}
@enduml

　コマンドパレットから、「PlantUML: Preview Current Diagram」と入力して実行すると、図7のようにクラス図がプレビューに表示されます。

図7：PlantUMLによるクラス図（単独）

　図7においてクラス名の脇に、○にCと記載されています。これはクラスの印であり、抽象クラスならA、インタフェースならIが記載されます。また、上のリストのクラス定義には、「-」（private）、「+」（public）といったアクセス修飾子が指定されており、図6には赤や緑のシンボルとなって反映されます。アクセス修飾子には、他に「#」（protected）、「~」（package private）を指定できます。この他にもabstract（抽象クラス）やstatic（静的メンバ）、interface（インタフェース）の指定も可能です。

　関係性の記述も可能です。関係性には、継承、実現、依存などを以下のリストのように記述できます。

@startuml two
abstract class Player {
    # string name
}
class Fighter {
    + void attack()
}
Fighter --|> Player
@enduml

　最後の「Fighter --|> Player」が継承関係の記述です。プレビューは、図8のようになります。

図8：PlantUMLによるクラス図（関係）

　他にもいろいろな使い方ができるので、冒頭の公式サイトからドキュメントを参照してください。

［NOTE］macOSでプレビューが表示されないとき

　macOSにおいてプレビューが表示されず（赤い×が表示される）、「Warning: the fonts "Times" and "Times" are not available for the Java logical font "Serif",…」というエラーメッセージが表示される場合は、「Times」フォントを入手してインストールしてください。例えば、「Times free font」から無料のTrueTypeフォントを入手して、Font Bookを使ってインストールします。