Mermaidの他にUML図を描くツールとしてPlantUMLがある。
PlantUMLはユースケース図を書けるのだけど、実はMermaidはユースケース図に対応していない。
しかし以下の記事でも書いた通り、JavaScriptベースのMemaidよりもPlantUMLは環境構築が少し面倒なので、僕はどうにかしてユースケース図をMermaidで書きたかった。
【簡単】Mermaidの始め方
クラス図やドメインモデル図を作るのに、良いツールないかなと探していたところ、Mermaidが良いという話を教えてもらった。 で、実際に使ってみたのでMermaidの導入方法についてメモ書きをしておく。 Mer
なので、強引ではあるのだけど、こんな感じでMermaidでユースケース図を書いてみましたというメモを書いておく。
MermaidのFlowchartsでユースケース図を描く
今回ユースケース図を作るイベント作成アプリケーションで、ユースケースとしては↓のようなものを想定している。
<ユースケース>
- イベント主催者
- イベントを作る
- イベントを編集する
- イベントを削除する
- イベント参加者
- イベントを閲覧する
- イベントに参加申し込みをする
- イベントの参加キャンセルをする
冒頭にも書いた通り、Mermaidはユースケース図に対応していない。
なので、フローチャートを書く機能を使ってユースケース図を作成する。
完成したものがこれなのだけど、十分ユースケース図としての役割を果たせていると思う。
具体的にmermaid記法でどのように書いたかというと、こんな感じ。
mermaid独自の記法を覚える必要はあるけど、けっこう直感的に書ける。
```mermaid
flowchart LR
A{主催者}
E{参加者}
A --- B[イベントを作る]
A --- C[イベントを編集する]
A --- D[イベントを削除する]
E --- F[イベントを閲覧する]
E --- G[イベントに申し込む]
E --- H[イベントの参加をキャンセルする]
subgraph イベント作成アプリ
B
C
D
F
G
H
end
```
終わりに
mermaidにユースケース図に特化した機能はないけど、フローチャート図を書く機能でなんとか代用はできそう。
個人開発のサービスを作るときに使ってみようと思います。