設計 開発環境/ツール

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

ソフトウェアのUML図を書くとき、どんなツール使ってます?

astah* community (アスターコミュニティ)あたりですかね?さすがにExcel、Wordは居ないでしょうけどVisioぐらいはまだ居そう。

astah* communityって昔はJude(ジュード)って名前でしたね。

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

テキスト(マークアップ言語)でUMLを書くPlantUMLというツールがありもちろん無償です。

普通はツール単体でインストールするんですがVSCodeのプラグインがあるので、ご紹介します。

余談ですがJude、astah* communityなどを開発してる株式会社チェンジビジョンのCTOである平鍋健児さんはアジャイル開発の先駆者としても有名でファンが沢山いますね。

環境

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の概要を知ることができる。
  • PlantUMLをVSCodeから使ってテキストでUML図を書くことができる。

関連記事

【VSCode】日本語化とHTML+CSS+JavaScript開発環境構築ノウハウ

【VSCode】C/C++開発環境構築ノウハウ

【VSCode】テキストでシーケンス図を書いてみよう

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

【Sourcetrail】ソースコードを可視化する(VScodeと連携させる)

そもそもUMLとは何か?

Wikipediaにはこんな感じに書いてあります。

統一モデリング言語(とういつモデリングげんご、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」をクリック。

「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

まとめ

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円から始められます。

 

  • この記事を書いた人
  • 最新記事

ペイヴメント

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

-設計, 開発環境/ツール

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.