mermaid 記法とは？基本的な書き方を紹介
編集者： Edraw
データベース-ER図 知識
mermaid記法（マーメイド記法 ）を聞いたことありますか？mermaid記法は、グラフや図を簡単に作成するための記法であり、特にフローチャートやシーケンス図、そしてER図を描くのに便利です。ER図は、データベースの設計においてエンティティとその関係を視覚化するための重要なツールです。Mermaid記法を使えば、コードを書くだけでER図を簡単に描くことができます。この方法は、開発者やデータベース設計者にとって非常に効率的であり、複雑なデータ構造を理解しやすくします。
1.mermaid記法とは?
mermaid記法はテキストでグラフやチャートを描くための記法です。メルメイド(Mermaid)というパッケージを使用することで、簡単に図表を作成することができます。GitHubやNotion、VSCodeなどの主要なサービスやツールがmermaid記法をサポートしています。
例えば、VS Code(Microsoft Visual Studio Code)を用いてmermaid記法でグラフを描く際には、以下の準備をします。
・VS Codeのインストール
・Markdown Preview Mermaid Supportプラグインのインストール
グラフやチャートを描くための記法
mermaid記法は、グラフやチャートを作成するための記法です。テキスト形式で指定することで、自動的に図表が生成されます。この記法を使用することで、手軽にプレゼンテーション資料やドキュメントなどに図表を挿入することが可能です。
使用される主な場面
mermaid記法は、主にプログラミングやプロジェクト管理、ドキュメント作成などの場面で使用されます。フローチャートやシーケンス図、ガントチャートなどの図表を作成する際に活用されています。
2.mermaid 記法で作成できる図表の種類
mermaidで作成できるダイアグラムは以下のように複数種類があります。本記事では代表的な３つについて詳しく紹介します
1. フローチャート
2. シーケンス図
3. ガントチャート
4. クラス図
5. 状態遷移図
6. ピエチャート
7. ネットワーク図
8. ツリーダイアグラム
9. ユースケース図
10. パイプライン図
11. ER図 (Entity-Relationship Diagram)
12. マインドマップ
13. ロジック図
14. データフロー図
フローチャート
フローチャートは、業務プロセスやアルゴリズムなどの流れを図式化したものです。Mermaidでは、要素同士を --> で結んで表現します。例えば、以下のように記述することでフローチャートを作成できます。
- ```mermaid
- graph LR
- A[開始] --> B[処理1]
- B --> C[処理2]
- C --> D[終了]
- ```
上記記法で記載すると図が以下のように生成されます。
それでは、分岐があるものも描いてみましょう。
- ```mermaid
- graph LR
- A[開始] --> B[処理1]
- B --> C[処理2]
- C --> D[終了]
- ```
上記記法で記載すると図が以下のように生成されます。
シーケンス図
シーケンス図は、オブジェクト間でのメッセージのやり取りを時系列順に示す図です。Mermaidでは、状態遷移を -->> や ->> で表現します。例えば、以下のように記述することでシーケンス図を作成できます。
```mermaid
sequenceDiagram
participant クライアント
participant サーバー
クライアント ->> サーバー: リクエスト
サーバー -->> クライアント: レスポンス
```
上記記法で記載すると図が以下のように生成されます。
ガントチャート
ガントチャートは、プロジェクトの進捗やスケジュールを可視化するための図です。Mermaidのガントチャートでは、日付やタスクの情報を指定することができます。例えば、以下のように記述することでガントチャートを作成できます。
- ```mermaid
- gantt
- dateFormat YYMMDD
- title プロジェクトスケジュール
- section タスク
- 予備検討: a1, 2023-01-01, 60d
- 仕様策定: a2, after a1, 120d
- 開発: a3, after a2, 40d
- ```
上記記法で記載すると図が以下のように生成されます。
3.mermaid記法の基本的な書き方
mermaid記法はテキストでグラフやチャートを描くための記法です。図表を作成する際に、ノードや線、色、方向などの要素を指定することができます。
ノード、線、色、方向
ノードとはグラフ内の要素を表し、ノード同士を線で結ぶことで関係性を表現します。線の種類や太さ、色、矢印の有無を設定することができます。また、図表の方向（上から下、下から上、左から右、右から左）を指定することで、レイアウトを調整することができます。
| 記法 | |
| 線の種類 | 直線: a --> b で直線を描画します。 点線: a -->> b で点線を描画します。 |
| 色 |
テーマ変数を使う方法: lineColorを変更することで、線の色を指定できます。 |
| 矢印 | 矢印: a ->> b で矢印を描画します。 点線矢印: a -->> b で点線矢印を描画します。 バツ矢印: a -x b でバツ矢印を描画します。 点線バツ矢印: a --x b で点線バツ矢印を描画します。 オープン矢印: a -) b でオープン矢印を描画します。 点線オープン矢印: a --) b で点線オープン矢印を描画します |
4.mermaid 記法でフローチャートを書く方法
mermaid 記法を使用してフローチャートを作成する方法について説明します。
まず、フローチャートを描く場合は、コードブロック内に graph TB または flowchart TB と記述します。ここで、TBは上から下への方向を表しています。
次に、各ノード（要素）を順番に記述し、矢印（-->）を使用して要素同士を繋ぎます。このようにして、フローチャートの流れを表現します。また、フローチャートの方向には他にもBT（下から上）、LR（左から右）、RL（右から左）を指定することができます。必要に応じて適切な方向を選択してください。
フローチャートの作成には、Mermaidの記法を活用することでテキストで簡単に図を作成することができます。メリットとして、修正や検索が容易であり、バージョン管理もしやすいです。
5.mermaid 記法よりカンタン！作図はEdrawMaxに任せろ
EdrawMaxは豊富なテンプレートを提供しています。これにより、初心者から上級者まで、あらゆるニーズに応えることが可能です。
5.1 豊富なテンプレート
また、EdrawMaxはプログラミング言語を使用せず、直感的な操作で図表を作成することが可能です。このため、誰でも簡単に使い始めることができます。例えば先にも述べたフローチャートですが、EdrawMaxでは以下のような多くの種類のフローチャートに対応しています。
5.2 プログラミング言語ではなく、直感的な作図体験
さらに、自然言語でAIと対話しながら、図表を作成する機能を備えています。これにより、作図プロセスがスムーズに進み、効率的に作業を行うことができます。
5.3 自然言語でAIと対話しながら、図表を作成する
mermaid記法を使用することで、テキストでグラフやチャートを描くことができます。これは特定のソフトウェアを使用せずに、シンプルな記法で様々な図表を作成できるというメリットがあります。フローチャートの作成画面を例に説明します。右上の部分の青枠で示すものがAIです。
必要に応じてAIと対話することができます。右下の赤枠にはフローチャート作成のためのチュートリアル動画も表示されますから、初心者でも簡単にフローチャートが作成できます。便利ですね。
EdrawMaxを使用することで、mermaid記法よりも直感的な作図体験を得ることができます。豊富なテンプレートや自然言語でのAIとの対話など、作図の手間を大幅に軽減することが可能です。
まとめ
Mermaid記法は、テキストでグラフやチャートを描く記法であり、Mermaidパッケージを用いて簡単に図表を生成します。主にプログラミングやプロジェクト管理、ドキュメント作成などで使用され、フローチャート、シーケンス図、ガントチャートなどのダイアグラムを作成できます。基本的な書き方では、ノードや線、色、方向を指定し、コード内で流れや関係性を表現します。Mermaid記法は、手軽さと効率性を兼ね備えた図表作成の手段として、広く活用されています。 さらに、EdrawMaxを利用することで、直感的な操作や豊富なテンプレート、自然言語でのAIとの対話機能など、作図プロセスを効率化できます。
関連記事