Mermaid Diagrams

This gives Claude the full Mermaid syntax reference for creating text-based diagrams directly in your conversation. It covers the main types you'd actually use: class diagrams for domain modeling, sequence diagrams for API flows, flowcharts for processes, ERDs for database schemas, and C4 diagrams for architecture. The skill includes detailed syntax for relationships, cardinality, styling, and configuration options. What I like is that it's comprehensive enough to handle complex diagrams without needing to leave your workflow. The reference files break down each diagram type with concrete examples, so you can go from "I need to model this API interaction" to a proper sequence diagram without hunting through documentation.

skills.sh installs: 913
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill mermaid-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

Mermaid Diagramming

Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.

Core Syntax Structure

All Mermaid diagrams follow this pattern:

diagramType
  definition content

Key principles:

First line declares diagram type (e.g., classDiagram, sequenceDiagram, flowchart)
Use %% for comments
Line breaks and indentation improve readability but aren't required
Unknown words break diagrams; parameters fail silently

Diagram Type Selection Guide

Choose the right diagram type:

Class Diagrams - Domain modeling, OOP design, entity relationships
- Domain-driven design documentation
- Object-oriented class structures
- Entity relationships and dependencies
Sequence Diagrams - Temporal interactions, message flows
- API request/response flows
- User authentication flows
- System component interactions
- Method call sequences