Mermaid

import { Mermaid } from 'ui'
 
export function MermaidBasic() {
  return (
    <Mermaid
      chart={`
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
`}
    />
  )
}

Usage

In MDX (Blog Posts)

The simplest way to add diagrams in blog posts is with a fenced code block using the mermaid language tag:

```mermaid
flowchart LR
    A[User Request] --> B{Authenticated?}
    B -->|Yes| C[Process Request]
    B -->|No| D[Return 401]
```

This is automatically rendered as a diagram. No imports needed.

As a Component

For more control, import and use the component directly:

import { Mermaid } from 'ui'
 
export function MyDiagram() {
  return (
    <Mermaid
      chart={`
flowchart LR
    A[User Request] --> B{Authenticated?}
    B -->|Yes| C[Process Request]
    B -->|No| D[Return 401]
`}
    />
  )
}

Use the component when you need to pass props like className, conditionally render, or integrate with React logic.

Flowcharts

Use flowchart or graph to create flowcharts with nodes and edges. Supports decision diamonds, different node shapes, and directional layouts (TD, LR, etc). View Mermaid flowchart docs

A basic request flow showing conditional branching with a decision node ({}), demonstrating how to visualize auth checks and data flow.

With Subgraphs

Group related nodes into labeled subgraphs to show system boundaries. Useful for depicting frontend/backend separation or microservice architecture.

Supabase Architecture

Shows how client requests flow through the API Gateway to core services (Auth, PostgREST, Realtime) which all connect to PostgreSQL.

OAuth Authorization Flow

Illustrates the OAuth 2.0 authorization code flow, showing the handoff between a third-party app, your authorization endpoint, and Supabase Auth for token exchange.

ER Diagrams

Use erDiagram to create entity-relationship diagrams showing database schemas. Great for documenting table relationships and foreign keys. View Mermaid ER diagram docs

A simple e-commerce schema showing cardinality between customers, orders, products, and line items using crow's foot notation.

With Attributes

Include column definitions with types and constraints (PK, FK) to create more detailed schema documentation.

Sequence Diagrams

Use sequenceDiagram to show interactions between participants over time. Ideal for documenting API flows, authentication handshakes, or any request/response patterns. View Mermaid sequence diagram docs

A typical authenticated API request showing JWT validation, database insert, and response flow between Client, API, Auth, and DB participants.

Async Streaming (FDW)

Shows how Foreign Data Wrappers can stream data asynchronously using bounded channels, with parallel execution indicated by the par block.

Sync Blocking (FDW)

Contrasts with async by showing traditional blocking FDW behavior where all rows are fetched and buffered before processing.

Props

Learn More

See the Mermaid documentation for full syntax reference and additional diagram types.