You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
13 KiB
Markdown
113 lines
13 KiB
Markdown
# Layout Options
|
|
|
|
PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML.
|
|
|
|
...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended.
|
|
|
|
For this reason, C4-PlantUML also comes with some layout options.
|
|
|
|
## LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT
|
|
|
|
With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN` is the default.
|
|
|
|
```csharp
|
|
@startuml LAYOUT_TOP_DOWN Sample
|
|
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
|
|
|
/' Not needed because this is the default '/
|
|
LAYOUT_TOP_DOWN
|
|
|
|
Person(admin, "Administrator")
|
|
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")
|
|
|
|
Rel(admin, web_app, "Uses", "HTTPS")
|
|
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
|
@enduml
|
|
```
|
|
|
|
|
|
|
|
Using `LAYOUT_LEFT_RIGHT`
|
|
|
|
```csharp
|
|
@startuml LAYOUT_LEFT_RIGHT Sample
|
|
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
|
|
|
LAYOUT_LEFT_RIGHT
|
|
|
|
Person(admin, "Administrator")
|
|
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")
|
|
|
|
Rel(admin, web_app, "Uses", "HTTPS")
|
|
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
|
@enduml
|
|
```
|
|
|
|
|
|
|
|
## LAYOUT_WITH_LEGEND
|
|
|
|
Colors can help to add additional information or simply to make the diagram more aesthetically pleasing.
|
|
It can also help to save some space.
|
|
|
|
All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<<stereotypes>>` and with a legend.
|
|
This can be enabled with `LAYOUT_WITH_LEGEND`.
|
|
|
|
```csharp
|
|
@startuml LAYOUT_WITH_LEGEND Sample
|
|
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
|
|
|
LAYOUT_WITH_LEGEND()
|
|
|
|
Person(admin, "Administrator")
|
|
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")
|
|
|
|
Rel(admin, web_app, "Uses", "HTTPS")
|
|
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
|
@enduml
|
|
```
|
|
|
|
|
|
|
|
## LAYOUT_AS_SKETCH
|
|
|
|
C4-PlantUML can be especially helpful during up-front design sessions.
|
|
One thing which is often ignored is the fact, that these software architecture sketches are just sketches.
|
|
|
|
Without any proof
|
|
|
|
* if they are technically possible
|
|
* if they can fullfil all requirements
|
|
* if they keep what they promise
|
|
|
|
More often these sketches are used by many people as facts and are manifested into their documentations.
|
|
With `LAYOUT_AS_SKETCH` you can make a difference.
|
|
|
|
```csharp
|
|
@startuml LAYOUT_AS_SKETCH Sample
|
|
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
|
|
|
LAYOUT_AS_SKETCH()
|
|
|
|
Person(admin, "Administrator")
|
|
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")
|
|
|
|
Rel(admin, web_app, "Uses", "HTTPS")
|
|
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
|
@enduml
|
|
```
|
|
|
|
|