はじめに

「この画面、どこから遷移してくるんだっけ……？」

特定の機能を改修する際、既存仕様をソースコードから調べ直した経験が、みなさんはありませんか？ 筆者はディレクターという立場ですが、要件定義やデザインをクライアントと相談している際に、実際にそのような場面に出くわした経験が何度もあります。

少し前はエンジニアに詳細を調べてもらっていました。しかし今ではAIがあるので、ある程度自分でも調べることができるし、ソースコードを読んで仕様を調べるというコストは低くなってはいます。

ただし、実際の要件定義などの際には一人がわかっていればよいのではなく、一緒に検討するチーム全員が共通認識として理解したうえでなければよいものにはなりません。

こんなとき、図があると全体像をすばやく共有できます。特に画面遷移を表すフローチャートやシステム間の連携を示すシーケンス図があれば、既存システムの理解も新機能の設計も格段にスムーズになります。

そんな図を、テキストベースで書けるMermaidという記法があります。

テキストベースでの図とは

画面遷移図やシステム構成図を作成する方法として、GUIツール（マウスで図形を配置して図を作るツール）が広く使われています。これらは視覚的・直感的に編集でき、リアルタイム共同編集や図を見ながらのコメントなど、優れた機能を持っています。みなさんも、一度くらいは使ったことがあるでしょう。

一方、テキストで図の構造を記述する方法は、あまり一般的ではなく知らなかった方もいるでしょう。

仮に、次のような「開始」から「処理」、「終了」へと矢印で接続された基本的な流れを表す図を表現したいとします。

これをテキストで記述すると、使う記法（言語）によって多少異なりますが、このシリーズで解説するMermaidという記法では、次のようなテキストになります。

flowchart TD
    A[開始] --> B[処理]
    B --> C[終了]

なぜわざわざテキストで図を書く必要があるのか、疑問に思われるかもしれません。しかし、AI時代である今、テキストであることには大きな価値が生まれます。

AI時代におけるテキストベースの図の価値

細かい記法を覚えずに作成できる

まず、テキストベースで図を作成する最初の難関は、記法を覚える必要があることです。

しかし、AI時代の今では、AIに「会員登録フローのフローチャートをMermaidで作って」と依頼すれば、フローチャートのコードを生成してくれます。細かい記法を覚えていなくても、AIが補完してくれるため、図を作成できます。

また、コードとして構造化されているため、図の特定の「部分」をテキストで明確に表すことができます。そのため、IDやラベルを使って「ログインの後に失敗の分岐を追加して」といった具体的な指示も可能です。

図の情報を効率的に得られる

AIはテキストベースの図をそのまま理解できます。画像での図だと、画像の解析処理を挟むことになりますし、そもそもテキストよりもファイル容量が大きいです。これは、AIへ渡せるコンテキスト量に限りがある今現在では、AIを使う上で重要な観点です。

また、図がテキストであるということは、ほかのドキュメントやコードなどのテキストファイルとまとめて一括で取り扱うことができるということです。AIは、たとえば「ログインについて言及している箇所を探して」と指示した場合、通常はバイナリではないテキストファイルの中身をGrepツールなどを用いて検索します。つまり、画像で作成した図に詳細なフローが記載してあっても結果として提示されませんが、テキストの図であれば提示されます。ほかにもドキュメント内の図をテキストで表現していれば、「ログイン画面のドキュメントと実装を比較して差異を提示して」などと指示することで、図の部分まで解釈して差異を提示してくれるでしょう。

図と実装を連携させられる

作成した図をAIに渡して「この遷移図を実装して」と指示することで、実装コードの生成にも活用できます。また、冒頭で触れた「既存仕様をソースコードから調べ直す」という課題も、実装コードをAIに渡して「このコードのフローチャートをMermaidで作って」と依頼することで図を起こせます。

将来的に図の自動生成や一括更新などの自動化を考える場合も、テキストベースであればAIにスクリプトを書いてもらうことで実現しやすくなります。

このように、AI時代においてテキストベースの図は、記法を覚えることなく効率的に作成・活用できるツールとなっています。ただし、AIが生成した図やコードが完璧とは限らないため、内容の精査は必要です。

何を可視化したいかで図を選ぶ

テキストベースの図作成ツールには、Mermaid以外にもGraphviz（DOT言語）やPlantUMLなどがありますが、本記事ではMermaidに絞って説明します。筆者は以前はviz.jsでDOT言語も利用したこともありますが、現在（2025年10月時点）はGitHubでテキストベースの図記法としてサポートされているのは、Mermaidのみであるためこちらを利用しています。

前述のように、Mermaidで図を作成すること自体は、AIに任せればよいです。しかし、その図がどんな図になっているべきかを的確に伝えられなければ、目的通りの図はできあがりません。AIにうまく指示するために、図自体の基本やMermaidでできることを知っているほうが効率的です。

一口に「図」といっても、フローチャート、シーケンス図、ER図、ガントチャートなど、さまざまな種類があります。Mermaidは、これらの図を幅広くサポートしています。どのような図が描けるかは、Mermaid公式ドキュメントで確認できます。

本記事では、Mermaidで描ける図の中でも、筆者が開発の現場で特に頻繁に使っているフローチャートとシーケンス図の2つに絞って説明します。それぞれどのような図で、どんな場面で使えるのか見ていきましょう。

フローチャート

フローチャートは、プロセスや処理の流れを順序立てて表現する図です。開始から終了までの流れを、四角（処理）、ひし形（判断・分岐）、矢印（流れ）などの図形を使って表現します。

フローチャートの特徴は、分岐、合流、ループなど、自由な流れの方向を表現できることです。条件によって異なる経路を辿る処理や、前の処理に戻る繰り返し処理などを視覚化できます。

