←Leaderboard/Diagramming/Pretty-mermaid-skills
Last commit on August 22, 2026·Created on January 30, 2026

imxv/Pretty-mermaid-skills

“Transforms Mermaid code into themed SVG, PNG, or terminal-friendly ASCII diagrams.”
Combined rank
#242
across all skills
In Diagramming
#9
category rank
Stars
1.5k
+1.7% in last 7d
Forks
74
+2.8% in last 7d
Watchers
6
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill enables technical writers and software engineers to render architecture visualizations, data models, and system workflows without a browser. It converts Mermaid syntax into scalable SVGs for documentation or Unicode art for terminal environments.

By providing fifteen built-in themes and custom color support, the tool streamlines the creation of consistent visual assets for READMEs, pull requests, and technical slides.

WHO IT'S FOR
Technical writers
generate themed SVG diagrams for READMEs and docs
Software architects
visualize data models and system workflows
DevOps / Platform engineers
render diagrams in CI pipelines and terminals
Backend engineers
document API interactions and state machines
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Install pretty-mermaid globally

Installs: Global installation of the pretty-mermaid skill.

Before you start
  • Node.js 16 or newer must already be installed.
  1. Run this command in a terminal to install pretty-mermaid globally.

    npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y
  2. Run this command in a terminal, then confirm that pretty-mermaid appears in the global skill list.

    npx skills list -g
README.md ↗ · Checked Oct 4, 2026www.skills.sh ↗ · Checked Oct 4, 2026SKILL.md ↗ · Checked Oct 4, 2026

Give it something to do.

Suggested first task

Create a small workflow diagram

Uses pretty-mermaid

  • Replace [workflow description] with a short process and its decisions.
  • Replace [output directory] with your desired output location.
  • Node.js 16 or newer; run bundled scripts from the directory containing SKILL.md or use absolute script paths.
Use pretty-mermaid to turn this workflow description into a small flowchart: [workflow description]. Save the Mermaid source and a themed SVG in [output directory], preserving my terminology and relationships. Inspect the rendering for unclear labels or crowded layout, and return the source and output paths plus the selected theme.
README.md ↗ · Checked Oct 4, 2026SKILL.md ↗ · Checked Oct 4, 2026
Suggested first task

Render an existing diagram as PNG

Uses pretty-mermaid

  • Replace [source .mmd path] with an existing Mermaid source file.
  • Replace [output .png path] with a new destination file path.
  • Node.js 16 or newer; run bundled scripts from the directory containing SKILL.md or use absolute script paths.
Use pretty-mermaid to render [source .mmd path] as a themed PNG at [output .png path]. Inspect the result for clipping, crowded layout, and unclear labels. Keep the existing source unchanged and return the output path and selected theme.
README.md ↗ · Checked Oct 4, 2026SKILL.md ↗ · Checked Oct 4, 2026