Patrick.Sy/website-and-documentation
1
0
Fork 0
forked from DevFW-CICD/website-and-documentation
Code Pull requests Activity
website-and-documentation/content/en/docs/architecture/highlevelarch.md
Stephan Lo 8785b327dd feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy 
Implement complete integration of LikeC4 interactive architecture
diagrams into the Hugo/Docsy documentation system, enabling embedded
web components for exploring C4 models directly in documentation pages.

Integration Components:

Static Assets:
- static/js/likec4-webcomponent.js (3.1 MB) - Generated web component
  containing all 54 C4 views as interactive embeddable elements
- static/js/likec4-loader.js - Dynamic ES6 module loader with fallback
  paths for robust component loading across different page depths
- static/css/likec4-styles.css - Styling for diagram containers with
  dark mode support for Docsy theme compatibility

Hugo Configuration:
- hugo.toml - Added params.likec4.enable configuration flag
- layouts/partials/hooks/head-end.html - Hook to inject CSS and JS
  when LikeC4 is enabled site-wide

Documentation:
- content/en/docs/architecture/_index.md - Architecture section index
- content/en/docs/architecture/highlevelarch.md - Example page with
  interactive OTC FaaS deployment diagram demonstrating integration
- content/en/docs/architecture/setup.md - Comprehensive setup guide
  covering installation, usage, workflow, and troubleshooting
- resources/likec4/INTEGRATION.md - Technical integration details
- LIKEC4-QUICKSTART.md - Quick start guide for developers

Features:
- Interactive diagram exploration (click components for details)
- Automatic loading indicators with timeout fallback
- Graceful degradation for non-JS environments
- Dark mode support matching Docsy theme
- Multiple diagrams per page support
- Browser compatibility detection

Usage Pattern:
```html
<div class="likec4-container">
    <div class="likec4-header">Diagram Title</div>
    <likec4-view view-id="otc-faas" browser="true"></likec4-view>
    <div class="likec4-loading">Loading...</div>
</div>
```

Workflow:
1. Edit .c4 files in resources/likec4/
2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4
   --outfile ../../static/js/likec4-webcomponent.js
3. Commit both model changes and regenerated webcomponent

Available Views:
- otc-faas, edp, landscape, edpbuilderworkflow
- keycloak, forgejo, argocd, crossplane, monitoring
- And 40+ more component and deployment views

The integration preserves the MkDocs-style embedding approach from
edp-doc while adapting it to Hugo's static site generation model.

This completes the migration making this repository the central hub
for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00

4.7 KiB
Raw Blame History

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

  2. Regenerate the webcomponent:

    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" >}}).