mermaid

name

mermaid

description

Generate diagrams and flowcharts from mermaid definitions using the mermaid-cli (mmdc). Supports themes, custom CSS, and various output formats including SVG, PNG, and PDF. Mermaid supports 20+ diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, user journeys, Gantt charts, pie charts, quadrant charts, requirement diagrams, GitGraph, C4 diagrams, mindmaps, timelines, ZenUML, Sankey diagrams, XY charts, block diagrams, packet diagrams, Kanban boards, architecture diagrams, radar charts, and treemaps. This skill is triggered when the user says things like "create a diagram", "make a flowchart", "generate a sequence diagram", "create a mermaid chart", "visualize this as a diagram", "render mermaid code", or "create an architecture diagram".

Mermaid Documentation Guide

Mermaid is a JavaScript-based diagramming and charting tool that uses text definitions to create diagrams dynamically. This skill includes the complete official documentation from the mermaid repository.

Quick Start: Read mermaid-cli/README.md for installation and usage. Always use mermaid-cli to validate code and generate diagrams. Adjust width/height for readability (default PNGs are often too small).

Documentation Structure

Quick Start

• mermaid-README.md - Main Mermaid project README with overview, features, and quick examples

Getting Started

• intro/getting-started.md - Quick start guide for using Mermaid
• intro/index.md - Introduction and overview
• intro/syntax-reference.md - General syntax reference across all diagram types
• config/usage.md - How to use Mermaid in different environments

Installation and CLI

• mermaid-cli/README.md - Complete mermaid-cli (mmdc) installation and usage guide
• config/mermaidCLI.md - Additional CLI usage information from the main docs