website-and-documentation/content/en/docs/architecture/highlevelarch.md

---
title: "High Level Architecture"
linkTitle: "High Level Architecture"
weight: 1
description: >
  Interactive high-level architecture overview of the Enterprise Development Platform
---

This document describes the high-level architecture of our Enterprise Development Platform (EDP) system.

## Interactive Architecture Diagram

<div class="likec4-container">
    <div class="likec4-header">
        Enterprise Development Platform - OTC FaaS Deployment Architecture
    </div>
    <likec4-view view-id="otc-faas" browser="true"></likec4-view>
    <div class="likec4-loading" id="likec4-loading">
        Loading architecture diagram...
    </div>
</div>

<script>
// Enhanced loading check with fallback
document.addEventListener('DOMContentLoaded', function() {
    let attempts = 0;
    const maxAttempts = 10;
    
    function checkLikeC4Loading() {
        attempts++;
        const component = document.querySelector('likec4-view');
        const loading = document.getElementById('likec4-loading');
        
        if (component && component.shadowRoot && component.shadowRoot.children.length > 0) {
            if (loading) loading.style.display = 'none';
            console.log('LikeC4 component loaded successfully');
        } else if (attempts >= maxAttempts) {
            console.warn('LikeC4 component failed to load');
            if (loading) {
                loading.innerHTML = 'Interactive diagram failed to load. <br><small>Please ensure JavaScript is enabled and the webcomponent is generated.</small>';
                loading.style.color = '#dc3545';
            }
        } else {
            setTimeout(checkLikeC4Loading, 1000);
        }
    }
    
    // Check if LikeC4 loader is available
    if (typeof window.customElements !== 'undefined') {
        setTimeout(checkLikeC4Loading, 1500);
    } else {
        const loading = document.getElementById('likec4-loading');
        if (loading) {
            loading.innerHTML = 'Interactive diagrams require a modern browser with JavaScript enabled.';
            loading.style.color = '#dc3545';
        }
    }
});
</script>

{{< alert title="Interactive Diagram" >}}
The diagram above is interactive when viewed in a compatible browser.
You can click on components to explore the architecture details.

**Note:** The interactive diagram requires the LikeC4 webcomponent to be generated.
See the [setup instructions]({{< ref "/docs/architecture/setup" >}}) for details.
{{< /alert >}}

## Architecture Overview

The Enterprise Development Platform consists of several key components working together to provide a comprehensive development and deployment environment.

### Key Components

1. **OTC Foundry** - Central management and orchestration layer
2. **Per-Tenant EDP** - Isolated development environments for each tenant
3. **FaaS Environment** - Function-as-a-Service deployment targets on Open Telekom Cloud
4. **Cloud Services** - Managed services including databases, storage, and monitoring

### Deployment Environments

- **Development Environment** (`*.t09.de`) - For platform team development and testing
- **Production Environment** (`*.buildth.ing`) - For production workloads and tenant services

## Component Details

The interactive diagram above shows the relationships between different components and how they interact within the system architecture. You can explore the diagram by clicking on different elements to see more details.

### Infrastructure Components

- **Kubernetes Clusters** - Container orchestration using OTC CCE (Cloud Container Engine)
- **ArgoCD** - GitOps continuous deployment and application lifecycle management
- **Forgejo** - Git repository management and CI/CD pipelines
- **Observability Stack** - Monitoring (Prometheus, Grafana), logging (Loki), and alerting

### Security and Management

- **Keycloak** - Identity and access management (IAM)
- **OpenBao** - Secrets management (Hashicorp Vault fork)
- **External Secrets Operator** - Kubernetes secrets integration
- **Crossplane** - Infrastructure as Code and cloud resource provisioning

### Developer Experience

- **Backstage** - Internal developer portal and service catalog
- **Forgejo Actions** - CI/CD pipeline execution
- **Development Workflows** - GitOps-based inner and outer loop workflows

## Setup and Maintenance

To update or modify the architecture diagrams:

1. Edit the `.c4` files in `resources/likec4/`
2. Regenerate the webcomponent:

   ```bash
   cd resources/likec4
   npx likec4 codegen webcomponent \
     --webcomponent-prefix likec4 \
     --outfile ../../static/js/likec4-webcomponent.js
   ```

3. Commit both the model changes and the regenerated JavaScript file

For more information, see the [LikeC4 Integration Guide]({{< ref "/docs/architecture/setup" >}}).