# Mermaid Test (/docs/test-mermaid)

# Mermaid Diagram Test

This page demonstrates Mermaid diagram rendering.

## State Diagram

Here's your state diagram from the image:

<Mermaid
  chart="---
config:
  layout: dagre
---
stateDiagram-v2
    [*] --> Unchallenged: Game Created with Output Root
    Unchallenged --> Challenged: challenge() with bond
    Unchallenged --> UnchallengedProven: prove() with ZK proof
    Challenged --> ChallengedProven: prove() with ZK proof
    UnchallengedProven --> DefenderWins: resolve() after timeout+
    ChallengedProven --> DefenderWins: resolve() after timeout+
    Challenged --> ChallengerWins: resolve() after prove timeout
    DefenderWins --> [*]: Bond returned to proposer
    ChallengerWins --> [*]: Bond transferred to challenger"
/>

## Flow Chart

<Mermaid
  chart="graph TD;
    A[Start] --> B{Is it working?};
    B -->|Yes| C[Great!];
    B -->|No| D[Debug];
    D --> B;
    C --> E[Done];"
/>

## Sequence Diagram

<Mermaid
  chart="sequenceDiagram
    participant User
    participant Contract
    participant Oracle

    User->>Contract: Deploy contract
    Contract->>Oracle: Request randomness
    Oracle-->>Contract: Return random number
    Contract-->>User: Emit event"
/>

## Gantt Chart

<Mermaid
  chart="gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Research           :a1, 2024-01-01, 30d
    Development        :a2, after a1, 45d
    section Phase 2
    Testing            :a3, after a2, 20d
    Deployment         :a4, after a3, 10d"
/>