Canvas Components

Mermaid Component

The Mermaid component allows you to render Mermaid diagrams directly within the webchat interface. This is useful for displaying flowcharts, sequence diagrams, entity-relationship diagrams, and other visual representations.

# Example Usage

        {
  "webchat_server_control_event": {
    "platforms": {
      "webchat": {
        "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
        "webchat_control_event": {
          "action": "render_component",
          "params": {
            "component_type": "mermaid",
            "component_params": {
              "title": "User Authentication Flow",
              "theme": "forest",
              "diagram": "sequenceDiagram\n  User->>+API: POST /login\n  API->>+DB: validate credentials\n  DB-->>-API: user record\n  API-->>-User: JWT token"
            }
          }
        },
        "stubsession": {
          "set_new_with_timeout_hours": 24
        }
      }
    }
  }
}

      

# Diagram Types

The Mermaid component supports all diagram types provided by the Mermaid library:

• sequenceDiagram - Sequence diagrams showing interactions between actors
• flowchart / graph - Flowcharts and directed graphs
• classDiagram - Class diagrams for object-oriented design
• erDiagram - Entity-relationship diagrams
• stateDiagram - State machine diagrams
• gantt - Gantt charts for project timelines
• pie - Pie charts
• gitGraph - Git branching diagrams
• And more

# Configuration

# Themes

The theme parameter accepts any built-in Mermaid theme:

• default - Standard Mermaid theme
• dark - Dark background theme
• forest - Green-toned theme
• neutral - Minimal greyscale theme
• base - Customizable base theme

For the full Mermaid syntax reference, see the Mermaid documentation.