import gradio as gr

demo = gr.Blocks()

with demo:
    gr.Markdown(
        """
        # Project Documentation with Mermaid Diagrams
        
        This example demonstrates how to combine regular Markdown with Mermaid diagrams for better visualization.
        
        ## System Architecture
        
        Below is an overview of our system's architecture:
        
        ```mermaid
        graph LR
            User[User] --> Frontend[Web Frontend]
            Frontend --> API[API Gateway]
            API --> Auth[Authentication Service]
            API --> DataService[Data Processing Service]
            DataService --> DB[(Database)]
            DataService --> ML[Machine Learning Engine]
            ML --> Model[(Model Storage)]
            
            style User fill:#f9f,stroke:#333,stroke-width:2px
            style Frontend fill:#bbf,stroke:#333,stroke-width:2px
            style API fill:#bfb,stroke:#333,stroke-width:2px
            style DataService fill:#fbb,stroke:#333,stroke-width:2px
        ```
        
        ## Data Processing Workflow
        
        The data goes through the following steps before reaching the end user:
        
        1. Collection from various sources
        2. Cleaning and preprocessing
        3. Feature extraction
        4. Analysis and model application
        5. Results formatting
        
        ## User Journey
        
        ```mermaid
        sequenceDiagram
            participant U as User
            participant F as Frontend
            participant A as API
            participant D as Database
            
            U->>F: Login Request
            F->>A: Authenticate
            A->>D: Verify Credentials
            D-->>A: User Validated
            A-->>F: Auth Token
            F-->>U: Login Success
            
            U->>F: Request Data
            F->>A: Get Data (with token)
            A->>D: Query Data
            D-->>A: Return Results
            A-->>F: Formatted Data
            F-->>U: Display Results
        ```
        
        ## Decision Process
        
        When handling requests, our system follows this decision tree:
        
        ```mermaid
        flowchart TD
            A[New Request] --> B{Authenticated?}
            B -->|Yes| C{Request Type}
            B -->|No| D[Return 401]
            
            C -->|Data Query| E[Process Query]
            C -->|Update| F{Has Permission?}
            C -->|Delete| G{Is Admin?}
            
            F -->|Yes| H[Apply Update]
            F -->|No| I[Return 403]
            
            G -->|Yes| J[Execute Delete]
            G -->|No| K[Return 403]
            
            E --> L[Return Data]
            H --> M[Return Success]
            J --> N[Return Success]
            
            style A fill:#98fb98,stroke:#333
            style D fill:#ff9999,stroke:#333
            style I fill:#ff9999,stroke:#333
            style K fill:#ff9999,stroke:#333
            style M fill:#98fb98,stroke:#333
            style N fill:#98fb98,stroke:#333
        ```
        
        ## State Diagram
        
        Our application transitions through these states:
        
        ```mermaid
        stateDiagram-v2
            [*] --> Initialization
            Initialization --> Ready
            
            Ready --> Processing: New Request
            Processing --> Error: Exception
            Processing --> Complete: Success
            
            Error --> Ready: Reset
            Complete --> Ready: Reset
            
            Ready --> Shutdown: Exit Command
            Shutdown --> [*]
        ```
        
        ## Additional Resources
        
        For more information about our system, please check:
        
        - [API Documentation](https://example.com/api-docs)
        - [User Guide](https://example.com/user-guide)
        - [Admin Dashboard](https://example.com/admin)
        """
    )

if __name__ == "__main__":
    demo.launch()