Beautiful Mermaid Renderer

beautiful-mermaid-renderer

Render Mermaid diagrams using beautiful-mermaid as Unicode/ASCII (terminal/chat) or SVG (rich UI). Use when you need a quick, good-looking diagram preview in plain text or want to generate an SVG from Mermaid source (Bun preferred).

diegosouzapw/awesome-omni-skill·0installs62starsProductivity & Planning

SKILL.md

Full skill instructions

Beautiful Mermaid Renderer

Overview

Render Mermaid source into Unicode/ASCII box-drawing diagrams for terminal/chat output, or into SVG for embedding in docs/UIs.

Quick start (Bun)

Install dependencies (one-time per machine):

cd ~/.codex/skills/beautiful-mermaid-renderer && bun install

Render Unicode (default) to stdout:

cat diagram.mmd | ./scripts/render.sh --format unicode

Render ASCII (maximum compatibility):

cat diagram.mmd | ./scripts/render.sh --format ascii

Render SVG to a file:

cat diagram.mmd | ./scripts/render.sh --format svg --out diagram.svg

Workflow

Draft or collect Mermaid source

Prefer small diagrams that fit in a chat/terminal viewport.
When replying, include the Mermaid source in a fenced mermaid block when it helps the user edit or reuse it.

Render for user viewing (default)

Prefer --format unicode and paste the output in a fenced code block.
If box-drawing characters display poorly, rerender with --format ascii.

Render SVG when needed

Use --format svg and write to a file (--out).
Optionally apply a built-in theme (--theme) or custom colors (--bg / --fg).

CLI reference (`scripts/render.sh`)

--format <unicode|ascii|svg> (default: unicode)
--in <file> (optional; otherwise read from stdin)
--out <file> (optional; otherwise write to stdout)
--theme <name> (SVG only) and --list-themes
--bg <color> / --fg <color> (SVG only; overrides theme)
--transparent (SVG only)
--paddingX <n> / --paddingY <n> / --boxBorderPadding <n> (text only)

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/diegosouzapw/awesome-omni-skill --skill beautiful-mermaid-renderer

View on GitHub

skills/data-ai/beautiful-mermaid-renderer/SKILL.md

More Productivity & Planning skills

View all

Productivity & Planning

brainstorming

Structured design dialogue that validates ideas before implementation begins.

295.4K 385.7K

View

Productivity & Planning

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K

View

Productivity & Planning

writing-plans

Comprehensive implementation plans for multi-step tasks, breaking down specs into bite-sized, testable steps.

295.4K 268K

View

Productivity & Planning

using-superpowers

Introduction to the obra skills system with mandatory skill invocation rules and best practices.

295.4K 259.8K

View

Productivity & Planning

executing-plans

Execute a written implementation plan with critical review and task checkpoints.

295.4K 229.1K

View

Productivity & Planning

dispatching-parallel-agents

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K

View

Productivity & Planning

using-git-worktrees

Isolated git worktrees with smart directory selection and safety verification.

295.4K 205.2K

View

Productivity & Planning

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

179.7K 170.6K

View