LoginSignup
5

More than 3 years have passed since last update.

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

Posted at

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をインストール  スクリーンショット 2020-06-11 12.02.37.png

実際に描いてみよう

記述時の参考サイト: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を押すとプレビュー画面が表示されます スクリーンショット 2020-06-11 15.22.48.png
  • ファイルを出力してみる
    • VSCode上でショットカットキーcmd+shift+pを押しコマンドパレットを表示
    • コマンドパレット上でPlantUMLを入力するとそれぞれの操作が出てくるのでカーソル一のダイアグラムをエクスポートを選択 スクリーンショット 2020-06-11 15.30.01.png
    • 拡張子の選択を行う  スクリーンショット 2020-06-11 15.30.21.png    - 出力が開始されるので無事指定形式のファイルが出来上がっていれば完成です!     test.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5