Cet outil open source permet à Claude de créer des diagrammes d'architecture
BBetter Stack
Computing/Software
Transcript
00:00:00Demandez à nos agents de code de cartographier un dépôt, et nous voilà avec Kafka, Redis ou une passerelle API qui n'existe même pas.
00:00:07Les diagrammes ont souvent l'air corrects, mais il y manque beaucoup de choses.
00:00:10Voici Archify, où l'agent ne dessine absolument rien.
00:00:14Il produit un graphe typé, Archify le valide, puis génère le diagramme.
00:00:19C'est peut-être l'une des meilleures façons de visualiser notre architecture.
00:00:23Nous allons le découvrir.
00:00:30En fait, notre modèle ne devrait probablement pas du tout dessiner le diagramme.
00:00:33Le principe d'Archify est de décrire le système sous forme de JSON structuré et typé.
00:00:37Celui-ci est validé, et ce n'est qu'ensuite qu'un compilateur local le convertit en HTML final.
00:00:42Si le graphe est invalide, l'opération échoue.
00:00:45C'est Archify, et il a récolté 44 000 étoiles en quelques mois seulement car il s'intègre directement à Cloud Code, Cursor et Codex.
00:00:53Je veux donc le mettre à l'épreuve.
00:00:54Je vais installer Archify, le pointer vers un dépôt et lui faire répondre à une question d'architecture.
00:01:00Ensuite, nous verrons si nous pouvons réellement utiliser ce résultat dans une PR.
00:01:03Et il y a quelques cas d'usage où je ne l'utiliserais absolument pas, mais nous y reviendrons bientôt.
00:01:08Si vous aimez les outils de code qui accélèrent votre flux de travail, pensez à vous abonner.
00:01:11Nous publions des vidéos en continu.
00:01:13Bien, l'installation se résume à une seule commande juste ici.
00:01:17Et il ne s'agit pas d'une application à configurer.
00:01:19C'est en fait une compétence d'agent.
00:01:22Une fois installé, je peux utiliser cette même compétence depuis Cloud Code ou l'un des autres outils mentionnés
00:01:28sans avoir à changer d'éditeur ni même de flux de travail.
00:01:32Je peux maintenant lui confier une vraie tâche.
00:01:34Je ne vais pas lui demander de dessiner l'architecture de ce dépôt.
00:01:37Ça a l'air bien en soi.
00:01:39Mais au final, cela va simplement nous renvoyer un tas d'informations superflues.
00:01:42Je vais donc poser une seule question précise.
00:01:45Utilise Archify, diagramme d'architecture de 8 à 12 nœuds maximum.
00:01:49Que se passe-t-il lors d'un échec de cache dans ce service ?
00:01:52N'incluez que les blocs qui existent dans ce dépôt.
00:01:54Si vous ne pouvez pas prouver un composant, omettez-le.
00:01:58Fournissez un HTML autonome.
00:02:00C'est un plan, une question.
00:02:02Environ 8 à 12 nœuds.
00:02:04Car si nous demandons à un agent de cartographier l'ensemble de notre code source, avons-nous vraiment simplifié les choses
00:02:08ou simplement rendu la lecture plus difficile ?
00:02:10J'ai maintenant transformé l'arborescence de mon dépôt en organigramme.
00:02:14L'agent écrit l'architecture au format JSON.
00:02:16Ensuite, Archify valide le tout.
00:02:18Je peux aussi exécuter cette validation directement, comme je m'apprête à le faire.
00:02:23C'est vraiment une fonctionnalité très cool que j'ai découverte ici.
00:02:27Les nœuds peuvent également inclure des preuves issues du dépôt, liées à un commit et à une plage de lignes spécifique.
00:02:32Si cette preuve n'est pas présente, le nœud ne reçoit pas de badge SRC simplement parce qu'il
00:02:37a l'air convaincant dans la réponse.
00:02:39Très bien.
00:02:39En quoi est-ce vraiment utile ?
00:02:41Cela ressemble à un diagramme d'architecture.
00:02:43Certes, mais vous n'êtes pas obligé de l'utiliser comme tel.
00:02:46Je peux y rechercher un service en particulier.
00:02:50Je peux cliquer dessus et voir immédiatement ce qui se trouve en amont et en aval.
00:02:55Je peux ensuite parcourir cet itinéraire et suivre le chemin d'échec du cache dans le système.
00:02:59Ainsi, au lieu de fixer 10 flèches en essayant mentalement de les remonter, je peux désormais
00:03:05les suivre.
00:03:06En plus de cela, je peux l'exporter.
00:03:08Je peux copier une image PNG ou générer une carte de partage de 1200 par 36.
00:03:13La vraie différence ici, c'est Mermaid, n'est-ce pas ?
00:03:17L'outil Mermaid est normalement quelque chose que l'on lit.
00:03:20Ici, c'est quelque chose que l'on peut interroger et confronter.
00:03:23Et le mouvement ne sert pas à masquer une mauvaise structure : exportez le diagramme sous forme
00:03:28d'image statique, le sens reste intact pour survivre.
00:03:31Et il y a un deuxième cas d'usage qui pourrait s'avérer encore plus utile.
00:03:35À quoi pensons-nous ?
00:03:36Eh bien, je pense à la revue de code.
00:03:38Imaginons que ce soit le système avant une modification.
00:03:41J'ajoute ensuite un worker de réessai existant.
00:03:44Je peux dire à l'agent de mettre à jour l'architecture sans inventer des choses de nulle part.
00:03:49Archify peut ensuite comparer les deux instantanés validés : ajouts, suppressions, déplacements, réacheminements.
00:03:54Ainsi, au lieu d'obtenir deux diagrammes générés, je peux voir ce qui a réellement changé.
00:03:59Et l'éditeur reste simplement un chat.
00:04:02Mais si je veux que cette architecture perdure lors de la prochaine session d'agent, je commite le JSON.
00:04:07À ce stade, la façon la plus simple de comprendre Archify est la suivante.
00:04:11Pour la machine virtuelle HTML des cartes système, l'agent de code est l'interface utilisateur.
00:04:15Le JSON est la représentation intermédiaire.
00:04:19Le HTML est le résultat compilé.
00:04:21Et cette couche intermédiaire accomplit une grande partie du travail.
00:04:24Le JSON suit des schémas stricts.
00:04:26Les champs inconnus peuvent faire échouer la validation.
00:04:28Et il existe cinq modes de diagramme.
00:04:30Architecture, flux de travail, séquence, flux de données et cycle de vie.
00:04:34Mais l'une des décisions les plus intéressantes concerne ce que le modèle ne contrôle pas.
00:04:38La mise en page.
00:04:39Le modèle décrit le système.
00:04:41Il ne décide pas exactement de l'emplacement de chaque boîte.
00:04:44Ils ont effectivement essayé Mermaid thématique avec une disposition automatique.
00:04:48Ce n'était pas mieux que le Mermaid standard.
00:04:51De plus, la validation fonctionne de manière fermée.
00:04:54Un mauvais JSON ne se transforme en aucun cas en un joli diagramme.
00:04:58Vous obtenez des diagnostics, des codes de règles et des suggestions de correction.
00:05:02Maintenant, parmi tout cela, voici peut-être là où je n'utiliserais pas Archify.
00:05:06Si vous avez besoin d'un diagramme directement dans votre fichier Readme, peut-être pas.
00:05:10Cela pourrait prendre du temps.
00:05:11GitHub le rend.
00:05:12Le HTML d'Archify, non.
00:05:15Archify résout un type de problème bien différent ici.
00:05:18Il y a déjà un agent dans la boucle.
00:05:20Cet agent produit un artéfact d'architecture.
00:05:23Peut-être que cela va dans une PR.
00:05:25Peut-être que cela va dans une revue de conception.
00:05:27C'est là que les sorties vérifiées commencent à compter.
00:05:30Dans l'ensemble, il y a beaucoup de choses que j'ai aimées ici.
00:05:32Cela s'intègre dans des outils que nous utilisons déjà chaque jour.
00:05:35Je peux exporter le résultat.
00:05:38Les preuves issues du dépôt me donnent du concret à vérifier.
00:05:41Et comme l'architecture est structurée, je peux continuer à l'éditer sans que les choses ne changent de manière imprévisible.
00:05:46Le rendu est également assez soigné pour que je n'aie probablement pas besoin de le refaire dans Figma ou un autre outil.
00:05:53Mais cela dit, en même temps, Archify ne connaît pas votre architecture.
00:05:58Un graphe peut être tout à fait valide tout en décrivant le mauvais système.
00:06:02Vous devez quand même le lire.
00:06:03Un mauvais modèle, comme nous le savons, créera souvent un JSON fonctionnel mais au rendu médiocre.
00:06:08Et si la destination finale de votre diagramme est un fichier Readme, Mermaid reste peut-être préférable.
00:06:13Avec Archify, vous commitez probablement le JSON et le HTML ou vous exportez une image.
00:06:18Et il y a une erreur qu'il faut absolument éviter ici.
00:06:21Ne le pointez pas vers un énorme dépôt en disant de tout cartographier.
00:06:25Je pense que vous devinez le résultat, car vous obtiendrez probablement un tas de données inutilisables.
00:06:29Mais ce n'est pas vraiment un échec de la part d'Archify.
00:06:32C'est plutôt une mauvaise question.
00:06:34Si vous travaillez déjà avec des agents de code et créez régulièrement des diagrammes que vous ou d'autres consulterez, cela a du sens.
00:06:42Revues de PR, documents de conception, j'utiliserais probablement cet outil.
00:06:47Je ne l'installerais pas juste pour avoir une version plus jolie de quelque chose qui existe déjà, comme Mermaid.
00:06:52Et je n'attendrais certainement pas de lui qu'il fasse de la rétro-ingénierie pour moi.
00:06:55L'obstacle pour l'essayer est vraiment minime.
00:06:58Une commande NPX, Node sur la machine.
00:07:00Il n'y a pas de poids de modèle ici.
00:07:02Mon M4 Pro n'a pratiquement aucune importance là-dedans.
00:07:05Mais il y a une règle à garder à l'esprit.
00:07:07Une question par fichier.
00:07:08Si vous ne pouvez pas dire clairement à quelle question le diagramme répond, ne le générez pas.
00:07:14Je suis Josh de BetterStack.
00:07:15Si vous aimez ce genre d'astuces de code, n'hésitez pas à vous abonner à la chaîne.
00:07:19On se retrouve dans une autre vidéo.
00:07:20On se retrouve dans une autre vidéo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video