Skip to content

Commit 7b00009

Browse files
simonbrowndotjesimonbrowndotje
committed
Adds the C4 model example diagrams/workspace.
1 parent 130ff13 commit 7b00009

11 files changed

Lines changed: 2068 additions & 3 deletions

File tree

‎as-code.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ permalink: /as-code
99

1010
Structurizr is a “models as code” tool, specifically designed for the C4 model. It's not a traditional “drag and drop” UI-driven tool, and does not provide a way to make architecture diagrams via a UI. Instead, You write [Structurizr DSL](/dsl), and Structurizr renders diagrams. Read on if you're interested in the rationale behind this.
1111

12+
- [Technical people, technical diagrams](#technical-people-technical-diagrams)
13+
- [Learning curve and authoring experience](#learning-curve-and-authoring-experience)
14+
- [Automatic layout and manual layout](#automatic-layout-and-manual-layout)
15+
- [Version control friendly](#version-control-friendly)
16+
- [AI friendly](#ai-friendly)
17+
1218
## Technical people, technical diagrams
1319

1420
The C4 model is aimed at software engineering teams, providing a way for technical people to create technical diagrams at different levels of abstraction. Therefore, ideally, it's the technical people inside these teams who will be creating and maintaining the diagrams. Creating software architecture diagrams "as code" (using the [Structurizr DSL](/dsl) in this case) should be reasonably straightforward for anybody with a small amount of technical knowledge. An "as code" approach does isolate non-technical people and architects that don't write code, but that isn't the core of Structurizr's (and the [C4 model](https://c4model.com)'s) target audience.
@@ -19,9 +25,9 @@ The biggest downside of an "as code" approach is the increased learning curve. T
1925

2026
The Structurizr DSL does have a slightly higher learning curve than a UI. You need to understand (1) the general approach of how the tooling works, (2) how to start the tooling, and (3) the basics of the DSL itself. This is obviously more work than just starting a UI-driven tool by double-clicking an icon or opening a URL in your web browser, increasing the "time to first diagram". A little mastery goes a long way though, and an "as code" approach can be much faster and easier when you get over that initial learning curve.
2127

22-
## Automatic layout vs manual layout
28+
## Automatic layout and manual layout
2329

24-
A false narrative exists that UI-driven tools support manual layout, while "as code" tools don't. It is true that most "diagrams as code" formats (PlantUML, Mermaid, dot, etc) do only support automatic layout. Structurizr is relatively unique in that it supports both automatic and manual layout via [a browser-based diagram editor](/server/diagrams/editor), enabling you to craft a more precise story. Structurizr takes control of rendering the boxes and arrows for you with [a variety of notation available](/server/diagrams/notation). All you need to do, if you want to, is move them around the diagram canvas.
30+
A false narrative exists that UI-driven tools support manual layout, while "as code" tools don't. It is true that most "diagrams as code" formats (PlantUML, Mermaid, dot, etc) do only support automatic layout. Structurizr is relatively unique in that it supports both automatic _and_ manual layout via [a browser-based diagram editor](/server/diagrams/editor), enabling you to craft a more precise story. Structurizr takes control of rendering the boxes and arrows for you with [a variety of notation available](/server/diagrams/notation). All you need to do, if you want to, is move them around the diagram canvas.
2531

2632
## Version control friendly
2733

‎example/01-system-context-diagram/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
nav_order: 1
4+
parent: Example
5+
title: System Context diagram
6+
permalink: /example/system-context-diagram
7+
---
8+
9+
## System context diagram
10+
11+
[![](https://c4model.com/images/examples/SystemContext.png)](https://c4model.com/example/#SystemContext)
12+
13+
### Diagram key
14+
15+
![](https://c4model.com/images/examples/SystemContext-key.png)

‎example/02-container-diagram/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
nav_order: 2
4+
parent: Example
5+
title: Container diagram
6+
permalink: /example/container-diagram
7+
---
8+
9+
## Container diagram
10+
11+
[![](https://c4model.com/images/examples/Containers.png)](https://c4model.com/example/#Containers)
12+
13+
### Diagram key
14+
15+
![](https://c4model.com/images/examples/Containers-key.png)

‎example/03-component-diagram/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
nav_order: 3
4+
parent: Example
5+
title: Component diagram
6+
permalink: /example/component-diagram
7+
---
8+
9+
## Component diagram
10+
11+
[![](https://c4model.com/images/examples/Components.png)](https://c4model.com/example/#Components)
12+
13+
### Diagram key
14+
15+
![](https://c4model.com/images/examples/Components-key.png)

‎example/04-code-diagram/index.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
layout: default
3+
nav_order: 4
4+
parent: Example
5+
title: Code diagram
6+
permalink: /example/code-diagram
7+
---
8+
9+
## Code diagram
10+
11+
Structurizr doesn't support code level diagrams natively, but you can use an [image view](/dsl/cookbook/image-view/) instead. This particular example is created with an inline PlantUML definition.
12+
13+
[![](https://c4model.com/images/examples/Code.png)](https://c4model.com/example/#Code)

‎example/05-system-landscape-diagram/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
nav_order: 5
4+
parent: Example
5+
title: System Landscape diagram
6+
permalink: /example/system-landscape-diagram
7+
---
8+
9+
## System landscape diagram
10+
11+
[![](https://c4model.com/images/examples/SystemLandscape.png)](https://c4model.com/example/#SystemLandscape)
12+
13+
### Diagram key
14+
15+
![](https://c4model.com/images/examples/SystemLandscape-key.png)

‎example/06-dynamic-diagram/index.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
layout: default
3+
nav_order: 6
4+
parent: Example
5+
title: Dynamic diagram
6+
permalink: /example/dynamic-diagram
7+
---
8+
9+
## Dynamic diagram
10+
11+
Structurizr supports collaboration style dynamic diagrams out of the box.
12+
13+
[![](https://c4model.com/images/examples/Dynamic-Collaboration.png)](https://c4model.com/example/#Dynamic-Collaboration)
14+
15+
Sequence style diagrams can be created with an [image view](/dsl/cookbook/image-view/). This example is a PlantUML sequence diagram export of the above dynamic view:
16+
17+
```
18+
image internetBankingSystem.backend "Dynamic-Sequence" {
19+
plantuml "Dynamic-Collaboration"
20+
}
21+
```
22+
23+
[![](https://c4model.com/images/examples/Dynamic-Sequence.png)](https://c4model.com/example/#Dynamic-Sequence)
24+

‎example/07-deployment-diagram/index.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
nav_order: 7
4+
parent: Example
5+
title: Deployment diagram
6+
permalink: /example/deployment-diagram
7+
---
8+
9+
## Deployment diagram
10+
11+
[![](https://c4model.com/images/examples/Deployment-Live.png)](https://c4model.com/example/#Deployment-Live)
12+
13+
### Diagram key
14+
15+
![](https://c4model.com/images/examples/Deployment-Live-key.png)

‎example/index.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
layout: default
3+
title: Example
4+
nav_order: 4
5+
permalink: /example
6+
has_toc: false
7+
---
8+
9+
# Example
10+
11+
The example diagrams on the [C4 model](https://c4model.com) website were created with Structurizr:
12+
13+
- [Interactive version](https://c4model.com/example/) (created with [export -format static](/export/static-site))
14+
- [Structurizr DSL source](https://playground.structurizr.com?src=https://docs.structurizr.com/examples/c4model.dsl)
15+
16+
|---|---|---|---|
17+
| [![](https://c4model.com/images/examples/SystemContext.png)](/example/system-context-diagram) | [![](https://c4model.com/images/examples/Containers.png)](/example/container-diagram) | [![](https://c4model.com/images/examples/Components.png)](/example/component-diagram) | [![](https://c4model.com/images/examples/Code.png)](/example/code-diagram) |
18+
| [System context diagram](/example/system-context-diagram) | [Container diagram](/example/container-diagram) | [Component diagram](/example/component-diagram) | [Code diagram](/example/code-diagram) |
19+
20+
|---|---|---|
21+
| [![](https://c4model.com/images/examples/SystemLandscape.png)](/example/system-landscape-diagram) | [![](https://c4model.com/images/examples/Dynamic-Collaboration.png)](/example/dynamic-diagram) [![](https://c4model.com/images/examples/Dynamic-Sequence.png)](/example/dynamic-diagram) | [![](https://c4model.com/images/examples/Deployment-Live.png)](/example/deployment-diagram) |
22+
| [System Landscape diagram](/example/system-landscape-diagram) | [Dynamic diagram](/example/dynamic-diagram) | [Deployment diagram](/example/deployment-diagram) |

0 commit comments

Comments
 (0)