Mermaid ユースケース図のチートシート

アクター、ユースケース、そしてそれらを囲むシステム。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

アクターとユースケース

アクターは名前、ユースケースは丸括弧の中の名前です。矢印は、そのアクターが参加することを表します。

usecase-beta
  actor Customer
  actor Support
  Customer --> Checkout
  Support --> Track

Customer と Support の 2 人のアクターが、Checkout と Track の 2 つのユースケースを指しています。

システム境界

systemBoundary と end のあいだのものはすべてシステムに属します。外にあるユースケースは属しません。

usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout

Customer のアクターが、Storefront という箱を指しています。その中に Browse catalogue と Checkout が入っています。

include 関係

コロンのあとに語が続く破線矢印は、一方のユースケースが他方を使うことを表します。

usecase-beta
  actor Customer
  systemBoundary Storefront
    Browse("Browse catalogue")
    Checkout("Checkout")
  end
  Customer --> Browse
  Customer --> Checkout
  Checkout ..> : include Browse

Browse catalogue と Checkout を持つ Storefront 境界。Checkout から include Browse とラベルされた破線が伸びています。

方向

フローチャートと同じキーワードです。TD、TB、BT、LR、RL。

usecase-beta
  direction LR
  actor Customer
  systemBoundary Storefront
    Checkout("Checkout")
  end
  Customer --> Checkout

左の Customer のアクターが、Checkout を持つ Storefront 境界を指しています。左から右に並んでいます。

Mermaid ユースケース図のチートシート

アクターとユースケース

システム境界

include 関係

方向

Mernyx で描いてみる