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

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

 

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

タイトルとURLをコピーしました