# Sequence Diagrams

### What are Sequence Diagrams?

Marmaid's Sequence diagrams are interaction diagrams that depict how processes interact with one another in a time-ordered sequence. They are widely used in system design, workflow analysis, and documenting user interactions. Each participant or actor is represented, and the sequence of messages exchanged between them is visualized to provide insights into the flow of information.

Sequence diagrams are particularly useful for:

* Visualizing the flow of messages in a system.
* Clarifying system requirements and interactions.
* Documenting complex workflows.
* Debugging and optimizing processes.

***

### Creating Your First Sequence Diagram

1. **Launch DinoAI:** From Code IDE, access [DinoAI](/app-help/documentation/dino-ai.md) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of Sequence Diagram you want to create. For example:

{% code overflow="wrap" %}

```
- "Create a mermaid sequence diagram showing the interaction between user, API, database, and analytics service"

- "Generate a mermaid sequence diagram for my dbt™ run process with all system interactions"

- "Build a mermaid sequence diagram showing data validation workflow between different services"
```

{% endcode %}

3. **Get Your Diagram:** DinoAI will generate a complete `.mmd` file with proper Mermaid syntax.
4. **Preview Your Work:** Click the eye icon (👁️) to preview your diagram in real-time as you edit.
5. **Iterate and Refine:** Modify the generated `.mmd` file directly, or ask DinoAI to make specific changes.

#### Example: 

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

<figure><img src="/files/u1b8DLvbwy1Y7pdDNgGR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Reusable Sequence Diagram prompts for you and your team

You can create custom, standardized [.dinoprompts](/app-help/documentation/dino-ai/dino-prompts.md) for Mermaid's Sequence Diagram that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/pages/ljlILu3iM7h23T4Pomrb#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### Diagram Syntax Guide

#### Basic Syntax

Define participants and the interactions between them:

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

#### Participants

Participants can be implicitly created or explicitly defined:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Bob->>Alice: Hi Alice
    Alice->>Bob: Hi Bob
```

Participants represent entities that interact within the sequence. They can include:

* Users
* Systems or subsystems
* External services
* Devices

#### Actor Symbols

Actors can be specified explicitly to use the actor symbol:

```mermaid
sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
```

Actors are visually distinct from participants to represent active agents more prominently.

#### Message Arrows

Sequence diagrams support various message types with different arrow styles:

* `->` : Solid line without arrow
* `-->` : Dotted line without arrow
* `->>` : Solid line with arrowhead
* `-->>` : Dotted line with arrowhead
* `-)` : Solid line with open arrow (asynchronous)
* `--)` : Dotted line with open arrow (asynchronous)

Example:

```mermaid
sequenceDiagram
    Alice->>John: Synchronous message
    John--)Alice: Asynchronous reply
```

#### Advanced Message Features

* **Activations**: Highlight active participants during a message exchange:

  ```mermaid
  sequenceDiagram
      Alice->>+John: Hello John
      John-->>-Alice: Hi Alice
  ```
* **Stacked Activations**: Multiple activations for the same participant:

  ```mermaid
  sequenceDiagram
      Alice->>+John: Hello John
      Alice->>+John: Can you hear me?
      John-->>-Alice: Yes, loud and clear!
  ```

#### Notes

Add notes for additional context:

```mermaid
sequenceDiagram
    Alice->John: Hello John
    Note over Alice,John: A typical interaction
```

#### Conditional and Loop Blocks

* **Loops**: Repeated interactions:

  ```mermaid
  sequenceDiagram
      Alice->John: Hello
      loop Every minute
          John-->Alice: Responding
      end
  ```
* **Conditionals**: Alternate paths:

  ```mermaid
  sequenceDiagram
      Alice->>Bob: Request data
      alt Data available
          Bob-->>Alice: Sending data
      else Data unavailable
          Bob-->>Alice: No data found
      end
  ```

#### Parallel and Critical Regions

* **Parallel Actions**: Show simultaneous actions:

  ```mermaid
  sequenceDiagram
      par Alice to Bob
          Alice->>Bob: Start task
      and Alice to John
          Alice->>John: Start another task
      end
  ```
* **Critical Sections**: Represent mandatory sequences:

  ```mermaid
  sequenceDiagram
      critical Establish connection
          Service->>Database: Connect
      option Timeout
          Service->Service: Retry
      end
  ```

### Data Team Examples

#### ETL Workflow

```mermaid
sequenceDiagram
    participant ETL as ETL Pipeline
    participant DB as Database
    participant Report as Reporting Tool

    ETL->>DB: Load transformed data
    DB->>Report: Fetch latest data
    Report->>DB: Validate data
    DB-->>Report: Validation complete
```

#### System Monitoring

```mermaid
sequenceDiagram
    participant User
    participant API
    participant Monitor

    User->>API: Submit request
    API->>Monitor: Log activity
    Monitor-->>API: Acknowledge
    API-->>User: Return response
```

### Best Practices

1. **Use clear labels**: Ensure participants and messages are descriptive and unambiguous.
2. **Keep diagrams concise**: Avoid overloading with unnecessary details.
3. **Group participants logically**: Arrange participants in a meaningful order.
4. **Use notes for clarity**: Add notes to explain complex interactions.
5. **Regular updates**: Keep diagrams up-to-date to reflect current workflows.

### Advanced Features

#### Styling

Customize sequence diagrams with CSS for a polished appearance:

```css
.actor {
  stroke: #333;
  fill: #f3f3f3;
}
.messageLine0 {
  stroke: #00aaff;
}
.note {
  fill: #ffeeba;
  stroke: #333;
}
```

#### Sequence Numbers

Show sequence numbers for message arrows:

```mermaid
sequenceDiagram
    autonumber
    Alice->>John: Step 1
    John->>Bob: Step 2
    Bob-->>Alice: Step 3
```

#### Highlighting Regions

Highlight specific interactions with colored backgrounds:

```mermaid
sequenceDiagram
    participant Alice
    participant John

    rect rgba(191, 223, 255, 0.5)
    Alice->>John: Important step
    John-->>Alice: Acknowledgment
    end
```

***

{% hint style="info" %}

### Additional Resources

For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/sequenceDiagram.html).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/sequence-diagrams.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.