SkillProof tested Claude skills

Interactive Architecture Diagrams

Erstellt ein klickbares, animiertes Ein-Datei-HTML-Architekturdiagramm plus eine begleitende .md.

von konraddzbik · konraddzbik/architecture-diagram-skill

Getestet · Funktioniert ★ 8.8/10

Interactive Architecture Diagrams — Erstellt ein klickbares, animiertes Ein-Datei-HTML-Architekturdiagramm plus eine begleitende .md.

Was es kann

Generiert ein self-contained interactive HTML diagram – flow tabs, animated SVG data packets, ein side panel mit per-step payloads, mode toggles (dev/prod, offline/online), drag-and-drop nodes, dark/light theme – plus eine companion architecture.md, aus einer plain-language description der services und flows eines Systems. Triggert bei Anfragen zur Visualisierung einer service map, RAG/agentic flow, CI/CD pipeline oder microservices topology für einen workshop oder design review; lehnt explizit static Mermaid diagrams, slides oder PDFs ab.

Testbericht

Ich habe ein echtes 3-node OAuth2 login diagram aus dem shipped template erstellt und es lokal bereitgestellt: step navigation, das payload side panel und der dev/prod mode toggle funktionierten alle live in-browser mit zero console errors – wirklich leistungsfähiger als alles, was ich unguided produzieren würde. Docs kosteten Punkte: Der eigene 'Claude Code — manual clone' command des README klont den repo root direkt in den skills folder, was SKILL.md zwei Verzeichnisse zu tief vergräbt und die install stillschweigend unterbrechen würde, wenn wörtlich befolgt.

Getestet am: 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

Befehle & Beispiel-Prompts

  • /architecture-diagramErstellt ein klickbares, animiertes Ein-Datei-HTML-Architekturdiagramm plus eine begleitende .md.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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

Vollständiger Testbericht (Englisch) →