CommunityCodierung & Entwicklunggithub.com

markdown-viewer/cloud

Erstellen Sie Architekturdiagramme für Cloud-Anbieter mit PlantUML-Syntax und offiziellen Service-Icons von AWS, Azure, GCP und Alibaba Cloud. Ideal für Multi-Service-Cloud-Topologien und Migrationspläne.

Was ist cloud?

Diese Fähigkeit ermöglicht es Entwicklern und Architekten, detaillierte Cloud-Architekturdiagramme direkt in markdown-basierten KI-Agenten wie Claude Code, Cursor und anderen zu erstellen. Sie nutzt die PlantUML-Syntax und bietet Zugriff auf offizielle Service-Icons aller großen Cloud-Anbieter, einschließlich AWS, Azure, GCP und Alibaba Cloud. Damit können komplexe Multi-Cloud-Topologien, Migrationsszenarien und Systemarchitekturen visuell modelliert werden. Die Diagramme werden als Grafiken gerendert und in das Markdown-Dokument eingebettet, was die Kommunikation in technischen Spezifikationen und Präsentationen deutlich verbessert. Die Fähigkeit ist besonders nützlich für die Planung von Cloud-Migrationen, Architektur-Reviews und die Dokumentation verteilter Systeme.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/cloud

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht cloud?

Erstellen Sie Architekturdiagramme für Cloud-Anbieter mit PlantUML-Syntax und offiziellen Service-Icons von AWS, Azure, GCP und Alibaba Cloud. Ideal für Multi-Service-Cloud-Topologien und Migrationspläne.

Funktionsweise

Diese Fähigkeit wandelt PlantUML-Markup in gerenderte Diagramme um, die direkt in Ihr Markdown-Dokument eingebettet werden. Sie unterstützt die neuesten Service-Icons aller großen Cloud-Anbieter, sodass Sie präzise und professionelle Architekturdiagramme erstellen können.

Verwendung

Fügen Sie einen PlantUML-Codeblock in Ihr Markdown-Dokument ein. Die Fähigkeit erkennt diesen und rendert das entsprechende Diagramm.

@startuml
!include <aws/common>

AWSAccount(account, "Mein AWS-Konto") {
  EC2(web, "Webserver") #Linie
  RDS(database, "Datenbank") #Datenbank
}

web --> database

@enduml

Unterstützte Cloud-Anbieter

AnbieterPrefixBeispiel
AWSawsAWS(service, label)
AzureazureAzure(service, label)
GCPgcpGCP(service, label)
Alibaba CloudalibabacloudAlibabaCloud(service, label)

Beispiele

Multi-Cloud-Topologie

@startuml
!include <aws/common>
!include <azure/common>

title Multicloud-Architektur

AWSAccount(aws, "AWS") {
  EC2(app, "App") #App
}

AzureAccount(azure, "Azure") {
  SQLDatabase(db, "Datenbank")
}

app --> db : Datenabfrage

@enduml

Migrationsplan

Verwenden Sie diese Fähigkeit, um Migrationspfade von einem Anbieter zum anderen zu visualisieren, indem Sie Legacy- und Zielarchitekturen nebeneinander darstellen.

Tipps

  • Verwenden Sie !include-Anweisungen, um die Icon-Bibliothek des Cloud-Anbieters zu laden.
  • Definieren Sie benutzerdefinierte Farben mit #Farbe, um Services zu gruppieren.
  • Nutzen Sie Aliasse für komplexe Verbindungen zwischen Diensten.
  • Dokumentieren Sie Ihre Architektur direkt im Repository, um sie mit dem Code synchron zu halten.

Fehlerbehebung

Wenn das Diagramm nicht gerendert wird:

  • Stellen Sie sicher, dass der PlantUML-Codeblock korrekt ist.
  • Überprüfen Sie die verwendeten Service-Namen auf Richtigkeit.
  • Konsultieren Sie die offizielle PlantUML-Dokumentation für Cloud-Anbieter.

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

markdown-viewer/archimate

Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.

markdown-viewer/architecture

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

markdown-viewer/bpmn

Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.

markdown-viewer/canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

markdown-viewer/data-analytics

Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.

markdown-viewer/graphviz

Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.

markdown-viewer/infocard

Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.

markdown-viewer/iot

Create IoT architecture diagrams using PlantUML syntax with device and sensor stencil icons. Best for smart home, industrial IoT (IIoT), fleet management, edge computing, and sensor network layouts.

markdown-viewer/mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/network

Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.

markdown-viewer/security

Create security architecture diagrams using PlantUML syntax with identity, encryption, firewall, and compliance stencil icons. Best for IAM flows, zero-trust models, encryption pipelines, and threat detection architectures.

markdown-viewer/uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

markdown-viewer/vega

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

Verwandte Skills