Agent skill

Mermaid Diagrams

by magnus919 in magnus919/hermes-profiles

Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams.

MITAuto-check passedDevelopment

Install Mermaid Diagrams

skills CLI
$ npx skills add magnus919/hermes-profiles --skill mermaid-diagrams -a claude-code

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

GitHub CLI
$ gh skill install magnus919/hermes-profiles mermaid-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/magnus919/hermes-profiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/mermaid-diagrams .claude/skills/mermaid-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
mermaid-diagrams
GitHub stars
289
Token cost
~2.2k tokens
SKILL.md length
866 words
Files
9 (incl. scripts, references)
Skills in repo
31
Repo updated
First seen
Licence
MIT

At a glance

Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams.

  • Works in 6 steps: Create the diagram as a standalone .mmd… → Pre-render to SVG: npx… → Embed the raw SVG content directly in… → …
  • Tasks that involve Diagrams
  • SKILL.md covers When to Use, PDF Output — Pre-render Required, Supported Diagram Types and C4 Model Guidance, plus 4 more sections
  • Runs Shell scripts from its folder; calls npx and docker; reaches cdn.jsdelivr.net

What it does

Mermaid Diagrams is an agent skill from magnus919/hermes-profiles. Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams. Generates valid Mermaid syntax, renders via mmdc CLI or CDN, and validates before output. Portable — works in CLI, markdown, HTML, PDF, and any agentic context.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `references/c4-mermaid.md`, `references/c4-to-flowchart.md` and `references/flowchart.md`).

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: Curated Hermes Agent profiles for specialist swarms — opinionated, Hermes-optimized, artifact-pyramid native. The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/mermaid-diagrams”

Requirements

  • Python 3
  • Node.js
  • A Bash shell
  • Docker

Workflow steps

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

  1. Create the diagram as a standalone .mmd file
  2. Pre-render to SVG: npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg --width 800
  3. Embed the raw SVG content directly in the markdown (not as )
  4. Strip hardcoded max-width pixel values from the SVG tags
  5. Use flowchart TD (portrait) not flowchart LR (landscape) — see references/portrait-layout.md
  6. Add page-break divs before/after each full-page diagram

What it can do on your machine

Read from SKILL.md and the folder at commit 867a555. 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 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • docker

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    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.

Context cost

Mermaid Diagrams loads about 2.2k tokens when it runs, and up to ~7.9k if it reads all its reference files. Until then it costs about 88 tokens; SKILL.md has 866 words of instructions outside code blocks.

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

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 magnus919/hermes-profiles at commit 867a555, republished under its MIT licence (© magnus919). 866 words, ~2,165 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-diagrams/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
mermaid-diagrams
description
Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams. Generates valid Mermaid syntax, renders via mmdc CLI or CDN, and validates before output. Portable — works in CLI, markdown, HTML, PDF, and any agentic context.

Mermaid Diagrams

Portable Mermaid.js diagramming for architectural documentation. Not tied to any blog platform, theme, or rendering engine. Diagrams can be rendered via CLI, embedded in markdown, or served as HTML snippets.

When to Use

Load this skill when:

  • Creating C4 structural views (use Structurizr DSL for production; flowchart workarounds for inline markdown)
  • Producing sequence diagrams for interaction flows
  • Designing flowcharts for process documentation
  • Building state/class/ER diagrams for specification
  • Generating any diagram that needs to render in both agent-facing and human-facing contexts

Do NOT load when:

  • You only need static ASCII architecture (use architecture-diagram skill)
  • You're embedding in a Hugo site that uses custom theme rendering (load the appropriate theme skill)

PDF Output — Pre-render Required

Mermaid code blocks (mermaid) do NOT render in the Pandoc → HTML → Puppeteer PDF pipeline. The pipeline generates static HTML with no JavaScript execution.

For any diagram destined for PDF output:

  1. Create the diagram as a standalone .mmd file
  2. Pre-render to SVG: npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg --width 800
  3. Embed the raw SVG content directly in the markdown (not as <img src="data:...">)
  4. Strip hardcoded max-width pixel values from the SVG tags
  5. Use flowchart TD (portrait) not flowchart LR (landscape) — see references/portrait-layout.md
  6. Add page-break divs before/after each full-page diagram

