【VSCODE】テキストでUMLを書いてみよう

統一モデリング言語（とういつモデリングげんご、UML、英: Unified Modeling Language）は、主にオブジェクト指向分析や設計のための、記法の統一がはかられた（Unified）モデリング言語（Modeling Language）である。仕様記述言語であるなどとされることもあるが、統一されているのは構文に相当する記法だけで、仕様を表現するような意味が形式的に与えられていない図もあるので、形式仕様記述言語ではない。

出典：統一モデリング言語 – Wikipedia

UMLは主にソフトウェアの構造と振る舞いを図に表すものです。

構造とはクラス図、振る舞いとはユースケース図、アクティビティ図、シーケンス図などです。

クラス図

システムを構成するクラスとクラス同志の関係を表現する図です。クラスが持つ属性（プロパティ、変数）や操作（メソッド）も表現できます。

ユースケース図

ユーザ要求に対するシステムの振る舞いを表現する図です。要件定義のときによく使います。

アクティビティ図

一連の手続きを表現するための図です。要はフローチャート。

シーケンス図

クラスやオブジェクト間のメッセージのやり取りを時系列に表す図です。

インストール

①VSCODEを初めてインストールする人

（VSCODE）日本語化とHTML+CSS+JavaScript開発環境構築ノウハウを参考にVSCodeのインストールと日本語化を済ませてください。

②Javaのインストール

【Java】JDK（Java Development Kit）のインストール方法を参考にJDKをインストールしてください。

単にJavaが動けばよい（開発ツールのJDKは要らない）人は以下の手順でJavaをインストールしてください。

①Java.comに行く
②「無料Javaのダウンロード」を押す
③「同意して無料ダウンロードを開始」をクリックしインストーラーをダウンロード
④ダウンロードしたインストーラーを実行

③Graphvizのインストール

GraphvizはDOT言語で記述されたグラフを描画するツールです。これまでDoxygen（ソースコードからドキュメントを自動生成するツール）と組み合わせて使ってましたが、PlantUMLとも組み合わせ可能のようです。

Graphviz.orgに行き「Download」をクリック。

下にスクロールする。

「Windows」の「Stable Windows install packages」をクリック。

https://www2.graphviz.org/Packages/stable/windows/10/msbuild/Release/Win32/にある「graphviz-2.38-win32.msi」をクリック。

「ファイル保存」をクリック。

インストーラ（*.msi）をダブルクリック。

「Next」をクリック。

インストール中。「Close」をクリック。

これでインストール完了。

インストール先をデフォルト（C:\Program Files (x86)\Graphviz2.38）から変更した場合、GRAPHVIZ_DOTという環境変数にパスを入れる必要があるようです。

④PlantUML（プラグイン）のインストール

VSCodeを立ち上げて左の「Extension」アイコンをクリックし検索窓に「plantuml」と入力すると「PlantUML」というプラグインが出てくるので「Install」をクリック。

これでPlantUML（プラグイン）のインストール完了。念のためVSCodeを再起動します。

PlantUMLでUML図を書いてみる

「test.pu」というファイルを作成し、以下の内容を書く。

@startuml
title シーケンス図
送信機 -> 受信機: リクエスト
受信機 --> 送信機: レスポンス
@enduml

@startuml

title シーケンス図

送信機 -> 受信機: リクエスト

受信機 --> 送信機: レスポンス

@enduml

Alt＋Dを押すとプレビュー表示される。すごく簡単。

「Ctrl＋Shift＋P」でコマンドパレットを開き「PlantUML」と打つと選択可能なコマンドが出てくるので「カーソル位置のダイアグラムをエクスポート（Export Current Diagram）」を選びます。※先ほどの「Alt＋D」も出てきます。

画像の出力フォーマットが選択できるので今回は「png」を選びました。

右下にエクスポート完了メッセージが出てくるので「レポートを表示」をクリックします。

こんな階層に画像が出力されます。

test.pu
└test
　└シーケンス図.png

まとめ

VSCODEにPlantUML（プラグイン）を組み込んでUML図を作成する方法をご紹介しました。

もっと詳しく知りたい方はこちらをご参照ください。

≫参考：PlantUML（Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.）

≫参考：PlantUML Language References（日本語版PDF）

プログラミングを本格的に学びたい方にはUdemyがオススメです。

15万本のコースから選べます。

動画を購入して学習を進めるのですが通常1～2万/1本のところ、今なら1200円から始められます。

環境