SkillFoxx

Pretty Mermaid skill

A skill that generates and renders Mermaid diagrams as SVG, PNG or ASCII: 15 themes and several diagram types, locally without a browser

  • 1,574 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The skill runs a local CLI and writes source and image files
All reasons and checks

imxv/pretty-mermaid-skillsAuthor:imxv

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/pretty-mermaid

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skill runs a local CLI and writes source and image files

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 theme

Limitations

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.

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.

Discussion

No questions or reviews yet.

Skills

A Claude Code skill that builds diagrams of 23 types from a syntax reference bundled in the repository, called with /mermaid.

SkillMinimal access300

termaid draws Mermaid diagrams right in Claude Code replies and in the terminal, 18 diagram types with no external dependencies.

PluginExtended access579

A skill that draws a clickable Mermaid diagram in HTML: how a feature, a data flow or database tables work, with code per node

SkillExtended access150

Oh-my-mermaid

oh-my-mermaid

Turns a codebase into Mermaid architecture diagrams for Claude Code: the /omm-scan command and the omm view viewer. The README is in five languages

SkillExtended access3.4K

Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style

SkillMinimal access671

A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks

SkillExtended access11.1K

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.

README badge

Original 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.

Report a problem