mermaid-diagram-generator

Mermaid Diagram Generator

Generate interactive, shareable HTML diagrams using Mermaid.js to visualize system flows, sequences, architectures, and technical processes.

When to Use This Skill

Activate this skill when:

• User asks to "create a diagram", "draw a diagram", "visualize this"
• User says "show me the flow", "how does X work", "what's the sequence"
• User wants to understand system architecture, database relationships, or process flows
• User needs to document workflows, API interactions, or state machines
• User says "turn this into a diagram", "make this visual"
• User is discussing complex interactions that would benefit from visualization

Core Responsibilities

This skill creates interactive HTML diagrams that:

1. Analyze the Context: Understand what needs to be visualized (flows, sequences, relationships, states)
2. Choose Diagram Type: Select the most appropriate Mermaid diagram type
3. Generate Mermaid Syntax: Create accurate, well-structured Mermaid.js code
4. Create HTML File: Embed diagram in a standalone, shareable HTML file
5. Add Documentation: Include explanatory text, key points, and references

Supported Diagram Types

Sequence Diagrams

Use for: API calls, user flows, system interactions, webhook flows, authentication processes

Example triggers:

• "Show me how the team purchase flow works"
• "Diagram the authentication process"
• "What happens when a webhook fires?"

Flowcharts

Use for: Decision trees, algorithms, process flows, state machines

Example triggers:

• "Draw the decision flow for user access"
• "Show the deployment process"
• "Visualize the error handling logic"

Entity Relationship Diagrams

Use for: Database schemas, table relationships, data models

Example triggers:

• "Show the database structure"
• "Diagram the relationships between users, teams, and subscriptions"

Class Diagrams

Use for: Object relationships, inheritance hierarchies, system architecture