mcpField
B
beautiful-mermaid-ascii

beautiful-mermaid-ascii

github.com/ratacatDocuments5846 installsUpdated 37w ago
Repository

About beautiful-mermaid-ascii

A skill that renders Mermaid diagrams as terminal-friendly ASCII or Unicode art. It is for users who need to inspect diagrams from files, standard input, or Markdown without a graphical renderer.

Key features

  1. 01Render Mermaid as ASCII or Unicode
  2. 02Read files or standard input
  3. 03Extract diagrams from Markdown
  4. 04List and select fenced blocks
  5. 05Install renderer dependencies on demand

Use cases

  1. 01Inspect Mermaid diagrams in a terminal
  2. 02Render a diagram extracted from a README
  3. 03Check flowcharts in a text-only environment

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ratacat/claude-skills --skill beautiful-mermaid-ascii

After installing, type/beautiful-mermaid-asciiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

package.json
references/
mermaid-cheatsheet.md
mermaid-syntax-reference.md
notes.md
scripts/
install-mermaid-ascii
mermaid-ascii
mermaid-ascii.mjs

Details

From the project README

Beautiful Mermaid ASCII Rendering

Use lukilabs/beautiful-mermaid (a JS library, not a CLI) to turn Mermaid diagrams into terminal-friendly ASCII/Unicode art.

Quick start

Render a Mermaid file:

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii path/to/diagram.mmd

Install a clean mermaid-ascii command on your PATH (symlink into ~/.local/bin by default):

skills/beautiful-mermaid-ascii/scripts/install-mermaid-ascii

Render from stdin:

cat path/to/diagram.mmd | skills/beautiful-mermaid-ascii/scripts/mermaid-ascii

Render the first Mermaid fenced block from Markdown:

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --md README.md

Select a different fenced block (1-based):

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --md README.md --block 2

Installation approach (how this skill “deals with installing”)

scripts/mermaid-ascii auto-installs beautiful-mermaid into a writable cache directory (defaults to $XDG_CACHE_HOME/beautiful-mermaid-ascii, or /tmp/beautiful-mermaid-ascii) when needed, then runs the renderer.

If you want a “real” command on your PATH, prefer the symlink installer:

skills/beautiful-mermaid-ascii/scripts/install-mermaid-ascii

You can also install this folder as a local/global npm package (use a writable npm cache if your ~/.npm is not writable):

# from the repo root
NPM_CONFIG_CACHE=/tmp/npm-cache npm install -g --prefix ~/.local ./skills/beautiful-mermaid-ascii

If you already have beautiful-mermaid installed in the current project, run with:

skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --pkg-dir . path/to/diagram.mmd

Troubleshooting

  • If installs fail due to permission errors in ~/.npm or ~/Library/Caches, run with a writable cache directory:
    • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii --cache-dir /tmp/bm-cache ...
  • If output is empty, verify the Mermaid text is valid and starts with a diagram type (flowchart, sequenceDiagram, etc.).
  • For multiple diagrams in Markdown, use --list to enumerate fenced blocks and choose one with --block.

Bundled resources

  • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii: Shell wrapper that ensures dependencies are available, then renders.
  • skills/beautiful-mermaid-ascii/scripts/mermaid-ascii.mjs: Node CLI that extracts Mermaid (raw or from Markdown fences) and calls renderMermaidAscii.
  • skills/beautiful-mermaid-ascii/references/notes.md: Small notes about Mermaid inputs and common patterns.

Comments

Markdown supported