Mermaidでユースケース図を書いてみる

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

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にユースケース図に特化した機能はないけど、フローチャート図を書く機能でなんとか代用はできそう。

 

個人開発のサービスを作るときに使ってみようと思います。