設計

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

【※ 当記事は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)である。仕様記述言語であるなどとされることもあるが、統一されているのは構文に相当する記法だけで、仕様を表現するような意味が形式的に与えられていない図もあるので、形式仕様記述言語ではない。

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

簡単にいうと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」というファイルを作成し、以下の内容を書きます。

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

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

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

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

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

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

余談:UMLを書くツール(astah* community)

仕事でUML図を書くケースが多々ありますが、みなさんどんなツールを使われていますか?

やはりastah* community (アスターコミュニティ)が定番でしょうか。

さすがにExcelWordでゴリゴリ図を書く方は減ってると思いますが、電気エンジニアの方はVisioが好きだったりします。

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

昔はJude(ジュード)って名前のフリーウェアだったのに、いまや商用ツール。

Jude、astah* communityは株式会社チェンジビジョンのCTOである平鍋健児さんが開発されていますが、平鍋さんはアジャイル開発の先駆者として広く知られておりファンも沢山いますね。

まとめ

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

 

 

ABOUT ME
ペイヴメント
ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。