# Diagrams

> Analyze the provided code, architecture, or concept and generate a clear, well-structured Me...; keywords: mermaid, diagram, git, api. Use only on explicit request; skip in routine implementation discussions.

- Skill: `gologo13/diagrams` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gologo13/diagrams`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gologo13/diagrams/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: gologo13 (https://skillmd.com/u/gologo13)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gologo13/diagrams

---


# Generate Mermaid Diagram

## Overview

Analyze the provided code, architecture, or concept and generate a clear, well-structured Mermaid diagram that visualizes the relationships, flow, or structure.

## Instructions

1. **Analyze the input** - Understand what the user wants to visualize (code flow, architecture, data relationships, state machines, sequences, etc).

2. **Choose the appropriate diagram type**:

    - `flowchart` - For process flows, decision trees, algorithms
    - `sequenceDiagram` - For API calls, message passing, request/response flows
    - `classDiagram` - For class structures, inheritance, interfaces
    - `erDiagram` - For database schemas, entity relationships
    - `stateDiagram-v2` - For state machines, lifecycle flows
    - `graph TD/LR` - For dependency graphs, module relationships
    - `gitgraph` - For git branching strategies
    - `journey` - For user journeys
    - `gantt` - For timelines and schedules

3. **Generate the diagram** with these qualities:

    - Clear, descriptive node labels
    - Logical grouping with subgraphs where appropriate
    - Consistent styling and direction
    - Meaningful relationship labels on edges
    - Not overly complex - split into multiple diagrams if needed

4. **Output format**: Always wrap the diagram in a mermaid code block:

    ```mermaid
    [diagram code here]
    ```

## Diagram Style Guidelines

- Use descriptive IDs: `userService` not `a1`
- Add labels to relationships when they add clarity
- Use subgraphs to group related components
- Keep diagrams readable - max ~15-20 nodes per diagram
- Use appropriate arrow styles:
- `-->` solid arrow (main flow)
- `-.->` dotted arrow (optional/async)
- `==>` thick arrow (important path)
- `o-->` circle end (aggregation)
- `*-->` diamond end (composition)

## Examples

### Flowchart

```mermaid
flowchart TD
    A[Start] --> B{Is valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[End]
    D --> E
```

### Sequence Diagram

```mermaid
sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database

    C->>S: Request
    S->>DB: Query
    DB-->>S: Results
    S-->>C: Response
```

### Class Diagram

```mermaid
classDiagram
    class Animal {
         String name
         makeSound()
    }
    class Dog {
         bark()
    }
    Animal <|-- Dog
```

### ER Diagram

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
```

## After generating

- Explain what the diagram shows
- Offer to refine or expand specific sections
- Suggest alternative diagram types if applicable