| name | python-diagrams |
| description | **UTILITY SKILL** — Python diagram generation: WAF/cost/compliance charts (matplotlib), architecture diagrams (diagrams lib), ERDs, swimlanes, timelines, wireframes (graphviz). WHEN: 'WAF bar chart', 'cost donut chart', 'compliance gap chart', 'Python architecture diagram', 'ERD diagram', 'swimlane', 'UI wireframe'. DO NOT USE FOR: Draw.io architecture diagrams (drawio), inline Mermaid (mermaid). |
| compatibility | Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts. |
| license | MIT |
| metadata | {"author":"apex","version":"1.0"} |
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.
| Diagram type | Library | Output |
|---|
| WAF bar charts | matplotlib | .py + .png + .svg |
| Cost donut / projection charts | matplotlib | .py + .png + .svg |
| Compliance gap charts | matplotlib | .py + .png + .svg |
| Architecture diagrams (non-Draw.io) | diagrams | .py + .png + .svg |
| Swimlane / business process | graphviz | .py + .png + .svg |
| Entity-relationship diagrams | graphviz | .py + .png + .svg |
| Timeline / Gantt charts | matplotlib | .py + .png + .svg |
| UI wireframes | graphviz | .py + .png + .svg |
Required Outputs (Workflow Integration)
| Step | Python chart files |
|---|
| 2 | 02-waf-scores.py/.png/.svg |
| 3 | 03-des-cost-distribution.py/.png/.svg, 03-des-cost-projection.py/.png/.svg |
| 4 | 04-dependency-diagram.py/.png/.svg, 04-runtime-diagram.py/.png/.svg |
| 7 | 07-ab-cost-*.py/.png/.svg, 07-ab-compliance-gaps.py/.png/.svg |
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
| File | Content |
|---|
references/python-charts.md | Chart execution, design tokens, output standards |
references/waf-cost-charts.md | WAF pillar bar, cost donut & projection chart implementations |
references/azure-components.md | Complete list of 700+ Azure diagram components |
references/common-patterns.md | Ready-to-use Python architecture patterns (3-tier, hub-spoke, etc.) |
references/business-process-flows.md | Workflow and swimlane diagram patterns |
references/entity-relationship-diagrams.md | Database ERD patterns |
references/integration-services.md | Integration service diagram patterns |
references/migration-patterns.md | Migration architecture patterns |
references/sequence-auth-flows.md | Authentication flow sequence patterns |
references/timeline-gantt-diagrams.md | Project timeline and Gantt diagrams |
references/ui-wireframe-diagrams.md | UI mockup and wireframe patterns |
references/iac-to-diagram.md | Generate diagrams from Bicep/Terraform/ARM templates |
