Visualizing data flows - Poolside

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:

1. Write text: You type special commands in a text-based syntax.
2. Automatic visualization: The system converts your text into a professional-looking diagram.
3. 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