Skip to main content

​
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 diagrams directly in the chat panel.
1

Turn on Mermaid diagrams

  1. Open the Command Palette by pressing Command+Shift+P (macOS) or Ctrl+Shift+P (Windows and Linux), or click View > Command Palette.
  2. Search for Poolside: Settings.
  3. Under Poolside: Show Mermaid Diagrams, select the checkbox for Visualize Mermaid diagrams in code blocks.
2

Generate a diagram

  1. Enter a prompt in the chat panel. For example:
Create a Mermaid flowchart for a user login processMermaid sequence diagram code in the Poolside chat panel
  1. Click the generated preview to expand the diagram.

​
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

Mermaid - Flowchart

​
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

Mermaid - Sequence

​
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

Mermaid - Class

​
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

Mermaid - State