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

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

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

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

DX を推進する AI ・データサイエンス人材育成コース

プログラミング未経験から、AI やデータサイエンスを学ぶことのできる 6 ヶ月間のコースです。転職実績も豊富で、自走できる AI人材を多く輩出しています。

説明会はこちらから

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基本的な書き方

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

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

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

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

人型シーケンス図

シーケンス図で人を表したいという場合は先ほど 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 〇〇 で書く方法
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 で書きます。

par は parallel の略ですね。

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

sequenceDiagram
  actor 高橋
  actor 店員さん
  participant フライヤー

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

コメントアウト

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

sequenceDiagram
  actor 高橋
  actor 店員さん

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

Mermeid が使えるサービス

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

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

参考 IntegrationsMermaid

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

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

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

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

【2024 年最新】0 からわかる Python 入門ロードマップ！（独学方法解説）

独学でAI習得！初心者でも挫折しないオススメのAI勉強・学習法！

【受講料最大 70% 還付】「第四次産業革命スキル習得講座認定制度」の使い方

【Colab 入門】Google Colaboratory とは？使い方・メリットを徹底解説！

【どう違う？】Google Colaboratory 有料版の料金と内容は？

【AI 講師が解説】Python で Excel を操作する方法をわかりやすく解説！

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

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

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

無料で学ぶ

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

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

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

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

DX を推進する AI ・データサイエンス人材育成コース

プログラミング未経験から、AI やデータサイエンスを学ぶことのできる 6 ヶ月間のコースです。転職実績も豊富で、自走できる AI人材を多く輩出しています。

説明会はこちらから