VSCode+PlantUMLでフローチャートを試してみた(Mac版)

VSCode+PlantUMLでフローチャートを試してみた(Mac版)

最近画面遷移図をマークダウンで書きたいと思ってguiflowというものを試してみていました。

そんな中、あるソースコードの意図がわからないためフローチャートを書いて意図を確認していたのですが、これもマークダウンで書きたいと思い、できればVSCodeで!と思って調べてみました。

すぐにPlantUMLプラグインの存在が見つかり、Windowsで環境を構築後にいくつかのロジックのフローチャートを書いてみました。

自宅でも遊んでみるために環境を構築しましたのでその時の備忘録です。

PlantUMLプラグインのインストール

VSCodeの拡張機能で検索をするとすぐに出てきますのでインストールします。

PlantUMLのファイルを作成

拡張子は「pu」で作成します。
最低限のマークダウンを書いてプレビュー(ALT+D)してみます。私はここでJDKをインストールしていなかったのでエラーになりました。

JDKのインストール

インストール済みの人は読み飛ばしてください。

最低限のマークダウンでALT+Dでプレビューを表示しようとするとJDKをインストールしてくれとのことなのでインストールします。

http://www.oracle.com/technetwork/java/javase/downloads/index.html

インストール後にもう一度VSCode上でALT+Dでプレビュー表示できました。

Graphviz(dot)をインストール

PNGにエクスポートしようとするとエラーが出ました。関係はないかもしれませんが、結局は必要になるのでインストールしてもう一度試してみます。

$ brew install graphviz

インストール後に、VSCodeを再起動したら無事にPNGにエクスポートできました。

完全な例

マークダウンでサクッとかけてしまうのでかなり楽です!

 

まとめ

他にも色々なダイアグラムをマークダウンで素早く作成できます。
マークダウンであればソース管理に含めて差分も見れるようになりますし、今後の仕事で上手く利用できないか検討して見たいと思います。

  1. シーケンス図
  2. ユースケース図
  3. クラス図
  4. アクティビティ図(古い文法はこちら)
  5. コンポーネント図
  6. 状態遷移図(ステートマシン図)
  7. オブジェクト図
  8. 配置図
  9. タイミング図

プログラミングカテゴリの最新記事