Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
imxv avatar

Pretty Mermaid

imxv/pretty-mermaid-skills

  • 3.3k installs
  • 795 repo stars
  • Updated January 31, 2026
  • imxv/pretty-mermaid-skills

pretty-mermaid is a skill that renders Mermaid diagrams as themed SVG or ASCII using beautiful-mermaid and bundled Node render scripts.

About

pretty-mermaid renders Mermaid diagrams as styled SVG or terminal ASCII using the beautiful-mermaid library and bundled Node scripts. Use it when users provide .mmd files, ask to beautify flowcharts, sequence, state, class, or ER diagrams, apply themes, or batch process multiple diagrams. Quick start runs scripts/render.mjs with --input, --output, --format svg or ascii, and --theme such as tokyo-night, dracula, or github-light. Batch rendering uses scripts/batch.mjs with --input-dir, --output-dir, --workers 4, and parallel workers up to 8 for ten or more files. The skill supports five diagram types with templates in assets/example_diagrams/, custom --bg --fg --accent colors, transparent backgrounds, custom fonts, and pure ASCII --use-ascii mode with padding controls. themes.mjs lists 15 themes including tokyo-night, catppuccin, nord, dracula, github-dark, and solarized variants. Workflow guidance picks diagram type from user requirements, iterates preview renders, and recommends keeping diagrams under 50 nodes for fast rendering. Troubleshooting covers beautiful-mermaid install, syntax validation against DIAGRAM_TYPES.md, and mermaid.live checks.

  • Renders five Mermaid types - flowchart, sequence, state, class, and ER - to SVG or ASCII via render.mjs.
  • Lists 15 beautiful-mermaid themes with tokyo-night recommended for dark docs and github-light for light mode.
  • batch.mjs parallelizes directory rendering with configurable workers defaulting to four.
  • Supports custom colors, transparent backgrounds, custom fonts, and pure ASCII terminal output.
  • Ships example templates in assets/example_diagrams/ plus DIAGRAM_TYPES.md and THEMES.md references.

Pretty Mermaid by the numbers

  • 3,307 all-time installs (skills.sh)
  • +35 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #120 of 1,879 Documentation skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

pretty-mermaid capabilities & compatibility

Capabilities
single and batch mermaid rendering · fifteen theme presets · svg and ascii output formats · custom color and font overrides · diagram type templates and syntax references
Use cases
documentation · frontend
From the docs

What pretty-mermaid says it does

Supports 15+ themes, 5 diagram types (flowchart, sequence, state, class, ER), and ultra-fast rendering.
SKILL.md
Total: 15 themes
SKILL.md
Keep diagrams under 50 nodes for fast rendering
SKILL.md
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.3k
repo stars★ 795
Security audit2 / 3 scanners passed
Last updatedJanuary 31, 2026
Repositoryimxv/pretty-mermaid-skills ↗

How do I render a Mermaid diagram with professional themes as SVG for docs or ASCII for terminal output?

Render Mermaid diagrams as themed SVG or ASCII using beautiful-mermaid scripts with batch processing and 15 theme options.

Who is it for?

Developers documenting architecture, API flows, or database schemas who need themed Mermaid SVG or terminal ASCII output.

Skip if: Skip when you need interactive diagram editors, non-Mermaid chart types, or image generation outside Mermaid syntax.

When should I use this skill?

User asks to render mermaid diagram, beautify flowchart, apply mermaid theme, batch process diagrams, or ASCII terminal diagram.

What you get

Themed SVG or ASCII diagram files produced from .mmd sources via render.mjs or batch.mjs scripts.

  • themed SVG diagrams
  • ASCII terminal diagrams

By the numbers

  • Supports 15+ themes
  • Covers 5 diagram types: flowchart, sequence, state, class, ER

Files

SKILL.mdMarkdownGitHub ↗

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:

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

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --format svg \
  --theme dracula \
  --workers 4

ASCII Output (Terminal-Friendly)

node scripts/render.mjs \
  --input diagram.mmd \
  --format ascii \
  --use-ascii

---

Workflow Decision Tree