中でも、分岐点を明確にできるのがフローチャートの大きな利点です。「この条件の場合はAへ、それ以外はBへ」といった判断を視覚的に表現できるため、複数の経路がある処理を整理するのに適しています。Mermaidでは他にもステート図など、順序を表現できる図がありますが、条件分岐の明確さではフローチャートが優れています。

以下は、分岐・合流・ループを含むフローチャートの例です。

こうした特徴により、フローチャートは画面遷移や処理フローの整理に役立ちます。

画面遷移であれば「どの画面からどの画面へ遷移するか」が一目でわかり、条件分岐で異なる経路を明確にできます。エラー時の遷移先も含めて全体の流れが把握しやすく、改修時に「この画面はどこから来るのか」がすぐに理解できます。

また、処理フローでは、どの処理がどの順序で実行されるかを整理できます。フォーム処理を例にとると、入力チェックから送信、エラー時の再試行といった流れを可視化できます。API呼び出しであれば、リクエスト処理とエラーハンドリングの流れを整理できます。条件による分岐や繰り返しの処理も明確になるため、新規開発時の設計や、既存システムの改修検討時のロジック理解に役立ちます。

シーケンス図

シーケンス図は、複数のシステムやコンポーネント間のやり取りを時系列で表現する図です。「誰が」「誰に」「何を」という情報のやり取りを、上から下への時間の流れで表します。

特徴は、複数の参加者間の相互作用を表現できることです。フローチャートが分岐やループを含む自由な流れの方向を表現するのに対し、シーケンス図は基本的に上から下への一方向の時系列で、「誰が何をしたか」という参加者間のやり取りに焦点を当てます。

以下は、複数システム間のやり取りを表現したシーケンス図の例です。

このように、各参加者の役割が縦のライン上にまとまって把握できます。ブラウザの縦ラインを追えば「ユーザーから操作を受け取る→APIにリクエスト送信→処理結果を受け取る→ユーザーに表示」という一連の役割がわかります。また、やり取りが上から下へ時系列順に並んでいるため、処理の流れも追いやすくなっています。

そのため、複数のシステムが関与する複雑な処理を俯瞰して把握したいときに役立ちます。たとえば、決済処理であればブラウザ、API、決済サービス、データベースがどう連携しているかを整理できます。メール送信であれば、ブラウザ、API、メール送信サービス、データベースという複数のシステムがどのタイミングで何をするかを把握でき、各システムの責任範囲を理解しやすくなります。

図の使い分けを実践する

ここまで、フローチャートとシーケンス図それぞれの特徴を説明してきました。しかし、実際にプロジェクトで図を作る際に「どちらを使えばいいんだろう？」と悩むこともあるでしょう。

この2つの図は、見たいものが違います。同じ機能を題材にしても、適した図は異なります。具体例で比較してみましょう。

ケース1：条件分岐を把握したい

例としてログイン機能を見てみましょう。「認証成功時と失敗時の流れ」を把握したい場合、フローチャートとシーケンス図ではどのように表現が異なるでしょうか。

フローチャート（左）では、ひし形で判断を表現し、成功／失敗それぞれの流れが矢印で示されています。分岐点が一目瞭然で、エラー表示されたログイン画面から再度入力できるループも見えます。

シーケンス図（右）では、alt記法を使えば分岐を表現できます。しかし、分岐がブロックの中に隠れてしまい、フローが追いにくくなります。また、失敗時に「どこに戻るか」といったループの流れは表現しにくい構造です。

条件分岐や「失敗時にどこへ戻るか」といった流れの把握が目的なら、フローチャートが適しています。

ケース2：複数システムの連携を把握したい

もう一つの例として、ECサイトの決済処理を見てみましょう。「ユーザー、ブラウザ、API、決済サービス、データベースがどう連携するか」を把握したい場合、フローチャートとシーケンス図ではどのように表現が異なるでしょうか。

フローチャート（左）では、処理の流れは追えます。しかし、「どのシステムが何をしているか」が区別しにくくなっています。無理にシステムを表現しようとすると「ブラウザ：購入リクエスト」「API：決済処理依頼」のようにノード名にシステム名を含めることになります。縦のラインで整理されるシーケンス図と比べると見通しが悪くなります。

シーケンス図（右）では、各参加者が縦のライン上に整理されています。ブラウザの縦ラインを追えば「購入ボタンクリック→処理結果受取→完了画面表示」という役割がわかります。APIの縦ラインを見れば「決済サービスとデータベースへの連携」という役割が明確です。各システムが何をしているか、どのタイミングで動くかが一目瞭然です。

複数のシステムが連携する処理で、各システムの役割と連携を把握したい場合は、シーケンス図が適しています。

使い分けのポイント

ここまでの2つのケースを通して、フローチャートとシーケンス図の向き不向きを見てきました。まとめると、次のような基準で判断できます。

次のような場合は、フローチャートが適しています。

• ユーザーの操作フローを整理したい
• 条件分岐やエラー時の流れを明確にしたい
• 画面遷移を把握したい

一方、次のような場合は、シーケンス図が適しています。

• 複数システム（3つ以上）の連携を理解したい
• 各システムの役割・責任範囲を明確にしたい
• APIの呼び出し順序を整理したい

見たいものに応じて図を選ぶことで、必要な情報をわかりやすく表現できます。

まとめ

今回は、テキストベースでの図はAI時代において価値が上がっていることを説明しました。AIを活用すれば、作成、編集、利用もしやすいことも説明しました。

ただし、AIにうまく指示するためには基本の理解が必要です。

本記事ではフローチャート・シーケンス図の使い分けについて説明できましたが、Mermaidでできることの詳細までは説明できていません。それについては次回紹介予定です。