skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

azure-topology-style

Create Azure architecture, hub-and-spoke network, and CI/CD diagrams using a semantic palette and line-art sprite.

Updated Aug 2, 2026
Search Tags:#ci/cd#azure#design tokens#topology#hub-and-spoke#architecture diagram#svg sprite
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill azure-topology-style-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: azure-topology-style
Source: https://github.com/leonardoacosta/skills/tree/main/azure-kit/skills/azure-topology-style
Command: npx skills add https://github.com/leonardoacosta/skills --skill azure-topology-style-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Azure architecture diagrams often become inconsistent, cluttered, or dependent on proprietary icon sets, making ownership, containment, and traffic flow hard to read. This Skill provides a self-contained visual language with semantic resource families, containers, connectors, and tokens so diagrams stay accurate and legible. ## Core Features & Use Cases - Semantic resource families: Map ARM resource types to eight families (compute, data, identity, integration, network, monitor, governance, devops) via assets/tokens.json. - Container and connector contract: Nest Subscription, Resource Group, VNet, and Subnet envelopes correctly, and express connector intent (dependency, peering, data, secret, event, telemetry, delivery, approval) through line style, color, and arrows. - Self-contained assets: Use assets/tokens.css, assets/tokens.json, and a self-authored line-art SVG sprite without external icon dependencies. - Use Case: Given a list of Azure resources in a hub-and-spoke network, produce a diagram showing VNet peering, private endpoint attachment, and a CI/CD delivery flow with gated approvals. ## Quick Start Ask the agent to draw a hub-and-spoke Azure network diagram for your listed resources using the azure-topology-style conventions.

Frequently Asked Questions about azure-topology-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Azure architecture diagram with consistent styling?▼

Inventory your resources with ARM type, owner, scope, and network placement, then map each to one semantic family using the resource_type_family table in tokens.json. Nest Subscription, Resource Group, VNet, and Subnet containers, and label connectors with intent and direction.

How do I draw a hub-and-spoke Azure network diagram?▼

Place shared connectivity, inspection, and DNS services in the hub VNet and application workloads in spoke VNets. Show VNet peering as bidirectional connectors, nest each Subnet inside its owning VNet, and mark private endpoint attachment at the target resource.

Does this skill include official Microsoft Azure icons?▼

No. It ships a self-authored, Lucide-style line-art SVG sprite keyed by generic Azure resource slugs, with provenance and a SHA-256 digest recorded in PROVENANCE.md. Individual Microsoft Azure Architecture Icon files are intentionally not packaged.

How are connector types like data access or secret flow represented?▼

Each connector intent combines line pattern, arrow, label, and color: solid blue for application dependency, solid green for data access, dashed amber for secret or identity flow, dotted purple for events, and dashed indigo for telemetry. Direction and labels are required so meaning never depends on color alone.

What happens when an Azure resource type is missing from the family mapping?▼

Select the closest stable operational family from the eight defined families and document the addition. The style guide explicitly discourages inventing one-off colors for unmapped resource types.

Related Skills

Explore More Software Engineering Skills→
armanzeroeightarmanzeroeight
29

arm-template-helper

Generate and validate Azure Resource Manager templates for infrastructure deployment.

Community
Intermediate
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
SandboxServersSandboxServers
1

pipeline-quality-gates

Validate Azure Pipelines and GitHub Actions configurations against quality gate criteria.

Official
Advanced
JhabbigJhabbig

multi-cloud-architecture

Design multi-cloud architectures across AWS, Azure, GCP, and OCI.

Community
Intermediate