# Code-First Visualizations

This directory contains examples of code-first visualization tools that render natively in GitHub.

## Mermaid Diagrams

GitHub natively supports Mermaid diagrams in markdown files. Simply wrap your Mermaid code in a mermaid code block.

### Flowchart Example

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```

### Organization Chart Example

```mermaid
graph TD
    CEO[Alice Johnson<br/>CEO & Chairman]
    COO[Michael Chen<br/>COO]
    CTO[Sarah Martinez<br/>CTO]
    
    CEO --> COO
    COO --> CTO
    
    VP_Product[David Williams<br/>VP of Product]
    SVP_Eng1[Emma Davis<br/>SVP Engineering]
    
    CTO --> VP_Product
    CTO --> SVP_Eng1
    
    Dir_Product1[James Anderson<br/>Director of Product]
    VP_Eng1[Sofia Rodriguez<br/>VP Engineering]
    SVP_Eng2[Marcus Thompson<br/>SVP Engineering]
    
    VP_Product --> Dir_Product1
    SVP_Eng1 --> VP_Eng1
    SVP_Eng1 --> SVP_Eng2
    
    style CEO fill:#E6F3FF,stroke:#1E90FF
    style COO fill:#E6F3FF,stroke:#1E90FF
    style CTO fill:#E6F3FF,stroke:#1E90FF
    style VP_Product fill:#E6F3FF,stroke:#1E90FF
    style SVP_Eng1 fill:#E6F3FF,stroke:#1E90FF
    style Dir_Product1 fill:#E6F3FF,stroke:#1E90FF
    style VP_Eng1 fill:#E6F3FF,stroke:#1E90FF
    style SVP_Eng2 fill:#E6F3FF,stroke:#1E90FF
```

### Sequence Diagram Example

```mermaid
sequenceDiagram
    participant User
    participant FrontEnd_Royalties
    participant GraphQLAPI
    participant Database
    
    User->>FrontEnd_Royalties: Click button
    FrontEnd_Royalties->>GraphQLAPI: POST /api/data
    GraphQLAPI->>Database: Query data
    Database-->>GraphQLAPI: Return results
    GraphQLAPI-->>FrontEnd_Royalties: JSON response
    FrontEnd_Royalties-->>User: Display results
```

### Gantt Chart Example

```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements gathering    :a1, 2025-11-01, 7d
    Design phase             :a2, after a1, 10d
    section Development
    Backend development      :b1, after a2, 14d
    Frontend development     :b2, after a2, 14d
    section Testing
    Integration testing      :c1, after b1, 5d
    User acceptance testing  :c2, after c1, 5d
```

### Class Diagram Example

```mermaid
classDiagram
    class User {
        +String email
        +String name
        +login()
        +logout()
    }
    
    class Account {
        +String accountId
        +Date createdAt
        +getBalance()
    }
    
    class Transaction {
        +String transactionId
        +Decimal amount
        +Date timestamp
        +process()
    }
    
    User "1" --> "*" Account
    Account "1" --> "*" Transaction
```

### State Diagram Example

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review: Submit
    Review --> Approved: Approve
    Review --> Draft: Reject
    Approved --> Published: Publish
    Published --> Archived: Archive
    Archived --> [*]
```

### Entity Relationship Diagram Example

```mermaid
erDiagram
    ACCOUNT ||--o{ CONTRACT : has
    CONTRACT ||--|{ CONTRACT_LIFECYCLE : contains
    PRODUCT }o..o{ CONTRACT : includes
    PRODUCT ||--o{ SALE_TRANSACTION : generates
    
    ACCOUNT {
        int account_id
        string name
        string email
        string phone
    }
    
    CONTRACT {
        int contract_id
        string name
        string status
    }
    
    CONTRACT_LIFECYCLE {
        int contract_lifecycle_id
        date start_date
        date end_date
    }
    
    PRODUCT {
        int product_id
        string upc_code
        string isrc
        string description
    }
    
    SALE_TRANSACTION {
        int txn_id
        string currency
        string store_id
        int amount
        int meom
    }
```

## Benefits of Mermaid

- **Native GitHub Support**: Renders directly in GitHub without any external tools
- **Version Control**: Diagrams are text-based and can be diffed
- **Easy to Update**: Just edit the text to update the diagram
- **Collaboration**: Team members can suggest changes via PRs
- **No External Dependencies**: No need for PlantUML servers or other tools