Visual Design
aws-samples/sample-strands-agent-with-agentcore
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.
UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .claude/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagramsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills/apex-python-diagrams .agents/skills/apex-python-diagrams && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .agents/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills/apex-python-diagrams .cursor/skills/apex-python-diagrams && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .cursor/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jonathan-vella/apex.git --path .github/skills/apex-python-diagrams--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills/apex-python-diagrams .gemini/skills/apex-python-diagrams && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .gemini/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jonathan-vella/apex apex-python-diagramsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills/apex-python-diagrams .github/skills/apex-python-diagrams && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .github/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jonathan-vella/apex --skill apex-python-diagrams -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jonathan-vella/apex apex-python-diagrams --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jonathan-vella/apex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills/apex-python-diagrams .opencode/skills/apex-python-diagrams && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "apex-python-diagrams" agent skill from https://github.com/jonathan-vella/apex/tree/main/.github/skills/apex-python-diagrams into .opencode/skills/apex-python-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apex-python-diagrams", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
apex-python-diagramsUTILITY 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: '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.
Read from SKILL.md and the folder at commit c209d8b. It shows what the files ask for, not the result of running them.
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.
Ships 5 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
pipapt-getFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Works with VS Code Copilot, Claude Code, and any tool capable of running Python scripts.
From compatibility in the SKILL.md frontmatter.
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.
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.
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.
The full file from jonathan-vella/apex at commit c209d8b, republished under its MIT licence (© jonathan-vella). 655 words, ~2,029 tokens.
.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.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.
pip install diagrams matplotlib pillow && apt-get install -y graphvizWorkflow 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 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 | 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 | SVG / graphviz | .py + .svg; PNG optional for SVG generator |
| 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).
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.
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.
Does NOT: produce Mermaid diagrams · generate Bicep/Terraform · create ADRs · deploy resources.
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)
| 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 |
© 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
SKILL.md and 17 other files (scripts, references) in .github/skills/apex-python-diagrams of jonathan-vella/apex.
Open the folder on GitHubat commit c209d8b
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Apex Python Diagrams this skilljonathan-vella/apex | 217 | — | ~2k | Automated safety check: Pass | MIT | |
| Visual Designaws-samples/sample-strands-agent-with-agentcore | 195 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.4k | 1 repos | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| Code To Diagramzebbern/claude-code-guide | 4.7k | 1 repos | ~972 | Automated safety check: Pass | MIT | |
| Design Doc MermaidSpillwaveSolutions/design-doc-mermaid | 175 | 1 repos | ~5.6k | Automated safety check: Pass | None | |
| Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent | 126 | 5 repos | ~3.8k | Automated safety check: Notes | Apache-2.0 |
aws-samples/sample-strands-agent-with-agentcore
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.
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
zebbern/claude-code-guide
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
neflibata-feng/MyArxiv-Agent
Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.
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.
jonathan-vella/apex
WORKFLOW SKILL — Debug Azure production issues: Container Apps, Functions, App Service, AKS, VMs and messaging, with KQL log analysis.
jonathan-vella/apex
ANALYSIS SKILL — Azure Policy discovery: effective assignments (incl.
jonathan-vella/apex
UTILITY SKILL — Two-mode context-window management. An agent skill from jonathan-vella/apex.
jonathan-vella/apex
WORKFLOW SKILL — Manual-only discovery and import of existing Azure resources into Terraform management.
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.
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.
Works with
Categories
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.
Apex Python Diagrams fits situations like: : inline Mermaid diagrams (apex-mermaid); tasks that involve Diagrams; tasks that involve UI design.
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.
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.
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.
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..
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.
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.
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.
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.
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.
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.