Créez des diagrammes d'architecture système en couches à l'aide de modèles HTML/CSS avec des niveaux codés par couleur et des dispositions en grille. Idéal pour les piles technologiques, la topologie des microservices et la conception d'applications multi-niveaux.
Cette compétence permet de générer des diagrammes d'architecture système en couches directement dans le viewer Markdown, en utilisant des modèles HTML/CSS. Elle est particulièrement adaptée pour visualiser les piles technologiques, la topologie des microservices et les conceptions d'applications multi-niveaux. Le rendu s'effectue via une interface visuelle dans le chat, où les différents niveaux (tiers) sont représentés par des blocs colorés disposés en grille. Cette compétence est utile pour les développeurs, architectes et ingénieurs DevOps qui souhaitent communiquer visuellement la structure de leurs systèmes sans quitter leur environnement de développement. Elle fonctionne sur les plateformes supportant le viewer Markdown intégré, comme Claude Code ou d'autres assistants IA capables de rendre du HTML inline. Le diagramme est généré dynamiquement à partir d'une spécification textuelle décrivant les couches, leurs composants et leurs relations.
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/architectureCréez des diagrammes d'architecture système en couches à l'aide de modèles HTML/CSS avec des niveaux codés par couleur et des dispositions en grille. Idéal pour les piles technologiques, la topologie des microservices et la conception d'applications multi-niveaux.
This repo contains 13 individual skills — each has its own dedicated page.
Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.
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.
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.
Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.
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.
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.
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.
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.
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.
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.
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.
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.
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.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".