1. Mermaidの概要
Mermaidはテキストベースの軽量な図表作成ツールであり、開発者や技術専門職がシンプルな記述で図を生成できるように設計されています。複雑なグラフィックエディタを使用せず、コードのようにバージョン管理可能な方法で図を作成できます。
このツールは2014年にKnut Sveidqvistによって開発され、ドキュメントに保守性のある図を埋め込むという課題を解決するために広く利用されるようになりました。サポートされている図の種類には、フローチャート、シーケンス図、ガントチャート、クラス図、ステートチャートなどがあります。
Markdownファイル内に図のコードを埋め込むことで、ドキュメントと図を同時に管理することが可能です。これにより、技術文書やマニュアルの執筆が効率化されます。また、Mermaidの構文は直感的で理解しやすく、チームでの共同作業にも適しています。
GitLabやGitHubなどのプラットフォームとも統合可能であり、オンラインエディタも提供されているため、特別なインストールなしに図の作成とプレビューが可能です。ただし、高度なカスタマイズや美しさを求められる場合は、プロフェッショナルな図作成ソフトウェアの方が適している場合もあります。
2. フローチャートの使用方法
2.1 基本構造
フローチャートは処理手順や判断ポイントを視覚的に表現するための一般的な図です。主に以下の要素で構成されます：
- 矩形：処理ステップ
- 菱形：判断条件
- 楕円：開始・終了ポイント
- 矢印：流れの方向
Mermaidではノードとエッジ（線）でフローチャートを定義します。以下はシンプルな例です：
---
title: Simple Flowchart Example
---
flowchart LR
id1["❤ Once day"]
2.2 表示方向の設定
| 略称 | 意味 | 英語表記 |
|---|---|---|
| TB | 上から下へ | Top to bottom |
| TD | トップダウン（TBと同じ） | Top-down |
| BT | 下から上へ | Bottom to top |
| RL | 右から左へ | Right to left |
| LR | 左から右へ | Left to right |
例として上下方向のフロー：
flowchart TD
A[上部] --> B[下部]
2.3 ノードの形状
| 形状 | 記法例 |
|---|---|
| 標準矩形 | A--B / A[rectangle] |
| 角丸矩形 | A(Node with round edges) |
| スタジアム型 | A([Stadium-shaped node]) |
| サブルーチン | A[[Subroutine node]] |
| 円筒形 | A[(Cylindrical node)] |
| 円形 | A((Circle node)) |
| 非対称 | A>asymmetric shape] |
| 菱形 | A{Rhombus node} |
| 六角形 | A{{Hexagon node}} |
| 平行四辺形 | A[/Parallelogram/] / A[\Parallelogram alt\] |
| 台形 | A[/Trapezoid\] / A[\Trapezoid alt/] |
| 二重円 | A(((Double circle node))) |
2.4 接続線のスタイル
| 接続方法 | 説明 | 記法例 |
|---|---|---|
| 矢印付き | 矢印を持つ直線 | A --> B |
| オープンリンク | 矢印なしの直線 | A --- B |
| ラベル付きリンク | リンク上にテキストを配置 | A -- テキスト --> B |
| 点線 | 破線のリンク | A -.-> B |
| 太線 | 太字のリンク | A == B |
| 非表示リンク | 見えないリンク | A ~~~ B |
| マルチリンク | 一つの行で複数のリンク | A -- text --> B -- text2 --> C |
2.5 サブグラフの利用
サブグラフを使用することで、フローチャート内のグループ化された領域を作成できます。以下のように定義します：
flowchart LR
subgraph "タイトル"
direction RL
A --> B
end
サブグラフにはIDを割り当てることもでき、他の要素との関連付けに役立ちます：
flowchart LR
subgraph id1 [グループ名]
A --> B
end
2.6 クリックイベントの追加
Mermaidではノードに対してクリックイベントを設定できます。以下はその例です：
graph LR
A[開始] --> B[ステップ]
B --> C[次のステップ]
C --> D[終了]
click A href "http://example.com/#start" _blank
click B href "http://example.com/#step" _self
click C href "http://example.com/#next" _parent
click D href "http://example.com/#end" _top
2.7 コメントの書き方
Mermaidでは %% を使ってコメントを記述できます。コメントはレンダリング時に無視されます：
%% これはコメントです
graph LR
A[四角] -- リンク --> B((円))
B --> C{判断}
%% この部分は表示されません
C -->|選択肢1| D[結果1]
C -->|選択肢2| E[結果2]
2.8 スタイルのカスタマイズ
ノードの外観を変更するには、直接スタイルを適用するか、CSSクラスを使用します：
graph LR
style A fill:#f9f,stroke:#333,stroke-width:4px
A --> B
CSSクラスを使った方法：
graph LR
classDef customStyle fill:#f9f,stroke:#333,stroke-width:4px;
class A customStyle;
A --> B
2.9 FontAwesomeアイコンの使用
FontAwesomeアイコンをノードに組み込むことも可能です：
graph LR
A[fa:fa-check 正解] --> B(fa:fa-ban 禁止)
B --> C{fa:fa-rocket 決定}
C -->|fa:fa-thumbs-up: はい| D[fa:fa-battery-half 半分]
C -->|fa:fa-thumbs-down いいえ| E[fa:fa-battery-full 満タン]
※FontAwesomeライブラリが環境に含まれている必要があります。