[PlantUML]VSCodeでPlantUMLを使う方法[Mac]

PlantUMLを使いたい

PlantUMLご存知ですか？

PlantUMLその名にUMLを含んでいる通り、UMLの作図ツールのことです。図の描画をするわけですが、PowerPointのようにGUIで図形を動かしたりするわけでなく、テキストで書いたものを図形に起こしてくれるのです。PowerPointを使ってもいいのですが、こっちはテキストベースなのでgitで管理しやすいのがいいんですよね。

社内のひとり開発のときは好きで使っているのでプライベートのMacで使えるようにしてみました。

前準備をしていく

必要なものを確認

PlantUMLを使えるようにするためにはこれらを入れる必要があります。普段使用するエディタがVScodeで、PlantUMLプラグインがあるということなので、それに合わせて環境を作っていきます。

• java
  • OpenJDKを使います
• graphviz
• VScode(Visual Studio Code)
  • PlantUMLプラグイン

Javaをインストール

ここで注意！
PlantUMLでは、Java8でないとWARNINGが出ます！
OpenJDK14で一度試したら描画はできましたが、WARNINGが気になりすぎたのでOpenJDK8をインストールします。
Java有償化の話が出てきてから普段情報を追わない人にはよくわからなくて辛いですね。(泣)

$ brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Graphvizをインストール

$ brew install graphviz

VSCodeをインストール

VSCodeそのもののインストールはご自身で頑張ってください！このいろんな人がインストール方法をまとめてくださっています。

PlantUMLプラグインを追加

VScodeにPlantUMLプラグインを追加していきます。

1. Extensionsを開く(command+shift+xで開く)
2. 検索窓で「PlantUML」を検索する
3. 画像のようなプラグインを見つけて、「install」を押す

少し使ってみる

準備は整ったので、少しだけつかってみましょう。

プログラムを書く

適当な場所に「test.pu」というファイルを作ってみてください。「.pu」はPlantUMLの拡張子ですね。そしてtest.puには、以下のように書いてみてください。ものすごい単純なシーケンス図が描画されます。

@startuml
Alice -> Bob : Hello
Bob -> Alice : Yeah
@enduml

PlantUMLにいい感じのブログ用シンタックスハイライトがないのが地味にきつい。。！

プレビューを表示する

今度はプレビューを表示します。プレビューは、Alt+Dで表示できます。
表示するとこんな感じになります↓

ショートカット	できること
Alt+D	プレビューの表示

pngに書き出してみる

またしても注意！
もともとpdfの書き出しをしようかと思っていたのですが、なんかエラーがでました。結構面倒そうなので諦めます。
自分がしたい形式に問題なくエクスポートができるか実践する前に試しておくと良いでしょう。

手順

1. command+shift+pでコマンドパレットを開きます。
2. 「PlantUML: Export Current Diagram」を選択します。
   「PlantUML: Export Current File Diagrams」でも可
3. 「png」を選択する
   pngでなくとも、好きなファイル形式で。
4. そうすると、今回の場合、「test.png」というファイルができているはずです。

お疲れ様でした！ざっくりですがPlantUMLの使い方はざっくりこんな感じです。

まとめ

これがMacでのPlantUMLの使い方です。私自身サクッとUML書きたいなって時に、PowerPointを使うのも億劫なのでかなりいい感じです。

が、やはりあまり普及していないツールだけあってうまくいかない時に解決策を見つけづらいのでそこはマイナスですね。しんどい。

インストールはできたので、別の記事で書き方をまとめたりしたいなと思います。

参考

vscodeのPlantUMLプラグインは紹介した以外にもかなりたくさんのことができるみたいです。英語ですがプラグインの使い方が一通り載っている公式を参考にしてみてください。

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml