Pretty Mermaid
A skill that generates and renders Mermaid diagrams as SVG, PNG or ASCII: 15 themes and several diagram types, locally without a browser
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- The skill runs a local CLI and writes source and image files
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/pretty-mermaidDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add imxv/pretty-mermaid-skills --skill pretty-mermaid -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Install the skill: npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y, then ask it to draw or render a Mermaid diagram.
Other ways from the author
npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -yRequires Node.js; the bundled CLI installs with the skill.
This is third-party code. Review the repository files before installing.
What it does
The skill takes Mermaid code or a text description and turns it into a clean diagram. It picks the diagram type and output format, saves the source as .mmd and renders it through a bundled Node.js CLI. It supports SVG for documentation, PNG for sharing and ASCII or Unicode for terminals and chats. Rendering runs locally, without a browser or DOM, with built-in themes and custom colors.
Who it is for. For developers and technical writers who need diagrams in docs, READMEs and pull requests.
Good fit when
- You have Mermaid code or a .mmd file and need a clean render
- You need an architecture or process diagram from a text description
- You need a terminal or chat diagram as ASCII
Not a fit when
- You need interactive graphics or complex design beyond Mermaid
- You need a diagram editor with manual drag and drop
Example request
Draw this process as a Mermaid diagram and give me an SVG with a dark themeLimitations
The skill works within Mermaid's diagram types and syntax and does not go beyond them. Rendering needs Node.js, and the bundled CLI installs with the skill. The number of themes and diagram types is limited to the repository's set.
How to disable. Remove the skill via npx skills remove or delete its folder from the agent's skills directory.
Security check
- The skill runs a local CLI and writes source and image files
README in short
The README describes a skill for generating and rendering Mermaid diagrams through a bundled Node.js CLI. The skill picks the diagram type and format, saves the source as .mmd and outputs SVG, PNG or ASCII with a set of themes. Everything runs locally, without a browser. The skill installs via the skills installer and fits Claude Code, Cursor, Codex, Gemini CLI and other agents. MIT licensed.
SKILL.md
--- name: pretty-mermaid description: | Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, or architecture/workflow visualization. Runs locally without a browser or DOM, with 15 built-in themes and custom colors. --- # Pretty Mermaid Create or render Mermaid diagrams with the bundled Node.js CLI. Use SVG for scalable documentation, PNG for sharing, and ASCII or Unicode for terminals and plain text.
FAQ
Do I need a browser to render?
No, the bundled CLI renders locally on Node.js without a browser or DOM.
What output formats are supported?
SVG for docs, PNG for sharing, and ASCII or Unicode for terminals and text chats.
Related
A skills library that gives coding agents a development process: brainstorming, planning, TDD, subagents and code review
Skills for real engineers by Matt Pocock
Skills For Real Engineers
Small composable skills for engineering with agents: plan grilling, TDD, bug diagnosis, code review and architecture
GitHub toolkit for spec-driven development: the specify CLI adds agent commands and skills to a project, from principles to implementation
Reference MCP servers
Model Context Protocol servers
Official reference MCP servers: Filesystem, Fetch, Git, Memory, Sequential Thinking, Time and Everything