Mermaid 目录树速查表

一份目录列表，画出来。

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

缩进

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

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

一棵 my-project 树，里面有一个 src 文件夹装着 index.js，另外还有 package.json 和 README.md。

制表符画法

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

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

一棵用画框字符画出的文件树：一个 src 文件夹装着 index.ts 和 utils.ts，另外还有 package.json 和 README.md。

注解

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

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

一棵文件树，App.tsx 被标成高亮，带一个 React 图标，注释写着 main component。

在 Mernyx 里画出来

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

购买 Mernyx Pro — $19 免费下载