Floorplan: interaktive Karte der eigenen Codebasis mit Claude Code

Was ist Floorplan? Es ist ein Skill für Claude Code und Codex, der den Code einer Anwendung liest und daraus eine interaktive Karte zeichnet: welche Teile es gibt, welche Dateien dazugehören, welche Anfragen zwischen Oberfläche und ServerEin Server ist ein Computer oder ein Programm, das anderen Geräten Dienste bereitstellt: Er liefert Websites aus, speichert Daten, verschickt E-Mails oder…Mehr erfahren → laufen, und alles mit Namen, die auch Nicht-Programmierer verstehen. Die Karte ist eine einzige HTML-Datei im Projekt.

Wir haben Floorplan auf eine öffentliche Demo-App angewendet und die fertige Karte im Browser bedient. Das Video unten zeigt die Interaktion.

Warum Floorplan gerade so gefragt ist

Laut GitHub hat haydenschmitty/floorplan Stand 04.11.2026 rund 2'739 Sterne. Angelegt wurde das Repository am 27.10.2026, Lizenz MIT. Die Version 0.6.3 vom 02.11.2026 brachte laut Changelog unter anderem bessere Erkennung von Server-Adressen bei Fastify und Django und, in 0.6.2, deutlich weniger Fehlalarme im Health-Check.

Das README nennt das Problem, auf das Floorplan zielt: Viele Apps entstehen heute mit viel KI-Hilfe, und auf die Frage «Was passiert, wenn jemand bezahlt?» lautet die ehrliche Antwort oft «keine Ahnung». Wer mit Vibe Coding arbeitet, kennt das. Einen einzelnen Auslöser für die Aufmerksamkeit nennt das Projekt nicht.

So funktioniert es

Floorplan teilt die Arbeit sauber zwischen Skripten und Agent auf:

1. Scannen (Skript): Repositories finden, Importe auflösen, Server-Routen erkennen und Aufrufe im Frontend den passenden Routen zuordnen, auch über getrennte Repositories hinweg.
2. Gliedern (Agent): Der Coding-Agent schreibt eine architecture.json mit drei bis neun Hauptteilen, Unterteilen, externen Diensten, Abläufen und einer kurzen Tour.
3. Beschreiben (Agent): Für jede Datei und jede Route ein Name und ein Satz in Alltagssprache.
4. Bauen (Skript): Validieren, Layout berechnen, Karte als HTMLHTML (Hypertext Markup Language) ist die Auszeichnungssprache, mit der der Inhalt und die Struktur jeder Webseite beschrieben werden: Überschriften, Absätze,…Mehr erfahren → schreiben. Alles offline, ohne externe Abrufe.
5. Zeigen: Ein kleiner lokaler Server öffnet die Karte im Browser und aktualisiert offene Tabs bei jedem neuen Build.

Dazu kommen ein Health-Check, eine Seitenansicht («Screens»), Abläufe zum Abspielen und eine Ask-Leiste, über die man der Karte Fragen stellt.

Installation

Floorplan hat keine Abhängigkeiten, Node.js 18 oder neuer genügt. Laut README wird es als Plugin in Claude Code oder Codex installiert, danach genügt eine Bitte wie «zeichne einen Floorplan dieses Projekts». Für unseren Test haben wir die Skripte direkt aus dem geklonten Repository aufgerufen, ohne die Claude-Code-Konfiguration zu ändern:

git clone --depth 1 https://github.com/haydenschmitty/floorplan
S=floorplan/skills/floorplan
node $S/scripts/scan.mjs /pfad/zum/projekt
node $S/scripts/build.mjs /pfad/zum/projekt
node $S/scripts/describe.mjs /pfad/zum/projekt
node $S/scripts/open.mjs /pfad/zum/projekt --no-open
node /pfad/zum/projekt/floorplan/serve.mjs --stop

Unser Test

Als Ziel diente «Conduit», die bekannte RealWorld-Demo, ein Blog nach dem Vorbild von Medium: ein React-Frontend und ein Express-Backend mit Prisma und PostgreSQL, zwei öffentliche Repositories unter MIT-Lizenz, zusammen 82 Code-Dateien. Wir haben den Skill in Claude Code (Modell Claude Opus 5.5) mit der Aufgabe «Zeichne einen Floorplan dieses Ordners» angewendet und die Anleitung wörtlich befolgt, die Beschreibungen auf Deutsch.

