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

Every Python diagram emits both PNG and SVG siblings via the shared scripts/diagram_io.py helper — PNG for raster preview, SVG for scalable / accessible / diff-friendly review.

Required Outputs (Workflow Integration)

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

Execution & Output Standards

Save .py source in agent-output/{project}/, then run with python3 to produce the .png + .svg sibling pair. Every generator must import the shared helpers from scripts/diagram_io.py (save_figure, diagram_kwargs, render_graphviz) — never call plt.savefig, Diagram(outformat=...), or dot.render() directly.

For the full conventions — design tokens (Azure blue, WAF pillar colours, DPI 150), graph_attr / node_attr / cluster_style settings, labelloc='t', Arial Bold fonts, CIDR labels — read references/python-charts.md.

For ready-to-use architecture diagram patterns (3-tier web app, hub-spoke, etc.) including the canonical with Diagram(... show=False, direction="TB") as d: template, read references/common-patterns.md.

Rules

DO: Import save_figure / diagram_kwargs / render_graphviz from scripts/diagram_io.py so every chart emits both .png and .svg siblings · Set show=False · Use direction="TB" · Group in Cluster blocks · Set explicit filename · Use DPI ≥150 · Apply design tokens consistently · Generate WAF scores PNG+SVG when WAF scores are assigned.

DON'T: Call plt.savefig(...), Diagram(..., outformat=...), or dot.render(...) directly — always go through diagram_io · 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/diagram_io.py (shared PNG+SVG output helper — import this from every generator) · 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