Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Pretty Mermaid · imxv | DecimalAI

imxv/pretty-mermaid

SkillScore77Maintained

Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model visualization; or wants to beautify, theme, batch-convert, or make a diagram terminal-friendly. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.

Documentationby imxv

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Doc Ops pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/imxv-pretty-mermaid/SKILL.md

decimalai skills pull imxv-pretty-mermaid --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/imxv-pretty-mermaid/SKILL.md https://app.decimal.ai/s/imxv-pretty-mermaid/SKILL.md

Raw file: /s/imxv-pretty-mermaid/SKILL.md ↗ · machine-readable summary at /s/imxv-pretty-mermaid.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 33h ago

—+64% tokens0% turns77% of whole cases pass with skill (17/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-10	✗→✓	▲ Improved	52%	0%
case-11	✗→✓	▲ Improved	4%	0%
case-12	✗→✓	▲ Improved	16%	0%
case-16	✗→✓	▲ Improved	146%	0%
case-18	✗→✓	▲ Improved	7%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/25/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

imxv / pretty-mermaid-skills

SKILL.md

View on GitHub ↗

License MITImported 8/25/2026Version v1

Skill contents

SKILL.md

Pretty Mermaid

Create or render Mermaid diagrams with the bundled Node.js CLI. Use SVG for scalable documentation, PNG for sharing or raster-only consumers, and ASCII or Unicode for terminals and plain text.

Working directory

Treat the directory containing this file as <skill-root>. Run bundled scripts from that directory, or invoke them with absolute paths. Keep user source and rendered output in the user's requested location; do not copy the renderer into their project.

Workflow

Determine whether the user supplied Mermaid source or needs a diagram authored from prose.
Choose the diagram type and output format from the tables below.
Read only the relevant reference file when syntax, theme selection, or API behavior needs more detail.
Save new source as a .mmd file, preserving user terminology and relationships.
Render with a named theme or explicit colors.
Inspect the result. Fix syntax, clipping, crowded layout, or unclear labels and render again.
Return the source and output paths, plus the selected format and theme.

Do not overwrite an existing source or output file unless the user asked for replacement.

Choose a diagram type

| Need | Diagram type | Starter | | --- | --- | --- | | Process, decision tree, architecture | Flowchart | flowchart LR | | API calls, messages, interactions | Sequence | sequenceDiagram | | Lifecycle or finite-state machine | State | stateDiagram-v2 | | Classes, modules, relationships | Class | classDiagram | | Database entities and cardinality | ER | erDiagram | | Bars, lines, trends, comparisons | XY chart | xychart-beta |

Read references/DIAGRAM_TYPES.md when authoring non-trivial Mermaid syntax.

Choose an output

| Output | Best for | Notes | | --- | --- | --- | | SVG | READMEs, docs, slides, websites | Scalable, themed, supports transparency | | PNG | Chats, previews, raster-only tools | Set --format png; no external converter required | | Unicode | Modern terminals and readable text previews | Default ASCII renderer output | | Plain ASCII | Logs and restricted terminals | Add --use-ascii | | ANSI-colored text | Interactive terminals | Set --color-mode |

Core commands

Run these from <skill-root>.

List themes

bash
node scripts/themes.mjs

Render SVG

bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.svg \
  --theme tokyo-night

Render terminal text

bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.txt \
  --format ascii \
  --color-mode none

Add --use-ascii when Unicode box-drawing characters are not acceptable.

Render PNG

bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.png \
  --format png \
  --width 1200 \
  --theme tokyo-night

Batch render a directory

bash
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme github-dark \
  --workers 4

Use batch rendering for three or more diagrams or when consistent options must be applied to a directory.

Theme selection

General dark documentation: tokyo-night
GitHub dark or light surfaces: github-dark, github-light
Print and presentations: zinc-light
High-contrast color: dracula
Cool, restrained palette: nord, nord-light

Read references/THEMES.md or open docs/THEME_GALLERY.md when visual theme choice matters. A named theme can be refined with explicit color flags.

Useful options

Shared styling

| Option | Purpose | | --- | --- | | --theme <name> | Apply one of the 15 built-in themes | | --bg, --fg | Set required base colors | | --line, --accent, --muted | Refine connectors, highlights, and secondary text | | --surface, --border | Refine node fill and stroke | | --font <name> | Set the SVG font family |

SVG

| Option | Purpose | | --- | --- | | --transparent | Remove the SVG background | | --padding <n> | Set canvas padding | | --node-spacing <n> | Set horizontal node spacing | | --layer-spacing <n> | Set vertical layer spacing | | --component-spacing <n> | Separate disconnected components | | --interactive | Enable XY chart hover tooltips |

PNG

| Option | Purpose | | --- | --- | | --width <n> | Set output width from 100 to 10000 pixels while preserving aspect ratio | | --transparent | Preserve a transparent background |

Terminal output

| Option | Purpose | | --- | --- | | --use-ascii | Replace Unicode box drawing with plain ASCII | | --padding-x, --padding-y | Tune diagram spacing | | --box-border-padding | Tune padding inside node boxes | | --color-mode <mode> | none, auto, ansi16, ansi256, truecolor, or html |

Run node scripts/render.mjs --help or node scripts/batch.mjs --help for the authoritative CLI list.

Authoring guidance

Prefer short, concrete labels; preserve domain-specific terms from the user.
Use explicit edge labels when a branch or message is ambiguous.
Keep large diagrams readable by splitting unrelated concerns instead of shrinking text.
Use LR for wide flows and TB for narrow documents.
Avoid communicating meaning through color alone.
Use a light theme for print and confirm contrast against the final background.
For unfamiliar syntax, start from assets/example_diagrams/ and consult the diagram reference.

Validation

After rendering:

Confirm the command exits successfully and the output file is non-empty.
Confirm SVG output begins with <svg; confirm PNG output opens as a valid image; confirm text output contains visible diagram content.
Inspect visual output when layout matters, especially long labels, CJK text, disconnected components, and XY charts.
Confirm arrows, cardinalities, states, and labels match the source request.
Report any renderer limitation instead of silently dropping unsupported syntax.

Run both npm test and npm run validate when changing this skill, its scripts, templates, or references.

Troubleshooting

Missing dependency: run npm install in <skill-root>; the CLI also attempts a first-run install.
Unknown theme: run node scripts/themes.mjs and use an exact listed name.
Parse error: consult references/DIAGRAM_TYPES.md, reduce to the failing statement, then restore the diagram incrementally.
Crowded SVG: increase --node-spacing, --layer-spacing, or --component-spacing.
PNG color error: use concrete hex values for custom colors; unresolved external CSS variables cannot be rasterized.
Terminal color escape codes in redirected output: use --color-mode none.

Reference routing

| Resource | Read or use when | | --- | --- | | references/DIAGRAM_TYPES.md | Authoring or debugging Mermaid syntax | | references/THEMES.md | Comparing themes or defining custom colors | | references/api_reference.md | Extending scripts or calling beautiful-mermaid directly | | docs/THEME_GALLERY.md | Choosing a theme visually | | assets/example_diagrams/ | Starting from a supported diagram template | | scripts/render.mjs | Rendering one diagram | | scripts/batch.mjs | Rendering a directory in parallel | | scripts/themes.mjs | Listing installed themes |

Illustrative Want to see what imxv/pretty-mermaid would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/25/2026, 16:06 UTC · 22 cases

Measured on 19 comparable cases — below the 22 needed to publish a lift, so this result is shown here but not on the registry card or leaderboard.

Lift

+32%

77% vs 45%

Agent turns

1.0 vs 1.0

Tokens

+64%

2,562.26 vs 1,563.68

fail → pass · 7pass → pass · 10fail → fail · 5

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I wrote out a breakdown of our microservice authentication flow below: User sends credentials to API Gateway, Gateway validates with Auth Service, Auth Service returns JWT, Gateway forwards request to Order Service. Please create a visual diagram from this description suitable for our dark-mode web documentation. Save the diagram files in `./docs/architecture` and let me know the paths to the source file and rendered output, along with the output format and theme you picked.	fail→fail	11,855	28,844	+143%	1	1	0%	467	2,210	+373%	0	0	—
case-02 We have four database schema files (`.mmd`) sitting in `./schemas/db/`. I need you to convert all of them into PNG images in `./dist/png/` so I can drop them into Slack. Make sure they are high quality with readable labels and dark backgrounds. When done, list out the resulting source and rendered paths for each diagram, along with the format and theme used.	fail→fail	8,305	8,091	-3%	1	1	0%	318	2,167	+581%	0	0	—
case-03 Can you convert this order status lifecycle into a state diagram? An order starts as Created, transitions to PaymentPending, then moves to Processing upon payment, and finally Shipped or Cancelled. I want to inspect this directly inside my terminal console without graphics or external viewers. Please generate the diagram source and render it to a text file in `./build/logs/`, returning the path to the source file, the path to the text file, and details on the format and theme.	fail→fail	11,363	11,749	+3%	1	1	0%	435	2,205	+407%	0	0	—
case-04 We have a legacy Graphviz DOT diagram file `network_topology.dot` describing our router connections. We need to compile it to a PNG using the `dot` command-line utility with custom DPI settings. How should we execute Graphviz dot directly to output this PNG?	pass→pass	6,335	6,751	+7%	1	1	0%	934	2,902	+211%	0	0	—
case-05 We have an SVG image `logo.svg` containing raw `<path>` vectors. We need to reduce its file size by running SVGO to strip metadata and round path coordinates. Which SVGO command flags should we pass to optimize this SVG file?	pass→pass	11,321	11,139	-2%	1	1	0%	1,779	3,427	+93%	0	0	—
case-06 Our team maintains a `component_architecture.puml` file written in PlantUML markup. We want to convert this file into an SVG vector diagram using the standard PlantUML Java JAR executable (`plantuml.jar`). What command should we run?	pass→pass	10,020	5,608	-44%	1	1	0%	551	2,446	+344%	0	0	—
case-07 I am drafting an architectural flowchart showing how user requests pass from the load balancer to the web app and then to the database. The flowchart needs to be rendered horizontally for a wide web README document. What starter syntax and rendering options should be used for this wide SVG diagram?	fail→fail	20,829	7,365	-65%	1	1	0%	2,187	2,750	+26%	0	0	—
case-08 We need a visual representation of our object-oriented class hierarchy, showing classes `User`, `Admin`, and `Customer` with inheritance and property methods. Which diagram type declaration should start the `.mmd` source file?	pass→pass	3,879	6,682	+72%	1	1	0%	445	2,487	+459%	0	0	—
case-09 I want to document our PostgreSQL relational schema with entities `Customer`, `Order`, and `OrderItem`, showing one-to-many cardinalities. What is the appropriate Mermaid diagram type for entity-relationship models, and which starter tag should be placed at the top of the file?	pass→pass	5,451	4,026	-26%	1	1	0%	762	2,455	+222%	0	0	—
case-10 We need a bar chart visualizing monthly revenue trends over Q1-Q4. We want to render this chart as an SVG file where users can interactively hover over data points in the browser. Which Mermaid diagram starter tag is used for XY charts, and what option enables the interactive tooltips?	fail→pass	19,848	8,561	-57%	1	1	0%	2,114	3,210	+52%	0	0	—
case-11 We are rendering a flowchart to a log file for an old legacy terminal that lacks support for Unicode box-drawing characters (UTF-8). How do we render the diagram using the CLI so that only plain ASCII characters are output without special symbols or ANSI color codes?	fail→pass	15,989	12,456	-22%	1	1	0%	2,475	2,583	+4%	0	0	—
case-12 I need to render a sequence diagram as a PNG image with a specific custom hex color palette for our brand: `#1e1e2e` for the base background and `#cdd6f4` for foreground text. How should custom hex colors be specified when rendering with `render.mjs`?	fail→pass	33,214	8,888	-73%	1	1	0%	2,859	3,320	+16%	0	0	—
case-13 When rendering our large system architecture flowchart to SVG, the nodes are overlapping vertically and the horizontal connectors are severely crowded. Which CLI options in `render.mjs` allow us to increase the horizontal node spacing and vertical layer spacing?	pass→pass	15,735	135,553	+761%	1	1	0%	2,096	2,383	+14%	0	0	—
case-14 Before picking a theme for our diagram documentation, I want to see a full list of all 15 built-in themes supported by the renderer CLI script. What exact command lists these available themes?	fail→fail	13,379	4,215	-68%	1	1	0%	2,041	2,331	+14%	0	0	—
case-15 We are rendering architectural diagrams specifically to embed inside GitHub repository READMEs in dark mode. Which built-in theme name is tailored for GitHub dark surfaces?	pass→pass	10,525	3,069	-71%	1	1	0%	1,558	2,153	+38%	0	0	—
case-16 We are preparing high-contrast diagrams to print on paper and project in bright presentation rooms. Which built-in theme is specifically recommended for print and presentations?	fail→pass	80,070	22,467	-72%	1	1	0%	924	2,274	+146%	0	0	—
case-17 We are embedding rendered SVG diagrams into an existing website layout with a custom gradient background. We need the SVG diagram background to be fully transparent so the website gradient shows through. Which flag removes the SVG background fill?	pass→pass	21,196	4,572	-78%	1	1	0%	1,313	2,225	+69%	0	0	—
case-18 Our team has a directory containing 5 separate Mermaid `.mmd` diagram files that all need to be rendered using the `github-light` theme into SVG format. What script and options should be used to render this set of diagrams efficiently?	fail→pass	21,503	9,925	-54%	1	1	0%	2,447	2,622	+7%	0	0	—
case-19 A complex sequence diagram `.mmd` file is failing to parse during render execution. Following the recommended troubleshooting steps, what is the initial approach to isolate and fix the syntax error?	fail→pass	33,689	13,451	-60%	1	1	0%	1,884	2,553	+36%	0	0	—
case-20 When attempting to run `node scripts/render.mjs` on a fresh environment, the execution fails because required NPM modules are not found in the local environment. What command should be executed inside the root directory to install the necessary CLI dependencies?	pass→pass	4,560	4,384	-4%	1	1	0%	474	2,103	+344%	0	0	—
case-21 I want to extend the rendering pipeline programmatically by invoking `beautiful-mermaid` directly from my own Node.js module rather than through the CLI scripts. Which reference file contains the documentation for extending scripts or calling the underlying API directly?	fail→pass	41,340	3,356	-92%	1	1	0%	1,679	2,248	+34%	0	0	—
case-22 I am running a script to output rendered SVG diagrams. There is already an existing output file named `architecture.svg` in the target folder that the user has not asked to overwrite. What rule governs how existing source or output files should be handled?	pass→pass	10,347	4,480	-57%	1	1	0%	1,188	2,211	+86%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 19 counted toward the lift figure. The other 3 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +32 percentage points is the difference between those two pass rates over the 19 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 45.5%
Pass rate with the skill: 77.3%
Cases attempted: 22
Cases counted toward lift: 19
Cases that regressed: 0
Skill version measured: v1
Run completed: 9/25/2026, 16:06 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-10

Prompt

We need a bar chart visualizing monthly revenue trends over Q1-Q4. We want to render this chart as an SVG file where users can interactively hover over data points in the browser. Which Mermaid diagram starter tag is used for XY charts, and what option enables the interactive tooltips?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run77

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+123% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested yesterday

Other measured skills in the registry, with their headline benchmark lift.