Mermaid でシーケンス図を書く方法を解説！Notion AI にシーケンス図を書いてもらったら…!?
.png%3Fw%3D1110&w=1920&q=75)
ChatGPT をはじめ近頃 AI の進化が著しく、SNS などで紹介されている使用例に驚かされる毎日です。
Notion はここ数年で多数の企業が利用するようになっている多機能のドキュメントツールです。近頃 Notion AI という機能がリリースされました。
またシーケンス図を書くのによく使われているのが Mermaid です。
今回は Notion AI に Mermaid でシーケンス図を書いてもらったらどうなったのか、また Mermaid でシーケンス図を書くときにはどのような書き方があるのかをご紹介します！
目次
Notion AI に ToDo アプリのシーケンス図を書いてもらったら
早速書いてもらいました。例えば ToDo アプリケーションのシーケンス図を書いてもらったらどうなるのか？
おぉ…スラスラ書かれていく…。
素晴らしい…。本当に人間が必要なくなる時代がくるのではないかと恐れすら感じました。
タスクの更新・削除がないといった点などはきちんと要件を伝えれば反映してくれそうだと感じました。
要件を AI に伝える能力というのが今後必要になってくるわけですね。
試しに次のようにお願いしてみました。
「タスクの作成、更新、削除、完了、期限が記録できる ToDo アプリケーションのシーケンス図を書いてください。タスクの期限の 1 日前になったらメールで通知する機能があります。」
かなり便利だなぁと思いました。
ただ、現段階では自分の作りたいものを完全に表現してくれるかというとそうではない場合も多いと思います。
例えば最初の例であった「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 〇〇 で書く方法 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 が使えるサービスが紹介されているのでぜひこちらを参考にしてください。
参考 | Integrations
確認するMermaid を使って効率よくシーケンス図を書こう！
今回は Mermaid でのシーケンス図の書き方をご紹介しました。
Mermaid ではその他にもフローチャート図やクラス図を簡単に書くことができます。
かなり便利なのでぜひ活用しましょう！
最速で学びたい方：キカガクの長期コースがおすすめ
.jpg&w=3840&q=75)
キカガクの長期コースはプログラミング経験ゼロの初学者が最先端技術を使いこなすAIエンジニアになるためのサポート体制が整っています！
実際に未経験からの転職・キャリアアップに続々と成功中です
まずは無料説明会で、キカガクのサポート体制を確認しにきてください！
説明会ではこんなことをお話します！
- 国も企業も育成に力を入れている先端 IT 人材とは
- キカガクの研修実績
- 長期コースでの学び方、できるようになること
- 料金・給付金について
- 質疑応答
まずは無料で学びたい方： Python&機械学習入門コースがおすすめこちら
.png&w=3840&q=75)
AI・機械学習を学び始めるならまずはここから！経産省の Web サイトでも紹介されているわかりやすいと評判の Python&機械学習入門コースが無料で受けられます！
さらにステップアップした脱ブラックボックスコースや、IT パスポートをはじめとした資格取得を目指すコースもなんと無料です！
SHARE
新着記事
関連記事
キカガクラーニング
AI/データサイエンス学びはじめの方におすすめの記事
.png%3Fw%3D1070&w=3840&q=75)
コース一覧
注目記事
.png%3Fw%3D200&w=3840&q=75)
.png%3Fw%3D200&w=3840&q=75)
新着記事
