Mermaid でシーケンス図を書く方法を解説!Notion AI にシーケンス図を書いてもらったら…!?

Mermaid でシーケンス図を書く方法を解説!Notion AI にシーケンス図を書いてもらったら…!?

ChatGPT をはじめ近頃 AI の進化が著しく、SNS などで紹介されている使用例に驚かされる毎日です。

Notion はここ数年で多数の企業が利用するようになっている多機能のドキュメントツールです。近頃 Notion AI という機能がリリースされました。
またシーケンス図を書くのによく使われているのが Mermaid です。

今回は Notion AI に Mermaid でシーケンス図を書いてもらったらどうなったのか、また Mermaid でシーケンス図を書くときにはどのような書き方があるのかをご紹介します!

Notion AI に ToDo アプリのシーケンス図を書いてもらったら

早速書いてもらいました。例えば ToDo アプリケーションのシーケンス図を書いてもらったらどうなるのか?

Notion AI に ToDo アプリケーションのシーケンス図を書いてもらうようにお願い

おぉ…スラスラ書かれていく…。

Notion AI でシーケンス図が書かれる様子

素晴らしい…。本当に人間が必要なくなる時代がくるのではないかと恐れすら感じました。

Notion AI にシーケンス図を書いてもらった結果

タスクの更新・削除がないといった点などはきちんと要件を伝えれば反映してくれそうだと感じました。

要件を AI に伝える能力というのが今後必要になってくるわけですね。

試しに次のようにお願いしてみました。

「タスクの作成、更新、削除、完了、期限が記録できる ToDo アプリケーションのシーケンス図を書いてください。タスクの期限の 1 日前になったらメールで通知する機能があります。」

Notion AI に詳細を伝えた結果

かなり便利だなぁと思いました。

ただ、現段階では自分の作りたいものを完全に表現してくれるかというとそうではない場合も多いと思います。

例えば最初の例であった「ToDo アプリケーションのシーケンス図を書いてください。」と AI に再びお願いして作ってもらうと違う結果が出力されることがありました。

出力される結果が変わることがある

自分の作りたい要件に合わせるためにそもそも Mermaid の記法などを理解しないといけません。
現段階でこういったものを使うとしたらベースは作ってもらい、あとは自分の要件に合わせて調整するという方法がいいと私は考えています。

そこで今回は Mermaid でのシーケンス図の書き方についてご紹介します!

Mermaid でのシーケンス図の書き方

今回は Mermaid でのシーケンス図の書き方を、私が大好きな唐揚げを購入するときのやりとりを例として説明します!

基本的な書き方

以下のように最初に何の図を書くのかを指定してそれからコードを書いていきます。

基本的な書き方
%% 最初に何の図を書くのか指定する
sequenceDiagram
  %% オブジェクト名を指定
  participant 高橋
  participant 店員さん
	
  %% やり取りを書く
  高橋->>店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: クレジットカードでお願いします!

出力結果

Mermaid のシーケンス図には矢印のタイプが 6 つあります。

それぞれ以下のようになります。

タイプ説明
->矢印のない実線
-->矢印のない点線
->>矢印付きの実線
-->>矢印付きの点線
-x最後に十字がある実線
--x最後に十字がある点線
-)開いた矢印の実線
--)開いた矢印のある点線

人型シーケンス図

シーケンス図で人を表したいという場合は先ほど participant と書いていた部分を actor と書きます。

人型シーケンス図
sequenceDiagram
  %% actor とすることで人型で表現できる
  actor 高橋
  actor 店員さん

  高橋->>店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: クレジットカードでお願いします!

かわいい棒人間が出てきましたね。

出力結果

エイリアスを使って効率良く書く

シーケンス図の表記が長くなると「高橋」と何度も書くのが大変になります。

そういった場合に「高橋」といった単語を t といったように識別子をつけることができます。

エイリアスを使って効率良く書く
sequenceDiagram
  %% as を使うことで省略して書くことができる
  actor t as 高橋
  actor sp as 店員さん

  t->>sp: この唐揚げをください!
  sp-->>t: 495 円になります!
  t->>sp: クレジットカードでお願いします!

出力結果

ライフラインが実行状態であることを表現する

activate 〇〇 deactivate 〇〇 と書く方法、または + - といったように書く方法があります。

activate, deactivate で書く方法
%% activate 〇〇 deactivate 〇〇 で書く方法
sequenceDiagram
  actor 高橋
  actor 店員さん

  高橋->>店員さん: この唐揚げをください!
  activate 店員さん
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: クレジットカードでお願いします!
  店員さん->>高橋: お買い上げありがとうございました!
  deactivate 店員さん

+ – で書く方法
%% ->>+ -->>- で書く方法
sequenceDiagram
  actor 高橋
  actor 店員さん

  高橋->>+店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: クレジットカードでお願いします!
  店員さん->>-高橋: お買い上げありがとうございました!

出力結果

メモを追加する

