skills.rest
mitsuhiko
mitsuhikoCOMMUNITY
Explore all skills by this author →
Website𝕏@mitsuhikoGitHub

mermaid

Validate Mermaid diagrams and generate SVG outputs using the Mermaid CLI.

2.8k|212|Updated Nov 2, 2025
Search Tags:#documentation#markdown#mermaid#validation#CLI#diagrams
One-click install
npx skills add https://github.com/mitsuhiko/agent-stuff --skill mermaid-mitsuhiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/mitsuhiko/agent-stuff/tree/main/skills/mermaid
Command: npx skills add https://github.com/mitsuhiko/agent-stuff --skill mermaid-mitsuhiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure Mermaid diagrams are correct before embedding them in documentation and designs.

Core Features & Use Cases

  • Validate Mermaid diagrams by parsing and rendering with the Mermaid CLI.
  • Generate SVG outputs and provide an ASCII preview for quick verification.
  • Use in documentation workflows to verify diagrams embedded in Markdown or HTML.

Quick Start

Prepare a diagram.mmd file, then run ./tools/validate.sh diagram.mmd to validate and render the SVG. If you omit the output path, the tool will render to a temporary file and discard it after validation. Once valid, copy the Mermaid block into your Markdown or docs.

Frequently Asked Questions about mermaid

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

FAQPage Schema
How do I validate Mermaid diagrams before embedding them in Markdown documentation?▼

You can validate Mermaid diagrams by parsing and rendering them using the Mermaid CLI, which performs syntax checks and generates SVG outputs to verify diagram correctness before embedding in Markdown or HTML.

How does Mermaid CLI validation work for documentation workflows?▼

Mermaid CLI validation works by parsing diagram syntax, rendering it via a headless Chromium downloaded through Puppeteer, and generating an SVG output along with an ASCII preview for quick verification.

Do I need Node.js and npm to validate Mermaid syntax via CLI?▼

Yes, validating Mermaid syntax via CLI requires Node.js and npm to install mermaid-cli, which downloads a headless Chromium via Puppeteer on the first run to perform rendering and syntax checks.

What is the best way to check Mermaid diagram syntax for errors?▼

The best way to check Mermaid diagram syntax is using a dedicated CLI validation tool that parses the diagram, renders it to SVG, and provides an ASCII preview to quickly catch syntax errors before publishing.

Can I generate SVG outputs from Mermaid diagrams without saving them permanently?▼

Yes, if you omit the output path when running the validation tool, it renders the Mermaid diagram to a temporary SVG file, validates the syntax, and discards the file afterward without permanent saving.

Why does Mermaid CLI validation require downloading a headless Chromium browser?▼

Mermaid CLI validation requires downloading a headless Chromium browser via Puppeteer on the first run because the rendering engine relies on a browser environment to parse diagram syntax and generate SVG outputs.

Related Skills

Explore More Design & Creative Skills→
lolwierdlolwierd
1

mermaid

Validate Mermaid diagrams by parsing and rendering them to SVG via Mermaid CLI.

Community
Intermediate
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
adampetrovicadampetrovic
2

mermaid

Validate and render Mermaid diagrams from .mmd files to SVG and ASCII.

Community
Intermediate