New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Apex Mermaid

by jonathan-vella in jonathan-vella/apex

UTILITY SKILL — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER.

MITAuto-check passedDevelopment

Install Apex Mermaid

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

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

GitHub CLI
$ gh skill install jonathan-vella/apex apex-mermaid --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-mermaid .claude/skills/apex-mermaid && 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-mermaid
GitHub stars
217
Token cost
~707 tokens
SKILL.md length
239 words
Files
3 (incl. references)
Skills in repo
39
Repo updated
First seen
Licence
MIT

At a glance

UTILITY SKILL — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER.

  • Works in 5 steps: Pick the diagram type — see… → Author inside a triple-backtick mermaid… → Add theming and node styles — see… → …
  • : rendered architecture diagrams
  • SKILL.md covers When to Use Mermaid, Rules, Steps and Reference Index, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Apex Mermaid is an agent skill from jonathan-vella/apex. UTILITY SKILL — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER. WHEN: "mermaid flowchart", "sequence diagram", "Gantt chart", "state diagram", "ER diagram", "inline markdown diagram". DO NOT USE FOR: rendered architecture diagrams or WAF/cost charts (apex-python-diagrams).

Its SKILL.md is about 710 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/styling.md` and `references/syntax-cheatsheet.md`). Compatibility notes: Works with VS Code Copilot, Claude Code, and any tool that renders Mermaid in markdown.

It sits in Development, covering Diagrams. It works with Mermaid, Python and Microsoft Azure. 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

  • : rendered architecture diagrams
  • WAF/cost charts (apex-python-diagrams)

Example prompts

  • “mermaid flowchart”
  • “sequence diagram”
  • “Gantt chart”
  • “/apex-mermaid”

Requirements

  • Python 3
  • Compatibility (from SKILL.md): Works with VS Code Copilot, Claude Code, and any tool that renders Mermaid in markdown.

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Pick the diagram type — see references/syntax-cheatsheet.md
  2. Author inside a triple-backtick mermaid fence in your markdown
  3. Add theming and node styles — see references/styling.md
  4. Validate — render in VS Code preview or Starlight build
  5. Commit — the rendered Mermaid stays inline; no separate artifact

What it can do on your machine

Read from SKILL.md and the folder at commit b8e5908. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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 that renders Mermaid in markdown.

    From compatibility in the SKILL.md frontmatter.

Context cost

Apex Mermaid loads about 707 tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 239 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from jonathan-vella/apex at commit b8e5908, republished under its MIT licence (© jonathan-vella). 239 words, ~707 tokens.

Download SKILL.mdSave it as .claude/skills/apex-mermaid/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
apex-mermaid
description
**UTILITY SKILL** — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER. WHEN: "mermaid flowchart", "sequence diagram", "Gantt chart", "state diagram", "ER diagram", "inline markdown diagram". DO NOT USE FOR: rendered architecture diagrams or WAF/cost charts (apex-python-diagrams).
compatibility
Works with VS Code Copilot, Claude Code, and any tool that renders Mermaid in markdown.
user-invocable
true
disable-model-invocation
false
argument-hint
diagram type, subject and output path
license
MIT
metadata.author
apex
metadata.version
1.0

Mermaid Diagrams

Skill for generating Mermaid diagrams embedded in markdown fences. Mermaid is used for inline documentation — flowcharts, sequences, state machines, ER diagrams, Gantt charts. For architecture diagrams with Azure service icons, use the apex-python-diagrams skill instead.

When to Use Mermaid

  • Inline diagrams inside markdown (.md, .mdx)
  • Flowcharts for operational runbooks and process docs
  • Sequence diagrams for auth flows and API interactions
  • Gantt charts for project plans and maintenance schedules
  • State diagrams for lifecycle documentation
  • ER diagrams for data model overviews
  • Azure resource relationship diagrams from live queries (via apex-azure-resources Mode B)

Rules

DO: fenced code blocks with mermaid language tag · include theme directives for dark mode · graph TB (vertical) or graph LR (horizontal) · subgraphs for grouping · descriptive connection labels · validate syntax before committing.

DON'T: use Mermaid for WAF/cost charts (use apex-python-diagrams) · use Mermaid for rendered architecture diagrams (use apex-python-diagrams) · omit theme directives · embed Azure service icons.

Steps

  1. Pick the diagram type — see references/syntax-cheatsheet.md
  2. Author inside a triple-backtick mermaid fence in your markdown
  3. Add theming and node styles — see references/styling.md
  4. Validate — render in VS Code preview or Starlight build
  5. Commit — the rendered Mermaid stays inline; no separate artifact

Reference Index

FileWhen to Load
references/syntax-cheatsheet.mdAuthoring any diagram type (flowchart, sequence, Gantt, ER, state)
references/styling.mdAdding theming and node classDef styling

Scope Exclusions

Does NOT: generate rendered architecture diagrams · produce Python charts · generate Bicep/Terraform · create ADRs · deploy resources · embed Azure service icons (use apex-python-diagrams).

© 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 2 other files (references) in .github/skills/apex-mermaid of jonathan-vella/apex.

  • SKILL.md
  • references/styling.md
  • references/syntax-cheatsheet.md

Open the folder on GitHubat commit b8e5908

Compare with similar skills

Apex Mermaid 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 Mermaid compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Apex Mermaid this skilljonathan-vella/apex217—~707Automated safety check: PassMIT
Code Graph Mermaid Diagramstrailofbits/skills7.5k—~1.7kAutomated safety check: PassCC-BY-SA-4.0
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid1761 repos~5.6kAutomated safety check: PassNone
Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent1265 repos~3.8kAutomated safety check: NotesApache-2.0
Code To Diagramzebbern/claude-code-guide4.7k—~972Automated safety check: PassMIT
Generate Readmedivar-ir/ai-doc-gen767—~996Automated safety check: PassMIT

Similar skills

  • 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.5k GitHub stars~1.7k tokensUpdated yesterday
    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.

    176 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

  • Code To Diagram

    zebbern/claude-code-guide

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

    4.7k GitHub stars~972 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • 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.

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

  • Book Writer

    aospbooks/aosp-internal-book

    Patterns for writing technical book chapters in Markdown with Mermaid diagrams, served via ProperDocs (a MkDocs fork).

    139 GitHub stars~3.1k tokensUpdated 6 days 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 today
    Auto-check passed

  • Apex Azure Governance Discovery

    jonathan-vella/apex

    ANALYSIS SKILL — Azure Policy discovery: effective assignments (incl.

    217 GitHub stars~2.1k tokensUpdated today
    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 today
    Auto-check passed

  • Apex Python Diagrams

    jonathan-vella/apex

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

    217 GitHub stars~2k tokensUpdated today
    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 today
    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 today
    Auto-check passed

Works with

Categories

Questions about Apex Mermaid

What does Apex Mermaid do?

UTILITY SKILL — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER. Apex Mermaid is an agent skill from jonathan-vella/apex. UTILITY SKILL — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER.

When should I use Apex Mermaid?

Apex Mermaid fits situations like: : rendered architecture diagrams; WAF/cost charts (apex-python-diagrams).

How do I install Apex Mermaid in Claude Code?

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

How do I install Apex Mermaid in Codex?

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

Can I use Apex Mermaid 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-mermaid -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-mermaid, .gemini/skills/apex-mermaid, .github/skills/apex-mermaid and .opencode/skills/apex-mermaid in your project.

What does Apex Mermaid need to run?

SKILL.md names no scripts, command-line tools or credentials: Apex Mermaid is instructions for the agent only. Our summary lists: Python 3. Compatibility (from SKILL.md): Works with VS Code Copilot, Claude Code, and any tool that renders Mermaid in markdown..

Does Apex Mermaid access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Apex Mermaid 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. Review the folder before installing.

What licence does Apex Mermaid use?

Apex Mermaid 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 Mermaid use?

About 707 tokens (SKILL.md is roughly 2.8k 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 657 tokens, read only when the agent opens those files.

What are the alternatives to Apex Mermaid?

Skills that share tags, products or a category with Apex Mermaid: Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars), Markdown Mermaid Writing (neflibata-feng/MyArxiv-Agent, 126 stars) and Code To Diagram (zebbern/claude-code-guide, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Apex Mermaid?

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 10, 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.