PlantUML 環境構築 VSCode

##前提

• VisualStudioCodeが導入済み
• Javaの実行環境がある（PlantUMLはJVMで動いているため）
• 無い場合はOpenJdkを入れる。以下、導入参考ページ
  • windowsの場合：https://www.kkaneko.jp/tools/win/openjdk.html
  • Macの場合：https://hitori-goto.com/2021/01/27/mac-install-openjdk/

PlantUMLのインストール

• Visual Studio Codeを開く
• 画面左部Extensionsを押下し、検索フォームに「PlantUML」と入力する
• 検索結果から「PlantUML」選択しインストールする。

シーケンス図の作成

• Visual Studio Codeを開く
• sample.pu で新規ファイルを作成する。
• 以下の内容をsample.puにコピーする
  • 書き方をより詳しく知りたい方はこちら：https://plantuml.com/ja/sequence-diagram

sample.pu

@startuml
title シーケンス図
participant front
participant api

front -> api:リクエスト
api --> front:レスポンス
@enduml

シーケンス図のプレビュー

• sample.puファイルを選択している状態で
• ”Alt + D”を同時押ししプレビューを表示する

画像ファイルとして出力

• "Ctrl + Shift + P" or F1 でコマンドパレットを開く
• PlantUML: Export Current Diagram と入力する
• png, svg, eps, pdf, vdx, xmi, scxml, html から出力形式を選択する