skills.rest
Dhanuzh
DhanuzhCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

Render Mermaid diagrams as SVG images or ASCII art using beautiful-mermaid.

Updated Aug 19, 2026
Search Tags:#documentation#mermaid#flowchart#svg#ascii art#diagram#render
One-click install
npx skills add https://github.com/Dhanuzh/DCode-Core --skill mermaid-dhanuzh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/Dhanuzh/DCode-Core/tree/main/crates/dcode-app/assets/builtin-skills/mermaid
Command: npx skills add https://github.com/Dhanuzh/DCode-Core --skill mermaid-dhanuzh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, tsx, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating flowcharts, sequence diagrams, and other technical diagrams usually requires dedicated GUI tools, making it hard to generate visuals programmatically from plain text or display them in terminal environments. ## Core Features & Use Cases - Dual Output Modes: Render Mermaid syntax as themed SVG images for documents or as ASCII/Unicode art for terminal display. - Five Diagram Types: Supports flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams. - Flexible Input: Accepts Mermaid code from files or stdin, with optional theming (e.g., github-dark, dracula, nord) for SVG output. - Use Case: While writing architecture documentation, pipe a sequence diagram definition directly from your notes and get an SVG file ready to embed, or preview it as ASCII art in the terminal before committing. ## Quick Start Ask the AI to render a Mermaid flowchart from your diagram code into an SVG file, or request ASCII output for terminal viewing.

Frequently Asked Questions about mermaid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a Mermaid diagram to SVG from the command line?▼

Run npx tsx scripts/render.ts with your .mmd file and the --output flag to write an SVG file. You can also pipe Mermaid code via stdin using the --stdin flag instead of a file path.

How to display Mermaid diagrams as ASCII art in a terminal?▼

Pass the --ascii flag to the render script to output Unicode box-drawing art instead of SVG. This works with both file input and piped stdin content, printing directly to stdout.

What diagram types does beautiful-mermaid support?▼

It supports five Mermaid diagram types: flowcharts (graph TD/LR), sequence diagrams, state diagrams (stateDiagram-v2), class diagrams, and ER diagrams. Other Mermaid types like Gantt or pie charts are not covered.

Can I apply themes to Mermaid SVG output?▼

Yes, use the --theme flag with a theme name such as github-dark, dracula, or nord. Passing an invalid theme name prints the list of available themes, and theming only applies to SVG output, not ASCII.

Why does the Mermaid render script fail on first run?▼

The script requires Node.js with npx and tsx available. The beautiful-mermaid dependency auto-installs via npm on first execution, so a network connection is needed initially; failures usually indicate missing Node.js or npm registry access.

Related Skills

Explore More Software Engineering Skills→
GS1NedGS1Ned

diagram-generator

Generate architecture, database, component, and sequence diagrams using Mermaid syntax.

Community
Intermediate
MaxWolf-01MaxWolf-01
3

mermaid

Validates Mermaid diagrams by parsing and rendering them with the official mermaid-cli.

Community
Basic
SwimmingLiuSwimmingLiu
1

mermaid-correction

Validate, diagnose, and repair Mermaid code blocks with iterative corrections.

Community
Intermediate
SpillwaveSolutionsSpillwaveSolutions
46

plantuml

Generate and render PlantUML diagrams from Markdown and code.

Official
Advanced