Skills architecture-diagram
📦

architecture-diagram

Niedriges Risiko 🌐 Netzwerkzugriff

Architekturdiagramme erstellen

Technische Teams benötigen klare Diagramme, die Systeme, Grenzen und Datenflüsse zeigen. Dieser Skill hilft Claude, Codex und Claude Code dabei, eigenständige HTML-Diagramme mit Inline-SVG und konsistentem Styling zu erstellen.

Unterstützt: Claude Codex Code(CC)
📊 73 Angemessen
1

Skill-ZIP herunterladen

2

In Claude hochladen

Öffnen Sie Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/cocoon-ai-architecture-diagram.md Signiertes manifest GET /api/skills/cocoon-ai-architecture-diagram/manifest Signiertes lockfile GET /api/skills/cocoon-ai-architecture-diagram/lockfile

Testen

„architecture-diagram“ wird verwendet. Ein Startup benötigt ein Diagramm für eine React-App, einen API-Server, eine PostgreSQL-Datenbank und Auth0-Login.

Erwartetes Ergebnis:

Ein eigenständiges dunkles HTML-Diagramm mit beschrifteten Frontend-, Backend-, Datenbank- und Auth-Komponenten sowie Pfeilen, die HTTPS- und Token-Validierungsflüsse zeigen.

„architecture-diagram“ wird verwendet. Ein Plattformteam möchte eine AWS-Bereitstellung mit CloudFront, S3, Load Balancing, Services und RDS erklären.

Erwartetes Ergebnis:

Eine statische HTML- und SVG-Architekturansicht mit einer AWS-Regionsgrenze, Cloud-Service-Boxen, Backend-Services, Datenbank, Legende und Zusammenfassungskarten.

„architecture-diagram“ wird verwendet. Ein Sicherheitsteam benötigt ein Review-Diagramm für geschützte APIs, private Datenbanken und Authentifizierungsflüsse.

Erwartetes Ergebnis:

Ein sicherheitsorientiertes Diagramm, das gestrichelte Grenzen, rosafarbene Auth-Pfade, beschriftete Ports und prägnante Notizen für Review-Meetings verwendet.

Sicherheitsaudit

Niedriges Risiko
v6 • 6/28/2026

Static analysis reported network access, command execution, weak cryptography, and reconnaissance patterns. Review found the command execution, weak cryptography, and reconnaissance alerts are false positives from markdown backticks, CSS/SVG examples, and placeholder text; the only confirmed issue is a Google Fonts dependency in the template.

2
Gescannte Dateien
484
Analysierte Zeilen
5
befunde
6
Audits gesamt
Probleme mit niedrigem Risiko (4)
assets/template.html:7SKILL.md:34
External Font Dependency in Generated HTML
The template and instructions load JetBrains Mono from Google Fonts. This is a real external network dependency that can disclose browser requests to a third-party font service, but it does not execute scripts or transmit skill data by itself.
SKILL.md:22-28SKILL.md:33-35SKILL.md:41-77SKILL.md:88-150
False Positive: Markdown Backticks Misread as Command Execution
The reported Ruby or shell backtick execution locations are markdown inline code and fenced HTML or SVG examples. No evidence found of executable Ruby, shell scripts, subprocess calls, or user-controlled command execution.
SKILL.md:3SKILL.md:14assets/template.html:142
False Positive: Weak Cryptography Pattern
The weak cryptography alerts do not correspond to a cryptographic implementation. The referenced lines are description text, section headings, or HTML placeholder text, with no hash, cipher, or password handling code.
assets/template.html:67assets/template.html:88assets/template.html:158SKILL.md:41SKILL.md:81SKILL.md:119
False Positive: System Reconnaissance Pattern
The reconnaissance alerts point to layout guidance, CSS classes, and SVG background or container examples. No evidence found of hostname, user, process, network, or environment enumeration.

Risikofaktoren

🌐 Netzwerkzugriff (2)
assets/template.html:7 SKILL.md:34
Geprüft von: codex Audit-Verlauf anzeigen →

Qualitätsbewertung

