saeki’s blog

The limits of my code mean the limits of my world.

vscodeでPlantUMLを使ってシーケンス図を書く

vscodeでPlantUMLを扱えるように設定したのでその覚え書き。

Java

何はともあれ今すぐJavaをダウンロード
https://java.com/ja/download/

graphviz

graphvizはテキストをグラフに変換するためのツール。
brewで入る。

$ brew install graphviz

vscode

vscodeにplantumlの拡張を入れる。
パッケージ名は PlantUML

これで設定は完了だと思う。かんたん。

シーケンス図を書いてみる

vscodeは.pu拡張子をPlantUMLのファイルと認識するっぽいので.puの拡張子がついたファイルを用意する。

// sample.pu
@startuml
skinparam monochrome true

actor User

User -> Node1 : なにかする
Node1 -> Node1 : なにかする
Node1 -> Node2 : なにかを要求
Node2 -> Node3 : なにかを要求
Node3 -> Node1 : なにかの検証依頼
Node1 -> Node3 : 検証OK
Node3 -> Node2 : なにかを返す
Node2 -> Node1 : なにかを返す
Node1 -> User : なにかが完了

@enduml

ふつうにplantumlの記法で書ける。

option + D でプレビュー表示。
skinparam monochrome trueを指定すると白黒のシーケンス図になる。
自分はこっちの方が好み。

f:id:t_saeki:20180727142915p:plain

こんな感じ。
テキストを変更して保存すれば時間差でプレビューに変更が反映される。
すぐにプレビューを再描画したい場合は option + Dで再描画できる。