Options & Features

The astro-mermaid-satteri plugin supports several info-string options on the ```mermaid fence. Combine them in any order.

Dimensions

Use w-NNN and h-NNN to set explicit pixel dimensions on the rendered SVG. Both are optional, any order.

flowchart LR
  A[Square] --> B[Circle]
  B --> C[Triangle]

Caption

Use title="..." (or single quotes title='...') to wrap the diagram in a <figure> with a <figcaption>.

sequenceDiagram
  participant U as User
  participant A as App
  participant DB as Database
  U->>A: Enter credentials
  A->>DB: Validate user
  DB-->>A: Valid
  A-->>U: Redirect to dashboard

User Login Flow

Single quotes

Single quotes work too — title='...':

flowchart LR
  A[One] --> B[Two] --> C[Three]

My Diagram

Alignment

Use align=left, align=right, or align=center to control horizontal positioning. Default is center.

Align Left

flowchart LR
  A[Left] --> B[Aligned]

Align Right

flowchart LR
  A[Right] --> B[Aligned]

Combined Options

All options can be combined in any order on the same fence.

flowchart LR
  subgraph Dev
    A[Code] --> B[Build]
  end
  subgraph CI
    B --> C[Test]
    C --> D[Package]
  end
  subgraph Prod
    D --> E[Deploy]
  end

Deployment Pipeline

sequenceDiagram
  participant C as Client
  participant G as Gateway
  participant S as Service
  C->>G: POST /api/data
  G->>S: Forward request
  S-->>G: 200 OK
  G-->>C: Response

API Response Times

Copy Button

Every rendered diagram has a Copy button in its top-right corner. It is hidden by default and appears on hover, copying the Mermaid source to your clipboard. Hover the diagram below and try the button:

flowchart LR
  A[Hover me] --> B[Click Copy]
  B --> C[Paste anywhere]

Lazy Loading

Diagrams below the fold are deferred until they scroll near the viewport (via IntersectionObserver with a 300px root margin), keeping pages with many diagrams fast on initial load. Scroll down — the diagram below only renders once it nears the viewport.

flowchart TD
  A[Below the fold] --> B[Renders on scroll]
  B --> C[IntersectionObserver]

Lazy-loaded diagram

Feature Reference

Option	Syntax	Example	Effect
Width	w-NNN	w-500	Sets SVG width to 500px
Height	h-NNN	h-300	Sets SVG height to 300px
Caption	title="..." or title='...'	title="My Diagram"	Wraps in <figure> with <figcaption>
Alignment	align=...	align=left	Positions left, right, or center
Copy button	—	—	Automatic; copies source on hover-click
Lazy loading	—	—	Automatic; deferred via IntersectionObserver