mermaid-diagram

Generate Mermaid diagrams from user requirements and verify syntax with Mermaid CLI.

Updated Apr 26, 2026
One-click install
npx skills add https://github.com/jandan138/Auto-claude-code-research-in-sleep --skill mermaid-diagram-jandan138
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/jandan138/Auto-claude-code-research-in-sleep/tree/main/skills/mermaid-diagram
Command: npx skills add https://github.com/jandan138/Auto-claude-code-research-in-sleep --skill mermaid-diagram-jandan138

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagram generation from natural-language descriptions can be tedious and error-prone. This skill automates turning user requirements into ready-to-render Mermaid code by producing both raw .mmd files and Markdown previews, and by verifying syntax to ensure reliable diagrams saved in the figures/ directory.

Core Features & Use Cases

  • Generates Mermaid diagrams from user requirements and stores two outputs: a raw .mmd file and a Markdown preview (.md) in the figures/ directory.
  • Supports a wide range of diagram types (flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and more) with automatic syntax verification.
  • Use Case: a product spec is described in natural language and the skill returns ready-to-embed diagrams for documentation, design reviews, and onboarding materials.

Quick Start

Describe the desired diagram in plain language to generate the Mermaid diagram files in the figures/ directory.

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 diagram from natural language text?

To generate a Mermaid diagram from natural language text, this skill translates your requirements into raw .mmd code and a .md preview, saving both files in the figures/ directory. It automates creating ready-to-render diagrams from plain text descriptions.

Can I automatically verify Mermaid syntax before rendering diagrams?

Yes, you can automatically verify Mermaid syntax before rendering diagrams. This skill validates the generated .mmd code using the Mermaid CLI to ensure correct syntax and renderability, preventing errors in your final output.

What types of Mermaid diagrams can I create using plain text descriptions?

You can create a wide range of Mermaid diagrams using plain text descriptions, including flowcharts, sequence diagrams, class diagrams, ER diagrams, and Gantt charts. The tool translates your requirements into the appropriate diagram code.

How do I create flowchart and ER diagram files for Markdown documentation?

To create flowchart and ER diagram files for Markdown documentation, describe your requirements in plain language. The skill generates raw .mmd files and Markdown previews in the figures/ directory for easy embedding into your docs.

Does this Mermaid diagram generator save both raw .mmd code and Markdown previews?

Yes, this Mermaid diagram generator saves both raw .mmd code and Markdown previews. It outputs both file types into a dedicated figures/ directory, providing ready-to-embed diagrams for design reviews and onboarding materials.