Step 1: What does the user want?

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):

   cat > diagram.mmd << 'EOF'
   flowchart LR
       A[Start] --> B[End]
   EOF

2. Render with theme:

   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):

node scripts/render.mjs \
  --input diagram.mmd \
  --bg "#1a1b26" \
  --fg "#a9b1d6" \
  --accent "#7aa2f7" \
  --output custom.svg

Transparent Background:

node scripts/render.mjs \
  --input diagram.mmd \
  --transparent \
  --output transparent.svg

Custom Font:

node scripts/render.mjs \
  --input diagram.mmd \
  --font "JetBrains Mono" \
  --output custom-font.svg

---

Creating Diagrams

Using Templates

Step 1: List available templates

ls assets/example_diagrams/
# flowchart.mmd  sequence.mmd  state.mmd  class.mmd  er.mmd

Step 2: Copy and modify

cp assets/example_diagrams/flowchart.mmd my-workflow.mmd
# Edit my-workflow.mmd with user requirements

Step 3: Render

node scripts/render.mjs \
  --input my-workflow.mmd \
  --output my-workflow.svg \
  --theme github-dark

Diagram Type Reference

For detailed syntax and best practices, see DIAGRAM_TYPES.md.

Quick reference:

Flowchart - Processes, workflows, decision trees

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Sequence - API calls, interactions, message flows

sequenceDiagram
    User->>Server: Request
    Server-->>User: Response

State - Application states, lifecycle, FSM

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading
    Loading --> [*]

Class - Object models, architecture, relationships

classDiagram
    User --> Post: creates
    Post --> Comment: has

ER - Database schema, data models

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains

From User Requirements

Step 1: Identify diagram type

  • Process/workflow → Flowchart
  • API/interaction → Sequence
  • States/lifecycle → State
  • Object model → Class
  • Database → ER

Step 2: Create diagram file

cat > user-diagram.mmd << 'EOF'
# [Insert generated Mermaid code]
EOF

Step 3: Render and iterate

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

# Review with user, edit diagram.mmd if needed, re-render

---

Theming

List Available Themes

node scripts/themes.mjs

Output:

Available Beautiful-Mermaid Themes:

 1. zinc-light
 2. zinc-dark
 3. tokyo-night
 4. tokyo-night-storm
 5. tokyo-night-light
 6. catppuccin-mocha
 7. catppuccin-latte
 8. nord
 9. nord-light
10. dracula
11. github-dark
12. github-light
13. solarized-dark
14. solarized-light
15. one-dark

Total: 15 themes

Theme Selection Guide

For dark mode documentation:

  • tokyo-night ⭐ - Modern, developer-friendly
  • github-dark - Familiar GitHub style
  • dracula - Vibrant, high contrast
  • nord - Cool, minimalist

For light mode documentation:

  • github-light - Clean, professional
  • zinc-light - High contrast, printable
  • catppuccin-latte - Warm, friendly

Detailed theme information: See THEMES.md

Apply Theme to Diagram

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

Compare Themes

Render the same diagram with multiple themes:

for theme in tokyo-night dracula github-dark; do
  node scripts/render.mjs \
    --input diagram.mmd \
    --output "diagram-${theme}.svg" \
    --theme "$theme"
done

---

Batch Rendering

Batch Render Directory

Step 1: Organize diagrams

diagrams/
├── architecture.mmd
├── workflow.mmd
└── database.mmd

Step 2: Batch render

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme tokyo-night \
  --workers 4

Output:

Found 3 diagram(s) to render...
✓ architecture.mmd
✓ workflow.mmd
✓ database.mmd

3/3 diagrams rendered successfully

Batch with Multiple Formats

Render both SVG and ASCII:

# SVG for docs
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./svg \
  --format svg \
  --theme github-dark

# ASCII for README
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./ascii \
  --format ascii \
  --use-ascii

Performance Options

  • --workers N - Parallel rendering (default: 4)
  • Recommended: --workers 8 for 10+ diagrams

---

Common Use Cases

1. Architecture Diagram for Documentation

# User provides architecture description
# → Create flowchart.mmd
# → Render with professional theme

