Mermaid.js ツリーマップ図の構文とレイアウトガイド

ツリーマップ図は、階層的なデータをネストされた長方形の集合として表示します。木の各枝は長方形で表され、その長方形はさらに小さな長方形で敷き詰められ、それらはサブ枝を表しています。各長方形のサイズはその数値値に完全に比例しているため、複雑なカテゴリレベル内の全体の一部を比較する際のテキストから図への選択肢として非常に適しています。

基本的な構文構造

すべてのツリーマップは、treemap-beta宣言から始まります。その後、引用符で囲んだ名前を使って構造的な親ノードを宣言し、標準のインデントスペースでそれらの下にグループ化して個々の子葉ノードをマッピングします。その後、コロンとその数値的な重みを追加します。

treemap-beta
"メインカテゴリ名"
  "サブカテゴリA": 45
  "サブカテゴリB": 30
  "サブカテゴリC": 25

構文リファレンス

以下の表は、Mermaid.jsでツリーマップレイアウトを構築するために使用される主な書式要件を分解しています。

高度なデータフォーマット（ディレクティブ）

デフォルトでは、Mermaidは数値の原始的なカウントを表示します。ただし、valueFormat 数値を通貨、小数、またはパーセンテージとしてフォーマットするプロパティ。

一般的なフォーマットパターン

財務データのブループリント

このブループリントは、カスタム財務文字列パラメータを使用して運用企業予算をフォーマットする方法を示しています：

---
config:
  treemap:
    valueFormat: '$0,0'
---
treemap-beta
"企業予算"
  "エンジニアリング運用"
    "コアインフラストラクチャ": 500000
    "開発者ツール": 150000
  "成長マーケティング"
    "有料広告キャンペーン": 350000
    "イベントスポンサーシップ": 80000

カスタムノードスタイル（クラス）

ドキュメント内の重要なノード、外れ値、または高リスク領域を強調するため、コードブロック内でネイティブにCSSカスタムスタイルを定義して適用できます。classDefルール。

treemap-beta
"システムリソース使用状況"
  "ウェブサービス"
    "APIゲートウェイ": 45
    "認証サービス": 95:::critical
  "データベースストレージ"
    "プライマリDBキャッシュ": 60
    "レプリカ同期ノード": 25

classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;

構文のヒント： 数値を含むリーフノードにクラス定義を適用するには、3つのコロン（:::className) ラベル名の直後に、コロン値セパレータの*前*に配置する。

一般的な構文の落とし穴と制限

ツリーマップスキーマは構造的なテキストのインデントを利用しているため、わずかなフォーマットの誤りがレイアウトのレンダリング問題を引き起こす可能性があります。以下のパラメータを念頭に置いてください：

• 負の値は禁止：ツリーマップは比例的なスペース埋め込みに依存しており、数学的に負の数やゼロの重みをレンダリングすることは不可能です。すべてのデータ値が正の整数または小数であることを確認してください。
• 引用符による囲み： ノードの説明は、親ブランチであろうと小さなリーフ要素であろうと、すべてダブルクォーテーションで明確に囲む必要があります。引用符を省略すると即座に構文エラーが発生します。
• 空白の一貫性： ネストされた親子関係は、行の先頭に何個のスペースがあるかによって完全に決定されます。ノードが誤ったグループに属してしまうのを防ぐために、一貫したタブまたはスペースの長さルール（例：レベルごとに2つのスペース）を守ってください。
• ラベルの可視性： 深い階層構造内の非常に小さな値は、テキストがオーバーフローしたり完全に読めなくなったりする小さな長方形のタイルを生じる可能性があります。小さな項目を「その他」カテゴリの下でまとめるように検討してください。