MermAniSt — Mermaid Animation Studio

Mermaid Editor

flowchart TD
    U([👤 User]) --> R

subgraph Frontend ["Frontend - React"]
        R[React UI]
        CK[CopilotKit\nProvider + Hooks]
        EB[Error Boundary\nCustom-built]
        TM[Token Monitor\nCustom-built]
        R --> CK
        CK --> EB
        CK --> TM
    end

subgraph Gateway ["Agent Gateway - Your Infrastructure"]
        AG[Auth + Tenant\nValidation]
        SM[Session Manager\nRedis / Postgres]
        OB[Observability\nOpenTelemetry]
    end

subgraph Agent ["Agent Layer - LangGraph"]
        LG[LangGraph\nAgent Runtime]
        TC[Token Counter\n+ Context Tracker]
        LG --> TC
    end

subgraph Tools ["Tool Layer"]
        T1[RAG / Vector DB]
        T2[External APIs]
        T3[Internal Services]
    end

TL[Telemetry\nJaeger / Datadog / Honeycomb]

CK -->|SSE Stream| AG
    AG --> SM
    AG --> LG
    LG --> T1 & T2 & T3
    TC -->|WebSocket token_update| TM
    OB --> TL
    AG --> OB
    LG --> OB

style CK fill:#4A90E2,color:#fff
    style AG fill:#E74C3C,color:#fff
    style LG fill:#6BCF7F,color:#333
    style OB fill:#FFD93D,color:#333
    style TL fill:#9B59B6,color:#fff
    style EB fill:#FFA07A,color:#333
    style TM fill:#FFA07A,color:#333
    style TC fill:#98D8C8,color:#333

Export Code (with Animation)

Export Image (No Animation)

Diagram Canvas

Click to select one item. Use Ctrl/Cmd/Shift + click to multi-select.

Animation Panel

Select a node, subgraph, or edge to animate.

Timeline Builder

No animation steps yet.