【※ 当記事は2020年8月22日時点の情報です】
ペイヴメント(@pavement1234)です
UMLについてザックリ知りたい
VSCODEを使ってUMLを書きたい
こんな悩みを解決します
バージョン情報
Windows10 Home(64bit)1903
Visual Studio Code 1.47.0
Java SE Runtime Environment (build 14+36-1461)
Graphviz 2.38
PlantUML 2.13.13
そもそもUMLとは何か?
WikipediaでUMLを調べると、こんな感じに紹介されていますが、抽象的でよく分かりません
統一モデリング言語(とういつモデリングげんご、UML、英: Unified Modeling Language)は、主にオブジェクト指向分析や設計のための、記法の統一がはかられた(Unified)モデリング言語(Modeling Language)である。仕様記述言語であるなどとされることもあるが、統一されているのは構文に相当する記法だけで、仕様を表現するような意味が形式的に与えられていない図もあるので、形式仕様記述言語ではない。
簡単にいうとUMLは主にソフトウェアの構造と振る舞いを図に表すものです
構造とはクラス図、振る舞いとはユースケース図、アクティビティ図、シーケンス図など。まずこの4つの図について簡単に説明します
クラス図
システムを構成するクラスとクラス間の関係を表現する図です。クラスが持つ属性(プロパティ、変数)や操作(メソッド)を表現できます

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

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

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

VSCODEにPlantUMLをインストールするまで
テキスト(マークアップ言語)でUMLを書くPlantUMLというツール(無償)があるので、VSCodeのプラグインとしてインストールします。※PlantUMLはツール単体でインストールすることも可能です
- VSCODEをインストール(初めての方)
- Java開発キット(JDK)をインストール
- Graphviz(グラフ描画ツール)をインストール
- PlantUML(プラグイン)をインストール
①VSCODEをインストールする(初めての方)
(VSCODE)日本語化とHTML+CSS+JavaScript開発環境構築ノウハウを参考にVSCodeのインストールと日本語化を済ませてください
②Java開発キット(JDK)のインストール
【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」をクリック

「Next」をクリック

「Next」をクリック

インストール中…

「Close」をクリック

これでインストール完了です。インストール先をデフォルト(C:\Program Files (x86)\Graphviz2.38)から変更した場合、GRAPHVIZ_DOTという環境変数にパスを入れる必要があります
④PlantUML(プラグイン)のインストール
VSCodeを立ち上げて左の「Extension」アイコンをクリック。検索窓に「plantuml」と入力すると「PlantUML」というプラグインが出てくるので「Install」をクリック

これでPlantUML(プラグイン)のインストール完了です。念のためVSCodeを再起動します
PlantUMLでUML図を書いてみる
「test.pu」というファイルを作成し、以下の内容を書きます
1 2 3 4 5 |
@startuml title シーケンス図 送信機 -> 受信機: リクエスト 受信機 --> 送信機: レスポンス @enduml |
Alt+Dを押すとプレビュー表示されます。すごく簡単
「Ctrl+Shift+P」でコマンドパレットを開き「PlantUML」と打つと選択可能なコマンドが出てくるので「カーソル位置のダイアグラムをエクスポート(Export Current Diagram)」を選びます。※先ほどの「Alt+D」も出てきます
画像の出力フォーマットが選択できるので今回は「png」を選びました
右下にエクスポート完了メッセージが出てくるので「レポートを表示」をクリックします
test.pu
└test
└シーケンス図.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図を作成する方法をご紹介しました
もっと詳しく知りたい方はこちらをご参照ください
≫参考:PlantUML(Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.)