Python Diagrams & Charts

Skill for generating diagrams and charts using Python libraries: matplotlib for WAF/cost/compliance visualizations, diagrams for architecture diagrams, and graphviz for ERDs, swimlanes, timelines, and wireframes.

Prerequisites

pip install diagrams matplotlib pillow && apt-get install -y graphviz

Routing Guide

Required Outputs (Workflow Integration)

Suffix rules: -des for design (Step 3), -ab for as-built (Step 7).

Execution

Save .py source in agent-output/{project}/, then run to produce .png:

python3 agent-output/{project}/03-des-cost-distribution.py

Chart Design Tokens

Background & grid: Background #F8F9FA · Grid #E0E0E0 · DPI 150.

Azure colors: Azure blue #0078D4 · Min line #DC3545 · Target line #28A745 · Trend #FF8C00.

WAF pillar colors: Security #C00000 · Reliability #107C10 · Performance #FF8C00 · Cost #FFB900 · Operational Excellence #8764B8.

Architecture Diagram Conventions (diagrams library)

Follow this pattern for architecture diagram generation:

"""Brief description of what the diagram shows."""

from diagrams import Cluster, Diagram
from diagrams.azure.compute import AppServices
from diagrams.azure.network import FrontDoors

with Diagram("Diagram Title", show=False, filename="output-name", direction="TB"):
    with Cluster("Resource Group"):
        # Resources...
        pass

• Always set show=False to prevent auto-opening
• Use direction="TB" (top-to-bottom) for consistency
• Group resources in Cluster blocks matching Azure resource groups
• Set explicit filename parameter to control output location

Professional Output Standards

Critical settings for clean output — use labelloc="t" to keep labels inside clusters:

node_attr = {"fontname": "Arial Bold", "fontsize": "11", "labelloc": "t"}
graph_attr = {"bgcolor": "white", "pad": "0.8", "nodesep": "0.9", "ranksep": "0.9",
              "splines": "spline", "fontname": "Arial Bold", "fontsize": "16", "dpi": "150"}
cluster_style = {"margin": "30", "fontname": "Arial Bold", "fontsize": "14"}

Requirements: labelloc='t' · Arial Bold fonts · full resource names from IaC · dpi="150"+ · margin="30"+ · CIDR blocks in VNet/Subnet labels.

Guardrails

DO: Set show=False · Use direction="TB" · Group in Cluster blocks · Set explicit filename · Use DPI ≥150 · Apply design tokens consistently · Generate WAF scores PNG when WAF scores are assigned.

DON'T: Use Mermaid for charts (use matplotlib) · Use Python diagrams for primary architecture diagrams (use Draw.io skill) · Let show=True open a viewer · Omit filename (produces non-deterministic output names) · Use grouped list-to-list edge operators ([a, b] >> [c, d]) — use explicit node-to-node edges instead (the diagrams library may reject grouped expressions with a TypeError) · Use emoji or Unicode glyphs in chart labels — keep labels ASCII-safe for portability across container fonts.

Scope Exclusions

Does NOT: generate Draw.io architecture diagrams · produce Mermaid diagrams · generate Bicep/Terraform · create ADRs · deploy resources.

Scripts

scripts/generate_diagram.py (interactive diagram generation) · scripts/multi_diagram_generator.py (multi-type: process, ERD, timeline, wireframe) · scripts/ascii_to_diagram.py (ASCII art → diagram conversion) · scripts/verify_installation.py (prerequisites check)

Reference Index