skills.rest
luanzeba
luanzebaCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

Validate Mermaid diagrams syntax in .mmd files and Markdown blocks, rendering SVG output with ASCII previews.

Updated Aug 8, 2021
Search Tags:#mermaid#validation#rendering#puppeteer#diagram#mermaid-cli#ascii-preview
One-click install
npx skills add https://github.com/luanzeba/dotfiles --skill mermaid-luanzeba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/luanzeba/dotfiles/tree/main/skills/mermaid
Command: npx skills add https://github.com/luanzeba/dotfiles --skill mermaid-luanzeba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams are widely used in documentation, but validating syntax and previewing render results can be tedious and error-prone.

Core Features & Use Cases

  • Validate Mermaid syntax using mermaid-cli to catch errors before publishing.
  • Render and preview diagrams with SVG output and an ASCII preview for quick checks.
  • Supports standalone .mmd files and Mermaid blocks embedded in Markdown, integrating into documentation workflows.

Quick Start

Run ./tools/validate.sh diagram.mmd to validate a Mermaid diagram and preview the generated 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 syntax before publishing documentation?▼

To validate Mermaid syntax, you can use mermaid-cli to parse standalone .mmd files or embedded Markdown blocks, catching syntax errors and ensuring correctness before publishing.

Can I render Mermaid diagrams embedded in Markdown blocks?▼

Yes, you can render Mermaid diagrams embedded in Markdown blocks. The tool parses these blocks alongside standalone .mmd files to generate SVG output and a readable ASCII preview.

Do I need Node.js and npm to use mermaid-cli for diagram validation?▼

Yes, Node.js, npm, and mermaid-cli are required to parse and render Mermaid diagrams. These dependencies provide the environment needed to execute validation and generate SVG outputs.

How do I preview a generated Mermaid SVG without opening a browser?▼

You can preview a generated Mermaid SVG without a browser by running the validation script on a .mmd file, which outputs an SVG file and provides a readable ASCII preview for quick checks.

What's the best way to check Mermaid diagrams for syntax errors in CI pipelines?▼

The best way to check Mermaid diagrams for syntax errors is applying mermaid-cli validation to standalone diagram files or embedded Markdown blocks, ensuring syntax correctness before integration.

Related Skills

Explore More Software Engineering Skills→
diegomarinodiegomarino
56

mermaid-validate

Validate Mermaid diagram syntax in Markdown files using Node.js scripts.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate
wfukatsuwfukatsu
8

render-mermaid

Converts CraftTweaker scripts and ZScript into formatted, hyperlinked HTML5 cookbook-style reference documents.

Community
Intermediate
samueriosamuerio

mermaid

Validate Mermaid diagrams (.mmd files) syntax and generate SVG outputs using Mermaid CLI and Node.js.

Community
Intermediate