Einen Dateibaum für eine GitHub-README erstellen

Ein Dateibaum — das kleine ASCII-Diagramm der Ordner und Dateien Ihres Projekts — macht eine README sofort übersichtlicher. Diese Anleitung zeigt drei zuverlässige Wege, einen zu erstellen, und wie Sie ihn einfügen, damit die Verzweigungen auf GitHub korrekt ausgerichtet sind.

Der schnellste Weg: ein Online-ASCII-Baum-Generator

Keine Kommandozeile, keine Installation. Bauen Sie Ihre Ordnerstruktur visuell auf, wechseln Sie zwischen Unicode- und reinen ASCII-Verbindern und kopieren Sie ein sauberes Diagramm mit einem Klick.

ASCII-Baum-Generator öffnen

Methode 1 — Der tree-Befehl

Jedes große Betriebssystem bringt einen tree-Befehl mit (oder kann ihn installieren), der eine Verzeichnisstruktur als Text ausgibt.

Installieren Sie ihn unter macOS oder Linux bei Bedarf (brew install tree oder sudo apt install tree) und führen Sie ihn dann im Projektordner aus. Verwenden Sie -I, um störende Ordner zu ignorieren:

Unter Windows ist der Befehl integriert. Führen Sie ihn in dem Ordner aus, den Sie dokumentieren möchten:

Kopieren Sie die Ausgabe aus Ihrem Terminal und fahren Sie mit dem Abschnitt „Damit es auf GitHub angezeigt wird“ weiter unten fort.

macOS / Linux
tree -I 'node_modules|.git|dist'

Methode 2 — Ein Online-ASCII-Baum-Generator

Wenn Sie die Kommandozeile nicht anfassen möchten oder eine Struktur dokumentieren, die noch nicht auf der Festplatte existiert, ist ein Online-Generator die einfachste Option.

Sie fügen Ordner und Dateien in einem visuellen Editor hinzu, ordnen sie per Drag-and-drop an, wählen Unicode- (├──) oder reine ASCII-Verbinder (|--) und kopieren das Ergebnis. Nichts wird hochgeladen — alles läuft in Ihrem Browser.

Methode 3 — Eine VS-Code-Erweiterung

Mehrere VS-Code-Erweiterungen (suchen Sie nach „file tree to text“) fügen per Rechtsklick auf einen Ordner eine Aktion „Dateibaum erzeugen“ mit Markdown-Ausgabe hinzu.

Das ist praktisch, wenn Sie im Editor arbeiten, auch wenn Sie weniger Kontrolle darüber haben, welche Ordner ausgeschlossen werden, als mit dem tree-Befehl oder einem dedizierten Generator.

Damit es auf GitHub angezeigt wird

Egal wie Sie den Baum erzeugen: GitHub hält die Verzweigungen nur ausgerichtet, wenn eine Monospace-Schrift verwendet wird. Umschließen Sie den Baum mit einem Codeblock — drei Backticks in einer eigenen Zeile, davor und danach:

Ohne die Code-Zäune rendert GitHub den Text mit einer proportionalen Schrift, und die Zeichen │ und ├── geraten aus der Ausrichtung.

In Ihrer README.md
```
my-project
├── src
│   └── index.ts
└── README.md
```

Unicode- vs. ASCII-Verbinder

Unicode-Verbinder (├──, │, └──) sehen sauberer aus und werden auf GitHub und in modernen Editoren nativ dargestellt — verwenden Sie sie standardmäßig.

Reine ASCII-Verbinder (|--, |, \--) verwenden nur einfache Zeichen. Wählen Sie sie für ältere Terminals, Klartext-E-Mails oder Umgebungen, die Unicode nicht zuverlässig anzeigen.

Beispielausgabe
my-project
├── src
│   ├── index.ts
│   └── utils.ts
├── tests
│   └── index.test.ts
├── package.json
└── README.md

Häufig gestellte Fragen

Wie schließe ich node_modules aus dem Baum aus?
Übergeben Sie beim tree-Befehl -I, um Muster zu ignorieren, z. B. tree -I "node_modules|.git|dist". In einem Online-Generator fügen Sie diese Ordner einfach nicht hinzu.
Warum ist mein Dateibaum auf GitHub falsch ausgerichtet?
Das liegt fast immer daran, dass der Baum nicht in einem Codeblock steht. Umschließen Sie ihn mit drei Backticks, damit GitHub eine Monospace-Schrift verwendet.
Kann ich einen Dateibaum erstellen, ohne etwas zu installieren?
Ja — verwenden Sie einen kostenlosen Online-ASCII-Baum-Generator, der vollständig in Ihrem Browser läuft. Sie bauen die Struktur visuell auf und kopieren das Ergebnis.