mermaid

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

2|Updated Nov 9, 2021

Search Tags:#documentation #mermaid #validation #rendering #cli #diagrams

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, beautiful-mermaid, puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users ensure their Mermaid diagrams are syntactically correct and visually renderable, preventing errors in documentation and presentations.

Core Features & Use Cases

Diagram Validation: Parses Mermaid syntax to identify and report errors.
SVG Rendering: Generates SVG output of the diagrams.
ASCII Preview: Provides a text-based preview for quick visual checks.
Use Case: Developers can use this skill to validate complex sequence diagrams before embedding them in project documentation, ensuring they display correctly.

Quick Start

Validate the mermaid diagram in the file 'diagram.mmd' and output the SVG to 'output.svg'.

Frequently Asked Questions about mermaid

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

FAQPage Schema

How do I validate Mermaid diagram syntax before adding it to documentation?▼

You can validate Mermaid diagrams by parsing standalone .mmd files to identify and report syntax errors. This ensures diagrams are syntactically correct and visually renderable before embedding them in technical documentation or wikis.

Can I generate an SVG file from a standalone .mmd file?▼

Yes, you can generate SVG output from standalone .mmd files using the official Mermaid CLI. This renders your Mermaid diagrams into SVG files for direct embedding into project documentation.

Does this Mermaid rendering approach work with Puppeteer?▼

Yes, this approach validates and renders Mermaid diagrams using Puppeteer alongside the official Mermaid CLI. This combination supports parsing, SVG generation, and text-based ASCII previews for your diagrams.

What is the best way to preview Mermaid charts without rendering a full image?▼

The best way to preview Mermaid charts without a full image is using an ASCII preview. This provides a quick text-based visual check of your diagram directly from the parsed syntax.

Why does my Mermaid sequence diagram fail to render in my wiki?▼

Your Mermaid sequence diagram might fail to render due to syntax errors. Validating the syntax beforehand identifies and reports these errors, ensuring accurate diagram representation in technical documentation.