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

【※ 当記事は2020年8月22日時点の情報です】

ペイヴメント（@pavement1234）です。

そもそもUMLとは何か？

WikipediaでUMLを調べると、
こんな感じに紹介されていますが、
抽象的でよく分かりません。

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

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

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

構造とはクラス図、
振る舞いとはユースケース図、アクティビティ図、シーケンス図など。
まずこの4つの図について簡単に説明します。

クラス図

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

ユースケース図

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

アクティビティ図

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

シーケンス図

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

VSCODEにPlantUMLをインストールするまで

テキスト（マークアップ言語）でUMLを書く
PlantUMLというツール（無償）があるので、
VSCodeのプラグインとしてインストールします。
※PlantUMLはツール単体でインストールすることも可能です。

①VSCODEをインストールする（初めての方）

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

②Java開発キット（JDK）のインストール

【Java】JDK（Java Development Kit）のインストール方法を参考に
JDKをインストールしてください。
単にJavaが動けばよい（開発ツールのJDKは要らない）人は
以下の手順で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」をクリック。

「Next」をクリック。

「Next」をクリック。

インストール中…。

「Close」をクリック。

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

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

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

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

PlantUMLでUML図を書いてみる

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

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

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

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

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

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

余談：UMLを書くツール（astah* community）

仕事でUML図を書くケースが多々ありますが、
みなさんどんなツールを使われていますか？
やはりastah* community （アスターコミュニティ）が定番でしょうか？
さすがにExcel、Wordでゴリゴリ図を書く方は減ってると思いますが、
電気エンジニアの方はVisioが好きだったりします。

私は2018年9月26日までversion6.9のastah* communitiyを使ってましたが、
サポート終了になってしまい
astah* professional（1000円/月）に切り替えました。

昔はJude（ジュード）って名前のフリーウェアだったのに、いまや商用ツール。
Jude、astah* communityは
株式会社チェンジビジョンのCTOである平鍋健児さんが開発されていますが、
平鍋さんはアジャイル開発の先駆者として広く知られておりファンも沢山いますね。

まとめ

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