SkillProof tested Claude skills

Interactive Architecture Diagrams

Costruisce un diagramma di architettura HTML a file singolo, animato e navigabile, più un .md di accompagnamento.

di konraddzbik · konraddzbik/architecture-diagram-skill

Promosso ★ 8.8/10

Interactive Architecture Diagrams — Costruisce un diagramma di architettura HTML a file singolo, animato e navigabile, più un .md di accompagnamento.

Cosa fa

Genera un diagramma HTML interattivo autonomo — tab di flusso, pacchetti dati SVG animati, un pannello laterale con payload per ogni passaggio, toggle di modalità (dev/prod, offline/online), nodi drag-and-drop, tema scuro/chiaro — più un architecture.md di accompagnamento, da una descrizione in linguaggio semplice dei servizi e dei flussi di un sistema. Si attiva su richieste di visualizzare una mappa di servizi, un flusso RAG/agentico, una pipeline CI/CD o una topologia di microservizi per un workshop o una revisione di design; si esclude esplicitamente per diagrammi Mermaid statici, slide o PDF.

Rapporto di test

Ho costruito un vero diagramma di login OAuth2 a 3 nodi dal template fornito e l'ho servito localmente: la navigazione per passi, il pannello laterale dei payload e il toggle della modalità dev/prod hanno funzionato tutti live nel browser senza errori della console — genuinamente più capace di qualsiasi cosa avrei prodotto senza guida. La documentazione gli è costata punti: il comando 'Claude Code — manual clone' del README clona la radice del repository direttamente nella cartella skills, il che seppellisce SKILL.md due directory troppo in profondità e romperebbe silenziosamente l'installazione se seguito alla lettera.

Testato il: 2026-07-14 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

  • /architecture-diagramCostruisce un diagramma di architettura HTML a file singolo, animato e navigabile, più un .md di accompagnamento.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →