Mermaid記法でシーケンス図を書く方法

Mermaid記法は、Markdown形式のテキストで簡単にシーケンス図を描くことができるライブラリです。その使い勝手の良さから、シーケンス図の作成によく利用されます。特に、ChatGPTをはじめとするAIの進化によって、より直感的で迅速なシーケンス図の描画が可能となり、驚かされる場面も多いです。

本記事では、Mermaid記法でシーケンス図を書く方法について詳しく解説します。Mermaidを使っての基本的なシーケンス図の書き方、色やループ、改行、コメントを含む詳細な記述方法、そしてAIツールを利用したより簡単なシーケンス図の作成方法などについても触れます。

1.シーケンス図の構成

シーケンス図は、システム内のオブジェクト間でのメッセージのやり取りを視覚的に表現するための図です。この図を用いることで、システムの動作やフローを理解しやすくなります。特にソフトウェア開発やシステム設計において重要な役割を果たします。シーケンス図の構成要素には、以下の要素が含まれます。

まず、アクターと呼ばれる要素です。これはシステムの外部からシステムにアクセスするユーザーや他のシステムを示します。例えば、ユーザーがアプリケーションを使用する場合、そのユーザーはアクターとなります(図中赤枠)。

次にライフラインです。ライフラインはシーケンス図において、オブジェクトやアクターの存在期間を表します。ライフラインの軸は時間軸となり、上から下に流れることで時間の経過を示します(図中青枠)。

さらに、メッセージです。メッセージは、アクターやオブジェクト間でやり取りされるアクションや要求を示します。このメッセージは矢印で表現され、同期メッセージや非同期メッセージなどがあります(図中緑枠)。

また、ガード条件も重要です。ガード条件はメッセージが送信される条件を表します。これにより、特定の条件下でのみアクションが実行されることを視覚的に示すことができます。

このように、シーケンス図の構成要素を理解することで、Mermaid記法でシーケンス図を書く方法を把握しやすくなります。次は、Mermaidでシーケンス図をどのように記述するかについて詳しく説明します。

2.シーケンス図作成に必要なMermaid記述方法

シーケンス図の構成をMermaidでどのように記述しますか？

Mermaid記法でシーケンス図を書く方法は非常にシンプルですが、基本的な構成を理解しておくことが重要です。Mermaidでは、「sequenceDiagram」ブロックを使用してシーケンス図を作成します。このブロック内で、エンティティ（例えば、ユーザーやシステム）の間のメッセージのやり取りを表現します。

具体的には、各エンティティはエンティティ名で宣言し、その後に矢印を使用してメッセージの流れを示します。例えば、ユーザーがシステムにリクエストを送る場合、次のように記述します。

このようにして、Mermaid記法では簡単にシーケンス図を作成することができます。

次に、色やループ、改行、コメントを含む高度な記述方法について説明します。

Mermaidでは、シーケンス図の視覚的な要素を強化するために色を使用することができます。色を指定するには、「note」タグを使ったり、メてスタイルを設定することが可能です。例えば、次のように記述します：

ループの処理を表現するためには、「loop」ステートメントを使用します。例えば、リクエストを何度も繰り返す操作を表現するには次のように記述します：

そして、コードにコメントを挿入する場合、「%%」を使って行います：

%% これはコメントです

これにより、コードの一部を説明したり、後で参照するためのメモを残すことができます。

(コメントはコンパイル後の図には表示されません)

以上が、Mermaid記法でシーケンス図を作成する際の基本的な方法です。次は、具体的な例を使ってMermaid記法でシーケンス図を書く方法をさらに詳しく解説します。

より多くの知識を学びたい方はこちらのリンクを参考してください（英語版）

Mermaidの公式サイト：Sequence Diagram

3.Mermaid記法でシーケンス図を書く

ここでは、Mermaid記法でシーケンス図を書く方法について、簡単な例を使って紹介します。まず、MermaidをMarkdownファイルに組み込み、その記法を使用してシーケンス図を作成する基本的な方法を理解することが重要です。

