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.
232 lines
11 KiB
Markdown
232 lines
11 KiB
Markdown
# Layout Options
|
|
|
|
PlantUML uses [Graphviz](https://www.graphviz.org/) for its 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
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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 fulfill 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
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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
|
|
```
|
|
|
|
|
|
|
|
|
|
## HIDE_STEREOTYPE()
|
|
|
|
To enable a layout without `<<stereotypes>>` and legend.
|
|
This can be enabled with `HIDE_STEREOTYPE()`.
|
|
|
|
```csharp
|
|
@startuml HIDE_STEREOTYPE Sample
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
|
|
|
|
HIDE_STEREOTYPE()
|
|
|
|
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
|
|
```
|
|
|
|
|
|
|
|
|
|
## HIDE_PERSON_SPRITE() or SHOW_PERSON_SPRITE($sprite="")
|
|
|
|
With the macros `HIDE_PERSON_SPRITE()` and `SHOW_PERSON_SPRITE()` it is possible to change the person related default sprite. `SHOW_PERSON_SPRITE()` is the default.
|
|
|
|
- **HIDE_PERSON_SPRITE()**: deactivates the default sprite
|
|
- **SHOW_PERSON_SPRITE()**: activates the default sprite "person"
|
|
- **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite
|
|
|
|
"person" and "person2" are predefined sprites which can be used as default sprite too.
|
|
|
|
```csharp
|
|
@startuml predefined sprites Sample
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
|
|
|
|
Person(userA, "User A", "with predefined sprite person", "person")
|
|
Person(userB, "User B", "with predefined sprite person2", "person2")
|
|
@enduml
|
|
```
|
|
|
|
|
|
|
|
|
|
**Using HIDE_PERSON_SPRITE()**
|
|
|
|
```csharp
|
|
@startuml HIDE_PERSON_SPRITE Sample
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
|
|
|
|
HIDE_PERSON_SPRITE()
|
|
|
|
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 SHOW_PERSON_SPRITE()**
|
|
|
|
```csharp
|
|
@startuml SHOW_PERSON_SPRITE Sample
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
|
|
|
|
/' Not needed because this is the default with sprite "person" '/
|
|
SHOW_PERSON_SPRITE()
|
|
|
|
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 SHOW_PERSON_SPRITE(sprite)**
|
|
|
|
```csharp
|
|
@startuml SHOW_PERSON_SPRITE(sprite) Sample
|
|
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
|
|
!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
|
|
!include osaPuml/Common.puml
|
|
!include osaPuml/User/all.puml
|
|
|
|
SHOW_PERSON_SPRITE("osa_user_green_architect")
|
|
|
|
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
|
|
```
|
|
|
|
|
|
|