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.
Platform-agnostic Mermaid.js diagramming — flowcharts, sequence diagrams, C4 (via Structurizr or flowchart workarounds), class/state/ER diagrams, Gantt, and block diagrams.
$ npx skills add magnus919/hermes-profiles --skill mermaid-diagrams -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install magnus919/hermes-profiles mermaid-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/magnus919/hermes-profiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/mermaid-diagrams .claude/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .claude/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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/magnus919/hermes-profiles/tree/main/skills/mermaid-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 magnus919/hermes-profiles --skill mermaid-diagrams -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install magnus919/hermes-profiles mermaid-diagrams --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/mermaid-diagrams .agents/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .agents/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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 magnus919/hermes-profiles --skill mermaid-diagrams -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install magnus919/hermes-profiles mermaid-diagrams --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/mermaid-diagrams .cursor/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .cursor/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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/magnus919/hermes-profiles.git --path skills/mermaid-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 magnus919/hermes-profiles --skill mermaid-diagrams -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install magnus919/hermes-profiles mermaid-diagrams --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/mermaid-diagrams .gemini/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .gemini/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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 magnus919/hermes-profiles mermaid-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 magnus919/hermes-profiles --skill mermaid-diagrams -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/mermaid-diagrams .github/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .github/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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 magnus919/hermes-profiles --skill mermaid-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 magnus919/hermes-profiles mermaid-diagrams --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/mermaid-diagrams .opencode/skills/mermaid-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 "mermaid-diagrams" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/mermaid-diagrams into .opencode/skills/mermaid-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-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.
mermaid-diagramsPlatform-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. 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.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 867a555. 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 1 file in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
npxdockerFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.netFrom 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.
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.
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 magnus919/hermes-profiles at commit 867a555, republished under its MIT licence (© magnus919). 866 words, ~2,165 tokens.
.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.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.
Load this skill when:
Do NOT load when:
architecture-diagram skill)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:
npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg --width 800<img src="data:...">)max-width pixel values from the SVG tagsflowchart TD (portrait) not flowchart LR (landscape) — see references/portrait-layout.mdDo 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.
| Type | Use Case | File |
|---|---|---|
| Flowchart | Process flows, C4 workarounds, decision trees | references/flowchart.md |
| Sequence | Interaction protocols, API calls, agent handoffs | references/sequence.md |
| Class | Object models, interfaces, type hierarchies | references/class.md |
| State | State machines, lifecycle, workflow states | references/state.md |
| ER | Entity relationships, data models, schemas | references/er.md |
| Block | Manual-position diagrams, composite structures | references/block.md |
| Packet | Network protocols, binary formats, bit fields | references/packet.md |
| C4 | Architecture context and container views | references/c4-mermaid.md |
| Gantt | Project timelines, milestone tracking | references/gantt.md |
| Portrait Layout | PDF/print-oriented diagramming — TD over LR, page breaks, full-page diagrams | references/portrait-layout.md |
| PDF Rendering Pipeline | Full pipeline from .mmd → SVG → HTML → PDF, with QA checklist | references/pdf-rendering-pipeline.md |
| mmdc Spacing Config | Config file approach for controlling diagram layout density (nodeSpacing, rankSpacing, padding) to prevent label overlap in complex diagrams destined for PDF/print | references/mmdc-spacing-config.md |
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:
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.| C4 Element | Flowchart Equivalent | Example |
|---|---|---|
Person() | [label] (standard rect) | U[Human User] |
System() | [label] with style | GP[GroktoPlan] with style GP fill:#... |
System_Ext() | [label] outside subgraph | GIT[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"] ... end | Nested subgraphs |
Container_Boundary{} | subgraph Service["Title"] ... end | Single subgraph |
Rel() | -- label --> or -.-> | AR -- gRPC --> GA |
UpdateLayoutConfig() | Omit — use flowchart LR or TB | Direction set in header |
See references/c4-to-flowchart.md for worked examples of all three C4 levels.
| Diagram Type | GitHub 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 |
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.pdfRequires Puppeteer + Chromium (~1.7GB). Use the Docker image for isolated rendering:
docker run --rm -v $(pwd):/data ghcr.io/mermaid-js/mermaid-cli mermaid-cli -i /data/diagram.mmd -o /data/diagram.svg<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>// Node.js validation
import { parse } from 'mermaid';
try {
parse('flowchart LR\n A-->B');
console.log('Valid');
} catch (e) {
console.error('Invalid:', e.message);
}| Script | Purpose |
|---|---|
scripts/validate-mermaid.sh | Validate a .mmd file for syntax errors |
scripts/render-mermaid.sh | Render a .mmd file to SVG/PNG/PDF via mmdc |
scripts/batch-render.sh | Render all .mmd files in a directory to SVG |
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, primaryBorderColorsecondaryColor, tertiaryColorlineColor, fontFamily, fontSizebackground (outer background), mainBkg (element background)See references/theming.md for the full variable reference.
| Anti-pattern | Fix |
|---|---|
Lowercase end in flowchart | All 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 spaces | Use spaces only. 2-space indent for subgraphs. |
| Long labels without line breaks | Use <br/> or pipe ` |
| Embedding SVGs as data URIs | Use raw <svg> tags instead — data URIs can't have their max-width overridden by CSS |
| Leaving Mermaid code blocks in markdown for PDF | Pre-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
SKILL.md and 8 other files (scripts, references) in skills/mermaid-diagrams of magnus919/hermes-profiles.
Open the folder on GitHubat commit 867a555
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Mermaid Diagrams this skillmagnus919/hermes-profiles | 289 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 82k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Pretty Mermaid Rendererimxv/Pretty-mermaid-skills | 1.5k | — | ~2k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT |
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.
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.
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.
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.
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.
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
magnus919/hermes-profiles
PhD-level expertise in data science, statistics, and machine learning.
magnus919/hermes-profiles
Create comprehensive brand identity documentation for any brand.
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…
magnus919/hermes-profiles
SDD acceptance criteria verification — maps specification acceptance criteria to tests, validates implementation output against spec requirements, and produces artifact-pyramid-compliant…
magnus919/hermes-profiles
SDD work decomposition — translates formal specifications into dependency-aware task plans with per-task acceptance criteria.
magnus919/hermes-profiles
Progressive disclosure for what AI agents produce. An agent skill from magnus919/hermes-profiles.
Works with
Categories
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.
Mermaid Diagrams fits situations like: tasks that involve Diagrams.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.