zinc-light
Theme preview, source.mmd
Skill explainer · imxv/Pretty-mermaid-skills
Pretty Mermaid
Mermaid to themed SVG, PNG or terminal text, with no browser in the loop.
A small Node skill over the beautiful-mermaid renderer: six diagram types, fifteen themes, three output formats and a batch runner. I read the skill, ran its smoke test and doc validator, and rendered every example in every format. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.
e234ab7commit, 23 Aug 2026
6diagram types
15themes
3formats
7scripts
18/18example renders
Who it is for
Anyone putting diagrams in READMEs, PRs, chats or terminals.
What you get
A .mmd source plus an SVG, PNG or text render in the place you asked.
How It Works
Write The Source, Render, Then Look At It
A seven-step loop, from SKILL.md.
1
Source first. Save new source as a .mmd file, preserving user terminology and relationships.
2
Render. Render with a named theme or explicit colors.
3
Inspect. Inspect the result. Fix syntax, clipping, crowded layout, or unclear labels and render again.
4
Don’t clobber. Do not overwrite an existing source or output file unless the user asked for replacement.
5
Be honest about limits. Report any renderer limitation instead of silently dropping unsupported syntax.
Types And Outputs
Six Types, Five Outputs
Each type’s How it works lists the best practices from DIAGRAM_TYPES.md, checked at build time.
The Themes
Fifteen Themes, Two Required Colors
Swatches are the colors in the renderer’s code. Where THEMES.md’s quick table disagrees, it says so.
Gallery
21 Renders
The repo’s 15 theme previews and the six examples rendered on this box. Click to enlarge.
zinc-dark
Theme preview, source.mmd
tokyo-night
Theme preview, source.mmd
tokyo-night-storm
Theme preview, source.mmd
tokyo-night-light
Theme preview, source.mmd
catppuccin-mocha
Theme preview, source.mmd
catppuccin-latte
Theme preview, source.mmd
nord
Theme preview, source.mmd
nord-light
Theme preview, source.mmd
dracula
Theme preview, source.mmd
github-light
Theme preview, source.mmd
github-dark
Theme preview, source.mmd
solarized-light
Theme preview, source.mmd
solarized-dark
Theme preview, source.mmd
one-dark
Theme preview, source.mmd
Flowchart
Example diagram, box render
Sequence
Example diagram, box render
State
Example diagram, box render
Class
Example diagram, box render
ER
Example diagram, box render
XY chart
Example diagram, box render
The Scripts
Seven Scripts, All Run
Run on a copy of the repo in /tmp with nice and timeout.
What I Found Running It
It Renders Well; The Guard Rails Are In Prose
All runs at commit e234ab7, Node 20.
| Run | Result | Note |
|---|---|---|
| npm test | pass | 6 diagrams × 3 formats, 15 themes. |
| npm run validate | pass | 14 Markdown files. |
| 18 example renders | 18/18 exit 0 | SVG, PNG and Unicode for each type. |
| batch, 4 workers | 6/6 | |
| First run without node_modules | crash | ERR_MODULE_NOT_FOUND for @resvg/resvg-js; no auto-install. |
| git status of the original | clean | All runs were on copies. |
Bug The first-run auto-install never runs
render.mjs statically imports png.mjs, which imports @resvg/resvg-js. Without node_modules, Node fails at load time, before loadBeautifulMermaid() can run npm install. SKILL.md says “the CLI also attempts a first-run install”.
Gap No overwrite guard in the CLI
SKILL.md forbids overwriting; render.mjs overwrites silently. The rule depends on the agent.
Gap Bad syntax can render
A --> with no target produced an SVG and exit 0, so “confirm the command exits successfully” is not enough.
Gap THEMES.md is Chinese, and its table is off
The routed theme reference is in Chinese, and its quick table lists the accent as the foreground for several themes (e.g. tokyo-night-light #34548a vs fg #343b58 in code).
Copy No browser
resvg rasterizes the SVG, so PNG works in CI and sandboxes.
Copy A validator for the docs
validate-docs checks the Markdown, the SKILL.md length and that every theme has a preview.
Build Your Own
What To Steal
Route by need, then by output. Two small tables pick the type and the format.
Make the agent look at the render. Inspection is a step, not an afterthought.
Ship starters. One working example per type.
Keep the loader lazy. If you promise auto-install, import heavy dependencies after the check.
Sources
Everything Here Is Checked
Each quote on this page is compared with its source file at build time; the build fails on any mismatch.