docs: Fix and improve LikeC4 example in local development guide

- Fix shortcode example to show code instead of rendering
- Add complete LikeC4 example with specification, model, and views blocks
- Fix syntax: use 'include element' not 'include element element'
- Add guidance on finding available view IDs
- Use correct element type names and structure
This commit is contained in:
Stephan Lo 2025-11-07 14:57:05 +01:00
parent 14d7d9d588
commit 2971f98b4c

View file

@ -97,6 +97,38 @@ Architecture diagrams are created with LikeC4:
2. **Edit or create `.c4` files** with your model 2. **Edit or create `.c4` files** with your model
Example: Create a simple view in `resources/edp-likec4/views/my-view.c4`:
```likec4
specification {
element myperson
element mysystem
}
model {
customer = myperson 'Customer' {
description 'End user of the platform'
}
mySystem = mysystem 'My System' {
description 'Example system component'
}
customer -> mySystem 'uses'
}
views {
view myCustomView {
title "My Custom Architecture View"
include customer
include mySystem
autoLayout TopBottom
}
}
```
3. **Regenerate webcomponents:** 3. **Regenerate webcomponents:**
```bash ```bash
@ -106,16 +138,14 @@ Architecture diagrams are created with LikeC4:
4. **Embed diagrams in Markdown:** 4. **Embed diagrams in Markdown:**
```markdown ```markdown
{{< likec4-view view="localDevelopment" title="Local Development Workflow" >}} {{</* likec4-view view="myCustomView" project="architecture" title="My Custom Architecture View" */>}}
``` ```
Available views: **Finding available view IDs:**
- `overview` - Complete system overview - Open the `.c4` files in your project directory
- `localDevelopment` - Documentor workflow - Look for `view <viewId> {` declarations
- `cicdPipeline` - CI/CD process - The `<viewId>` is what you use in the `view` parameter
- `deploymentFlow` - Edge deployment - Or use: `grep -r "^view " resources/edp-likec4/ --include="*.c4"`
- `fullWorkflow` - End-to-end workflow
- `testingCapabilities` - Testing overview
## Available Tasks ## Available Tasks