Mermaid Skill for Claude Code

A Claude Code skill for generating Mermaid diagrams. Supports 23 diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and more.

Installation

Copy the skill folder to your project:

git clone https://github.com/WH-2099/mermaid-skill.git
cp -r mermaid-skill/.claude/skills/mermaid /path/to/your/project/.claude/skills/

Or add as a git submodule:

git submodule add https://github.com/WH-2099/mermaid-skill.git .claude/skills/mermaid-skill
ln -s mermaid-skill/.claude/skills/mermaid .claude/skills/mermaid

Usage

In Claude Code, use the /mermaid command:

/mermaid create a flowchart for user login process
/mermaid draw a sequence diagram for API authentication
/mermaid ER diagram for an e-commerce database

Supported Diagrams

Project Structure

.claude/skills/mermaid/
├── SKILL.md           # Skill definition and instructions
└── references/        # Mermaid syntax documentation
    ├── flowchart.md
    ├── sequenceDiagram.md
    ├── classDiagram.md
    └── ...

Documentation Sync

This skill includes a GitHub Action that automatically syncs documentation from the official mermaid-js/mermaid repository weekly.

License

MIT