Mermaid.js マインドマップ構文ガイド

マインドマップとは何ですか？

A マインドマップマインドマップは、複雑な情報フロー、ブレインストーミングされたアイデア、またはプロジェクトの分類を捉え、整理し、構造化するために使用される階層的なツリー型の可視化です。線形の手順を規定するフローチャートとは異なり、マインドマップは中心となるコアコンセプトとそのさまざまなサブノードとの間の関係を表現するため、高レベルのロードマップ計画、機能の分解構造、または知識管理に最適です。

With Mermaid.jsMermaid.js を使用すると、標準のMarkdownリストのインデントを使って階層構造を定義できます。エンジンはノードの配置を自動的に処理し、ツリーの成長を計算し、階層レベルに応じて異なるノード形状を適用するため、手動でのピクセル調整なしに数百もの相互接続されたノードを視覚化できます。

コア構文ガイド：要素と構造

Mermaidで有効でプロダクションレベルのマインドマップを設計するには、ルートノードの定義、インデントに基づくレベルのネスト、および視覚的な装飾トークンの習得が求められます。

1. マインドマップのルートの初期化

1行目に mindmapキーワードを使用してマインドマップのキャンバスを初期化します。構造は、ルートノード（マップの中心）を定義し、その後、標準的なスペースインデントを使ってその下にサブノードをネストすることで構築されます：

mindmap
  root((中心となるコアコンセプト))
    レベル1ノード
      レベル2サブノード

2. ノードの幾何形状の制御

フローチャートと同様に、テキストを特定の括弧トークンで囲むことで、視覚的な文脈を注入できます。これは、主なカテゴリ、二次的なタスク、実行可能な項目を区別するために強く推奨されます：

• (Text) — 円形ノード（デフォルト）。
• ((Text)) — 二重円形ノード（通常、ルート用に予約されています）。
• [Text] — 四角形ノード。
• )Text( — 凸形／非対称ノード。
• {Text} — 六角形／括弧ノード。

3. アイコンと外部フォーマットの統合

テキスト文字列内に直接視覚的なアイコンを追加することで、ノードの可読性を向上させることができます。::icon(...)構文を使用します。これにより、一目で異なる種類のノード（例：人、ソフトウェア、ハードウェア、または外部API）を素早く区別できます：

mindmap
  root((システムアーキテクチャ))
    (UIレイヤー)
    ::icon(fa fa-desktop)
      [Webアプリ]
    (データレイヤー)
    ::icon(fa fa-database)
      [プライマリDB]

明確な階層レイアウトのためのベストプラクティス

• ノードのテキストは簡潔に：マインドマップは素早くスキャンするためのものである。ノードラベルを3語以下に抑えることで、テキストがツリーの枝を画面幅を超えて広げることを防げる。
• 一貫した幾何学的形状を使用する：ツリー全体で形状に厳密な論理を保つ（例：コードコンポーネントには四角形ノード、APIエンドポイントには六角形ノード、物理的インフラには丸みを帯びたノードを使用）。この一貫性により、マップの処理がはるかに容易になる。
• ネストの深さを制限する：マップのネストを4～5段階以内に抑えるように試みる。ある枝がより深いネストを必要とする場合は、全体のキャンバスサイズを管理可能にするために、別々の専用マインドマップに分けることを検討する。

実際のMermaid.jsマインドマップの例とテンプレート

例1：ソフトウェア開発ライフサイクル（SDLC）分類

この機能的なブループリントは、標準的なSDLCフェーズをカテゴリ別ツリーに整理し、アイコンを使って各タスクグループの性質を視覚的に強調している。

mindmap
  root((SDLCフェーズ))
    (計画)
    ::icon(fa fa-tasks)
      [要件]
      [実現可能性]
    (開発)
    ::icon(fa fa-code)
      [アーキテクチャ]
      [実装]
    (品質)
    ::icon(fa fa-bug)
      [ユニットテスト]
      [統合テスト]
    (展開)
    ::icon(fa fa-cloud)
      [CI/CDパイプライン]
      [モニタリング]

構文の分解： 中心のrootノードとレベルごとのインデントを使用することで、エンジンは対称的に枝を生成します。::icon(fa fa-...)構文により、FontAwesome互換のグリフが挿入され、抽象的なフェーズが視覚的に明確でスキャンしやすいノードに変換されます。

例2：企業向けマイクロサービス機能の分解

この高度なブループリントは、eコマースプラットフォームを技術的機能セットに分解し、幾何学的形状を使ってインフラモジュールと顧客向けインターフェースを区別しています。

マインドマップ
  root((E-Commerce プラットフォーム))
    (ユーザーインターフェース)
      [モバイルアプリ]
      [Webダッシュボード]
    (サービスレイヤー)
      [Auth API]
      [注文API]
    (インフラストラクチャ)
      ((主要なクラウドプロバイダー))
        [Redisキャッシュ]
        [PostgreSQLインスタンス]

構文の分解： このマップは、論理的なシステム構成要素を示すために、明確に異なる形状を使用しています。この明確な視覚的階層構造により、関係者が高レベルのサービスと基盤となるデータ構造を即座に区別できるようになります。