Mermaid Demo

Overview#

This page demonstrates Mermaid diagram support with three different diagram types commonly used in technical documentation.

Flowchart: Request Lifecycle#

flowchart TD
    A[Client Request] --> B{Valid Path?}
    B -->|No| C[Return 404]
    B -->|Yes| D[Load Markdown]
    D --> E{Has Frontmatter?}
    E -->|No| F[Return 400]
    E -->|Yes| G[Parse Content]
    G --> H[Render Page]
    H --> I[Return Response]

Sequence Diagram: Content API Flow#

sequenceDiagram
    participant Client
    participant API
    participant FileSystem
    participant Git
    
    Client->>API: PUT /api/content/hub/web/new-page.md
    API->>API: Validate Authorization
    API->>API: Parse Frontmatter
    API->>FileSystem: Write File
    FileSystem-->>API: Write Complete
    API->>Git: Commit Changes
    Git-->>API: Commit Hash
    API-->>Client: {commit: hash, path: ...}

State Diagram: Page Deployment State Machine#

stateDiagram-v2
    [*] --> Draft
    Draft --> Pending: Commit to main
    Pending --> Building: CI Starts
    Building --> Failed: Build Error
    Failed --> Draft: Fix & Retry
    Building --> Published: Build Success
    Published --> [*]
    Published --> Draft: Edit Content