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:

```bash
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:

```markdown
## 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:

```markdown
<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:

```bash
# 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](https://likec4.dev/)
- [C4 Model](https://c4model.com/)