forked from DevFW-CICD/website-and-documentation

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

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