Map · guide

Le plan de ton app vibecodée, dessiné par Claude

Floorplan lit tout ton code et redessine ton application en une seule carte, en mots simples. Les deux lignes pour l'installer, mes phrases dans l'ordre, les questions à poser à la carte, et ce que l'onglet Health voit (et ne voit pas).

Lecture 7 min Niveau débutant Mis à jour le 12 novembre 2026

i am rankMon outil Sois la marque que recommande. Mesure et améliore ta visibilité IA dans ChatGPT, Gemini et les autres moteurs de recherche. Et transforme leurs réponses en clients. 100 % gratuitAnalyser ma marque Sans carte. Ton premier score en 2 minutes.

Ce que fait Floorplan

Quand Claude te code une application, elle marche, mais tu ne sais plus quel fichier fait quoi. Tu touches un truc, et tu ne sais pas ce qui va casser derrière. Floorplan règle ça : Claude lit tout ton code et dessine une carte de ton application, que tu ouvres dans ton navigateur.

• Une carte à tous les niveaux de zoom. Tu pars de l'application entière, puis tu entres dans un morceau, un groupe de fichiers, un fichier.
• Des mots simples partout. Chaque case dit ce qu'elle fait, par exemple « encaisse les paiements », pas le nom technique du fichier.
• Une barre de questions. Tu demandes à la carte ce qui se passe si tu changes quelque chose, et elle te montre les morceaux concernés.
• L'onglet Health. Un contrôle des erreurs classiques que l'IA laisse dans une application, avec la correction prête à coller.
• Recent work. Après chaque modification, ce que Claude vient de changer s'allume en vert.

Avant de commencer

• Claude Code, dans l'application Claude (onglet Code) ou dans un terminal. Floorplan marche aussi dans Codex, avec la même carte.
• Node.js 18 ou plus. Tape node --version dans ton terminal pour vérifier.
• Le Claude Code du terminal, même si tu utilises l'application. C'est lui qui permet à la barre de questions de lire ton vrai code. Sans lui, la carte s'affiche, mais les questions passent par l'application Claude et ne s'appuient que sur la carte.
• Une application à toi, déjà codée. Un seul dossier, ou un dossier qui contient le site et le serveur côte à côte : Floorplan relie les deux.

L'installer en deux lignes

Dans ton terminal, l'une après l'autre :

claude plugin marketplace add haydenschmitty/floorplan

claude plugin install floorplan@floorplan

La première ajoute le dépôt comme source de plugins, la seconde installe Floorplan pour tous tes projets.

Mes phrases, dans l'ordre

Les phrases de la vidéo. Ouvre Claude Code dans le dossier de ton application, puis :

1. Demande la carte

   Précise « en français » pour que les noms et les descriptions sortent en français.

Fais-moi un floorplan de cette app, en français.

Claude liste d'abord tous les fichiers (quelques secondes), puis décide quels sont les grands morceaux de ton application et écrit un nom et une ligne de description pour chaque fichier. Compte quelques minutes pour une petite application, plus pour une grosse. Il te demandera peut-être l'autorisation de lancer les scripts de Floorplan (node …) : accepte. La carte s'ouvre toute seule, avec une visite guidée d'une minute.

1. Pose ta question sur la carte

   Dans la barre du bas, celle de la carte, pas dans Claude Code.

Si je touche à la connexion, qu'est-ce qui casse ?

Tu reçois une réponse en quelques phrases et une mini-carte avec seulement les morceaux concernés, numérotés dans l'ordre. Remplace « la connexion » par ce que tu t'apprêtes à modifier.

1. Ouvre l'onglet Health

   En haut de la carte. Le chiffre à côté, c'est le nombre de problèmes importants.

Lis la liste avant de corriger quoi que ce soit : le détail est plus bas.

1. Fais corriger, puis mets la carte à jour

   De retour dans Claude Code.

Corrige les problèmes importants du Health check, puis mets à jour le floorplan.

La mise à jour ne relit que ce qui a changé, donc elle est rapide. La carte ouverte dans ton navigateur se recharge toute seule, et tout ce que Claude a touché s'allume en vert dans Recent work, avec une note sur chaque case.

Te déplacer sur la carte

• Entrer dans une case : double-clic. Remonter : la flèche retour ou le fil d'Ariane en haut.
• Te déplacer : fais glisser le fond. Zoomer : la molette. Tout revoir d'un coup : la touche F.
• Chercher : la touche / puis un nom, un fichier ou une adresse.
• Voir le détail d'une case : un clic, le panneau de droite se remplit. Les colonnes « Used by » et « Uses » te disent qui s'en sert et de quoi elle dépend.
• Screens : choisis une page de ton application et vois tout ce qu'il y a derrière, du bouton jusqu'à la base de données.
• Flows : des parcours guidés (une inscription, un paiement), étape par étape.
• Sur téléphone : un doigt pour te déplacer, deux pour zoomer, un appui sur une case pour son détail.

