skills.rest
Grong
GrongCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

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

Updated Jul 10, 2026
Search Tags:#documentation#mermaid#flowchart#svg#ascii art#diagram#render
One-click install
npx skills add https://github.com/Grong/openhub-client --skill mermaid-grong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/Grong/openhub-client/tree/main/crates/backend/openhub-app/assets/builtin-skills/mermaid
Command: npx skills add https://github.com/Grong/openhub-client --skill mermaid-grong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, 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 or manual drawing. This Skill converts plain-text Mermaid syntax directly into rendered SVG images or terminal-friendly ASCII art, so diagrams can be generated programmatically from code or chat. ## Core Features & Use Cases - Dual Output Modes: Render diagrams 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 a file or piped via stdin, with optional theme selection for SVG output. - Use Case: While documenting a microservices architecture, paste a sequenceDiagram definition and instantly get a themed SVG to embed in your design doc, or an ASCII version to include in a README. ## Quick Start Render the Mermaid diagram in my file flow.mmd as an SVG image using the github-dark theme.

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, for example: npx tsx scripts/render.ts diagram.mmd --output diagram.svg. The beautiful-mermaid dependency installs automatically on first run.

How to generate ASCII art from Mermaid diagrams for terminal display?▼

Pass the --ascii flag to the render script, either with a file or by piping code via stdin with --stdin. The output uses Unicode box-drawing characters suitable for terminals and plain-text documentation.

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 supported.

Can I apply themes to Mermaid SVG output?▼

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

Why does Mermaid rendering fail with an empty input error?▼

The script exits if no input is provided or the Mermaid code is empty. Ensure you either pass a valid .mmd file path or pipe non-empty diagram code through stdin with the --stdin flag.

Related Skills

Explore More Software Engineering Skills→
jtucker9jtucker9

sight

Generate Mermaid diagrams from database, API, and component structures.

Community
Intermediate
robotics-playgroundrobotics-playground

ros2-design

Generate a ROS 2 design contract with node specs, interfaces, and PlantUML diagrams.

Official
Advanced
ahravahrav
1

doc-code-audit

Audit documentation and diagrams against codebase types, signatures, and invariants.

Community
Advanced
davistroydavistroy
5

bpmn-to-drawio

Convert BPMN 2.0 XML diagrams into Draw.io .drawio format.

Community
Advanced