Do NOT leave ```mermaid code blocks in markdown that will go through Pandoc. They render as raw monospace text.

See references/pdf-rendering-pipeline.md for the full pipeline with Puppeteer setup, SVG styling fixes, and QA checklist.

Supported Diagram Types

TypeUse CaseFile
FlowchartProcess flows, C4 workarounds, decision treesreferences/flowchart.md
SequenceInteraction protocols, API calls, agent handoffsreferences/sequence.md
ClassObject models, interfaces, type hierarchiesreferences/class.md
StateState machines, lifecycle, workflow statesreferences/state.md
EREntity relationships, data models, schemasreferences/er.md
BlockManual-position diagrams, composite structuresreferences/block.md
PacketNetwork protocols, binary formats, bit fieldsreferences/packet.md
C4Architecture context and container viewsreferences/c4-mermaid.md
GanttProject timelines, milestone trackingreferences/gantt.md
Portrait LayoutPDF/print-oriented diagramming — TD over LR, page breaks, full-page diagramsreferences/portrait-layout.md
PDF Rendering PipelineFull pipeline from .mmd → SVG → HTML → PDF, with QA checklistreferences/pdf-rendering-pipeline.md
mmdc Spacing ConfigConfig file approach for controlling diagram layout density (nodeSpacing, rankSpacing, padding) to prevent label overlap in complex diagrams destined for PDF/printreferences/mmdc-spacing-config.md

C4 Model Guidance

Mermaid has experimental native C4 syntax (C4Context, C4Container, C4Component) but it is unsupported on GitHub and most markdown renderers. GitHub's built-in mermaid renderer does not bundle the C4 plugin — C4-syntax blocks render as raw code rather than diagrams. Use one of these approaches instead:

  1. Flowchart workarounds (GitHub-compatible) — Convert C4 diagrams to standard flowchart syntax using subgraphs for boundaries, styled node boxes for Person/System/Container/Db, and labelled edges for Rel. See references/c4-to-flowchart.md for the full conversion pattern.
  2. Structurizr DSL — use for real C4 diagrams. Render via Structurizr CLI or export to Mermaid SVG. Best for formal architecture documentation that doesn't live in GitHub markdown.
  3. The hybrid approach — produce C4 in Structurizr DSL for the architect's artifact pyramid, and include a flowchart-based approximation in the markdown report for inline readability.
Show full SKILL.md (368 more words)Show less
C4 → Flowchart Conversion Pattern
C4 ElementFlowchart EquivalentExample
Person()[label] (standard rect)U[Human User]
System()[label] with styleGP[GroktoPlan] with style GP fill:#...
System_Ext()[label] outside subgraphGIT[Git Providers]
Container()[label with tech stack]KG[Knowledge Graph<br/>Python + pgvector]
Db()[(label)] (cylinder shape)LS[(Live State DB)]
System_Boundary{}subgraph System["Title"] ... endNested subgraphs
Container_Boundary{}subgraph Service["Title"] ... endSingle subgraph
Rel()-- label --> or -.->AR -- gRPC --> GA
UpdateLayoutConfig()Omit — use flowchart LR or TBDirection set in header

See references/c4-to-flowchart.md for worked examples of all three C4 levels.

GitHub Compatibility Reference
Diagram TypeGitHub Renders?Notes
flowchart (TD/LR/BT/RL)✅Use for all C4 workarounds
sequenceDiagram✅
classDiagram✅
stateDiagram-v2✅
erDiagram✅
gantt✅
pie✅
quadrantChart✅
requirementDiagram✅
gitgraph✅
mindmap✅
timeline✅
zenuml✅
sankey✅
xychart✅
block✅
packet✅
C4Context❌Requires C4 plugin — renders as raw code
C4Container❌Requires C4 plugin — renders as raw code
C4Component❌Requires C4 plugin — renders as raw code
C4Deployment❌Requires C4 plugin — renders as raw code
C4Dynamic❌Requires C4 plugin — renders as raw code

Rendering

CLI (mmdc) — for PDF/SVG/PNG output
bash
npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg
npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png
npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.pdf

Requires Puppeteer + Chromium (~1.7GB). Use the Docker image for isolated rendering:

bash
docker run --rm -v $(pwd):/data ghcr.io/mermaid-js/mermaid-cli mermaid-cli -i /data/diagram.mmd -o /data/diagram.svg
CDN (HTML) — for inline web rendering
html
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
flowchart LR
  A-->B
</div>
Validation
javascript
// Node.js validation
import { parse } from 'mermaid';
try {
  parse('flowchart LR\n  A-->B');
  console.log('Valid');
} catch (e) {
  console.error('Invalid:', e.message);
}

Scripts

ScriptPurpose
scripts/validate-mermaid.shValidate a .mmd file for syntax errors
scripts/render-mermaid.shRender a .mmd file to SVG/PNG/PDF via mmdc
scripts/batch-render.shRender all .mmd files in a directory to SVG

Theming

Mermaid uses a base theme with customizable theme variables. Set via %%{init: {'theme':'base', 'themeVariables': { ... }}}%% at the top of the diagram.

Key theme variables:

  • primaryColor, primaryTextColor, primaryBorderColor
  • secondaryColor, tertiaryColor
  • lineColor, fontFamily, fontSize
  • background (outer background), mainBkg (element background)

See references/theming.md for the full variable reference.

Anti-Patterns

Anti-patternFix
Lowercase end in flowchartAll Mermaid keywords are case-sensitive. End is not end.
o or x after dashes without space-->o needs space: --o or use explicit node shapes
Quotes inside parentheses("quoted text") not ('quoted text')
Very wide diagrams (>100 nodes)Split into sub-diagrams or use ELK layout
Mixed tabs and spacesUse spaces only. 2-space indent for subgraphs.
Long labels without line breaksUse <br/> or pipe `
Embedding SVGs as data URIsUse raw <svg> tags instead — data URIs can't have their max-width overridden by CSS
Leaving Mermaid code blocks in markdown for PDFPre-render to SVG first. Pandoc renders ```mermaid as raw text.

© magnus919, 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 8 other files (scripts, references) in skills/mermaid-diagrams of magnus919/hermes-profiles.

  • SKILL.md
  • references/c4-mermaid.md
  • references/c4-to-flowchart.md
  • references/flowchart.md
  • references/mmdc-spacing-config.md
  • references/pdf-rendering-pipeline.md
  • references/portrait-layout.md
  • references/sequence.md
  • scripts/validate-mermaid.sh

Open the folder on GitHubat commit 867a555

Compare with similar skills

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

Mermaid Diagrams compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mermaid Diagrams this skillmagnus919/hermes-profiles289—~2.2kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes
  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed
  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from magnus919/hermes-profiles

All 31 skills in this repo
  • Data Scientist

    magnus919/hermes-profiles

    PhD-level expertise in data science, statistics, and machine learning.

    289 GitHub stars~3.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Brand Designer

    magnus919/hermes-profiles

    Create comprehensive brand identity documentation for any brand.

    289 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Sdd Authoring

    magnus919/hermes-profiles

    Specification authoring for AI-native SDD — writes formal specifications in structured formats (Gherkin, user stories, acceptance criteria), enforces spec quality gates, and produces…

    289 GitHub stars~1.4k tokensUpdated 3 mo ago
    Auto-check passed
  • Sdd Verification

    magnus919/hermes-profiles

    SDD acceptance criteria verification — maps specification acceptance criteria to tests, validates implementation output against spec requirements, and produces artifact-pyramid-compliant…

    289 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check passed
  • Sdd Work Decomposition

    magnus919/hermes-profiles

    SDD work decomposition — translates formal specifications into dependency-aware task plans with per-task acceptance criteria.

    289 GitHub stars~1.4k tokensUpdated 3 mo ago
    Auto-check passed
  • Artifact Pyramids

    magnus919/hermes-profiles

    Progressive disclosure for what AI agents produce. An agent skill from magnus919/hermes-profiles.

    289 GitHub stars~2.5k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Mermaid Diagrams

What does Mermaid Diagrams do?

Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams. Mermaid Diagrams is an agent skill from magnus919/hermes-profiles.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams.

When should I use Mermaid Diagrams?

Mermaid Diagrams fits situations like: tasks that involve Diagrams.

How do I install Mermaid Diagrams in Claude Code?

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

How do I install Mermaid Diagrams in Codex?

Run `npx skills add magnus919/hermes-profiles --skill mermaid-diagrams -a codex`. Or copy the skill folder (skills/mermaid-diagrams in magnus919/hermes-profiles) into .agents/skills/mermaid-diagrams in your project. Codex loads it when a task matches its description.

Can I use Mermaid 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 magnus919/hermes-profiles --skill mermaid-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/mermaid-diagrams, .gemini/skills/mermaid-diagrams, .github/skills/mermaid-diagrams and .opencode/skills/mermaid-diagrams in your project.

What does Mermaid Diagrams need to run?

Going by SKILL.md and its folder, Mermaid Diagrams needs a shell for the scripts in its folder and the command-line tools its instructions call (npx and docker). Our summary lists: Python 3; Node.js; A Bash shell; Docker.

Does Mermaid Diagrams access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Mermaid 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 Mermaid Diagrams use?

Mermaid Diagrams is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid Diagrams use?

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

What are the alternatives to Mermaid Diagrams?

Skills that share tags, products or a category with Mermaid Diagrams: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid Diagrams?

magnus919 (a GitHub user) maintains it in magnus919/hermes-profiles, which has 289 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on June 27, 2026.

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