ChatGPT をはじめ近頃 AI の進化が著しく、SNS などで紹介されている使用例に驚かされる毎日です。
Notion はここ数年で多数の企業が利用するようになっている多機能のドキュメントツールです。近頃 Notion AI という機能がリリースされました。
またシーケンス図を書くのによく使われているのが Mermaid です。
今回は Notion AI に Mermaid でシーケンス図を書いてもらったらどうなったのか、また Mermaid でシーケンス図を書くときにはどのような書き方があるのかをご紹介します!
ウェビナー動画を無料配布中!
AI やデータサイエンスを学び始めたいけど、何から始めていいかわからないあなたへ。無料のウェビナー動画で、PythonやChatGPTなどのAI関連技術を講師と一緒に学びましょう!
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 が使えるサービスが紹介されているのでぜひこちらを参考にしてください。
Mermaid を使って効率よくシーケンス図を書こう!
今回は Mermaid でのシーケンス図の書き方をご紹介しました。
Mermaid ではその他にもフローチャート図やクラス図を簡単に書くことができます。
かなり便利なのでぜひ活用しましょう!
まずは無料で学びたい方・最速で学びたい方へ
まずは無料で学びたい方: Python&機械学習入門コースがおすすめ
AI・機械学習を学び始めるならまずはここから!経産省の Web サイトでも紹介されているわかりやすいと評判の Python&機械学習入門コースが無料で受けられます!
さらにステップアップした脱ブラックボックスコースや、IT パスポートをはじめとした資格取得を目指すコースもなんと無料です!
最速で学びたい方:キカガクの長期コースがおすすめ
続々と転職・キャリアアップに成功中!受講生ファーストのサポートが人気のポイントです!
AI・機械学習・データサイエンスといえばキカガク!
非常に需要が高まっている最先端スキルを「今のうちに」習得しませんか?
無料説明会を週 2 開催しています。毎月受講生の定員がございますので確認はお早めに!
- 国も企業も育成に力を入れている先端 IT 人材とは
- キカガクの研修実績
- 長期コースでの学び方、できるようになること
- 料金・給付金について
- 質疑応答
ウェビナー動画を無料配布中!
AI やデータサイエンスを学び始めたいけど、何から始めていいかわからないあなたへ。無料のウェビナー動画で、PythonやChatGPTなどのAI関連技術を講師と一緒に学びましょう!