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

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

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

インデント

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

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

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

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

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

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