Visualizing data flows

About Mermaid diagrams

A Mermaid diagram is a way to create visual charts and graphs using plain text code instead of drawing tools. How it works:

Write text: You type special commands in a text-based syntax.
Automatic visualization: The system converts your text into a professional-looking diagram.
Edit diagrams: Change the text to update the diagram instantly.

Example:

graph LR
    A[Start] --> B[Process] --> C[End]

This text creates a flowchart with three boxes connected by arrows. Mermaid diagrams are commonly used for:

Flowcharts for processes
System architecture diagrams
User journey maps
Code structure documentation

Generate Mermaid diagrams

Poolside can generate Mermaid diagram code that you can render in documentation or diagramming tools. For example, run:

pool exec -p "Create a Mermaid flowchart for a user login process. Return only the Mermaid code."

Common diagram types

Flowcharts

Prompt: Create a flowchart showing user registration process with validation steps Response:

Mermaid Code

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

Mermaid Image

Sequence diagrams

Prompt: Generate a sequence diagram for a login process with authentication service Response:

Mermaid Code

sequenceDiagram
participant User
participant API
participant Database

User->>API: Submit form
API->>Database: Save data
Database-->>API: Confirm save
API-->>User: Success message

Mermaid Image

Class diagrams

Prompt: Create a class diagram for a user management system with User and Admin classes Response:

Mermaid Code

classDiagram
class User {
    +String name
    +String email
    +login()
    +logout()
}

class Admin {
    +manageUsers()
    +deleteAccount()
}

User <|-- Admin

Mermaid Image

State diagrams

Prompt: Design a state diagram for a mobile app with foreground, background, and terminated states Response:

Mermaid Code

stateDiagram-v2
[*] --> Foreground: App Launch
Foreground --> Background: User switches apps
Background --> Foreground: User returns to app
Background --> Terminated: System kills app
Foreground --> Terminated: User force closes app
Terminated --> Foreground: App relaunch

state Foreground {
    [*] --> Active
    Active --> Inactive: Screen locked
    Inactive --> Active: Screen unlocked
}

state Background {
    [*] --> Suspended
    Suspended --> Processing: Background task starts
    Processing --> Suspended: Task completes
}

Mermaid Image

​About Mermaid diagrams

​Generate Mermaid diagrams

​Common diagram types

​Flowcharts

Mermaid Code

Mermaid Image

​Sequence diagrams

Mermaid Code

Mermaid Image

​Class diagrams

Mermaid Code

Mermaid Image

​State diagrams

Mermaid Code

Mermaid Image

About Mermaid diagrams

Generate Mermaid diagrams

Common diagram types

Flowcharts

Sequence diagrams

Class diagrams

State diagrams