Mermaid Diagrams

The theme includes a custom remark-mermaid plugin (plugins/remark-mermaid.mjs) that converts fenced ```mermaid code blocks into <div class="mermaid-container"> wrappers. The Mermaid CDN script renders SVG diagrams on page load.

Flowchart

flowchart LR
  A[User Request] --> B{WAF Check}
  B -->|Pass| C[Origin Server]
  B -->|Block| D[403 Forbidden]
  C --> E[Response]

Sequence Diagram

sequenceDiagram
  participant Client
  participant LB as Load Balancer
  participant App as Application
  participant DB as Database

  Client->>LB: HTTPS Request
  LB->>App: Forward Request
  App->>DB: Query Data
  DB-->>App: Return Results
  App-->>LB: Response
  LB-->>Client: HTTPS Response

Pie Chart

pie title Traffic Distribution
  "North America" : 45
  "Europe" : 30
  "Asia Pacific" : 20
  "Other" : 5

Class Diagram

classDiagram
  class LoadBalancer {
    +String name
    +String domain
    +addOriginPool()
    +removeOriginPool()
  }
  class OriginPool {
    +String name
    +List~Origin~ origins
    +healthCheck()
  }
  class Origin {
    +String address
    +int port
    +boolean healthy
  }
  LoadBalancer --> OriginPool
  OriginPool --> Origin

State Diagram

stateDiagram-v2
  [*] --> Pending
  Pending --> Active : approve
  Pending --> Rejected : reject
  Active --> Suspended : suspend
  Suspended --> Active : reactivate
  Active --> [*] : delete
  Rejected --> [*]

Gantt Chart

gantt
  title Deployment Timeline
  dateFormat YYYY-MM-DD
  section Planning
    Requirements     :a1, 2025-01-01, 14d
    Design           :a2, after a1, 10d
  section Development
    Implementation   :b1, after a2, 21d
    Testing          :b2, after b1, 14d
  section Release
    Staging Deploy   :c1, after b2, 3d
    Production Deploy :c2, after c1, 2d

CSS Reference

Container Styling

Mermaid diagrams are wrapped in a styled container with rounded corners and a layered box shadow:

.mermaid-container {
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
  margin-block: 1.5rem;
  background: #fff;
}

SVG Background Forcing

The SVG inside is forced to a white background for dark mode compatibility:

.mermaid-container svg {
  background: white !important;
  border-radius: 0.5rem;
}

Theme Checks

• .mermaid-container has white SVG background in dark mode
• Container border uses --sl-color-gray-5
• Container has 0.75rem border radius and layered box shadow
• rect and polygon elements have forced white fill in dark mode
• Diagrams are readable in both light and dark themes
• Mermaid CDN script loads and renders SVGs on page load