node scripts/render.mjs \
  --input architecture.mmd \
  --output docs/architecture.svg \
  --theme github-dark \
  --transparent

2. API Sequence Diagram

# User describes API flow
# → Create sequence.mmd
# → Render with clear theme

node scripts/render.mjs \
  --input api-flow.mmd \
  --output api-sequence.svg \
  --theme tokyo-night

3. Database Schema Visualization

# User provides table definitions
# → Create er.mmd
# → Render for database docs

node scripts/render.mjs \
  --input schema.mmd \
  --output database-schema.svg \
  --theme dracula

4. Terminal-Friendly Workflow

# For README or terminal display
node scripts/render.mjs \
  --input workflow.mmd \
  --format ascii \
  --use-ascii > workflow.txt

5. Presentation Slides

# High-contrast for projectors
node scripts/render.mjs \
  --input slides-diagram.mmd \
  --output presentation.svg \
  --theme zinc-light

---

Troubleshooting

beautiful-mermaid Not Installed

Error: Cannot find module 'beautiful-mermaid'

Note: This should auto-install on first run. If it fails:

cd /path/to/pretty-mermaid-skill && npm install

Invalid Mermaid Syntax

Error: Parse error on line 3

Solution: 1. Validate syntax against DIAGRAM_TYPES.md 2. Test on https://mermaid.live/ 3. Check for common errors:

  • Missing spaces in A --> B
  • Incorrect node shape syntax
  • Unclosed brackets

File Not Found

Error: Input file not found: diagram.mmd

Solution: Verify file path is correct, use absolute path if needed

---

Resources

scripts/

Executable Node.js scripts for rendering operations:

  • render.mjs - Main rendering script
  • batch.mjs - Batch processing script
  • themes.mjs - Theme listing utility

references/

Documentation to inform diagram creation:

  • THEMES.md - Detailed theme reference with examples
  • DIAGRAM_TYPES.md - Comprehensive syntax guide for all diagram types
  • api_reference.md - beautiful-mermaid API documentation

assets/

Template files for quick diagram creation:

  • example_diagrams/flowchart.mmd - Flowchart template
  • example_diagrams/sequence.mmd - Sequence diagram template
  • example_diagrams/state.mmd - State diagram template
  • example_diagrams/class.mmd - Class diagram template
  • example_diagrams/er.mmd - ER diagram template

---

Tips & Best Practices

Performance

  • Batch render for 3+ diagrams (parallel processing)
  • Keep diagrams under 50 nodes for fast rendering
  • Use ASCII for quick previews

Quality

  • Use tokyo-night or github-dark for technical docs
  • Add transparency for dark/light mode compatibility: --transparent
  • Test theme in target environment before batch rendering

Workflow

1. Start with templates from assets/example_diagrams/ 2. Iterate with user feedback 3. Apply theme last 4. Render both SVG (docs) and ASCII (README) if needed

Accessibility

  • Use high-contrast themes for presentations
  • Add text labels to all connections
  • Avoid color-only information encoding

Related skills

open.feishu.cnLark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.488klarksuiteLark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.401k16.1klarksuiteLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.397k16.1kmattpocockDomain ModelingBuild and sharpen a project's domain model: pin down domain terminology in a glossary and record architectural decisions as ADRs.318k202kxixu-meOpensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k71xixu-meReadme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k71

Forks & variants (1)

Pretty Mermaid has 1 known copy in the catalog totaling 50 installs. They canonicalize to this original listing.

How it compares

Choose pretty-mermaid when you already have Mermaid source and need themed SVG or ASCII output; use a C4-from-code skill when diagrams must be inferred from a repository.

FAQ

How many themes does pretty-mermaid support?

Fifteen themes including tokyo-night, dracula, github-dark, github-light, nord, catppuccin, and solarized variants listed by themes.mjs.

Can pretty-mermaid batch render a folder of diagrams?

Yes. batch.mjs accepts --input-dir and --output-dir with --workers for parallel SVG or ASCII rendering.

Which diagram types are supported?

Flowchart, sequence, state, class, and ER diagrams with templates in assets/example_diagrams/.

Is Pretty Mermaid safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Documentationdocs
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.