Les questions à poser à la carte

Celles qui servent le plus, à adapter à ton application :

Que se passe-t-il quand quelqu'un passe commande ?

Où est-ce qu'on parle à Stripe ?

Si je change la table des utilisateurs, qu'est-ce qui casse ?

Quels fichiers gèrent la connexion ?

Un clic droit sur une case, puis « Ask about this », l'ajoute à ta question. Regarde aussi l'étiquette dans la barre : Claude Code veut dire que la réponse s'appuie sur ton vrai code ; Claude tout court, qu'elle ne s'appuie que sur la carte.

L'onglet Health

Health cherche les erreurs classiques d'une application codée avec l'IA :

• un mot de passe ou une clé écrits dans le code, ou dans un fichier .env envoyé sur GitHub ;
• une clé secrète envoyée au navigateur de tes visiteurs (une variable qui commence par NEXT_PUBLIC_ ou VITE_) ;
• des tables Supabase que n'importe qui peut lire, des règles Firebase restées ouvertes ;
• un paiement Stripe que n'importe qui pourrait simuler, faute de vérifier la signature ;
• des adresses de ton serveur qui lisent ou modifient des données sans connexion ;
• des fichiers que plus rien n'utilise, et des fichiers de plus de 1 000 lignes environ, que l'IA modifie mal.

Chaque problème a deux boutons : Show on map, qui te montre où il est, et Fix with Claude, qui copie une demande toute prête avec les fichiers, les lignes et la bonne correction. Tu la colles dans Claude Code.

Si un signalement est faux (une page publique exprès, par exemple), clique sur Not a problem : il sort du compteur et ne revient pas à la mise à jour suivante.

Ce que Health ne voit pas

• Il ne lit pas un fichier .env ignoré par git. C'est normal, c'est là que tes clés doivent être. Mais il ne te dira donc pas si ce fichier contient quelque chose de mal rangé.
• Il ne juge pas la connexion partout. Sur les routes déclarées dans un tableau et sur Django, il ne peut pas lire le contrôle d'accès : pas de signalement ne veut pas dire que ces adresses sont protégées.
• Il ne reconnaît que le chiffrement qui s'annonce. Une valeur chiffrée par un outil qu'il ne connaît pas peut être signalée à tort.
• Il ne montre jamais la valeur d'un secret, seulement l'endroit où il est. Tu peux donc ouvrir l'onglet sans risque, mais ne le partage pas : il liste tes points faibles.

Avant de mettre en ligne une application qui encaisse de l'argent ou garde des données de clients, fais un vrai contrôle de sécurité en plus.

Ce que ça ajoute à ton projet

• Un dossier floorplan/, qui contient la carte. Il s'ignore lui-même dans git : rien n'est envoyé sur GitHub, et ton .gitignore n'est pas modifié.
• Une courte section dans CLAUDE.local.md, seulement si tu dis oui, pour que tes prochaines sessions sachent que la carte existe et s'en servent.
• Rien d'autre. Floorplan ne modifie jamais ton code.
• Tout tourne sur ton ordinateur. La carte est un fichier local, son petit serveur n'accepte que ta machine, et il s'arrête seul deux heures après la fermeture du dernier onglet. Ton code ne part que là où il part déjà quand tu utilises Claude Code.

Un nom ne te parle pas ? Demande : « Renomme "Main server" en "API boutique" sur le floorplan. » Tes changements sont gardés à chaque mise à jour.

Si ça coince

• Claude ne connaît pas Floorplan. Ouvre une nouvelle session, puis vérifie avec claude plugin list.
• La barre de questions réclame le Claude Code du terminal. Installe-le, connecte-toi, puis demande « Mets à jour le floorplan ».
• Tu as fermé l'onglet. Dans le dossier de ton application : node floorplan/serve.mjs, puis ouvre l'adresse qu'il affiche.
• Claude redemande sans cesse l'autorisation de lancer node. Choisis « toujours autoriser pour ce projet ».
• La carte a l'air en retard. « Mets à jour le floorplan. »
• Il manque un lien entre deux morceaux. Demande à Claude de l'ajouter au floorplan : il le garde à chaque mise à jour.

Pour récupérer la dernière version du plugin :

claude plugin update floorplan@floorplan

L'astuce : envoyer la carte à quelqu'un

Le bouton Export enregistre la carte dans un seul fichier, qui s'ouvre dans n'importe quel navigateur, sans rien installer. Pratique pour un associé, un client ou un développeur à qui tu passes la main. Le fichier montre comment l'application est construite, pas ton code.

Et si tu n'as encore rien codé, donne ton cahier des charges à Claude et demande « Fais-moi un floorplan de ce qu'il faudrait construire » : tu obtiens un plan en pointillés de l'application à venir.