Pretty Mermaid
Turn Mermaid source into polished SVG or terminal ASCII diagrams with themes and batch rendering for specs and READMEs.
Overview
Pretty Mermaid is an agent skill most often used in Build (also Ship, Validate) that renders Mermaid diagrams to themed SVG or ASCII using bundled Node scripts and beautiful-mermaid.
Install
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaidWhat is this skill?
- CLI render and batch scripts with format, theme, and worker flags
- 15+ visual themes plus SVG and ASCII (--use-ascii) output modes
- Five diagram types: flowchart, sequence, state, class, and ER
- Workflow decision tree for single render, batch dirs, or beautify existing .mmd files
- Ultra-fast rendering via the beautiful-mermaid library
- 15+ diagram themes
- 5 diagram types (flowchart, sequence, state, class, ER)
Adoption & trust: 2.9k installs on skills.sh; 742 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have Mermaid source but default renders look plain, batching many .mmd files is tedious, and you need both web-ready SVG and terminal-friendly ASCII from one workflow.
Who is it for?
Solo builders documenting architecture, APIs, or ops flows who want repeatable CLI rendering with themes and batch folders.
Skip if: Teams that only need live Mermaid preview inside a hosted wiki with no local scripts, or pure GUI diagramming with no .mmd source.
When should I use this skill?
User asks to render a Mermaid diagram, provides .mmd files, wants flowchart/sequence/state diagrams, apply a theme, batch process diagrams, or ASCII/terminal-friendly output.
What do I get? / Deliverables
You get consistently styled diagram files (or ASCII output) from single files or whole directories, ready to drop into docs, PRs, or READMEs.
- SVG or ASCII diagram files from render.mjs
- Batch-rendered output directory from batch.mjs
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Architecture and workflow visuals belong on the canonical Build → docs shelf where solo builders document systems before and while shipping. The skill outputs diagram assets for markdown, wikis, and terminals—not application UI code—so docs is the primary subphase.
Where it fits
Sketch a user onboarding flowchart in Mermaid to align scope before coding the SaaS.
Render ER and sequence diagrams for API docs with a consistent tokyo-night theme.
Regenerate SVG diagrams in a PR so reviewers see updated architecture visuals.
Batch-refresh ops runbook diagrams after a workflow change across many .mmd files.
How it compares
Use instead of pasting raw Mermaid into docs when you want themed SVG/ASCII and scripted batch renders from the repo.
Common Questions / FAQ
Who is pretty-mermaid for?
Indie developers and agent users who maintain Mermaid (.mmd) diagrams in git and want fast, themed SVG or ASCII output from the terminal.
When should I use pretty-mermaid?
Use it in Build when writing architecture docs, in Ship when polishing README diagrams, in Validate when visualizing a scoped workflow, or whenever a user asks to render, beautify, or batch-process Mermaid—including ASCII for terminals.
Is pretty-mermaid safe to install?
Review the Security Audits panel on this Prism page for upstream risk signals; the skill runs local Node scripts on your filesystem—inspect scripts before executing in sensitive environments.
SKILL.md
READMESKILL.md - Pretty Mermaid
# Pretty Mermaid Render stunning, professionally-styled Mermaid diagrams with one command. Supports SVG for web/docs and ASCII for terminals. ## Quick Start ### Render a Single Diagram **From a file:** ```bash node scripts/render.mjs \ --input diagram.mmd \ --output diagram.svg \ --format svg \ --theme tokyo-night ``` **From user-provided Mermaid code:** 1. Save the code to a `.mmd` file 2. Run the render script with desired theme ### Batch Render Multiple Diagrams ```bash node scripts/batch.mjs \ --input-dir ./diagrams \ --output-dir ./output \ --format svg \ --theme dracula \ --workers 4 ``` ### ASCII Output (Terminal-Friendly) ```bash node scripts/render.mjs \ --input diagram.mmd \ --format ascii \ --use-ascii ``` --- ## Workflow Decision Tree **Step 1: What does the user want?** - **Render existing Mermaid code** → Go to [Rendering](#rendering-diagrams) - **Create new diagram** → Go to [Creating](#creating-diagrams) - **Apply/change theme** → Go to [Theming](#theming) - **Batch process** → Go to [Batch Rendering](#batch-rendering) **Step 2: Choose output format** - **SVG** (web, docs, presentations) → `--format svg` - **ASCII** (terminal, logs, plain text) → `--format ascii` **Step 3: Select theme** - **Dark mode docs** → `tokyo-night` (recommended) - **Light mode docs** → `github-light` - **Vibrant colors** → `dracula` - **See all themes** → Run `node scripts/themes.mjs` --- ## Rendering Diagrams ### From File When user provides a `.mmd` file or Mermaid code block: 1. **Save to file** (if code block): ```bash cat > diagram.mmd << 'EOF' flowchart LR A[Start] --> B[End] EOF ``` 2. **Render with theme**: ```bash node scripts/render.mjs \ --input diagram.mmd \ --output diagram.svg \ --theme tokyo-night ``` 3. **Verify output**: - SVG: Open in browser or embed in docs - ASCII: Display in terminal ### Output Formats **SVG (Scalable Vector Graphics)** - Best for: Web pages, documentation, presentations - Features: Full color support, transparency, scalable - Usage: `--format svg --output diagram.svg` **ASCII (Terminal Art)** - Best for: Terminal output, plain text logs, README files - Features: Pure text, works anywhere, no dependencies - Usage: `--format ascii` (prints to stdout) - Options: - `--use-ascii` - Use pure ASCII (no Unicode) - `--padding-x 5` - Horizontal spacing - `--padding-y 5` - Vertical spacing ### Advanced Options **Custom Colors** (overrides theme): ```bash node scripts/render.mjs \ --input diagram.mmd \ --bg "#1a1b26" \ --fg "#a9b1d6" \ --accent "#7aa2f7" \ --output custom.svg ``` **Transparent Background**: ```bash node scripts/render.mjs \ --input diagram.mmd \ --transparent \ --output transparent.svg ``` **Custom Font**: ```bash node scripts/render.mjs \ --input diagram.mmd \ --font "JetBrains Mono" \ --output custom-font.svg ``` --- ## Creating Diagrams ### Using Templates **Step 1: List available templates** ```bash ls assets/example_diagrams/ # flowchart.mmd sequence.mmd state.mmd class.mmd er.mmd ``` **Step 2: Copy and modify** ```bash cp assets/example_diagrams/flowchart.mmd my-workflow.mmd # Edit my-workflow.mmd with user requirements ``` **Step 3: Render** ```bash node scripts/render.mjs \ --input my-workflow.mmd \