A simple d2 diagram for diagram as a code layout.

sample-diagram.d2

direction: down

user: Client {
  shape: person
  style.font-size: 20
}

route: Openshift Router {
  icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/openshift.svg
  shape: rectangle
  style: {fill: "#FFF7ED"}
}

cluster: Openshift Cluster {
  style: {
    stroke: blue
    stroke-dash: 3
    fill: white
    font-color: purple
  }

  # Row-1: Entry point (Frontend)
  Frontend: {
    direction: right
    fe: Frontend Pods\n(Node.js React) {
      icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/react.svg
      shape: rectangle
      style: {multiple: true; fill: "#E9F5FF"}
    }
  }

  # Row-2: Backend services (horizontal)
  Backends: {
    direction: right

    be: Backend API\n(Spring Boot Java) {
      icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/java.svg
      shape: rectangle
      style: {multiple: true; fill: "#E9F5FF"}
    }

    index: Search / Index Service\n(Spring Boot Java) {
      icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/java.svg
      shape: rectangle
      style: {fill: "#FECACA"; stroke: red}
    }
  }
}

# Bottom row: external/3rd-party services (horizontal, outside cluster)
Third-Party-Services: {
  direction: right

  db: Oracle Database {
    shape: cylinder
    icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/oracle.svg
    style: {fill: "#BFDBFE"} # blue (active)
  }

  s3: MinIO (S3 Storage) {
    shape: cylinder
    icon: https://cdn.worldvectorlogo.com/logos/minio-1.svg
    style: {fill: "#BFDBFE"} # blue (active)
  }

  es: Elasticsearch {
    shape: cylinder
    icon: https://raw.githubusercontent.com/gilbarbara/logos/master/logos/elasticsearch.svg
    style: {fill: "#FECACA"} # red (planned path)
  }
}

# External routing (Yeşil)
user -> route: codex.app.xyz {
  style: {animated: true; font-size: 16; stroke: green; stroke-width: 3}
}
route -> cluster.Frontend.fe: host:codex.app.xyz \npath "/" {
  style: {animated: true; font-size: 16; stroke: green; stroke-width: 3}
}
route -> cluster.Backends.be: host:codex.app.xyz \npath "/api" {
  style: {animated: true; font-size: 16; stroke: green; stroke-width: 3}
}

# In-cluster calls (Kırmızı)
cluster.Frontend.fe -> cluster.Backends.be: Fetch API calls {
  style: {animated: true; font-size: 16; stroke: red; stroke-width: 3}
}
cluster.Frontend.fe -> cluster.Backends.index: Search queries {
  style: {animated: true; font-size: 16; stroke: red; stroke-width: 3}
}

# Backend connections (Mavi)
cluster.Backends.be -> Third-Party-Services.db: JDBC connection {
  style: {animated: true; font-size: 16; stroke: blue; stroke-width: 3}
}
cluster.Backends.be -> Third-Party-Services.s3: S3 API (static files) {
  style: {animated: true; font-size: 16; stroke: blue; stroke-width: 3}
}

# Search/Index planned flow (Mavi)
cluster.Backends.index -> Third-Party-Services.es: Indexing (planned) {
  style: {animated: true; font-size: 16; stroke: blue; stroke-width: 3}
}

notes: |md
  **Bağlantı Renkleri**
  - **Yeşil:** Dış dünyadan gelen istekler ve servis girişleri (ör. kullanıcıdan uygulamaya gelen talepler).
  - **Kırmızı:** Servislerin birbiriyle konuştuğu bağlantılar (inter-service iletişim).
  - **Mavi:** Uygulamanın yaptığı dış bağlantılar (ör. veritabanı, dosya sistemi, arama motoru gibi 3rd party servisler).
  ---
  **Yerleşim**
  - **Openshift Cluster Servisleri:** Frontend (entrypoint) ve Backend API (Java) + Search/Index Service (Java).
  - **Cluster dışı:** Oracle DB (mavi), MinIO (mavi), Elasticsearch (kırmızı).
  - Bağlantılar:
      - Route → Frontend `/` (yeşil)
      - Route → Backend `/api` (yeşil)
      - Frontend → Backend: Fetch API (kırmızı)
      - Backend → DB & MinIO (mavi)
      - Search/Index → Elasticsearch (mavi, planlanan)
| {near: center-right}