Agent skill

Apex Python Diagrams

by jonathan-vella in jonathan-vella/apex

UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.

MITAuto-check passedDevelopment

Install Apex Python Diagrams

skills CLI
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/apex-python-diagrams .claude/skills/apex-python-diagrams && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
apex-python-diagrams
GitHub stars
217
Token cost
~2k tokens
SKILL.md length
655 words
Files
18 (incl. scripts, references)
Skills in repo
39
Repo updated
First seen
Licence
MIT

At a glance

UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.

  • : inline Mermaid diagrams (apex-mermaid)
  • SKILL.md covers Prerequisites, Routing Guide, Required Outputs (Workflow… and Execution & Output Standards, plus 4 more sections
  • Runs Python scripts from its folder; calls pip and apt-get
  • Tasks that involve Diagrams

What it does

Apex Python Diagrams is an agent skill from jonathan-vella/apex. UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes. WHEN: 'architecture diagram', 'WAF bar chart', 'cost chart', 'ERD', 'swimlane', 'timeline', 'wireframe'. DO NOT USE FOR: inline Mermaid diagrams (apex-mermaid).

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files, including scripts and reference files (for example `references/azure-components.md`, `references/business-process-flows.md` and `references/common-patterns.md`). Compatibility notes: Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts.

It sits in Development, covering Diagrams and UI design. It works with Python, Mermaid and Matplotlib. The repository describes itself as: APEX turns Azure platform engineering requirements into verified, deploy-ready IaC — powered by GitHub Copilot agents, real-time pricing, and built-in compliance. The licence is MIT.

When your agent uses it

  • : inline Mermaid diagrams (apex-mermaid)
  • Tasks that involve Diagrams
  • Tasks that involve UI design

Example prompts

  • “architecture diagram”
  • “WAF bar chart”
  • “cost chart”
  • “/apex-python-diagrams”

Requirements

  • Python 3
  • Compatibility (from SKILL.md): Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts.

What it can do on your machine

Read from SKILL.md and the folder at commit c209d8b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 5 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • pip
    • apt-get

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts.

    From compatibility in the SKILL.md frontmatter.

Context cost

Apex Python Diagrams loads about 2k tokens when it runs, and up to ~39k if it reads all its reference files. Until then it costs about 81 tokens; SKILL.md has 655 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~81
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~39k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from jonathan-vella/apex at commit c209d8b, republished under its MIT licence (© jonathan-vella). 655 words, ~2,029 tokens.

Download SKILL.mdSave it as .claude/skills/apex-python-diagrams/SKILL.md (or your agent's skills folder). This skill also uses 17 other files; get the full folder from GitHub.
name
apex-python-diagrams
description
**UTILITY SKILL** — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes. WHEN: 'architecture diagram', 'WAF bar chart', 'cost chart', 'ERD', 'swimlane', 'timeline', 'wireframe'. DO NOT USE FOR: inline Mermaid diagrams (apex-mermaid).
compatibility
Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts.
user-invocable
true
disable-model-invocation
false
argument-hint
diagram or chart type, project and output path
license
MIT
metadata.author
apex
metadata.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

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

Routing Guide

Workflow charts and library-rendered diagrams emit both PNG and SVG siblings via the shared scripts/diagram_io.py helper — PNG for raster preview, SVG for scalable / accessible / diff-friendly review. Standalone SVG wireframes are the exception below; they do not use this helper.

Diagram typeLibraryOutput
WAF bar chartsmatplotlib.py + .png + .svg
Cost donut / projection chartsmatplotlib.py + .png + .svg
Compliance gap chartsmatplotlib.py + .png + .svg
Architecture diagramsdiagrams.py + .png + .svg
Swimlane / business processgraphviz.py + .png + .svg
Entity-relationship diagramsgraphviz.py + .png + .svg
Timeline / Gantt chartsmatplotlib.py + .png + .svg
UI wireframesSVG / graphviz.py + .svg; PNG optional for SVG generator

Required Outputs (Workflow Integration)

StepPython chart files
202-waf-scores.py/.png/.svg
303-des-cost-distribution.py/.png/.svg, 03-des-cost-projection.py/.png/.svg
404-dependency-diagram.py/.png/.svg, 04-runtime-diagram.py/.png/.svg
707-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. Library-backed generators 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 diagrams library, call embed_svg_images(Path(filename).with_suffix(".svg")) after the with Diagram(...) block exits, importing it from the same helper. Graphviz otherwise emits absolute icon paths into the Python installation, which disappear in browser/editor previews or on another machine. render_graphviz embeds icons automatically. Missing or unsupported icon files fail finalization; do not claim completion from non-empty files alone. Inspect both the PNG and the standalone SVG, verify every SVG image uses a data:image/ URI, and confirm icons render without access to local package paths. For explicit PNG-only standalone callers, skip SVG finalization; required workflow siblings remain mandatory.

The standalone create_wireframe_svg(title, filename, layout) writes SVG and, when CairoSVG is installed, a PNG sibling. It returns the PNG path after conversion or the SVG path when CairoSVG is unavailable; conversion errors propagate. Inspect the returned path. Missing PNG does not satisfy a workflow or caller that requires PNG: report the missing converter instead of claiming completion. Existing helper formats= overrides remain available for standalone callers; do not use them to omit required workflow siblings.

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.

Show full SKILL.md (236 more words)Show less

Rules

DO: For library-backed diagrams, 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) · 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: 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

FileContent
references/python-charts.mdChart execution, design tokens, output standards
references/waf-cost-charts.mdWAF pillar bar, cost donut & projection chart implementations
references/azure-components.mdComplete list of 700+ Azure diagram components
references/common-patterns.mdReady-to-use Python architecture patterns (3-tier, hub-spoke, etc.)
references/business-process-flows.mdWorkflow and swimlane diagram patterns
references/entity-relationship-diagrams.mdDatabase ERD patterns
references/integration-services.mdIntegration service diagram patterns
references/migration-patterns.mdMigration architecture patterns
references/sequence-auth-flows.mdAuthentication flow sequence patterns
references/timeline-gantt-diagrams.mdProject timeline and Gantt diagrams
references/ui-wireframe-diagrams.mdUI mockup and wireframe patterns
references/iac-to-diagram.mdGenerate diagrams from Bicep/Terraform/ARM templates

© jonathan-vella, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 17 other files (scripts, references) in .github/skills/apex-python-diagrams of jonathan-vella/apex.

  • SKILL.md
  • references/azure-components.md
  • references/business-process-flows.md
  • references/common-patterns.md
  • references/entity-relationship-diagrams.md
  • references/iac-to-diagram.md
  • references/integration-services.md
  • references/migration-patterns.md
  • references/python-charts.md
  • references/sequence-auth-flows.md
  • references/timeline-gantt-diagrams.md
  • references/ui-wireframe-diagrams.md
  • references/waf-cost-charts.md
  • scripts/ascii_to_diagram.py
  • scripts/diagram_io.py
  • scripts/generate_diagram.py
  • scripts/multi_diagram_generator.py
  • scripts/verify_installation.py

Open the folder on GitHubat commit c209d8b

Compare with similar skills

Apex Python Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Apex Python Diagrams compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Apex Python Diagrams this skilljonathan-vella/apex217—~2kAutomated safety check: PassMIT
Visual Designaws-samples/sample-strands-agent-with-agentcore195—~1.5kAutomated safety check: PassMIT
Code Graph Mermaid Diagramstrailofbits/skills7.4k1 repos~1.7kAutomated safety check: PassCC-BY-SA-4.0
Code To Diagramzebbern/claude-code-guide4.7k1 repos~972Automated safety check: PassMIT
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid1751 repos~5.6kAutomated safety check: PassNone
Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent1265 repos~3.8kAutomated safety check: NotesApache-2.0

Similar skills

  • Visual Design

    aws-samples/sample-strands-agent-with-agentcore

    Official

    Use this skill any time the user needs a visual output as an image or PDF — charts, diagrams, posters, infographics, abstract artwork, or any visual design.

    195 GitHub stars~1.5k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed
  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.4k GitHub starsUsed in 1 repo~1.7k tokens
    DevelopmentAuto-check passed
  • Code To Diagram

    zebbern/claude-code-guide

    Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.

    4.7k GitHub starsUsed in 1 repo~972 tokens
    DevelopmentAuto-check passed
  • Design Doc Mermaid

    SpillwaveSolutions/design-doc-mermaid

    Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.

    175 GitHub starsUsed in 1 repo~5.6k tokens
    DevelopmentAuto-check passed
  • Markdown Mermaid Writing

    neflibata-feng/MyArxiv-Agent

    Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.

    126 GitHub starsUsed in 5 repos~3.8k tokens
    DevelopmentAuto-check: notes
  • Generate Readme

    divar-ir/ai-doc-gen

    Generate or refresh a comprehensive, professional README.md for a repository, with architecture overview, mermaid and optional C4 diagrams, repository structure, dependencies, and API documentation.

    766 GitHub stars~996 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

More from jonathan-vella/apex

All 39 skills in this repo
  • Apex Azure Diagnostics

    jonathan-vella/apex

    WORKFLOW SKILL — Debug Azure production issues: Container Apps, Functions, App Service, AKS, VMs and messaging, with KQL log analysis.

    217 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed
  • ANALYSIS SKILL — Azure Policy discovery: effective assignments (incl.

    217 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed
  • Apex Context Management

    jonathan-vella/apex

    UTILITY SKILL — Two-mode context-window management. An agent skill from jonathan-vella/apex.

    217 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Apex Terraform Search Import

    jonathan-vella/apex

    WORKFLOW SKILL — Manual-only discovery and import of existing Azure resources into Terraform management.

    217 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed
  • Apex Vendor Prompting

    jonathan-vella/apex

    ANALYSIS SKILL — Manual-only audit of Anthropic Claude Opus 5.5 / Sonnet 5.5 and OpenAI GPT-6 / GPT-5.6 prompting guidance and APEX conventions.

    217 GitHub stars~2.7k tokensUpdated yesterday
    Auto-check passed
  • Apex Agent Authoring

    jonathan-vella/apex

    WORKFLOW SKILL — Creates, restructures, and audits GitHub Copilot .agent.md and .prompt.md files with correct frontmatter, handoffs, model policy, context budgets, and validation.

    217 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed

Questions about Apex Python Diagrams

What does Apex Python Diagrams do?

UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes. Apex Python Diagrams is an agent skill from jonathan-vella/apex. UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.

When should I use Apex Python Diagrams?

Apex Python Diagrams fits situations like: : inline Mermaid diagrams (apex-mermaid); tasks that involve Diagrams; tasks that involve UI design.

How do I install Apex Python Diagrams in Claude Code?

Run `npx skills add jonathan-vella/apex --skill apex-python-diagrams -a claude-code`. Or copy the skill folder (.github/skills/apex-python-diagrams in jonathan-vella/apex) into .claude/skills/apex-python-diagrams in your project. Claude Code loads it when a task matches its description.

How do I install Apex Python Diagrams in Codex?

Run `npx skills add jonathan-vella/apex --skill apex-python-diagrams -a codex`. Or copy the skill folder (.github/skills/apex-python-diagrams in jonathan-vella/apex) into .agents/skills/apex-python-diagrams in your project. Codex loads it when a task matches its description.

Can I use Apex Python Diagrams in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jonathan-vella/apex --skill apex-python-diagrams -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/apex-python-diagrams, .gemini/skills/apex-python-diagrams, .github/skills/apex-python-diagrams and .opencode/skills/apex-python-diagrams in your project.

What does Apex Python Diagrams need to run?

Going by SKILL.md and its folder, Apex Python Diagrams needs Python for the scripts in its folder and the command-line tools its instructions call (pip and apt-get). Our summary lists: Python 3. Compatibility (from SKILL.md): Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts..

Does Apex Python Diagrams access the network?

SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Apex Python Diagrams safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Apex Python Diagrams use?

Apex Python Diagrams is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Apex Python Diagrams use?

About 2k tokens (SKILL.md is roughly 8.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 37k tokens, read only when the agent opens those files.

What are the alternatives to Apex Python Diagrams?

Skills that share tags, products or a category with Apex Python Diagrams: Visual Design (aws-samples/sample-strands-agent-with-agentcore, 195 stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.4k stars), Code To Diagram (zebbern/claude-code-guide, 4.7k stars) and Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 175 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Apex Python Diagrams?

jonathan-vella (a GitHub user) maintains it in jonathan-vella/apex, which has 217 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 7, 2026.

Source: jonathan-vella/apex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.