About mermaid
mermaid is a skill that generates Mermaid diagram code from user requirements, selecting a diagram type and consulting its syntax reference. It covers diagrams ranging from flowcharts and sequences to charts and architecture views.
Key features
- 01Select a diagram type from requirements
- 02Consult type-specific syntax references
- 03Generate Mermaid code
- 04Apply themes and styling
- 05Format code for direct rendering
Use cases
- 01Diagram a process or decision flow
- 02Map API interactions or class structure
- 03Visualize timelines, data, or architecture
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ wh-2099/ mermaid-skill --skill mermaidAfter installing, type/mermaidin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/architecture.mdblock.mdc4.mdclassDiagram.mdconfig-configuration.mdconfig-directives.mdconfig-layouts.mdconfig-math.mdconfig-theming.mdconfig-tidy-tree.mdcynefin.mdentityRelationshipDiagram.mdeventmodeling.mdexamples.mdflowchart.mdgantt.mdgitgraph.mdishikawa.mdkanban.mdmindmap.mdpacket.mdpie.mdquadrantChart.mdradar.mdrailroad.mdrequirementDiagram.mdsankey.mdsequenceDiagram.mdstateDiagram.mdswimlanes.mdDetails
From the project READMEMermaid Diagram Generator
Generate high-quality Mermaid diagram code based on user requirements.
Workflow
- Understand Requirements: Analyze user description to determine the most suitable diagram type
- Read Documentation: Read the corresponding syntax reference for the diagram type
- Generate Code: Generate Mermaid code following the specification
- Apply Styling: Apply appropriate themes and style configurations
Diagram Type Reference
Select the appropriate diagram type and read the corresponding documentation:
| Type | Documentation | Use Cases |
|---|---|---|
| Flowchart | flowchart.md | Processes, decisions, steps |
| Sequence Diagram | sequenceDiagram.md | Interactions, messaging, API calls |
| Class Diagram | classDiagram.md | Class structure, inheritance, associations |
| State Diagram | stateDiagram.md | State machines, state transitions |
| ER Diagram | entityRelationshipDiagram.md | Database design, entity relationships |
| Gantt Chart | gantt.md | Project planning, timelines |
| Pie Chart | pie.md | Proportions, distributions |
| Mindmap | mindmap.md | Hierarchical structures, knowledge graphs |
| Timeline | timeline.md | Historical events, milestones |
| Git Graph | gitgraph.md | Branches, merges, versions |
| Quadrant Chart | quadrantChart.md | Four-quadrant analysis |
| Requirement Diagram | requirementDiagram.md | Requirements traceability |
| C4 Diagram | c4.md | System architecture (C4 model) |
| Sankey Diagram | sankey.md | Flow, conversions |
| XY Chart | xyChart.md | Line charts, bar charts |
| Block Diagram | block.md | System components, modules |
| Packet Diagram | packet.md | Network protocols, data structures |
| Kanban | kanban.md | Task management, workflows |
| Architecture Diagram | architecture.md | System architecture |
| Radar Chart | radar.md | Multi-dimensional comparison |
| Treemap | treemap.md | Hierarchical data visualization |
| User Journey | userJourney.md | User experience flows |
| ZenUML | zenuml.md | Sequence diagrams (code style) |
Configuration & Themes
- Theming - Custom colors and styles
- Directives - Diagram-level configuration
- Layouts - Layout direction and spacing
- Configuration - Global settings
- Math - LaTeX math support
Output Specification
Generated Mermaid code should:
- Be wrapped in ```mermaid code blocks
- Have correct syntax that renders directly
- Have clear structure with proper line breaks and indentation
- Use semantic node naming
- Include styling when needed to improve visual appearance
Example Output
flowchart TD
A[Start] --> B{Condition}
B -->|Yes| C[Execute]
B -->|No| D[End]
C --> D
User requirements: $ARGUMENTS
Comments
Markdown supported