[kz] PlantUMLのセットアップからハンズオンまで
- 2019.05.06
- engineering
- アプリ

こんにちは、kazscapeです。
本日は、PlantUMLをさわってみます。
PlantUMLとは
「PlantUML」とは、ソフトウェア開発の業務で作成するUML(Unified Modeling Language))ダイアグラムというさまざまな図を、ExcelやVisioといった図形描画のツールで書くのではなく、テキストをつらつら書くことで図が作成できるオープンソースの開発言語です。
書くことができるダイアグラムの種類には、
- シーケンス図
- ユースケース図
- クラス図
- アクティビティ図(古い文法はこちら)
- コンポーネント図
- 状態遷移図(ステートマシン図)
- オブジェクト図
- 配置図
- タイミング図
- ワイヤーフレーム
- アーキテクチャ図
- 仕様及び記述言語 (SDL)
- Ditaa
- ガントチャート
- マインドマップ
- WBS図(作業分解図)
- AsciiMath や JLaTeXMath による、数学的記法
があります。
セットアップ
セットアップ環境
今回はWindowsやMacで使えるクロスプラットフォームなエディタであるVisual Studio Codeの拡張機能としてPlantUMLをセットアップしました。
この記事では、Macにセットアップしましたが、概ねWindowsでもあまり違いはないと思います。
セットアップした環境は、
- macOS Mojave ver.10.14.4
- Visual Studio Code ver.1.33.1
- Java JDK ver.11.0.2
- Graphviz ver.2.40.1
になります。
さらに、Visual Studo Codeの拡張機能(Extension)として、
- PlantUML ver.2.10.9
をいれました。
Visual Studio Codeのインストール
Visual Studio Codeのダウンロードサイトから、Mac用のものをダウンロードします。

VSCode-darwin-stable.zipというzipファイルがダウンロードできるので、解凍したVisual Studio Code.appをアプリケーションに移動します。
起動するとWelcome画面が表示されます。さっそく拡張機能をインストールします。
左のサイドバーにある拡張機能(Extension)を選択します。

左上のSearch Extensions in MarketplaceにPlantUMLと入力して、検索されたPlantUMLを選択します。

Installボタンを押して、

InstallボタンがUninstallになれば、インストールされています。

Javaのインストール
Javaのインストールは、Mac用のパッケージマネージャーであるHomebrewでインストールします。
Homebrewがインストールされていないようでしたら、前回の投稿を参考にしてください。
ターミナルを起動して、HomebrewでJavaをインストールします。
version 12のJavaを入れると、Previewの際にWarningが出るので、version 11をインストールします。
※これについては、PlantUMLのForumでも話題になっているので、解決したらversion 12に入れ替えることにします。
過去のversionをインストールできるように、homebrew-cask-versionsを導入します。
1 |
brew tap homebrew/cask-versions |
そして、Javaのversion 11をインストールします。
1 |
$ brew cask install java11 |
バージョンを確認します。
1 |
$ /usr/libexec/java_home -V |
実行結果
1 2 |
Matching Java Virtual Machines (1): 11.0.2, x86_64: "OpenJDK 11.0.2" /Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home |
さらに、Javaへのpathを通す必要があります。
ホームディレクトリに.bash_profileがない場合は、
1 |
$ touch ~/.bash_profile |
で作成をします。
.bash_ProfileにJavaへのpathを記載します。
バージョンの確認の実行結果で表示された、Javaがインストールされたディレクトリを使って、
1 2 |
export PATH=$PATH:/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home/bin export JAVA_HOME=/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home |
と記載します。
sourceコマンドでbash_profileの更新を反映します。
1 |
$ source ~/.bash_profile |
pathが設定されているか確認します。
1 2 |
$ echo $PATH $ echo $JAVA_HOME |
graphvizのインストール
PlantUMLで書かれたダイアグラム作成のための言語を描画するためのパッケージです。
Homebrewでインストールします。
1 |
$ brew install graphviz |
PlantUML ハンズオン
ここまででPlantUMLでダイアグラムを書く準備が整ったので、PDFガイドを使って、ハンズオンしてみます。
例えば、シーケンス図をこんな風に書いてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@startuml Alice -> Bob: Authentication Request alt successful case Bob -> Alice: Authentication Accepted else some kind of failure Bob -> Alice: Authentication Failure group My own label Alice -> Log : Log attack start loop 1000 times Alice -> Bob: DNS Attack end Alice -> Log : Log attack end end else Another type of failure Bob -> Alice: Please repeat end @enduml |
これを、.puという拡張子で保存して、Alt+Dでプレビュー表示すると、

こんな風に表示してくれます。
描画されたダイアグラムはCommand PaletteでExport Current Diagramから、

pngやpdfでExportすることができます。

PDFガイドを一通りやってみると、さまざまな応用ができることが理解でき、幅広くダイアグラムが書けることがわかります。
まとめ
PlantUMLは慣れこそ必要ですが、ソフトウェア開発だけでなく、Blogにちょっとした図を掲載したいときなどにも使えそうです。
Excelなどで書いた場合、図の中に記載した文字列は検索できないですが、PlantUMLならテキストですから検索が可能になります。
また、ダイアグラムのために書いたコードは、GitHubなどで管理をするとDiffが取りやすく、バージョン管理にも優れています。
使い方に慣れて、さまざまシーンで活用したいですね。
今日はちょっとテクニカルなお話でした。
ではっ!
-
前の記事
[kz] ほったらかしてたMacにgitをセットアップ 2019.04.30
-
次の記事
[kz] サイトをリニューアルしました。 2021.02.07
コメントを書く