archify : la carte cliquable du code que Claude t'a écrit

Ce que c'est et pourquoi ça compte

Claude t'a écrit un projet entier. Il marche, mais trois semaines plus tard tu ne sais plus ce qui touche quoi : quel fichier parle à la base de données, ce que tu risques si tu changes cette fonction.

archify est une skill, c'est-à-dire un paquet d'instructions et de scripts que Claude utilise quand il en a besoin. Tu demandes la carte en une phrase : Claude lit les fichiers du projet et archify dessine un fichier HTML, avec les parties principales en cadres et les liens en flèches. Avant de le livrer, il vérifie que flèches et étiquettes tiennent ; si une vérification échoue, Claude corrige.

C'est gratuit et open source (licence Apache 2.0), avec plus de 90 000 étoiles sur GitHub fin octobre. C'est pour ceux qui construisent seuls avec Claude Code et veulent comprendre leur projet ou l'expliquer à un client. Ça marche aussi avec Codex, Cursor et OpenCode.

1. L'installer dans Claude Code

Il te faut Claude Code avec Node.js sur ton ordinateur. Sur claude.ai, dans le navigateur, ça dépend de l'accès à Node.js de la sandbox : c'est pensé pour Claude Code. Dans le dossier du projet, colle la phrase officielle :

Install Archify for me by reading https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt

Claude lit les instructions, te dit ce qu'il va lancer et te demande si tu le veux dans tous les projets (global) ou seulement dans celui-ci. Puis il installe et lance la vérification doctor : archify n'est prêt que si elle passe.

Depuis le terminal, c'est une seule ligne. --copy copie les fichiers au lieu de les lier, --yes saute les questions ; sans --global, ça ne vaut que dans le dossier où tu la lances :

npx -y skills@latest add https://archify.si --skill archify --agent claude-code --global --copy --yes

Puis la vérification, avec le chemin que l'installateur affiche à la fin (pour Claude Code, en général ~/.claude/skills/archify) :

node ~/.claude/skills/archify/bin/archify.mjs doctor

2. La carte de ton projet

Dans le dossier du projet, copie cette demande. C'est l'officielle, traduite :

Analyse ce dépôt, puis utilise archify pour créer un diagramme de haut niveau de l'architecture à l'exécution. Montre de 8 à 12 composants principaux, un chemin principal, les dépendances externes et les frontières de confiance. Mets les détails dans des fiches au lieu d'ajouter des flèches.

Les dépendances externes sont les services qui ne sont pas à toi : base de données dans le cloud, paiements, e-mails. Les frontières de confiance sont les endroits où les données passent à une partie que tu ne contrôles pas, comme du navigateur à ton serveur. Et 8 à 12 parties, c'est tout l'intérêt : 40 cadres, personne ne les lit.

Claude suit qui appelle qui, du point d'entrée du projet jusqu'à l'endroit où les données entrent, sortent ou sont enregistrées. À la fin, il te donne le lien vers le fichier, enregistré aussi dans le dossier .archify du projet.

Si le projet est public sur GitHub, ajoute « relie chaque composant aux fichiers et aux lignes qui le prouvent » : les cadres prennent la marque SRC et ouvrent le code d'où ils viennent. Fais d'abord le commit : archify cite le dernier commit, pas tes modifications en cours.

3. Sans code : pars d'une idée

Pas besoin de dépôt : une idée, un plan, un processus suffisent. Claude a seulement besoin d'un dossier quelconque où écrire le fichier.

Utilise archify pour transformer cette description en diagramme d'architecture de haut niveau : [qui utilise le produit, les parties principales, le chemin principal, les services externes]. Il n'y a pas de dépôt. Demande-moi seulement les faits qui changent vraiment le diagramme, marque comme inconnu ce que tu ne sais pas et garde un chemin principal clair.

Pour l'essayer en dix secondes : « Utilise archify pour dessiner : Browser -> API -> cache Redis -> PostgreSQL si le cache n'a pas la donnée ». Ensuite tu continues, une modification par message :

