mermaid-diagram

Generate Mermaid diagrams from user requirements and verify syntax.

1|Updated Mar 24, 2026
One-click install
npx skills add https://github.com/kitcaf/skills --skill mermaid-diagram-kitcaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/kitcaf/skills/tree/main/skills/skills-codex/skills/mermaid-diagram
Command: npx skills add https://github.com/kitcaf/skills --skill mermaid-diagram-kitcaf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate Mermaid diagrams from user requirements, turning textual requests into ready-to-render diagram code and previews.

Core Features & Use Cases

  • Generate Mermaid code for Flowchart, Sequence, Class, ER, Gantt, and other diagram types from user prompts.
  • Save outputs to figures/ as .mmd and .md files with syntax-verified diagrams.
  • Validate syntax via Mermaid CLI and provide a rendered PNG/preview when available.
  • Use case: Convert a system requirements brief into a visual diagram to share with stakeholders.

Quick Start

Provide a detailed diagram request and the system will generate and save the Mermaid files in figures/.

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 text requirements?

To generate a Mermaid flowchart from text, provide a detailed diagram request and the system outputs raw Mermaid code. It saves the visualization as figures/<diagram-name>.mmd and figures/<diagram-name>.md files for immediate rendering.

What diagram types can I create using Mermaid code generation?

Mermaid code generation supports various diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, and Gantt charts. It translates textual requirements into ready-to-render visualization code for diverse structural representations.

Does Mermaid diagram generation validate syntax and provide previews?

Yes, Mermaid diagram generation validates syntax using Mermaid CLI. Upon verification, it provides a rendered PNG preview when available, ensuring the generated diagram code is syntactically correct and visually accurate.

Can I convert a system requirements brief into an ER diagram using Mermaid?

Yes, you can convert a system requirements brief into an ER diagram using Mermaid. The system processes your textual input to automatically generate and save the corresponding entity-relationship visualization code.

What file formats are output when generating Mermaid diagrams?

When generating Mermaid diagrams, the outputs are saved as .mmd and .md files within a figures/ directory. This ensures the raw diagram code and markdown representations are stored for stakeholder sharing and previewing.

Why use automated Mermaid code generation instead of manual diagramming?

Automated Mermaid code generation turns textual requirements directly into ready-to-render diagram code, bypassing manual diagramming. It performs syntax verification with Mermaid CLI to ensure valid outputs for fast stakeholder communication.