Mermaid Diagrams

What Are Mermaid Diagrams?

Mermaid is a widely-used text-based diagram language. Instead of dragging boxes and lines around a canvas, you describe the diagram in plain text and TorlyAI renders it as a polished SVG graphic. Your AI agents use this automatically when visual explanation would be clearer than text alone.

Supported Diagram Types

Diagram Details

Flowcharts

Show step-by-step processes, decision trees, or workflow paths. Ideal for mapping out your business operations or customer journeys.

graph TD
  A[Idea Discovery] --> B{Viable?}
  B -->|Yes| C[Write Business Plan]
  B -->|No| D[Refine Idea]
  D --> A
  C --> E[Submit for Endorsement]

Flowcharts support multiple directions (top-down, left-right, bottom-up, right-left), subgraphs for grouping related steps, and a wide range of node shapes including rectangles, diamonds (decisions), circles, stadiums, hexagons, and cylinders.

Sequence Diagrams

Illustrate how different parties interact over time. Perfect for showing how your product handles user requests or how your business interacts with partners.

sequenceDiagram
  Founder->>TorlyAI: Upload business idea
  TorlyAI->>Harry: Start discovery session
  Harry->>Founder: Ask clarifying questions
  Founder->>Harry: Provide answers
  Harry->>Hermione: Hand off for research
  Hermione->>TorlyAI: Return market analysis

Class Diagrams

Display the structure and relationships between different concepts in your business model. Useful for showing how products, services, customer segments, and revenue streams connect.

classDiagram
  class Product {
    +name: string
    +pricing: PricingTier
    +launch(): void
  }
  class Customer {
    +segment: string
    +needs: string[]
  }
  Product --> Customer : serves

ER (Entity-Relationship) Diagrams

Map out data relationships — how customers relate to orders, products to suppliers, or any structured business data. Particularly helpful when describing your technology platform to endorsement bodies.

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : appears_in

State Diagrams

Show how something transitions between different states over time — such as an order lifecycle, application status, or business plan review stages.

stateDiagram-v2
  [*] --> Draft
  Draft --> InReview : Submit
  InReview --> Approved : Pass
  InReview --> Draft : Revisions needed
  Approved --> [*]

How Diagrams Appear in Chat

When an agent generates a diagram, it renders automatically as an inline SVG in your conversation. You can:

• View the rendered diagram directly in the chat message
• See the source code by expanding the diagram's code block
• Copy the SVG to use in your business plan documents or presentations

Diagrams adapt to your current theme — light or dark mode — using TorlyAI's colour system, so they always look polished and consistent with the rest of your workspace.

When Agents Use Diagrams

Your AI agents generate diagrams when they would add clarity:

You can also ask any agent to create a diagram at any time — just describe what you want to visualise in your message.

Tips