# Mermaid ツリービューのチートシート

ディレクトリの一覧を、描いてみたもの。

## インデント

インデントが階層で、末尾のスラッシュがディレクトリを表します。

```mermaid
treeView-beta
    my-project/
        src/
            index.js
        package.json
        README.md
```

![my-project の木。中に index.ts を持つ src フォルダがあり、ほかに package.json と README.md があります。](/diagrams/treeview/indentation.svg)

## 罫線文字での書き方

罫線文字でも同じように書けて、パーサが 2 つの書き方を自分で見分けます。

```mermaid
treeView-beta
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
└── README.md
```

![罫線文字で描かれたファイルツリー。src フォルダに index.ts と utils.ts があり、ほかに package.json と README.md があります。](/diagrams/treeview/box-drawing.svg)

## 注釈

名前のあとに、3 つのハッシュでハイライトを、icon() でアイコンを、2 つのハッシュで注釈を付けます。

```mermaid
treeView-beta
├── src/
│   ├── App.tsx :::highlight icon(logos:react) ## main component
│   └── index.ts ## entry point
├── package.json
```

![ファイルツリー。App.tsx がハイライトされ、React のアイコンと「main component」というコメントがついています。](/diagrams/treeview/annotations.svg)

## Mernyx で描いてみる

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