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.
Best use case
beautiful-mermaid is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using beautiful-mermaid 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/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How beautiful-mermaid Compares
| Feature / Agent | beautiful-mermaid | 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 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.
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 ## Overview Render Mermaid source into pure ASCII text (default) or themed SVGs using a local script powered by the `beautiful-mermaid` package. ## Quick Start Install once per machine (from the skill folder) before first use. 1. Install dependencies once per machine: `bun install` 2. Render pure ASCII (default): `bun run scripts/render-mermaid.ts < diagram.mmd` 3. Render SVG: `bun run scripts/render-mermaid.ts --format svg --theme tokyo-night --out /tmp/diagram.svg < diagram.mmd` ## Workflow 1. Clarify output target if needed (SVG vs ASCII/Unicode, theme, file path). 2. Produce Mermaid source. 3. Run the renderer script (prefer stdin pipe over temp files). 4. Return both the Mermaid source and the rendered output or file path. **Best Practice**: Use `echo '...' | bun run scripts/render-mermaid.ts` to pass Mermaid source directly via stdin, avoiding temporary file creation. ## CLI Options **Core** - `--format svg|ascii` (default: `ascii`) - `--input <file>` (else read from stdin) - `--out <file>` (else write to stdout) - `--theme <name>` (one of the built-in themes, for SVG format) **SVG styling** - `--bg <hex>` `--fg <hex>` `--accent <hex>` `--muted <hex>` `--surface <hex>` `--border <hex>` `--line <hex>` - `--font <family>` - `--transparent` **ASCII styling** - `--use-ascii` (use pure `+---+` ASCII style, enabled by default) - `--padding-x <n>` `--padding-y <n>` `--box-border-padding <n>` - `--fullwidth` (convert to fullwidth characters, enabled by default) ## Script `scripts/render-mermaid.ts` renders Mermaid from stdin or a file into SVG or ASCII/Unicode.
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-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).
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.