Mermaid 矩形树图速查表

层层嵌套的矩形，面积就是数值。

这个页面上的每一张图都由Mernyx——macOS 上的原生 Mermaid 编辑器绘制。不是浏览器里跑的 Mermaid.js，而是 App 画布用的同一个渲染器。

分区与叶子

带冒号的一行是叶子，数字是它的大小。不带冒号的一行是分区，它下面的行归它所有。

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

一张矩形树图，两个矩形 Category A 和 Category B，第一个分成 Item A1 和 Item A2，第二个装着 Item B1。

分区里的分区

缩进就是层级，想套多深都可以。

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

一张矩形树图，一个大矩形 Products，分成 Electronics 和 Clothing，Electronics 又分成 Phones 和 Computers。

数值就是面积

数字越大的叶子拿到的矩形越大。这里三个数字就是三块不同的面积。

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

一张矩形树图分成三个矩形 Servers、Design 和 Ops，Servers 占的空间最大。

在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。

购买 Mernyx Pro — $19 免费下载