slidev-mermaid

Mermaid Diagrams in Slidev

This skill covers creating visual diagrams using Mermaid syntax in Slidev presentations. Mermaid allows you to create flowcharts, sequence diagrams, class diagrams, and many other diagram types using simple text.

When to Use This Skill

• Creating flowcharts and process diagrams
• Showing system architecture
• Visualizing sequences and workflows
• Creating class and entity diagrams
• Building organizational charts
• Displaying timelines and Gantt charts

Basic Syntax

Use a code block with mermaid language:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

Flowcharts

Top-Down Flow

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```

Left-Right Flow

```mermaid
graph LR
    A[Input] --> B[Process] --> C[Output]
```

Node Shapes

```mermaid
graph TD
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Asymmetric]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram Alt\]
```

Arrow Types

```mermaid
graph LR
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --text--> J
    K ---|text| L
```

Sequence Diagrams

Basic Sequence

```mermaid
sequenceDiagram
    participant U as User
    participant S as Server
    participant D as Database

    U->>S: Request
    S->>D: Query
    D-->>S: Result
    S-->>U: Response
```

With Activation

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

    C->>+S: Login Request
    S->>S: Validate
    S-->>-C: Token

    C->>+S: API Call
    S-->>-C: Data
```

Notes and Loops

```mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob

    Note over A: Alice thinks
    A->>B: Hello Bob!
    Note over A,B: Shared note