forked from DevFW-CICD/website-and-documentation

Stephan Lo 286b427ed8 feat(architecture): migrate LikeC4 models from edp-doc with Git history

Port the complete LikeC4 architecture documentation from the edp-doc
repository to this repository, establishing it as the primary source
for C4 architecture models.

Migration Details:
- Migrated all C4 models from edp-doc/docs/likec4 to resources/likec4/
- Preserved Git history using git filter-branch and git read-tree
- Includes 54 C4 source files covering deployment, components, and views
- Updated LikeC4 to v1.42.1 (from deprecated v0.40.0)

Directory Structure:
- resources/likec4/models/ - C4 model definitions (components, containers, context, code)
- resources/likec4/views/ - View definitions (deployment, EDP, high-level concepts, dynamic)
- resources/likec4/deployment/ - Deployment-specific models (KIND, OTC)
- resources/likec4/doc/ - Documentation and screenshots

Architecture Coverage:
- OTC FaaS deployment architecture
- EDP component and container models
- Developer landscape and workflows
- GitOps inner/outer loop processes
- Infrastructure components (ArgoCD, Forgejo, Keycloak, Crossplane, etc.)

Dependencies:
- likec4@1.42.1
- @likec4/cli@0.40.0

This migration makes the ipceicis-developerframework repository the
authoritative source for architecture documentation. The edp-doc
repository may reference these models via git submodule if needed.

Related: Migration from https://edp.buildth.ing/DevFW/edp-doc

2025-10-24 13:08:28 +02:00

3.5 KiB

Raw Blame History

LikeC4 Architecture Documentation Integration

This directory contains the LikeC4 architecture models and views that power the interactive architecture diagrams throughout this documentation.

What is LikeC4?

LikeC4 is a tool for creating interactive C4 architecture diagrams as code. It generates web components that can be embedded directly into web pages, providing an interactive way to explore complex system architectures.

Directory Structure

resources/likec4/
├── models/          # C4 model definitions (.c4 files)
│   ├── components/  # Component-level models
│   ├── containers/  # Container-level models
│   ├── context/     # System context models
│   └── code/        # Code-level workflow models
├── views/           # View definitions
│   ├── deployment/  # Deployment architecture views
│   ├── edp/         # EDP-specific views
│   ├── high-level-concept/  # Conceptual views
│   └── dynamic/     # Dynamic process views
├── deployment/      # Deployment-specific models
├── doc/             # Documentation and screenshots
├── package.json     # Node.js dependencies
└── README.md        # This file

Generating Web Components

To generate the web component that Hugo can use:

cd resources/likec4

# Install dependencies (first time only)
npm install

# Generate the web component
npx likec4 codegen webcomponent \
  --webcomponent-prefix likec4 \
  --outfile ../../static/js/likec4-webcomponent.js

This creates static/js/likec4-webcomponent.js which contains all your architecture views as an interactive web component.

Using in Hugo Content

Add interactive diagrams to any Markdown page:

## Architecture Overview

<div class="likec4-container">
    <div class="likec4-header">
        System Architecture - High Level View
    </div>
    <likec4-view view-id="otc-faas" browser="true"></likec4-view>
    <div class="likec4-loading" id="likec4-loading">
        Loading architecture diagram...
    </div>
</div>

{{< alert title="Note" >}}
The diagram above is interactive. Click on components to explore details.
{{< /alert >}}

Available Views

To discover available view IDs:

# Search for all view definitions in .c4 files
cd resources/likec4
grep -r "view\s\+\w" views/ models/ --include="*.c4"

Common view IDs include:

otc-faas - OTC FaaS Deployment Architecture
edp - EDP Main Overview
landscape - Developer Landscape
edpbuilderworkflow - EDP Builder Workflow
And many more...

Workflow for Changes

Edit Models: Modify .c4 files in models/ or views/
Regenerate: Run the codegen command (see above)
Test: Start Hugo dev server and check your pages
Commit: Commit both the .c4 changes and regenerated JS file

Integration with Hugo

The integration is enabled via:

hugo.toml - Configuration parameter params.likec4.enable = true
layouts/partials/hooks/head-end.html - Loads CSS and JS
static/css/likec4-styles.css - Styling for diagrams
static/js/likec4-loader.js - Dynamic loading logic
static/js/likec4-webcomponent.js - Generated web component (you create this)

Migrated from edp-doc

This content was migrated from the edp-doc repository with full Git history preserved. This repository is now the primary source for LikeC4 architecture documentation.

3.5 KiB Raw Blame History