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.
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.
Install Beautiful Mermaid
$ npx skills add intellectronica/agent-skills --skill beautiful-mermaid -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install intellectronica/agent-skills beautiful-mermaid --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/intellectronica/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/beautiful-mermaid .claude/skills/beautiful-mermaid && 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 "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .claude/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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/intellectronica/agent-skills/tree/main/skills/beautiful-mermaidType 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 intellectronica/agent-skills --skill beautiful-mermaid -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install intellectronica/agent-skills beautiful-mermaid --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/intellectronica/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/beautiful-mermaid .agents/skills/beautiful-mermaid && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .agents/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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 intellectronica/agent-skills --skill beautiful-mermaid -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install intellectronica/agent-skills beautiful-mermaid --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/intellectronica/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/beautiful-mermaid .cursor/skills/beautiful-mermaid && 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 "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .cursor/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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/intellectronica/agent-skills.git --path skills/beautiful-mermaid--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 intellectronica/agent-skills --skill beautiful-mermaid -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install intellectronica/agent-skills beautiful-mermaid --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/intellectronica/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/beautiful-mermaid .gemini/skills/beautiful-mermaid && 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 "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .gemini/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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 intellectronica/agent-skills beautiful-mermaidInstalls 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 intellectronica/agent-skills --skill beautiful-mermaid -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/intellectronica/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/beautiful-mermaid .github/skills/beautiful-mermaid && 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 "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .github/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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 intellectronica/agent-skills --skill beautiful-mermaid -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install intellectronica/agent-skills beautiful-mermaid --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/intellectronica/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/beautiful-mermaid .opencode/skills/beautiful-mermaid && 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 "beautiful-mermaid" agent skill from https://github.com/intellectronica/agent-skills/tree/main/skills/beautiful-mermaid into .opencode/skills/beautiful-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "beautiful-mermaid", 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.
Facts
- Skill name
beautiful-mermaid- GitHub stars
- 295
- Used in
- 2 other repos
- Token cost
- ~1.3k tokens
- SKILL.md length
- 537 words
- Files
- 4 (incl. scripts, references)
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- CC0-1.0
At a glance
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.
- Works in 5 steps: Generate or Validate Mermaid Code → Render SVG → Create HTML Wrapper → …
- The user asks to render a Mermaid diagram
- SKILL.md covers Dependencies, Supported Diagram Types, Available Themes and Common Syntax Patterns, plus 4 more sections
- Runs TypeScript scripts from its folder; calls bun, npx and deno
What it does
Beautiful Mermaid is an agent skill from intellectronica/agent-skills. Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts and reference files (for example `references/mermaid-syntax.md`, `scripts/create-html.ts` and `scripts/render.ts`).
It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: @intellectronica's agent skills. The licence is CC0-1.0.
When your agent uses it
- The user asks to render a Mermaid diagram
- Tasks that involve Diagrams
Example prompts
- “/beautiful-mermaid”
Requirements
- Node.js
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 9b0e00a. 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 2 files in scripts/ (TypeScript), which the agent can run.
Shell commands in SKILL.md call:
bunnpxdeno
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
mermaid.live
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
Beautiful Mermaid loads about 1.3k tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 36 tokens; SKILL.md has 537 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.
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 intellectronica/agent-skills at commit 9b0e00a, republished under its CC0-1.0 licence (© intellectronica). 537 words, ~1,289 tokens.
Download SKILL.mdSave it as
.claude/skills/beautiful-mermaid/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- beautiful-mermaid
- description
- Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
Beautiful Mermaid Diagram Rendering
Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.
Dependencies
This skill requires the agent-browser skill for PNG rendering. Load it before proceeding with PNG capture.
Supported Diagram Types
- Flowchart - Process flows, decision trees, CI/CD pipelines
- Sequence - API calls, OAuth flows, database transactions
- State - State machines, connection lifecycles
- Class - UML class diagrams, design patterns
- Entity-Relationship - Database schemas, data models
Available Themes
Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.
If no theme is specified, use default.
Common Syntax Patterns
Flowchart Edge Labels
Use pipe syntax for edge labels:
A -->|label| B
A ---|label| BAvoid space-dash syntax which can cause incomplete renders:
A -- label --> B # May cause issuesNode Labels with Special Characters
Wrap labels containing special characters in quotes:
A["Label with (parens)"]
B["Label with / slash"]Workflow
Step 1: Generate or Validate Mermaid Code
If the user provides a description rather than code, generate valid Mermaid syntax. Consult references/mermaid-syntax.md for full syntax details.
Step 2: Render SVG
Run the rendering script to produce an SVG file:
bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme defaultOr from a file:
bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-nightAlternative runtimes:
npx tsx scripts/render.ts --code "..." --output diagram
deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagramThis produces <output>.svg in the current working directory.
Step 3: Create HTML Wrapper
Run the HTML wrapper script to prepare for screenshot:
bun run scripts/create-html.ts --svg diagram.svg --output diagram.htmlThis creates a minimal HTML file that displays the SVG with proper padding and background.
Step 4: Capture High-Resolution PNG with agent-browser
Use the agent-browser CLI to capture a high-quality screenshot. Refer to the agent-browser skill for full CLI documentation.
# Set 4K viewport for high-resolution capture
agent-browser set viewport 3840 2160
# Open the HTML wrapper
agent-browser open "file://$(pwd)/diagram.html"
# Wait for render to complete
agent-browser wait 1000
# Capture full-page screenshot
agent-browser screenshot --full diagram.png
# Close browser
agent-browser closeFor even higher resolution on complex diagrams, increase the viewport further or use the --padding option when creating the HTML wrapper to give the diagram more space.
Step 5: Clean Up Intermediary Files
After rendering, remove all intermediary files. Only the final .svg and .png should remain.
Files to clean up:
- The HTML wrapper file (e.g.,
diagram.html) - Any temporary
.mmdfiles created to hold diagram code - Any other files created during the rendering process
rm diagram.htmlIf a temporary .mmd file was created, remove it as well.
Show full SKILL.md (212 more words)Show less
Output
Both outputs are always produced:
- SVG: Vector format, infinitely scalable, small file size
- PNG: High-resolution raster, captured at 4K (3840×2160) viewport with minimum 1200px diagram width
Files are saved to the current working directory unless the user explicitly specifies a different path.
Theme Selection Guide
| Theme | Background | Best For |
|---|---|---|
| default | Light grey | General use |
| dracula | Dark purple | Dark mode preference |
| tokyo-night | Dark blue | Modern dark aesthetic |
| tokyo-night-storm | Darker blue | Higher contrast |
| nord | Dark arctic | Muted, calm visuals |
| nord-light | Light arctic | Light mode with soft tones |
| github-dark | GitHub dark | Matches GitHub UI |
| github-light | GitHub light | Matches GitHub UI |
| catppuccin-latte | Warm light | Soft pastel aesthetic |
| solarized | Tan/cream | Solarized colour scheme |
| one-dark | Atom dark | Atom editor aesthetic |
| zinc-dark | Neutral dark | Minimal, no colour bias |
Troubleshooting
Theme not applied
Check the render script output for the bg and fg values, or inspect the SVG's opening tag for --bg and --fg CSS custom properties.
Diagram appears cut off or incomplete
- Check edge label syntax — use
-->|label|pipe notation, not-- label --> - Verify all node IDs are unique
- Check for unclosed brackets in node labels
Render produces empty or malformed SVG
- Validate Mermaid syntax at https://mermaid.live before rendering
- Check for special characters that need escaping (wrap in quotes)
- Ensure flowchart direction is specified (
graph TD,graph LR, etc.)
© intellectronica, CC0-1.0. 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 3 other files (scripts, references) in skills/beautiful-mermaid of intellectronica/agent-skills.
- SKILL.md
- references/mermaid-syntax.md
- scripts/create-html.ts
- scripts/render.ts
Open the folder on GitHubat commit 9b0e00a
Used in 2 other repositories
We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in intellectronica/agent-skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Beautiful 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Beautiful Mermaid this skillintellectronica/agent-skills | 295 | 2 repos | ~1.3k | Automated safety check: Pass | CC0-1.0 | |
| 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 |
Similar skills
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.
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.
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.
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.
Mermaid
WH-2099/mermaid-skill
Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.
More from intellectronica/agent-skills
All 21 skills in this repoGpt Image 1 5
intellectronica/agent-skills
Generate and edit images using OpenAI's GPT Image 1.5 model.
Nano Banana 2
intellectronica/agent-skills
Generate and edit images using Google's Nano Banana 2 (Gemini 3.1 Flash Image Preview) API.
Nano Banana Pro
intellectronica/agent-skills
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API.
Notion API
intellectronica/agent-skills
This skill provides comprehensive instructions for interacting with the Notion API via REST calls.
Markdown Converter
intellectronica/agent-skills
Convert documents and files to Markdown using markitdown. An agent skill from intellectronica/agent-skills.
Youtube Transcript
intellectronica/agent-skills
Extract transcripts from YouTube videos. An agent skill from intellectronica/agent-skills.
Related
Works with
Categories
Questions about Beautiful Mermaid
What does Beautiful Mermaid do?
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Beautiful Mermaid is an agent skill from intellectronica/agent-skills. Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.
When should I use Beautiful Mermaid?
Beautiful Mermaid fits situations like: the user asks to render a Mermaid diagram; tasks that involve Diagrams.
How do I install Beautiful Mermaid in Claude Code?
Run `npx skills add intellectronica/agent-skills --skill beautiful-mermaid -a claude-code`. Or copy the skill folder (skills/beautiful-mermaid in intellectronica/agent-skills) into .claude/skills/beautiful-mermaid in your project. Claude Code loads it when a task matches its description.
How do I install Beautiful Mermaid in Codex?
Run `npx skills add intellectronica/agent-skills --skill beautiful-mermaid -a codex`. Or copy the skill folder (skills/beautiful-mermaid in intellectronica/agent-skills) into .agents/skills/beautiful-mermaid in your project. Codex loads it when a task matches its description.
Can I use Beautiful 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 intellectronica/agent-skills --skill beautiful-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/beautiful-mermaid, .gemini/skills/beautiful-mermaid, .github/skills/beautiful-mermaid and .opencode/skills/beautiful-mermaid in your project.
What does Beautiful Mermaid need to run?
Going by SKILL.md and its folder, Beautiful Mermaid needs TypeScript for the scripts in its folder and the command-line tools its instructions call (bun, npx and deno). Our summary lists: Node.js.
Does Beautiful Mermaid access the network?
SKILL.md names 1 domain. As links in the text: mermaid.live. This is read from the text; nothing was executed.
Is Beautiful 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Beautiful Mermaid use?
Beautiful Mermaid is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Beautiful Mermaid use?
About 1.3k tokens (SKILL.md is roughly 5.2k 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 1.1k tokens, read only when the agent opens those files.
What are the alternatives to Beautiful Mermaid?
Skills that share tags, products or a category with Beautiful Mermaid: 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 Beautiful Mermaid?
intellectronica (a GitHub user) maintains it in intellectronica/agent-skills, which has 295 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on April 25, 2026.
Source: intellectronica/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.