website-and-documentation/content/en/docs/architecture/highlevelarch.md
Stephan Lo 3239cfbc62 refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents
Renamed resources/likec4 to resources/edp-likec4 to better reflect that this
directory contains the Enterprise Developer Platform architecture models,
not documentation platform architecture.

Extended element kinds in edp-likec4/models/spec.c4 to support documentation
platform modeling:
- Added person, tool, process, repository element kinds
- These allow modeling of documentation workflows and processes

Consolidated webcomponent generation:
- Combined both architecture projects (edp-likec4 and doc-likec4) into a
  single webcomponent output at static/js/likec4-webcomponent.js
- Updated Taskfile.yml to generate from edp-likec4 directory
- Removed duplicate webcomponent script loading in head-end.html
- Fixed CustomElementRegistry duplicate registration issue

Embedded TeleNeoOffice corporate fonts:
- Added font files to static/fonts/ and static/ root
- Required for correct rendering of diagrams in webcomponent
- Fonts are embedded in webcomponent but also served from Hugo static paths
- Fixed 404 errors for font loading

Updated architecture documentation:
- Fixed markdown linting issues (trailing spaces, fence spacing)
- Updated all references from resources/likec4 to resources/edp-likec4
- Enhanced setup.md with correct directory structure

This refactoring enables:
1. Clear separation between EDP architecture and documentation platform models
2. Single consolidated webcomponent containing all architecture views
3. Proper font loading for corporate branding in diagrams
4. Foundation for future architecture documentation expansion

Breaking changes: None (paths updated in documentation)
2025-11-07 11:50:17 +01:00

4.7 KiB

title linkTitle weight description
High Level Architecture High Level Architecture 1 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

Enterprise Development Platform - OTC FaaS Deployment Architecture
Loading architecture diagram...

{{< 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/edp-likec4/

  2. Regenerate the webcomponent:

    cd resources/edp-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" >}}).