# Mermaid 目录树速查表

一份目录列表，画出来。

## 缩进

缩进就是层级，结尾的斜杠表示目录。

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

![一棵 my-project 树，里面有一个 src 文件夹装着 index.js，另外还有 package.json 和 README.md。](/diagrams/treeview/indentation.svg)

## 制表符画法

画框的那些字符也能用，解析器自己就能分出这两种写法。

```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)

## 注解

名字后面：三个井号表示高亮，icon() 给它图标，两个井号加一条注释。

```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 原生，不经过浏览器。