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).
Best use case
beautiful-mermaid-renderer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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).
Teams using beautiful-mermaid-renderer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/beautiful-mermaid-renderer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How beautiful-mermaid-renderer Compares
| Feature / Agent | beautiful-mermaid-renderer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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) 1) Install dependencies (one-time per machine): `cd ~/.codex/skills/beautiful-mermaid-renderer && bun install` 2) Render Unicode (default) to stdout: `cat diagram.mmd | ./scripts/render.sh --format unicode` 3) Render ASCII (maximum compatibility): `cat diagram.mmd | ./scripts/render.sh --format ascii` 4) Render SVG to a file: `cat diagram.mmd | ./scripts/render.sh --format svg --out diagram.svg` ## Workflow 1) 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. 2) 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`. 3) 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)
Related Skills
mermaid-expert
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
beautiful-mermaid
Render Mermaid diagrams as pure ASCII text (default) or themed SVGs using the beautiful-mermaid renderer. Use when the user asks for a Mermaid diagram (flowchart, sequence, class, state, or ER), wants a diagram file generated, or needs terminal-friendly ASCII output.
beautiful-mermaid-diagrams
Create beautiful diagrams using Mermaid syntax including flowcharts, sequence diagrams, class diagrams, ER diagrams, and state diagrams. Use when users ask to diagram, visualize, model, map out, or show the flow of systems, processes, architectures, or interactions.
acc-mermaid-template
Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.
beautiful-prose
Hard-edged writing style contract for timeless, forceful English prose without AI tics
mermaid-diagrams
Mermaid diagram creation for flowcharts, sequences, ERDs, and more. Generate diagrams from text in markdown files. Use for documentation, architecture diagrams, and visual representations. Triggers on mermaid, flowchart, sequence diagram, ERD, entity relationship, gantt chart, pie chart, class diagram, state diagram, journey map.
mermaid-diagram-generator
Creates Mermaid diagrams for flowcharts, sequence diagrams, ERDs, and architecture visualizations in markdown. Use when users request "Mermaid diagram", "flowchart", "sequence diagram", "ERD diagram", or "architecture diagram".
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
moai-lang-r
R 4.4+ best practices with testthat 3.2, lintr 3.2, and data analysis patterns.
moai-lang-python
Python 3.13+ development specialist covering FastAPI, Django, async patterns, data science, testing with pytest, and modern Python features. Use when developing Python APIs, web applications, data pipelines, or writing tests.
moai-icons-vector
Vector icon libraries ecosystem guide covering 10+ major libraries with 200K+ icons, including React Icons (35K+), Lucide (1000+), Tabler Icons (5900+), Iconify (200K+), Heroicons, Phosphor, and Radix Icons with implementation patterns, decision trees, and best practices.
moai-foundation-trust
Complete TRUST 4 principles guide covering Test First, Readable, Unified, Secured. Validation methods, enterprise quality gates, metrics, and November 2025 standards. Enterprise v4.0 with 50+ software quality standards references.