# Mermaid マインドマップのチートシート

矢印を書かずに、木になるテキストのアウトライン。

## インデントが階層になる

意味を持つのは、上の行からの相対的な深さだけです。スペース 4 つでもタブでもかまいません。

```mermaid
mindmap
  Root
    Branch A
      Leaf A1
      Leaf A2
    Branch B
      Leaf B1
```

![マインドマップの木。ルート、2 つの枝、その下に 1 つずつ葉があります。](/diagrams/mindmap/indentation.svg)

## ノード形状

フローチャートと同じ括弧の考え方です。角形、丸角、円、バナー。

```mermaid
mindmap
  Root
    id1[Square]
    id2(Rounded)
    id3((Circle))
    id4)Banner(
```

![マインドマップのルートに 4 つの子。角形、丸角の箱、円、バナー形で描かれています。](/diagrams/mindmap/shapes.svg)

## Markdown ラベル

ラベルをバッククォートで囲むと、太字・斜体・コードが使え、文字は自動で折り返します。

```mermaid
mindmap
  id1["`**Bold** root`"]
    id2["`The dog in **the** hog`"]
    id3[Plain label]
```

![マインドマップ。ルートのラベルが太字で、その下に 2 つの子があり、そのうち 1 つは一部だけ太字です。](/diagrams/mindmap/markdown.svg)

## 上の行からの深さだけが意味をもつ

下のインデントは意図的にまちまちです。B は A の子、C は B の兄弟です。

```mermaid
mindmap
Root
    A
        B
      C
```

![マインドマップ。ルートに 1 つの子があり、その子に 1 つの子と、同じ階層にもう 1 つの子があります。](/diagrams/mindmap/relative-indent.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。