Mermaid ツリーマップのチートシート

入れ子の長方形で、面積がそのまま値になるもの。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

セクションとリーフ

コロンのある行がリーフで、数字がその大きさです。コロンのない行がセクションで、その下の行はそのセクションのものです。

treemap-beta
  "Category A"
    "Item A1": 10
    "Item A2": 20
  "Category B"
    "Item B1": 15

インデントが階層で、何段でも深くできます。

treemap-beta
  "Products"
    "Electronics"
      "Phones": 50
      "Computers": 30
    "Clothing"
      "Men's": 40

数字の大きいリーフは大きな長方形になります。ここにある 3 つの数字は 3 つとも違う面積です。

treemap-beta
  "Budget"
    "Servers": 70
    "Design": 20
    "Ops": 10