例えば、以下のようなToDoアプリのシーケンス図を考えてみます。ユーザーがタスクを追加し、システムがタスクリストにその情報を保存する流れです。

Mermaid記法を使用する場合、以下のようにシーケンス図を記述します：

Mermaidのエディターにコードを入力すれば、シーケンス図が生成されます。

https://www.mermaidchart.com/play より

この記述では、"sequenceDiagram"を使ってシーケンス図の開始を宣言し、その後に「Participant（登場人物）」としてユーザーとシステムを定義しています。そして、ユーザーがタスクを追加し、システムがそれを確認する一連のやり取りを示しています。

さらに、シーケンス図の美しい表示を実現するために色やスタイルを追加することもできます。しかし、まずは基本的な構成を理解することが重要です。

このように、Mermaid記法でシーケンス図を書く方法を習得することによって、複雑なシステムの動作を視覚的に理解しやすくなるでしょう。この技術は特にNotionのような多機能なドキュメントツールと組み合わせることで、その威力を発揮します。

4.より簡単な作成方法!ドラッグ＆ドロップでシーケンス図を書く

Mermaid記法でシーケンス図を書く方法を学んだ後、さらに簡単にシーケンス図を作成したい方には、EdrawMaxの使用がおすすめです。EdrawMaxはドラッグ＆ドロップ機能を持つ非常に直感的なツールで、専門知識なしでもシーケンス図を描くことができます。

シーケンス図をEdrawMaxで作成する手順を紹介します。

まず、EdrawMaxを起動し、検索窓で「シーケンス」で検索します。(図中赤枠)

検索結果から「UMLシーケンス図」で絞り込み(図中青枠)、「新規作成UMLシーケンス図」を選択します(図中赤枠)。

次に、シーケンス図のテンプレートから目的の図形をドラッグ＆ドロップで配置し、必要な要素を追加していきます。テキストやラベル、矢印なども簡単に追加できるため、細かい調整もスムーズです。

EdrawMaxを利用するメリット

EdrawMaxは非常に多機能なツールで、初心者からプロフェッショナルまで幅広いユーザーに対応しています。以下にその主要なメリットを紹介します。

1.操作が直感的

ドラッグ＆ドロップ機能により、複雑なシーケンス図も簡単に作成できます。Mermaidのような記法を知らなくても、視覚的に操作が完結します。

2.多機能なテンプレートと図形ライブラリ

シーケンス図だけでなく、フローチャートやネットワーク図、UMLなど幅広いテンプレートが利用可能です。どんな業務にも対応できる柔軟性があります。

3.高い互換性

EdrawMaxはPDF、PNG、JPG、SVGなど多様なフォーマットで出力できるため、他のツールやプレゼン資料との互換性が抜群です。また、クラウド機能を使えば、複数のデバイスからアクセスと編集が可能です。

4.コラボレーション機能

チームでの共同作業も容易に行えます。リアルタイムでの編集やコメント機能があるため、離れた場所にいても効率的に作業が進みます。

これらのメリットを活用することで、シーケンス図作成の効率が飛躍的に向上します。Mermaid記法が難しいと感じる方や、もっと簡単にシーケンス図を作りたい方にはEdrawMaxが最適です。ぜひ一度試してみてください。

まとめ

以上、Mermaid記法を用いたシーケンス図の描き方について詳しく解説しました。Mermaidはシーケンス図の作成に非常に役立つツールであり、手軽に美しく、わかりやすい図を作ることができます。特にNotionなどの多機能なドキュメントツールと連携させることで、より効率的に情報共有ができ、企業の生産性向上にも役立つことでしょう。

シーケンス図の基本構成やMermaid記法の具体的な書き方、そして実際にシーケンス図を描く手順について紹介しました。さらに、EdrawMaxのようなドラッグアンドドロップツールを使用した、シーケンス図作成の簡便さにも触れました。