@ -1,6 +1,6 @@
# C4-PlantUML
C4-PlantUML combines the benefits of [PlantUML ](http://en.plantuml.com/ ) and the [C4 model ](https://c4model.com/ ) for providing a simple way of describing and communicate software architectures - especially during up-front design sessions - with an intuitive language using open source and platform independent tools.
@ -18,21 +18,23 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
## Getting Started
At the top of your C4- PlantUML `.puml` file, you need to include the `C4_Cont ainer.puml` file found in the `root` of this repo.
At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Cont ext.puml`, `C4_Cont ainer.puml` or `C4_Component .puml` file found in the `root` of this repo.
To be independent of any internet connectivity, you can also download `C4_Container.puml ` and reference it locally with
To be independent of any internet connectifity, you can also download the files found in the `root ` and reference it locally with
```c#
!include path/to/C4_Container.puml
```
Just remember to change the `!include` statements inside the top of the files.
If you want to use the always up-to-date version in this repo, use the following:
```c#
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
```
After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person` , ` System`, ` Container`, ` Relationship`.
After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person` , ` Person_Ext`, ` System`, ` System_Ext`, ` Container`, ` Component`, ` Relationship`, `Boundary` , `System_Boundary` , `Container_Boundary `.
```csharp
@startuml C4_Elements
@ -46,9 +48,9 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology")
@enduml
```
In addition to this, it is also possible to define a system boundary.
In addition to this, it is also possible to define a system or component boundary.
Take a look a look at the following sample of a C4 Container Diagram:
@ -57,7 +59,7 @@ Take a look a look at the following sample of a C4 Container Diagram:
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
Person(admin, "Administrator")
package "Sample System" < < boundary > > as c1 {
System_Boundary(c1, "Sample System") {
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
@ -67,16 +69,16 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
## Snippets for Visual Studio Code
Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension ](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml ), you can also find VS Code snippets for C4-PlantUML at [.vscode/ snippets/diagram.json ](.vscode/ snippets/diagram.json ).
Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension ](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml ), you can also find VS Code snippets for C4-PlantUML at [.vscode/ C4.code- snippets](.vscode/ C4.code- snippets).
It is possible to save them directly inside VS Code: [Creating your own snippets ](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets ).
Project level snippets are now supported in [VSCode 1.28 ](https://code.visualstudio.com/updates/v1_28#_project-level-snippets ).
Just include the `C4.code-snippets` file in the `.vscode` folder of your project.
Or you can use the [Project Snippets extension ](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets ).
Now it is possible to have workspace/project level code snippets.
It is possible to save them directly inside VS Code: [Creating your own snippets ](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets ).
@ -100,7 +102,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to
LAYOUT_TOP_DOWN
Person(admin, "Administrator")
package "Sample System" < < boundary > > as c1 {
System_Boundary(c1, 'Sample') {
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
@ -110,7 +112,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
Using `LAYOUT_LEFT_RIGHT`
@ -121,7 +123,7 @@ Using `LAYOUT_LEFT_RIGHT`
LAYOUT_LEFT_RIGHT
Person(admin, "Administrator")
package "Sample System" < < boundary > > as c1 {
System_Boundary(c1, 'Sample') {
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
@ -131,7 +133,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
### LAYOUT_WITH_LEGEND
@ -148,7 +150,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`.
LAYOUT_WITH_LEGEND
Person(admin, "Administrator")
package "Sample System" < < boundary > > as c1 {
System_Boundary(c1, 'Sample') {
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
@ -158,7 +160,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
### LAYOUT_AS_SKETCH
@ -181,7 +183,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference.
LAYOUT_AS_SKETCH
Person(admin, "Administrator")
package "Sample System" < < boundary > > as c1 {
System_Boundary(c1, 'Sample') {
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")
@ -191,29 +193,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
## Advanced Samples
The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples ](https://c4model.com/#examples ) created by [Simon Brown ](http://simonbrown.je/ ).
The core diagram samples from [c4model.com ](https://c4model.com/#coreDiagrams ) are available [here ](samples/C4model.com/README.md ).
### techtribes.js
Source: [C4_Container Diagram Sample - techtribesjs.puml ](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml )
### Message Bus and Microservices
Source: [C4_Container Diagram Sample - message bus.puml ](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml )
### Big Bank plc
Source: [C4_Container Diagram Sample - bigbankplc.puml ](samples/C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml )
## Background
Ricardo Niepel
8 years ago
committed by
GitHub