# Mermaid Baumansicht-Spickzettel

Ein Verzeichnislisting, gezeichnet.

## Einrückung

Die Einrückung ist die Hierarchie, und ein Schrägstrich am Ende markiert ein Verzeichnis.

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

![Eine Baumansicht mit der Wurzel „my-project“, einem Ordner „src“ und „index.js“ darin, dazu „package.json“ und „README.md“.](/diagrams/treeview/indentation.svg)

## Rahmenzeichen

Auch die Rahmenzeichen funktionieren, und der Parser unterscheidet die beiden Formen selbst.

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

![Eine Baumansicht aus Rahmenzeichen: ein Ordner „src“ mit „index.ts“ und „utils.ts“ darin, dazu „package.json“ und „README.md“.](/diagrams/treeview/box-drawing.svg)

## Annotationen

Nach dem Namen: drei Rauten markieren ihn, icon() gibt ihm ein Icon, und zwei Rauten hängen eine Notiz an.

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

![Eine Baumansicht, in der „App.tsx“ mit einem React-Icon hervorgehoben ist und einem Kommentar „main component“.](/diagrams/treeview/annotations.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.