website-and-documentation/resources/edp-likec4/INTEGRATION.md

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

Using the Shortcode (Recommended)

The simplest way to embed diagrams:

## Architecture Overview

{{< likec4-view view="otc-faas" project="architecture" title="OTC FaaS Deployment Architecture" >}}

Parameters:

• view (required) - The view ID from your LikeC4 model
• project (optional, default: "architecture") - The LikeC4 project name
• title (optional, default: "Architecture View: {view}") - Custom header text

Manual HTML (Alternative)

If you need more control:

<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

1. Edit Models: Modify .c4 files in models/ or views/
2. Regenerate: Run the codegen command (see above)
3. Test: Start Hugo dev server and check your pages
4. 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.

More Information

• LikeC4 Documentation
• C4 Model