シーケンス図内にメモを追加することができます。
メモは 2 種類あります。

  • オブジェクトの左右に配置するもの
  • ライフラインにまたがるもの

また <br/> と書くことで改行もできます。

メモを追加する
sequenceDiagram
  actor 高橋
    %% 左側にメモ追加
    Note left of 高橋: 財布を忘れた
  actor 店員さん
    %% 右側にメモ追加
    Note right of 店員さん: 1 ヶ月前にスマホ決済に対応した

  高橋->>+店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: スマホ決済でお願いします!
  %% ライフラインにまたがるメモ
  Note over 高橋,店員さん: 【お互い】<br/>ちょうどよかった!
  店員さん->>-高橋: お買い上げありがとうございました!

出力結果

ループを表現する

繰り返しの処理を記述する際は loop を記述します。

お一人様一点限りで 1,000 円ちょうどしか受け付けない超人気店であれば以下のように書けますね。

ループを表現する
sequenceDiagram
  actor お客さん
  actor 店員さん

  お客さん->>+店員さん: この唐揚げをください!
  loop Every time
    店員さん-->>お客さん: 1,000 円になります!
    お客さん->>店員さん: 1,000 円札で支払います!
    店員さん->>-お客さん: お買い上げありがとうございました!
  end

出力結果

条件分岐

条件分岐は alt else で書けます。

現金支払いしか対応していない唐揚げ屋さんで、現金での支払いとスマホ決済での支払いそれぞれの処理の出し分けを書く場合は以下のように書きます。

条件分岐
sequenceDiagram
  actor 高橋
  actor 店員さん

  高橋->>店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  alt 現金支払いの場合
    高橋->>店員さん: 500 円で払います!
    店員さん->>高橋: お買い上げありがとうございました!
  else スマホ決済の場合
    高橋->>店員さん: スマホ決済でお願いします!
    店員さん->>高橋: スマホ決済は対応していません!
  end

出力結果

並行したアクションを表現する

並行したアクションを表現するには par で書きます。

parparallel の略ですね。

注文が入ってから唐揚げを揚げるという唐揚げ屋さんの場合、唐揚げを揚げるのとお会計をするのを並行する場合は以下のように書きます。

並行したアクションを表現する
sequenceDiagram
  actor 高橋
  actor 店員さん
  participant フライヤー

  高橋->>+店員さん: この唐揚げをください!
  par フライヤーとのやりとり
    店員さん->>+フライヤー: 唐揚げを揚げる
    フライヤー-->>-店員さん: 出来上がり
  and 支払いのやりとり
    店員さん-->>高橋: 495 円になります!
    高橋->>店員さん: クレジットカードでお願いします!
  end
  店員さん->>-高橋: お買い上げありがとうございました!

出力結果

コメントアウト

今までの紹介の中で使っていましたが、コメントアウトは %% 〇〇 といったように書きます。

コメントアウト
sequenceDiagram
  actor 高橋
  actor 店員さん

  %% この文章はシーケンス図に表示されない
  高橋->>+店員さん: この唐揚げをください!
  店員さん-->>高橋: 495 円になります!
  高橋->>店員さん: クレジットカードでお願いします!
  店員さん->>-高橋: お買い上げありがとうございました!

出力結果

Mermeid が使えるサービス

Notion をはじめ、Visual Studio Code, GitHub などでも Mermaid を使うことができます。

以下のページに Mermaid が使えるサービスが紹介されているのでぜひこちらを参考にしてください。

参考 IntegrationsMermaid

Mermaid を使って効率よくシーケンス図を書こう!

今回は Mermaid でのシーケンス図の書き方をご紹介しました。

Mermaid ではその他にもフローチャート図やクラス図を簡単に書くことができます。

かなり便利なのでぜひ活用しましょう!

こちらの記事もオススメ

まずは無料で学びたい方・最速で学びたい方へ

まずは無料で学びたい方: Python&機械学習入門コースがおすすめ

Python&機械学習入門コース

AI・機械学習を学び始めるならまずはここから!経産省の Web サイトでも紹介されているわかりやすいと評判の Python&機械学習入門コースが無料で受けられます!
さらにステップアップした脱ブラックボックスコースや、IT パスポートをはじめとした資格取得を目指すコースもなんと無料です!

無料で学ぶ

最速で学びたい方:キカガクの長期コースがおすすめ

一生学び放題

続々と転職・キャリアアップに成功中!受講生ファーストのサポートが人気のポイントです!

AI・機械学習・データサイエンスといえばキカガク!
非常に需要が高まっている最先端スキルを「今のうちに」習得しませんか?

無料説明会を週 2 開催しています。毎月受講生の定員がございますので確認はお早めに!

説明会ではこんなことをお話します!
  • 国も企業も育成に力を入れている先端 IT 人材とは
  • キカガクの研修実績
  • 長期コースでの学び方、できるようになること
  • 料金・給付金について
  • 質疑応答