# Code-First Visualizations with PlantUML

This directory contains examples of code-first visualization tools using PlantUML.

## PlantUML Diagrams

PlantUML is a powerful tool for creating diagrams from text. While it doesn't render natively in GitHub like Mermaid, it can be used with various plugins and servers.

**To try these examples:** Copy any code block below and paste it into the [PlantUML Online Editor](http://www.plantuml.com/plantuml/uml/).

### Flowchart Example

```plantuml
@startuml
start
repeat
  :Start;
  if (Is it working?) then (yes)
    :Great!;
  else (no)
    :Debug;
  endif
repeat while (Is it working?) is (no)
:End;
stop
@enduml
```

![Flowchart](./images/plantuml/diagram_01.png)

### Organization Chart Example

```plantuml
@startuml

skinparam class {
    BackgroundColor #E6F3FF
    BorderColor #1E90FF
    ArrowColor #1E90FF
}

hide circle

class CEO as "Alice Johnson" {
    +CEO
    +Chairman
}
class COO as "Michael Chen" {
    +COO
}
class CTO as "Sarah Martinez" {
    +CTO
}
class VP_Product as "David Williams" {
    +VP of Product
}
class SVP_Eng1 as "Emma Davis" {
    +SVP Engineering
}
class Dir_Product1 as "James Anderson" {
    +Director of Product
}
class VP_Eng1 as "Sofia Rodriguez" {
    +VP Engineering
}
class SVP_Eng2 as "Marcus Thompson" {
    +SVP Engineering
}

CEO -down-> COO
COO -down-> CTO
CTO -down-> VP_Product
CTO -down-> SVP_Eng1
VP_Product -down-> Dir_Product1
SVP_Eng1 -down-> VP_Eng1
SVP_Eng1 -down-> SVP_Eng2

@enduml
```

![Organization Chart](./images/plantuml/diagram_02.png)

### Sequence Diagram Example

```plantuml
@startuml
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
@enduml
```

![Sequence Diagram](./images/plantuml/diagram_03.png)

### Gantt Chart Example

```plantuml
@startgantt
title Project Timeline
Project starts 2025-11-01

[Requirements gathering] lasts 7 days
[Design phase] lasts 10 days

then [Backend development] lasts 14 days
then [Frontend development] lasts 14 days

then [Integration testing] lasts 5 days
then [User acceptance testing] lasts 5 days
@endgantt
```

![Gantt Chart](./images/plantuml/diagram_04.png)

### Class Diagram Example

```plantuml
@startuml

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

@enduml
```

![Class Diagram](./images/plantuml/diagram_05.png)

### State Diagram Example

```plantuml
@startuml
[*] --> Draft
Draft --> Review: Submit
Review --> Approved: Approve
Review --> Draft: Reject
Approved --> Published: Publish
Published --> Archived: Archive
Archived --> [*]
@enduml
```

![State Diagram](./images/plantuml/diagram_06.png)

### Entity Relationship Diagram Example

```plantuml
@startuml

entity ACCOUNT {
    * account_id: int
    * name: string
    * email: string
    * phone: string
}

entity CONTRACT {
    * contract_id: int
    * name: string
    * status: string
}

entity CONTRACT_LIFECYCLE {
    * contract_lifecycle_id: int
    * start_date: date
    * end_date: date
}

entity PRODUCT {
    * product_id: int
    * upc_code: string
    * isrc: string
    * description: string
}

entity SALE_TRANSACTION {
    * txn_id: int
    * currency: string
    * store_id: string
    * amount: int
    * meom: int
}

ACCOUNT ||--o{ CONTRACT
CONTRACT ||--|{ CONTRACT_LIFECYCLE
PRODUCT }o..o{ CONTRACT
PRODUCT ||--o{ SALE_TRANSACTION

@enduml
```

![Entity Relationship Diagram](./images/plantuml/diagram_07.png)

### Component Diagram Example

```plantuml
@startuml
package "Frontend" {
    [Web App]
    [Mobile App]
}

package "Backend" {
    [API Gateway]
    [Auth Service]
    [Business Logic]
}

database "Database" {
    [PostgreSQL]
    [Redis Cache]
}

[Web App] --> [API Gateway]
[Mobile App] --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [Business Logic]
[Business Logic] --> [PostgreSQL]
[Business Logic] --> [Redis Cache]
@enduml
```

![Component Diagram](./images/plantuml/diagram_08.png)

### Deployment Diagram Example

```plantuml
@startuml
node "Web Server" {
    [Nginx]
    [Node.js App]
}

node "Application Server" {
    [API Service]
    [Background Workers]
}

node "Database Server" {
    database "PostgreSQL"
}

cloud "AWS" {
    [S3 Storage]
    [CloudFront CDN]
}

[Nginx] --> [Node.js App]
[Node.js App] --> [API Service]
[API Service] --> [PostgreSQL]
[Background Workers] --> [PostgreSQL]
[API Service] --> [S3 Storage]
[CloudFront CDN] --> [S3 Storage]
@enduml
```

![Deployment Diagram](./images/plantuml/diagram_09.png)

## Benefits of PlantUML

- **Rich Diagram Types**: Supports many diagram types including component, deployment, timing, and more
- **Version Control**: Diagrams are text-based and can be diffed
- **Easy to Update**: Just edit the text to update the diagram
- **Customizable**: Extensive styling and theming options
- **Integration**: Works with many IDEs and documentation tools
- **Open Source**: Free and actively maintained

## Rendering PlantUML

While PlantUML doesn't render natively in GitHub, you can:

1. **Use a PlantUML server**: 
   - Public: http://www.plantuml.com/plantuml/
   - Self-hosted: Run via Docker `docker run -d -p 8080:8080 plantuml/plantuml-server:jetty`

2. **IDE Plugins**: 
   - IntelliJ IDEA PlantUML plugin
   - VS Code PlantUML extension

3. **Generate images**: 
   - Use the PlantUML CLI to generate PNG/SVG images
   - Commit the generated images to your repository

4. **GitHub Actions**: 
   - Automatically generate diagrams on commit
   - Update images in your documentation