mermaid-diagram

Name: mermaid-diagram
Availability: InStock
Author: Leigh

Generate and validate Mermaid diagrams from user descriptions via Mermaid CLI.

1|Updated Jan 24, 2021

Search Tags:#mermaid #flowchart #diagrams #mermaid-cli #sequence-diagram #er-diagram

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams can be tricky to author and keep consistent across projects. This skill provides a reliable workflow to generate, edit, and validate diagrams using the Mermaid CLI, ensuring syntax correctness and clear layouts.

Core Features & Use Cases

Generate Mermaid diagrams from natural language prompts and descriptions.
Validate syntax with the Mermaid CLI (mmdc) and produce SVGs for review.
Iterate on layout with guided refinements and subgraphs to improve readability.
Support multiple diagram types including flowchart, sequence, state, class, and ER diagrams.
Export final source and rendered output for documentation or PRs.

Quick Start

Describe the diagram you want, and I will generate a Mermaid diagram and validate it with the Mermaid CLI.

Frequently Asked Questions about mermaid-diagram

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

FAQPage Schema

How do I generate a Mermaid flowchart from a text description?▼

Generating a Mermaid flowchart from text involves translating your description into valid Mermaid source code, validating syntax with the Mermaid CLI, and returning both the diagram source and rendered SVG output.

Can I validate Mermaid syntax locally before adding it to documentation?▼

Validating Mermaid syntax locally requires the Mermaid CLI (mmdc). This skill runs mmdc to verify syntax correctness and produces an SVG file, ensuring the diagram renders clearly before adding it to documentation.

Does this approach work for sequence and ER diagrams or just flowcharts?▼

This approach supports sequence diagrams, ER diagrams, state diagrams, and class diagrams in addition to flowcharts. It generates and updates any supported Mermaid diagram type via the Mermaid CLI.

Do I need to install Mermaid CLI to use this diagram generation workflow?▼

Yes, the Mermaid CLI is required. The skill depends on mmdc to validate diagram syntax and render the SVG output, functioning within local or scripted contexts where the CLI is installed.

What is the best way to fix layout issues in complex Mermaid diagrams?▼

The best way to fix layout issues in complex Mermaid diagrams is to iterate using guided refinements and subgraphs. This skill improves readability by validating structural changes through the Mermaid CLI.

Why does my Mermaid sequence diagram fail to render as an SVG?▼

A Mermaid sequence diagram fails to render as an SVG when it contains syntax errors. This skill uses the Mermaid CLI to validate syntax, inspects the resulting SVG for clarity, and corrects the source code.