36
Architektur
100
Wartbarkeit
87
Inhalt
72
Community
82
Sicherheit
83
Spezifikationskonformität

Was Sie erstellen können

Eine Produktarchitektur dokumentieren

Erstelle ein prägnantes Diagramm für Services, Speicher, Clients und Integrationspunkte in einem Produktdesigndokument.

Cloud-Infrastruktur erklären

Zeige Cloud-Regionen, Service-Grenzen, Load Balancer, Datenbanken und Netzwerkpfade für die Bereitstellungsplanung.

Sicherheitsgrenzen prüfen

Bilde Authentifizierungsflüsse, Sicherheitsgruppen, geschützte Ressourcen und Vertrauensgrenzen vor einer Implementierungsprüfung ab.

Diese Prompts ausprobieren

Einfaches Service-Diagramm 
Erstelle ein eigenständiges HTML-Architekturdiagramm für eine Web-App mit Nutzern, einem React-Frontend, einem API-Service und PostgreSQL. Verwende den Stil des architecture-diagram-Skills.
Cloud-Bereitstellungsdiagramm 
Erstelle ein dunkel gestaltetes HTML- und SVG-Diagramm für eine AWS-Bereitstellung mit CloudFront, S3, einem Application Load Balancer, zwei Backend-Services, RDS und einem externen Auth-Anbieter.
Sicherheitsflussdiagramm 
Erstelle ein Architekturdiagramm, das OAuth-Login, JWT-Validierung, privaten Service-Traffic, Datenbankzugriff und Sicherheitsgruppengrenzen hervorhebt. Füge eine Legende und drei Zusammenfassungskarten hinzu.
Produktionssystemdiagramm 
Generiere ein eigenständiges HTML-Architekturdiagramm für eine Multi-Region-SaaS-Plattform. Füge Clients, CDN, API-Ebene, Event-Bus, Worker, Speicher, Monitoring, Vertrauensgrenzen und beschriftete Datenflüsse hinzu.

Best Practices

  • Stelle die Komponentenliste, die Bereitstellungsumgebung und die wichtigsten Datenflüsse bereit, bevor du nach dem Diagramm fragst.
  • Frage nach Vertrauensgrenzen, Protokollen und Ports, wenn das Diagramm eine Sicherheitsprüfung unterstützen soll.
  • Prüfe die generierten Beschriftungen und Positionen, bevor du das HTML mit Stakeholdern teilst.

Vermeiden

  • Verwende den Skill nicht als maßgebliche Quelle für ein Infrastrukturinventar.
  • Nimm keine Geheimnisse, privaten Schlüssel, Token oder Kundendaten in Diagrammbeschriftungen auf.
  • Veröffentliche die standardmäßige Google Fonts-Abhängigkeit in eingeschränkten Umgebungen nicht ohne Genehmigung.

Häufig gestellte Fragen

Was erstellt dieser Skill?
Er erstellt eigenständige HTML-Architekturdiagramme mit eingebettetem CSS und Inline-SVG-Grafiken.
Benötigt er JavaScript?
Nein. Die dokumentierte Ausgabe verwendet statisches HTML, CSS-Animationen und Inline-SVG.
Kann er Cloud-Architekturdiagramme generieren?
Ja. Er enthält visuelle Muster für Cloud-Services, Regionen, Datenbanken, Sicherheitsgruppen und Service-Flüsse.
Kann er mein Cloud-Konto automatisch inspizieren?
Nein. Nutzer müssen die Systemdetails, Services, Grenzen und Beziehungen bereitstellen, die enthalten sein sollen.
Ist die Ausgabe eigenständig?
Größtenteils. Die Vorlage bettet CSS und SVG ein, verweist jedoch auf Google Fonts, sofern dieser Link nicht entfernt wird.
Welche Tools können diesen Skill verwenden?
Der Bericht nennt Unterstützung für Claude, Codex und Claude Code.

Entwicklerdetails

Autor

Cocoon-AI

Lizenz

MIT

Repository

https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram/

Ref.

main

Dateistruktur

📁 assets/

📄 template.html

📄 SKILL.md