MacでPlantUMLをつかってシーケンス図を描いてみる(VSCode)

3513 ワード
Mac plantuml uml Mac テキストリンク

PlantUMLとは？

PlantUMLを使用するとシーケンス図やクラス図などをコード上で簡単に作成することができます。
またオープンソースなので無料で使うことが可能です。
公式ページURL
PlantUML 概要

Mac環境への導入

  • VSCodeのをダウンロード
  • Javaをインストール(PlantUMLの実行に必要)
    • Java SE Downloads
    • 上記リンクに移動しJDK Downloadを選択
    • Java SE Development Kitの中からmacOS Installer用のkitを選択し、ダウンロード・インストールを行う
  • graphvizをインストール
    • コンソール画面より以下のコマンドを実行してインストールしていきます
      • brew install graphviz
        ※今回はbrewを使ってインストールしています
        Homebrew
  • VSCodeにPlantUMLを導入
    • VSCodeの拡張機能からPlantUMLをインストール 　

実際に描いてみよう

記述時の参考サイト：PlantUML Cheat Sheet

  • ファイルを作る
    • 拡張子を.pu形式で保存するとPlantUMLとして認識してくれます
  • シーケンス図を描いてみる
    お試しに以下のような内容で記述してみました
@startuml

actor アクター

アクター -> クラス1

activate クラス1
クラス1 -> クラス2 : テスト1

activate クラス2
クラス1 <-- クラス2 : テスト1戻り
deactivate クラス2

クラス1 -> クラス1 : テスト結果判定
アクター <-- クラス1 : テスト結果出力
deactivate クラス1

@enduml
  • プレビューで見てみる
    • VSCode上でショットカットキーOption+Dを押すとプレビュー画面が表示されます
  • ファイルを出力してみる
    • VSCode上でショットカットキーcmd+shift+pを押しコマンドパレットを表示
    • コマンドパレット上でPlantUMLを入力するとそれぞれの操作が出てくるのでカーソル一のダイアグラムをエクスポートを選択
    • 拡張子の選択を行う 　 　　 - 出力が開始されるので無事指定形式のファイルが出来上がっていれば完成です！ 　　 　

その他導入時に参考にさせてもらった記事