Interactive Architecture Diagrams
Tworzy interaktywny, klikalny, animowany jednoplkowy diagram architektury HTML plus towarzyszący mu .md.
Testowano · Działa
Co robi ten skill
Generuje samodzielny interaktywny diagram HTML — karty przepływu, animowane pakiety danych SVG, panel boczny z ładunkami na krok, przełączniki trybu (dev/prod, offline/online), węzły drag-and-drop, motyw ciemny/jasny — plus towarzyszący plik architecture.md, z opisu systemu usług i przepływów w języku naturalnym. Wyzwalane na żądania wizualizacji mapy usług, przepływu RAG/agentowego, potoku CI/CD lub topologii mikroserwisów na warsztaty lub przegląd projektu; wyraźnie wyklucza statyczne diagramy Mermaid, slajdy lub PDF.
Raport z testu
Zbudowano rzeczywisty 3-węzłowy diagram logowania OAuth2 z dostarczonego szablonu i udostępniono go lokalnie: nawigacja po krokach, panel boczny ładunków i przełącznik trybu dev/prod działały na żywo w przeglądarce bez błędów konsoli — faktycznie bardziej funkcjonalny niż cokolwiek, co stworzyłbym bez wskazówek. Koszt dokumentacji obniża punkty: własne polecenie README 'Claude Code — manual clone' klonuje główny katalog repozytorium bezpośrednio do folderu umiejętności, co grzebie SKILL.md dwa katalogi za głęboko i spowodowałoby ciche przerwanie instalacji, gdyby postępować dosłownie.
Testowano: 2026-07-14 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/architecture-diagramTworzy interaktywny, klikalny, animowany jednoplkowy diagram architektury HTML plus towarzyszący mu .md.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Build a clickable diagram showing browser to auth gateway flowMake an animated architecture diagram for our OAuth loginCreate a step-through HTML diagram of our system's request path