Der Scan dauerte 0.3 Sekunden und fand 131 Import-Verbindungen, 20 Server-Routen und 18 Zuordnungen von Frontend-Aufrufen zu Backend-Routen. Nach dem ersten Build waren 8 Dateien ohne Zuordnung (9.8 Prozent), etwa Testeinstellungen; ein zusätzlicher Knoten «Projekt-Einstellungen» löste das. Danach füllten wir die 12 Arbeitsblätter mit 82 Datei- und 20 Routenbeschreibungen. Das ist der eigentliche Aufwand, und er hängt direkt von der Grösse des Projekts ab.

Die Karte ist übersichtlich: Webseite, Server, Datenbank-Anbindung, Tests und Einstellungen als Hauptteile, PostgreSQL und der öffentliche Demo-Server als externe Dienste. Ein Doppelklick führt eine Ebene tiefer bis zur einzelnen Datei, die Seitenleiste zeigt, wer ein Teil nutzt und wovon es abhängt. Die Abläufe, die wir definiert hatten, spielen Schritt für Schritt ab und heben die beteiligten Karten hervor.

Interessant war der Health-Check. Er meldete eine wichtige Sache: Über die Registrierung könne jeder ohne Anmeldung Daten anlegen. Das stimmt technisch und ist hier gewollt, Floorplan schreibt das auch selbst dazu und bietet «Not a problem» an. Als kleineren Punkt nannte er die offene CORS-Einstellung, die bei Anmeldung per Token im Header vertretbar ist. Nicht als Problem erkannt hat er, dass das Frontend seine Anfragen an einen fest eingetragenen fremden Demo-Server schickt statt an das eigene Backend. Auf der Karte sieht man das trotzdem, weil der externe Server als eigener Knoten erscheint.

Was gut war: Klare Arbeitsteilung, null Abhängigkeiten, schnelle Builds, gute Anleitung für verständliche Beschreibungen, die Karte bleibt ausserhalb von GitGit ist ein Versionskontrollsystem, das jede Änderung am Code einer Software oder Website mit Zeitpunkt, Autor und Beschreibung speichert. Damit lassen sich…Mehr erfahren →. Die Zuordnung von Frontend-Aufrufen zu Backend-Routen funktionierte ohne Nachhilfe.

Was nicht gut war: Die Oberfläche der Karte ist englisch, auch wenn die Inhalte deutsch sind. Bei grossen Projekten wird das Beschreiben aufwendig und teuer. Die Ask-Leiste startet im Hintergrund Claude Code mit dem eigenen Login; das haben wir bewusst nicht ausgelöst.

Beispiele aus der Praxis

• Übergabe an ein neues Team: Eine Agentur übergibt eine Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren → an die interne IT eines KMU. Die Karte ersetzt nicht die Dokumentation, verkürzt aber die Einarbeitung.
• Vor einem Umbau: Wer den Bezahlablauf ändern will, sieht vorher, welche Seiten, Anfragen und Dienste beteiligt sind.
• Nach KI-Änderungen: Die Funktion «Recent work» markiert, welche Teile ein Agent zuletzt verändert hat, mit einer Notiz zum Warum.

Grenzen, Risiken, Lizenz

• Lizenz: MIT. Die analysierte Demo stand ebenfalls unter MIT; veröffentlicht haben wir nur Bilder der Karte.
• Datenschutz und Geheimnisse: Der Agent liest Code, und dieser geht an den Modellanbieter. Für Repositories mit Zugangsdaten oder Kundendaten vorher klären, ob das nach DSG und Vertrag zulässig ist. Der Health-Check speichert laut Dokumentation keine Geheimnisse, nur Datei, Zeile und einen maskierten Hinweis.
• Kein Audit: Der Health-Check ist eine Schnellprüfung. Für eine echte Sicherheitsprüfung braucht es mehr.
• Kosten: Kein Lizenzpreis. Der Aufwand liegt in den Tokens für Gliederung und Beschreibungen; gemessen haben wir ihn nicht.

Für wen lohnt sich Floorplan?

Für Gründerinnen, Produktverantwortliche und Entwickler, die eine mit KI gebaute AppEine App, kurz für Applikation oder Anwendung, ist ein Programm, das eine bestimmte Aufgabe für seine Nutzenden erledigt. Im Alltag meint man damit meist eine…Mehr erfahren → verstehen, übergeben oder umbauen wollen, besonders bei Projekten mit getrenntem Frontend und BackendDas Frontend ist der Teil einer Website oder App, den Nutzer sehen und bedienen — Layout, Texte, Formulare, Animationen. Das Backend ist der Teil im…Mehr erfahren →. Wer eine bestehende Anwendung professionell weiterentwickeln lassen möchte, findet bei uns KI-gestützte Entwicklung und Web-App-Entwicklung.

Mehr Werkzeuge aus dieser Reihe: alle 20 GitHub-Trends vom November 2026.