Stephan Lo
97cd265063
- Add title parameter documentation to all relevant README files - Update DOCUMENTOR-GUIDE.md with title parameter example - Enhance quick-reference.md with complete parameter list - Update INTEGRATION.md with recommended shortcode usage - Simplify highlevelarch.md by using shortcode with title parameter
124 lines
3.9 KiB
Markdown
124 lines
3.9 KiB
Markdown
# 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/)
|