architecture-diagram
Architekturdiagramme generieren
Das Erstellen technischer Architekturdiagramme von Hand erfordert erhebliche Zeit und Designfähigkeiten. Diese Skill bietet gebrauchsfertige HTML-Vorlagen mit einem konsistenten dunklen Design, semantischen Farben und SVG-Grafiken, die in jedem Browser korrekt dargestellt werden.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "architecture-diagram". Create an architecture diagram for a web application with React frontend, Express API, PostgreSQL database, and Redis cache behind a load balancer.
النتيجة المتوقعة:
- Self-contained HTML-Datei mit dunklem Architekturdiagramm
- Frontend Komponente in Cyan mit React Label
- Load Balancer und Backend Komponenten in passenden Farben
- Database und Cache Komponenten mit PostgreSQL und Redis Labels
- Verbindungspfeile die HTTPS und Database-Kommunikationsflows zeigen
- Summary Cards die wichtige Systemkomponenten beschreiben
التدقيق الأمني
آمنThis skill is a pure documentation and template-based skill with no executable code, no file system access, no network calls for data exfiltration, and no command execution capabilities. All 72 static findings are false positives. The scanner misidentified markdown code fences as shell execution, HTML structure comments as reconnaissance, placeholder text as cryptographic algorithms, and CDN links as malicious URLs.
عوامل الخطر
🌐 الوصول إلى الشبكة (3)
⚙️ الأوامر الخارجية (45)
درجة الجودة
ماذا يمكنك بناءه
Systemdesigns dokumentieren
Professionelle Diagramme für Systemdesign-Dokumente, Architektur-Review-Präsentationen und technische Spezifikationen erstellen
Infrastruktur abbilden
Cloud-Infrastruktur, Netzwerktopologie und Deployment-Architekturen für AWS, Azure oder GCP Umgebungen visualisieren
Security-Diagramme entwerfen
Security-Grenzen, Auth-Flows und Compliance-Architekturen mit security-spezifischen visuellen Elementen dokumentieren
جرّب هذه الموجهات
Create an architecture diagram for a three-tier web application with a React frontend, Node.js API backend, and PostgreSQL database. Use the architecture-diagram skill with the dark theme template.
Generate an AWS architecture diagram showing CloudFront CDN, API Gateway, Lambda functions, DynamoDB, and S3 buckets in us-west-2 region. Include security groups and IAM roles.
Create a microservices architecture diagram with multiple backend services communicating via Kafka message bus. Include auth service, user service, payment service, and notification service.
Generate a security architecture diagram showing zero-trust model with identity provider, mutual TLS between services, encryption at rest, and security group boundaries. Use rose color for security elements.
أفضل الممارسات
- Zusammengehörige Komponenten innerhalb von Security Groups oder Regionsgrenzen für visuelle Klarheit gruppieren
- Konsistente Farbkodierung über alle Diagramme hinweg für dieselben Komponententypen verwenden
- Legenden außerhalb von Boundary-Boxen platzieren und viewBox Höhe erweitern um sie aufzunehmen
تجنب
- Sich überlappende Komponenten-Boxen ohne ausreichenden vertikalen Abstand dazwischen
- Legenden innerhalb von Regions- oder Clustergrenzen platzieren wo sie verdeckt werden
- Verbindungspfeile nach Komponenten-Boxen zeichnen, was dazu führt dass Pfeile über Fills erscheinen
الأسئلة المتكررة
Welche KI-Tools unterstützen diese Skill?
Welche Dateiformate unterstützt die Ausgabe?
Kann ich die Diagramme offline verwenden?
Sind meine Daten sicher bei der Verwendung dieser Skill?
Warum sehen meine Diagramme anders aus?
Wie unterscheidet sich dies von Mermaid oder PlantUML?
تفاصيل المطور
المؤلف
Cocoon-AIالترخيص
MIT
المستودع
https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram/مرجع
main
بنية الملفات