mermaid

Validate Mermaid diagrams by parsing and rendering them to SVG.

6|1|Updated Nov 23, 2023

Search Tags:#markdown #mermaid #validation #tooling #svg #diagram #mermaid-cli

Ready to run

npx skills add https://github.com/gmcabrita/dotfiles --skill mermaid-gmcabrita

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/gmcabrita/dotfiles/tree/main/.agents/skills/mermaid
Command: npx skills add https://github.com/gmcabrita/dotfiles --skill mermaid-gmcabrita

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams often fail to render due to syntax errors. This tool validates Mermaid syntax by parsing and rendering diagrams to SVG, catching errors before publishing.

Core Features & Use Cases

Validate Mermaid syntax using mermaid-cli and generate an SVG preview for quick feedback.
Provide an ASCII preview of diagrams for terminal checks when a graphical render isn't available.
Use during documentation authoring to ensure diagrams render correctly in Markdown.

Quick Start

Run ./tools/validate.sh diagram.mmd to validate and render an SVG output.

Frequently Asked Questions about mermaid

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

FAQPage Schema

How do I validate Mermaid syntax before publishing documentation?▼

You can validate Mermaid syntax by parsing and rendering the diagram to SVG using mermaid-cli. This catches rendering errors early during markdown authoring.

Do I need Node.js to render Mermaid diagrams to SVG?▼

Yes, you need Node.js, npm, and the mermaid-cli package installed to process .mmd files. These dependencies are required to execute the validation and SVG rendering script.

Can I preview Mermaid diagrams in the terminal without a graphical render?▼

Yes, you can generate an ASCII preview of your diagrams for terminal checks. This allows quick verification when a graphical SVG render is not available or necessary.

What's the best way to check Markdown diagrams for rendering errors?▼

The best way to check Markdown diagrams for rendering errors is running a validation script against your .mmd files. This parses the syntax and outputs an SVG preview to verify correctness.

Why does my Mermaid diagram fail to render in Markdown?▼

Mermaid diagrams often fail to render due to syntax errors. Using a validation tool to parse the diagram catches these syntax issues before you embed the code in your Markdown files.