🏭

【VSCode】PlantUMLでアクティビティ図を書き始めるまで

2022/11/26に公開

結論


VSCodeでアクティビティ図を書くのであれば、以下の2つがあれば作成可能です。

  • PlantUML拡張機能
  • Java環境

以下詳細となります。

前提

  • macOS Monterey M2 チップ
  • java:インストール済み
  • Graphviz:未インストール

導入

VSCode の拡張機能から下記をインストールすればOKです。
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

PlantUML のさまざまな図をプレビューする上では Graphviz の導入が必要ですが、
後述の通り、シーケンス図か新構文のアクティビティ図であればGraphvizがなくてもプレビュー可能です。

以下公式の記載

PlantUML の実行には以下の二つが必要です:

  • Java
  • Graphviz (シーケンス図とアクティビティ図(新構文)のみ使用するのであれば、これは不要です。)

使い方

アクティビティ図の基本的な書き方は公式を参照

スニペット機能

例えばacifeと入力するだけで以下のコードが出力できるとのこと。

if (cond1?) then (val1)

else (val2)

endif

acifeというのは、activity➤if・elseの省略形とのことで、
"アクティビティ図if / else構文"を表す。
アクティビティ図以外の図でも同様に使えるらしいので覚えておくと記述が捗りそう

This plugin integrates all type diagram snippets. They are splitted into 9 sections:

  • diagram: snippets for general diagrams elements.
  • activity: snippets for activity diagrams.
  • class: snippets for class diagrams.
  • component: snippets for component diagrams.
  • state: snippets for state diagrams.
  • usecase: snippets for usecase diagrams.
  • sequence: snippets for sequence diagrams.
  • ui: snippets for salt diagrams.
  • egg: snippets for some funny diagrams, like sudoku, earth.

PlantUML - Visual Studio Marketplace

補足

PlantUMLとは?

PlantUML公式(日本語)
https://plantuml.com/ja/
PlantUMLはUMLで図を簡単に作成できるツールです。

UMLとは?

ざっくり、
図を用いた表現は便利だけど人によって描き方変わるよね
-> 標準化して描き方を統一しちゃおう!
という流れで生まれた言語ですね。

UMLについてはこちらの解説がわかりやすかったです。

UMLとはUnified Modeling Languageの略語です。日本語では「統一モデリング言語」と呼ばれています。

システムの振る舞いや構造をオブジェクト指向で分析したり設計したりする際、図を用いることで視覚的に把握できるようになり、効果的に表現できます。しかし、その図の描き方が人によって違っては困るので、標準規格として作られた図の記法(モデリング言語)がUMLです。
https://cacoo.com/ja/blog/what-is-uml/

https://cacoo.com/ja/blog/what-is-uml/

アクティビティ図とは?

UMLが対応している図の一つで、プログラムの処理の流れを表現したいときに使われる図です。

参考
https://cacoo.com/ja/blog/what-is-activity-diagram/#:~:text=アクティビティ図とはUML,について描写しています。

https://ja.wikipedia.org/wiki/アクティビティ図

Discussion