• « Ajoute l'authentification. »
• « Mets en évidence le chemin quand le cache n'a pas la donnée. »
• « Déplace l'authentification à gauche. »
• « Passe au thème clair. »

4. Une seule page pour ceux qui ne codent pas

Parfois la question est « comment ça marche ». archify fait aussi une seule page : d'abord la réponse, puis un panneau par question. Les étapes sont à côté du diagramme et, pendant que tu lis, allument les parties dont elles parlent.

Utilise archify pour répondre avec une seule page, à envoyer à un client qui ne code pas : comment fonctionne [le paiement] dans mon app, du clic de l'utilisateur jusqu'au [reçu] ? D'abord la conclusion, puis les étapes à côté du diagramme du chemin. Des mots simples, pas de jargon.

C'est aussi un fichier HTML : il s'exporte en image longue ou s'imprime en PDF.

5. Les touches pour explorer la carte

Ouvre le fichier dans le navigateur de ton ordinateur. À partir de là, archify ne sert plus : tout est dans le fichier.

• Clic sur une partie : les parties reliées s'allument et sa fiche s'ouvre, avec ce qui entre et ce qui sort. Échap la ferme.
• Upstream et Downstream, dans la fiche : tout ce qui mène à cette partie, ou tout ce qui en part, étape après étape.
• R : le chemin. Tu cliques sur le départ et l'arrivée, archify montre le chemin le plus court le long des flèches et tu peux le faire défiler.
• / : cherche une partie par son nom. ? : le guide de la carte, avec les actions que ce fichier permet.
• E : exporter. T : thème clair ou sombre. S : changer de style. F : présentation, la carte prend toute la fenêtre, pratique en visio.
• + et - pour zoomer, 0 pour revenir à la vue de départ. Live anime les flèches, Still les arrête.

Les flèches sont celles que Claude a écrites dans la carte : Upstream et Downstream suivent celles-là, pas le programme qui tourne. Elles te disent où regarder, pas l'impact d'une modification : le code, tu le relis toi-même.

6. Envoie-la à un client

La carte est un seul fichier. Tu l'envoies par e-mail ou en message, celui qui la reçoit l'ouvre dans le navigateur et a tout, sans rien installer. Seuls les liens externes, comme ceux vers le code sur GitHub, demandent une connexion.

Pour une image à mettre dans une slide, appuie sur E :

• La carte entière en PNG dans le presse-papiers, ou à télécharger en PNG, JPEG, WebP, SVG et en vidéo WebM animée.
• Route Share Card : après avoir tracé un chemin avec R, une image 1200×630 avec ce chemin mis en évidence et le reste de la carte autour.
• Reach Share Card : la même chose, après Upstream ou Downstream.

Les images ne sont pas cliquables : si le client doit explorer, envoie-lui le HTML. Et relis d'abord étiquettes et fiches : elles peuvent contenir des détails de ton code que tu ne veux pas montrer.

Les erreurs les plus courantes

• Demander « dessine tout le projet » : on obtient une carte illisible. Demande 8 à 12 parties et un chemin, ou une fonctionnalité à la fois.
• Prendre les flèches pour la vérité : les vérifications d'archify disent que le dessin est bien fait, pas que le programme se comporte ainsi.
• Ouvrir la carte sur le téléphone : elle n'est pas pensée pour les petits écrans. Utilise l'ordinateur.
• Chercher un lien pour la partager en ligne : archify n'héberge pas les cartes. Tu envoies le fichier ou une image.

Check-list

• J'ai installé archify et la vérification doctor est passée
• J'ai demandé la carte de mon projet avec 8 à 12 parties et un chemin
• J'ai cliqué sur une partie et essayé Upstream et Downstream
• J'ai tracé un chemin avec R et exporté sa Share Card
• J'ai envoyé le fichier HTML à quelqu'un et il l'a ouvert sans rien installer

Questions fréquentes