Interactive Architecture Diagrams

Construit un diagramme d'architecture HTML interactif et animé en un seul fichier, plus un fichier .md compagnon.

par konraddzbik · konraddzbik/architecture-diagram-skill

Testé · Fonctionne ★ 8.8/10

Interactive Architecture Diagrams — Construit un diagramme d'architecture HTML interactif et animé en un seul fichier, plus un fichier .md compagnon.

Ce que fait

Génère un diagramme HTML interactif autonome — onglets de flux, paquets de données SVG animés, un panneau latéral avec des charges utiles par étape, des bascules de mode (dev/prod, offline/online), des nœuds glisser-déposer, thème sombre/clair — plus un fichier architecture.md compagnon, à partir d'une description en langage clair des services et des flux d'un système. Se déclenche sur les demandes de visualisation d'une carte de services, d'un flux RAG/agentique, d'un pipeline CI/CD ou d'une topologie de microservices pour un atelier ou une revue de conception ; exclut explicitement les diagrammes Mermaid statiques, les diapositives ou les PDF.

Rapport de test

J'ai construit un vrai diagramme de connexion OAuth2 à 3 nœuds à partir du modèle fourni et l'ai servi localement : la navigation par étapes, le panneau latéral de charge utile et la bascule de mode dev/prod ont tous fonctionné en direct dans le navigateur sans aucune erreur de console — véritablement plus capable que tout ce que j'aurais produit sans guide. La documentation lui a coûté des points : la commande 'Claude Code — manual clone' du README clone la racine du dépôt directement dans le dossier skills, ce qui enfouit SKILL.md deux répertoires trop profondément et casserait silencieusement l'installation si elle était suivie littéralement.

Testé le: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/konraddzbik/architecture-diagram-skill
cd architecture-diagram-skill
mkdir -p ~/.claude/skills
cp -r skills/architecture-diagram ~/.claude/skills/architecture-diagram

Commandes et exemples de prompts

/architecture-diagramConstruit un diagramme d'architecture HTML interactif et animé en un seul fichier, plus un fichier .md compagnon.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

Build a clickable diagram showing browser to auth gateway flow
Make an animated architecture diagram for our OAuth login
Create a step-through HTML diagram of our system's request path

Rapport complet →