github-mirrors
/
C4-PlantUML
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merged in release/1-1 with plantuml version 1.2019.6

Browse Source
pull/17/head
Adrian Lupu 7 years ago
parent f4a5c6ee63 33102c07ff
commit 33aa8d8e0c
14 changed files with 311 additions and 193 deletions
Show Stats Download Patch File Download Diff File

161
C4.puml
Unescape Escape View File

@ -4,12 +4,12 @@
' Colors
' ##################################
!define ELEMENT_FONT_COLOR #FFFFFF
!global $ELEMENT_FONT_COLOR = "#FFFFFF"
' Styling
' ##################################
!define TECHN_FONT_SIZE 12
!global $TECHN_FONT_SIZE = 12
skinparam defaultTextAlignment center
@ -43,64 +43,133 @@ skinparam rectangle<<boundary>> {
' Layout
' ##################################
!definelong LAYOUT_AS_SKETCH
!function LAYOUT_AS_SKETCH()
skinparam backgroundColor #EEEBDC
skinparam handwritten true
skinparam defaultFontName "Comic Sans MS"
center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
!enddefinelong
!endfunction
!define LAYOUT_TOP_DOWN top to bottom direction
!define LAYOUT_LEFT_RIGHT left to right direction
!function LAYOUT_TOP_DOWN()
top to bottom direction
!endfunction
!function LAYOUT_LEFT_RIGHT()
left to right direction
!endfunction
' Boundaries
' ##################################
!define Boundary(e_alias, e_label) rectangle "==e_label" <<boundary>> as e_alias
!define Boundary(e_alias, e_label, e_type) rectangle "==e_label\n<size:TECHN_FONT_SIZE>[e_type]</size>" <<boundary>> as e_alias
!unquoted function Boundary($alias, $label)
!return 'rectangle "=='+$label+'" <<boundary>> as '+$alias
!endfunction
!unquoted function Boundary($alias, $label, $type)
!return 'rectangle "=='+$label+'\n<size:'+$TECHN_FONT_SIZE+'>['+$type+']</size>" <<boundary>> as '+$alias
!endfunction
' Relationship
' ##################################
!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : e_label
!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//
!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->")
!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->")
!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--")
!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--")
!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->")
!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->")
!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-")
!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-")
!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->")
!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->")
!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label)
!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn)
!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->")
!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->")
!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label)
!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn)
!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->")
!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->")
!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label)
!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn)
!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->")
!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->")
!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label)
!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn)
!unquoted function Rel_($alias1, $alias2, $label, $direction="")
$alias1 $direction $alias2 : $label
!endfunction
!unquoted function Rel_($alias1, $alias2, $label, $techn, $direction="")
$alias1 $direction $alias2 : "$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//"
!endfunction
!unquoted function Rel($from, $to, $label)
Rel_($from, $to, $label, "-->")
!endfunction
!unquoted function Rel($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-->")
!endfunction
!unquoted function Rel_Back($from, $to, $label)
Rel_($from, $to, $label, "<--")
!endfunction
!unquoted function Rel_Back($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "<--")
!endfunction
!unquoted function Rel_Neighbor($from, $to, $label)
Rel_($from, $to, $label, "->")
!endfunction
!unquoted function Rel_Neighbor($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "->")
!endfunction
!unquoted function Rel_Back_Neighbor($from, $to, $label)
Rel_($from, $to, $label, "<-")
!endfunction
!unquoted function Rel_Back_Neighbor($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "<-")
!endfunction
!unquoted function Rel_D($from, $to, $label)
Rel_($from, $to, $label, "-DOWN->")
!endfunction
!unquoted function Rel_D($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-DOWN->")
!endfunction
!unquoted function Rel_Down($from, $to, $label)
Rel_($from, $to, $label, "-DOWN->")
!endfunction
!unquoted function Rel_Down($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-DOWN->")
!endfunction
!unquoted function Rel_U($from, $to, $label)
Rel_($from, $to, $label, "-UP->")
!endfunction
!unquoted function Rel_U($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-UP->")
!endfunction
!unquoted function Rel_Up($from, $to, $label)
Rel_($from, $to, $label, "-UP->")
!endfunction
!unquoted function Rel_Up($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-UP->")
!endfunction
!unquoted function Rel_L($from, $to, $label)
Rel_($from, $to, $label, "-LEFT->")
!endfunction
!unquoted function Rel_L($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-LEFT->")
!endfunction
!unquoted function Rel_Left($from, $to, $label)
Rel_($from, $to, $label, "-LEFT->")
!endfunction
!unquoted function Rel_Left($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-LEFT->")
!endfunction
!unquoted function Rel_R($from, $to, $label)
Rel_($from, $to, $label, "-RIGHT->")
!endfunction
!unquoted function Rel_R($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-RIGHT->")
!endfunction
!unquoted function Rel_Right($from, $to, $label)
Rel_($from, $to, $label, "-RIGHT->")
!endfunction
!unquoted function Rel_Right($from, $to, $label, $techn)
Rel_($from, $to, $label, $techn, "-RIGHT->")
!endfunction
' Layout Helpers
' ##################################
!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to
!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to
!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to
!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to
!unquoted function Lay_D($from, $to)
$from -[hidden]D- $to
!endfunction
!unquoted function Lay_U($from, $to)
$from -[hidden]U- $to
!endfunction
!unquoted function Lay_R($from, $to)
$from -[hidden]R- $to
!endfunction
!unquoted function Lay_L($from, $to)
$from -[hidden]L- $to
!endfunction

46
C4_Component.puml
Unescape Escape View File

@ -1,4 +1,4 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
@ -10,46 +10,54 @@
' Colors
' ##################################
!define COMPONENT_BG_COLOR #85BBF0
!global $COMPONENT_BG_COLOR = "#85BBF0"
' Styling
' ##################################
skinparam rectangle<<component>> {
StereotypeFontColor ELEMENT_FONT_COLOR
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor #000000
BackgroundColor COMPONENT_BG_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor #78A8D8
}
skinparam database<<component>> {
StereotypeFontColor ELEMENT_FONT_COLOR
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor #000000
BackgroundColor COMPONENT_BG_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor #78A8D8
}
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
!function LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<CONTAINER_BG_COLOR> | container |
|<COMPONENT_BG_COLOR> | component |
|<$PERSON_BG_COLOR> | person |
|<$EXTERNAL_PERSON_BG_COLOR> | external person |
|<$SYSTEM_BG_COLOR> | system |
|<$EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<$CONTAINER_BG_COLOR> | container |
|<$COMPONENT_BG_COLOR> | component |
endlegend
!enddefinelong
!endfunction
' Elements
' ##################################
!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
!unquoted function Component($alias, $label, $techn)
rectangle "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//" <<component>> as $alias
!endfunction
!unquoted function Component($alias, $label, $techn, $descr)
rectangle "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//\n\n $descr" <<component>> as $alias
!endfunction
!unquoted function ComponentDb($alias, $label, $techn)
database "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//" <<component>> as $alias
!endfunction
!unquoted function ComponentDb($alias, $label, $techn, $descr)
database "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//\n\n $descr" <<component>> as $alias
!endfunction

50
C4_Container.puml
Unescape Escape View File

@ -1,4 +1,4 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
' uncomment the following line and comment the first to use locally
' !include C4_Context.puml
@ -10,50 +10,60 @@
' Colors
' ##################################
!define CONTAINER_BG_COLOR #438DD5
!global $CONTAINER_BG_COLOR = "#438DD5"
' Styling
' ##################################
skinparam rectangle<<container>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor CONTAINER_BG_COLOR
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor #3C7FC0
}
skinparam database<<container>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor CONTAINER_BG_COLOR
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor #3C7FC0
}
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
!function LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<CONTAINER_BG_COLOR> | container |
|<$PERSON_BG_COLOR> | person |
|<$EXTERNAL_PERSON_BG_COLOR> | external person |
|<$SYSTEM_BG_COLOR> | system |
|<$EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<$CONTAINER_BG_COLOR> | container |
endlegend
!enddefinelong
!endfunction
' Elements
' ##################################
!define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
!unquoted function Container($alias, $label, $techn)
rectangle "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//" <<container>> as $alias
!endfunction
!unquoted function Container($alias, $label, $techn, $descr)
rectangle "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//\n\n $descr" <<container>> as $alias
!endfunction
!define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
!define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
!unquoted function ContainerDb($alias, $label, $techn)
database "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//" <<container>> as $alias
!endfunction
!unquoted function ContainerDb($alias, $label, $techn, $descr)
database "==$label\n//<size:$TECHN_FONT_SIZE>[$techn]</size>//\n\n $descr" <<container>> as $alias
!endfunction
' Boundaries
' ##################################
!define Container_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Container")
!unquoted function Container_Boundary($alias, $label)
!return Boundary($alias, $label, "Container")
!endfunction

136
C4_Context.puml
Unescape Escape View File

@ -1,4 +1,4 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml
' uncomment the following line and comment the first to use locally
' !include C4.puml
@ -10,93 +10,121 @@
' Colors
' ##################################
!define PERSON_BG_COLOR #08427B
!define EXTERNAL_PERSON_BG_COLOR #686868
!define SYSTEM_BG_COLOR #1168BD
!define EXTERNAL_SYSTEM_BG_COLOR #999999
!global $PERSON_BG_COLOR = "#08427B"
!global $EXTERNAL_PERSON_BG_COLOR = "#686868"
!global $SYSTEM_BG_COLOR = "#1168BD"
!global $EXTERNAL_SYSTEM_BG_COLOR = "#999999"
' Styling
' ##################################
skinparam rectangle<<person>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor PERSON_BG_COLOR
BorderColor #073B6F
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $PERSON_BG_COLOR
BorderColor #073B6F
}
skinparam rectangle<<external_person>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_PERSON_BG_COLOR
BorderColor #8A8A8A
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_PERSON_BG_COLOR
BorderColor #8A8A8A
}
skinparam rectangle<<system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor SYSTEM_BG_COLOR
BorderColor #3C7FC0
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $SYSTEM_BG_COLOR
BorderColor #3C7FC0
}
skinparam rectangle<<external_system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
}
skinparam database<<system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor SYSTEM_BG_COLOR
BorderColor #3C7FC0
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $SYSTEM_BG_COLOR
BorderColor #3C7FC0
}
skinparam database<<external_system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
}
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
!function LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<$PERSON_BG_COLOR> | person |
|<$EXTERNAL_PERSON_BG_COLOR> | external person |
|<$SYSTEM_BG_COLOR> | system |
|<$EXTERNAL_SYSTEM_BG_COLOR> | external system |
endlegend
!enddefinelong
!endfunction
' Elements
' ##################################
!define Person(e_alias, e_label) rectangle "==e_label" <<person>> as e_alias
!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<person>> as e_alias
!define Person_Ext(e_alias, e_label) rectangle "==e_label" <<external_person>> as e_alias
!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_person>> as e_alias
!define System(e_alias, e_label) rectangle "==e_label" <<system>> as e_alias
!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<system>> as e_alias
!define System_Ext(e_alias, e_label) rectangle "==e_label" <<external_system>> as e_alias
!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_system>> as e_alias
!define SystemDb(e_alias, e_label) database "==e_label" <<system>> as e_alias
!define SystemDb(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <<system>> as e_alias
!define SystemDb_Ext(e_alias, e_label) database "==e_label" <<external_system>> as e_alias
!define SystemDb_Ext(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <<external_system>> as e_alias
!unquoted function Person($alias, $label)
rectangle "==$label" <<person>> as $alias
!endfunction
!unquoted function Person($alias, $label, $descr)
rectangle "==$label\n\n $descr" <<person>> as $alias
!endfunction
!unquoted function Person_Ext($alias, $label)
rectangle "==$label" <<external_person>> as $alias
!endfunction
!unquoted function Person_Ext($alias, $label, $descr)
rectangle "==$label\n\n $descr" <<external_person>> as $alias
!endfunction
!unquoted function System($alias, $label)
rectangle "==$label" <<system>> as $alias
!endfunction
!unquoted function System($alias, $label, $descr)
rectangle "==$label\n\n $descr" <<system>> as $alias
!endfunction
!unquoted function System_Ext($alias, $label)
rectangle "==$label" <<external_system>> as $alias
!endfunction
!unquoted function System_Ext($alias, $label, $descr)
rectangle "==$label\n\n $descr" <<external_system>> as $alias
!endfunction
!unquoted function SystemDb($alias, $label)
database "==$label" <<system>> as $alias
!endfunction
!unquoted function SystemDb($alias, $label, $descr)
database "==$label\n\n $descr" <<system>> as $alias
!endfunction
!unquoted function SystemDb_Ext($alias, $label)
database "==$label" <<external_system>> as $alias
!endfunction
!unquoted function SystemDb_ext($alias, $label, $descr)
database "==$label\n\n $descr" <<external_system>> as $alias
!endfunction
' Boundaries
' ##################################
!define Enterprise_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Enterprise")
!define System_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "System")
!unquoted function Enterprise_Boundary($alias, $label)
!return Boundary($alias, $label, "Enterprise")
!endfunction
!unquoted function System_Boundary($alias, $label)
!return Boundary($alias, $label, "System")
!endfunction

39
LayoutOptions.md
Unescape Escape View File

@ -6,16 +6,16 @@ PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization.
For this reason, C4-PlantUML also comes with some layout options.
## LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT
## 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.
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
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
/' Not needed because this is the default '/
LAYOUT_TOP_DOWN
LAYOUT_TOP_DOWN()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -28,15 +28,15 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample")
![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN() Sample")
Using `LAYOUT_LEFT_RIGHT`
Using `LAYOUT_LEFT_RIGHT()`
```csharp
@startuml LAYOUT_LEFT_RIGHT Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
LAYOUT_LEFT_RIGHT
LAYOUT_LEFT_RIGHT()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -49,21 +49,21 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample")
![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT() Sample")
## LAYOUT_WITH_LEGEND
## 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`.
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
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
LAYOUT_WITH_LEGEND
LAYOUT_WITH_LEGEND()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -75,10 +75,9 @@ Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/0/xLfjS-8u4lwUglm7BPagCZS9aCmRboBKyk9CKaU0mkHoUpDRbC02N6jRFaaU9hix__tKVW5iRB1ZoCrLhLCLm6frFq-tBBLR-faBp8HZ6aWGBewFYgZrxhnlO4iyt7VEq5V2k4ujT56gb2hGEXV2vbVbyamNSsTScb2pFD0dc6cqgnER6EMrxiT7hZvgKCRXsydE2thyD3Fe61lebT9HxfNkS7JJa_zQlKvlWAvHuUJ6lGgUSbKy6RerUuRseTAwxNgwrRj_ArBrnIK8yDzqoyOCcqWZK-mOOaY-YOQXpooJM09Dv3_2me8BXkr7NHDpT5cfh3UO-DizuHpFYAh_Jj35-qgu8oCJWQsPGT0VnqT8NghKJQXuiiaDjOJNwT9hudEiqONaYgROuEJuw7i4BHPuZFa-L3KOeuj0Zni-TFB1lRnRe33XzjBEzmIcjTgOEfQ6sLEzleGQnPE0lx9X_frxURURb6c49JR0I27IItnED1zU4NNm4tL4Xj4pTQo9W0UYq_Ybzp0SDTIH-WzbsBezVRrETumdlyqO4FNnA8hIRBVMHUROqXPC5u9OI327n8my8Dh59a655ZNr2LAnnT6zAeU-DmhHb5Bug4qfZ4omTCs8Ld_4p9BUlAgLeQ6EMenWGJGfpf2cyud3uPa-GnOX6aU2eZ51Nx6XQo0bIH9B2tZ6aXxs-gDsxx4Bd0MrNGrK22g1wn1ejzzEBHtbPZWQt7sw7O8UWqm5A6BwR2wswIdAUBe3I2TP9XN7-ez3NIS4C7mrJwUl97NCpz0h0u-98R7yn8Xmc8MAg-UpS7rTVEC9l2aMK6WKOuvacwia2ZUzMVa9Ops5zIzMZSkduKhUYSnXRuhrp_8kw7bJ_BLM1h5wUh3WpG4nCFpYSztEvLsfQEHJl93St2-NQsIN4Ruk52HfNtBjVj07NVcTKlXsbr519dChe_62r_kBLIvxVezwlVxPqniul5mkn8p-MB2dhwQCcW2ChWq_ZyL6onagd9_N0MyQFyGgy81kCn6uADvKejERShxBIgPsVfwMJ9B-J8nYxILQx18v4OqfonoYr17QPY9RgB96wjdaQjaYjZU6jIoHQsSE6Qnb6UBMpXsmh0RfmZeugNWR--6LQFKXCws7VWPI3xaPPJDd7vYEVI0-YHOxcGb1LfU1KYStewm6PPvvS5BnDlR3Az7g83CjD_dEm6kGcrHcY_0sS7XU2LRsn6treebkYM4Jbk-zHQeABK6GmC8FTFvvhciQiNvjdyFz5EH1rSDMLGzPL0ssgXfaKTNPggeJgwg8_lQSArGLwYi3jTSTDJ-j5PmgrNUN7vk5zShKluRAeDleZEB4FrJXRrrS_KKTAlTXgOkB3zLcErPfdFZVtUkvHQ_OEWmCH6fvLPXmiSMhMSJKtuwFTZGt8tMFg3-bn7gLflBnRVF3pRPY4VacaLdO6Bq8sgIuHc1N6_2t3JP_ueAO1qOR6ISHa6zR7szQbLI-VH6qISCxdM-3wkQFxDeLnX_VitieVJxU3Mz77UMJqcr30KzEpGJn9KUewCtazEmLz8wF_hn6eKl-7aenzATigaMdYRelWxodtXTAUZgNqe7RmzqYNgcxebvWeefZHCEALzqaDOzWt6gl60Gs2_AjytsNn6PrCbGMzEv2ZMyvGMAEKXSZOsr0WOpm2OktzSNwOla2wSnkCJnIledK13UNWknCOmncOfi1GomArHq_gIalfuyiJ6DjP6Avs-mMmy-BQGwcUujfBjhjyIRfvPRSleAwOMIDwAQnVKQrFOwFQpp5VOHLMYJR0hkJRwQuxcrNIO6DEPlfd8nsRp0bxWKLLcfIlSNwJq8UYvwA-BVN_EzLBPd0DEwwoY3yMlFkRRNTVh_Nrvg9p9wmRX6sjh-SDlCAxoudYcnaO9liOhQaTsQD_n_8_yeSSsQEijkcrptTon7mCXbcAp0NinVjrxrYbyyCEw4eFAopB0ExqErQvDEZZ2mSgG1lXnotK0SkZLkuNjYZYV1shA-7TkdULk4bqrnBub9BR1LUjoQ68sUku4GSmukITohEuOG1O_c0RZyWLpOnp7lorcXfgsGxfW7afIrgkcVEn9oWAJKCxuoKN2C9md9-33NhZBldPwHjPD09DemdKB946MF2NNCdr2PNg86uxZu_oq2LeBNFT5Dw1X5_jhcIZZLjQi5tj91STSkrlfgtv0qEAjtkgcFRb0a0lQx1b-NeT4q5frEnm8m44sMWw3Mo3OVBUPdQXaSx8idzmqB64y2mv3Sv4AGZF5m1MXVF7OH4aytOqNHYJIHnDL26sMIkoq4iYO4HZNmb1eNLe9Jp56EhTz_lTM4n3cK-rVVDvarbpvcFppPt_d1ISQ_4d27AA2Pd-5XjLDlLhTdEZuhshmpdXJ8SLouQdK3E7nqlbGdvvWwS2Qs6VBPrUpkw0sP2AG1lXtpeJ2YdH_y7cL0gb-PuvuwVWewF_5elramTzgiRyAbpmR2WRe8JhI5CBivGKSMcN7UBhrUdmOEaV4768spRKjCZ6QE6RHioom7u1SYSJivGG-sNkifGTf7BwsNf0jt_imLj3KXaE2Ggp3ry31w15TXq3A738ZzSmAbeXeHk4aXsEA3x7W0y5LwprEGB5bnwSERHvxQ2zi1bR_bvEnpsrOAtZxz2ljBqYSXrNom8VC1MSwZFyT7FCZeoPVel "LAYOUT_WITH_LEGEND() Sample")
![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNy7hV4W3E8sJFfhD9aRzK9fW7IUmbCtURGk3jiQnS2LI8Ecwtct_-mvbcP7D28BitW0BN1cmPN7cp9aHUVZuA1KLQXP7pZxfy8WBYJTxfPVZ_1R096H0t9vxu_RzuUKjVdLkUxS3idUPNWuYUMeHXUon8gRlTgxwIqJl-jykEJvn7Fb7o18gQ4pGYCuYvSDtrOh2HnO3KsICNo3oPdD1auSmK5DoqcZadiVq-mr8IH_12_y3vFXT8-ybOAmeUuo0_DSXU7c82bmj4hZaJ2qzJj8MEQK1dsDoP48Z2SxFF4nB23xF8DAoahttwPK-qL3sqto0dyzoEZyVyHaBg5Wqcoj-6omAE3Ui21iytgPN-hJDHG2YwBb-eq02AgSGQ9hxf4SNVAQglUA88-DUw_VRUt_OyeRUFro_SvLBUKJ7VpmAdMp6mtNTThUJivXI5in5g1GmeiGCx0wYi-lJ64Yjm-DmJ3pA9BdnQiwohv09v_hdVC9r_z5XBWG4pGSg6DRpxFn8DpH9Hm1L4A2v844enpCfGyxgX044aYXEHa2-qIWCj9Np6x3WAKMJxofN__PksBrzwADValfofNYCkFeT8-ocVS-zz8U3wqzNFebWehIB21-dAkU1XMylUqK8LGTlvhXu1KFCWCewWM54Hn0Tv0P2xU8YUreZQpsGIfBvbGFg6zqZdmScdvUjNuiZO6O3YAXEMKx3f6AYw3fSSJgkhq1FrkYPabxKQWTaPPnlC7xaJ9CtPQaKHi5uodQAzuKT7PrB7CTd6qBP_9p1Vpq_qktDewFQMWsGsqJmk8vcFFUkCzfsKvtK3W-RjODI39EO3MRR6DIrkhLnoBzQEMXlcw3TfXcU7nvgXkLGDiyI8mE-Xju7784ZBhOf9cPTZBLhKP-lgOcnPN4Hinnono9RDUvkKrmjh5Q5kxkNjXYRpranqOBGvH0smz8qDiftlqtvxk-i1EztBruHSb94iPX-EO35xRvIsNhRb4rFqLPwlTqBLumD4rLCj21q2KG1mrwbyWssAPzUtDWv3dv1_Oh1KRoAArYOHpc6JR8yawSLDBc2A87A6p1qDkgGmlA3J6l9uUTf60J0ldOFquOrd_iId_jdV0ObFeDdV7ebFhtC9zqkZda2PwH5P9Yk42MVg3aLUBEG2kBNQ78dmfYA1O48zCPFdX5_QXcIa16fiRI7DqiIBXGYvfpkW2SOWB9WqrTcQ-jeGSQSCRo3W2XEL4cOQwQ01MXBPq48R8nvkDz0B4OyMDJrGdzAqZSUZccKncMS7JuzIL92TOIKOR0ancSglUUJzU01V8E89peJXAHObcqtxtVkmBlj3zkVLZltnkdRamzjq-x-otS7_LPlQ1c-FzKVO-ZzxldkJQxz-FZzQRjh0rc6VqklgcS51TjZFNmuQpRjpRlPwThd5QbfgK5xOqUwKH5xvzpuyARz_h9m9m_VaHoZqV05EPktK4h-jAK_XUINtVybE9kULKZrJUV3PQTHNkSNv6ptzl8wxtwEyd3jNmrxxYUtttMcMZUaIT69u15Oi3mxS7vSaBKB__jeH7uuFyutUaOpio3BNfgQcEoAR5SbppjjLAAf3JCLNGSrXaMWnWaJIjEo3rtsYPi9VLKzJ0bNE0rPPhXsKb46fcy2a6FnFEeNzeMjB0eYRF8TkjzL1SuvvR6XRUJT4YW9P-9vwLkja8KPpXPv0xORSJk2pNVRofUJtxdo9U5sE3Oq52kU7fBFIx_YGxxjru0TpXH5QaAIUQYc8IFgvLQ5OnEyO1teRwpojbda_HsTnX528c5ZHCLu6Yea8-ih1sIHukgxvMdfaLocIgIYaydsYyKEJdgjwxuxoAtUthuvxNRV_QBLcwdZYqpI9ftojKNrwVclwHcTh0fdkEOz_pcJkD42eqlMhjiIgEhdwYJVN_CYLeM74VJT2UN5toAtc-nR2LLNVkDQKVnD5aMo7oUSwVkyx1kdSi7FpHkloYSEE219D9CasMwQC6GBfWdFbdKT8wVikuZtpTrj7sKn9zwdxzhjoyOl4c-JtMxYlTT8hmB5DZaKAlO7t4zrJ_-l5FilnJR3-CzNx2nGaM9dpI-lsCNad6TwevFjBMaGXqYfrjA_eLI2AYxmj7jpWJu-hfDzZyP91Fi7o-6PcvxcC1hI946S1nYHLf94uJXTEjRmKMUlJbhUtUk-wwEB07Bo-fZS_BEZsrfHnEUIp2IoqIgdCz3w5SyY5Mg5z55J5GYYmXWYZ2MHsy-CtIkrR4ISp0mRdG54gwoUQDrBa3hUbU_VUMYbZKph4ymdK1B_WlxHPynvbu_0WbaS_Gy0 "LAYOUT_WITH_LEGEND Sample")
## LAYOUT_AS_SKETCH
## 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.
@ -90,13 +89,13 @@ Without any proof
* 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.
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
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
LAYOUT_AS_SKETCH
LAYOUT_AS_SKETCH()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -109,4 +108,4 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```
![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/xLfhRziw4lskNy7hV4W3E8sJFfhDEaRzK9fW7IUmbCtURGk3iSQnS6LI8Ecwtct_-mvbcP7D28BatW0BN1g8PN7cp9aHTVX0Faf5XPhF8cUVT7d4XSIBlSBcEBy5C0aP4BVlNhi3VtHnWt-wD_sR8TcxI9g3I9vQHY5xB8dfkztBmGhHk_gtIuvF74V-4RAO2ZeZQ4JdaVBXksf7uIER0LDaZ7z0PCqMWiRtOQ2cvAJHoDoVqU_N82Lz12_y3v3ZTusibu2nekmn0l9VXs3p41MuMiPmmPbQUPmaFN9A0xx0vCY4HXASdrcOjX1yaK8aPILxxvEMtD5GzjriW9_FSces7_YS1LGiMwqrloqMEPmRLeGj7c-JbjpjS160oBkldoYGWCef19hcFkdJ9P-hSeyuuiYut_xzviuVjRsHzm_NxrvcKdwWupyUXKusvU6wRgVNpLXCAGiM8bGA655Y3lO0qTaDw0n8hSjduPXub4boxTMSrLWX4yxrLtF2zVZHOSu51ArxAXZMywnvf3jQf2k0AWZGN90WbEEvb25dTS800aaK9mz0lj4e3BILynkmu2b5a-ywL__cTjIxkH-WNvpuSgKuCWxrCqRORVk-U-6FXbUVBdqImKHf5n4-JbN60mlVMOsA4Cg-lAdZyXMCC0CgwmH64Ns0w23p8jJEpzExDR8n0gaagLyneBxG8_9vOF9vrVirFm9cDeI8wfJbD8nB9egkepMdu_eQz6I3dYdfUQrsGDR6sGxZHyuqULEMKc4KZATiftXVsD5HK-9xVBObbAtFAVpNvf7kRnqTrJPgWDmcWi_gQCOpppgbRNVLIUtmi5KxACGmYTbWjer1tQXR1r_vLwb3ucqJjFiqm-RXeMPO36NpB30ou1le0y0ty86BAiN4h8kmgXVr-PgQ61MBYvX5aBiNUPjuhqfnjR1Q5UxjNjfyRBvW-KHpGXT3M0oBqzWgtrsLyjtTMWdUxLwyFEGuds8U_M80YzjTgRBrgvHDJz5MUltT2vUF3HELJpGdT0543iD-gV8DgvHFBsxi78U_fduvu2XU-HNCpQCOmoPPdCdJ2ffSGXH3wGqOEXjrI63vGQgrvF3pD0m2O5zxXqd7XizTWS_TCpx30f_XCpxz0fz-wfDi5ySyXZFI9Z9CLeYIJzI22hnOIWMprsXoAy8P5Ki24UYDdpmZ_jGo924ZKcDf3syUnrmeHCmutGAFCG1bmRQlJDVMqPACEMDu1G5HdAY2C5TC0GlGbiw34DWOyt2_WLW-y61PrmlzAKcUU3YcKHANSNRuT2TE2DKHKeR1YXYVg-IQJpQ31_0D8XxhJ12IObcgRjvltQ5tCnXrFgrtxetJjoSVEgRV_PVl3WVj_iWoV7-gFyRG-ztptUjC__7n-zDEpmQo3F-MjB9d1JdRO_twSDPgsPjtizErpoiIqqA3pjQETAiYziwvyU5Dv_r5xauUlYCvHgFH2t8sJw6G_6bRVtB9huR_It0s8okNwflkXujkexZEByZP7kt5TTxz7EN-ohySzTrFxg3dJBLkI9EY4y4Zi61rTk3yE2SR3N_xQ4H-E3-QMoEZbLgGrIXDJ4nsURRhacUTjYhHqeQfYcw26iCyKEE42ILfsOSk-yHDXRwi7YQ4Ivo6h3BSEAae0jCN0SYnU1xr2_l2rXOv4RRvZjplgWHdMtbiyZPonGGAmfbuNl9KIsGX4mUBl0LMdRWLmUPRjVB5v7UlV46uwiU6XcB9qqFoUUMNVyXNVGtOvKnHf2OaMOHg6ZAYNcvLE3R1SzQ1_jOghyeYx-_eD8uG4WaR8oh6qr0X6LbVEo2B15TVhKvBZ-GgLI8LdKogBnQxEEcrhmRkCBDwU_lcjDTxzujMRwQEBp99ctIArnRbf-U_fcTqiYgSufhd_ETCuaOBZ2xPksvReCgUgvFiUCsAM1aUbg1N9xGj_ZQvoh9l9LHU-OrhIV4tMUJ9_Ypc3AytPDyu5Gj-PjvuLJnnm069exaaSRLfmf3DcIOyMzPrZ8ooxoBUrxSt0vJ5Z7YVlkjqBXg_IBnDThk9zruZQJcARNB8LUmFk9_gdVwVAVPVYfsEdJzViTD0bc9RF5vOiVF9ETQ_IJZfpf86in09rThwEvHAKCK5ddLlBy_7ntMoxz5P7C7-GVfoFarE2tWOqJX6d7ju8EquZi9nid2iuQtkNfsqlTlN0zT75m7avFKnkVvdL_UreuWl99bBPACrJlFNwZMRHohK-kYZeYeGH8KpY32MH6u_KtQlrAeJSL8px7I64AspUg9r9q7gU9U-V-kXbJOolKymdq19_0dwIvymPrq-0Wlci-X_ "LAYOUT_AS_SKETCH Sample")
![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/0/xLfjS-8u4lwUglm7BPagCZS9aCmRboBKyk9CKaU0mkHoUpDRbC02N6jRFaaU9hix__tKVW5iRB1ZoCrLhLCLm6frFq-tBBLR-faBp8HZ6aWGBewFYgZrxhnlO4iyt7VEq5V2k4ujT56gb2hGEXV2vbVbyamNSsTScb2pFD0dc6cqgnER6EMrxiT7hZvgKCRXsydE2thyD3Fe61lebT9HxfNkS7JJa_zQlKvlWAvHuUJ6lGgUSbKy6RerUuRseTAwxNgwrRj_ArBrnIK8yDzqoyOCcqWZK-mOOaY-YOQXpooJM09Dv3_2me8BXkr7NHDpT5cfh3UO-DizuHpFYAh_Jj35-qgu8oCJWQsPGT0VnqT8NghKJQXuiiaDjOJNwT9hudEiqONaYgROuEJuw7i4BHPuZFa-L3KOeuj0Zni-TFB1lRnRe33XzjBEzmIcjTgOEfQ6sLEzleGQnPE0lx9X_frxURURb6c49JR0I27IItnED1zU4NNm4tL4Xj4pTQo9W0UYq_Ybzp0SDTIH-WzbsBezVRrETumdlyqO4FNnA8hIRBVMHUROqXPC5u9OI327n8my8Dh59a655ZNr2LAnnT6zAeU-DmhHb5Bug4qfZ4omTCs8Ld_4p9BUlAgLeQ6EMenWGJGfpf2cyud3uPa-GnOX6aU2eZ51Nx6XQo0bIH9B2tZ6aXxs-gDsxx4Bd0MrNGrK22g1wn1ejzzEBHtbPZWQt7sw7O8UWqm5A6BwR2wswIdAUBe3I2TP9XN7-ez3NIS4C7mrJwUl97NCpz0h0u-98R7yn8Xmc8MAg-UpS7rTVEC9l2aMK6WKOuvacwia2ZUzMVa9Ops5zIzMZSkduKhUYSnXRuhrp_8kw7bJ_BLM1h5wUh3WpG4nCFpYSztEvLsfQEHJl93St2-NQsIN4Ruk52HfNtBjVj07NVcTKlXsbr519dChe_62r_kBLIvxVezwlVxPqniul5mkn8p-MB2dhwQCcW2ChWq_ZyL6onagd9_N0MyQFyGgy81kCn6uADvKejERShxBIgPsVfwMJ9B-J8nYxILQx18v4OqfonoYr17QPY9RgB96wjdaQjaYjZU6jIoHQsSE6Qnb6UBMpXsmh0RfmZeugNWR--6LQFKXCws7VWPI3xaPPJDd7vYEVI0-YHOxcGb1LfU1KYStewm6PPvvS5BnDlR3Az7g83CjD_dEm6kGcrHcY_0sS7XU2LRsn6treebkYM4Jbk-zHQeABK6GmC8FTFvvhciQiNvjdyFz5EH1rSDMLGzPL0ssgXfaKTNPggeJgwg8_lQSArGLwYi3jTSTDJ-j5PmgrNUN7vk5zShKluRAeDleZEB4FrJXRrrS_KKTAlTXgOkB3zLcErPfdFZVtUkvHQ_OEWmCH6fvLPXmiSMhMSJKtuwFTZGt8tMFg3-bn7gLflBnRVF3pRPY4VacaLdO6Bq8sgIuHc1N6_2t3JP_ueAO1qOR6ISHa6zR7szQbLI-VH6qISCxdM-3wkQFxDeLnX_VitieVJxU3Mz77UMJqcr30KzEpGJn9KUewCtazEmLz8wF_hn6eKl-7aenzATigaMdYRelWxodtXTAUZgNqe7RmzqYNgcxebvWeefZHCEALzqaDOzWt6gl60Gs2_AjytsNn6PrCbGMzEv2ZMyvGMAEKXSZOsr0WOpm2OktzSNwOla2wSnkCJnIledK13UNWknCOmncOfi1GomArHq_gIalfuyiJ6DjP6Avs-mMmy-BQGwcUujfBjhjyIRfvPRSleAwOMIDwAQnVKQrFOwFQpp5VOHLMYJR0hkJRwQuxcrNIO6DEPlfd8nsRp0bxWKLLcfIlSNwJq8UYvwA-BVN_EzLBPd0DEwwoY3yMlFkRRNTVh_Nrvg9p9wmRX6sjh-SDlCAxoudYcnaO9liOhQaTsQD_n_8_yeSSsQEijkcrptTon7mCXbcAp0NinVjrxrYbyyCEw4eFAopB0ExqErQvDEZZ2mSgG1lXnotK0SkZLkuNjYZYV1shA-7TkdULk4bqrnBub9BR1LUjoQ68sUku4GSmukITohEuOG1O_c0RZyWLpOnp7lorcXfgsGxfW7afIrgkcVEn9oWAJKCxuoKN2C9md9-33NhZBldPwHjPD09DemdKB946MF2NNCdr2PNg86uxZu_oq2LeBNFT5Dw1X5_jhcIZZLjQi5tj91STSkrlfgtv0qEAjtkgcFRb0a0lQx1b-NeT4q5frEnm8m44sMWw3Mo3OVBUPdQXaSx8idzmqB64y2mv3Sv4AGZF5m1MXVF7OH4aytOqNHYJIHnDL26sMIkoq4iYO4HZNmb1eNLe9Jp56EhTz_lTM4n3cK-rVVDvarbpvcFppPt_d1ISQ_4d27AA2Pd-5XjLDlLhTdEZuhshmpdXJ8SLouQdK3E7nqlbGdvvWwS2Qs6VBPrUpkw0sP2AG1lXtpeJ2YdH_y7cL0gb-PuvuuxcNnyv5TwiMRgi5lTW4-T2uO5TTERQ0LXSd66YYesvQfRVBqw2nwav0io7c7RbfeUoHWrRDkGEGw0Bq3UT7A66cg_r5M6iejSN2zB5-Z-doreQq0Qmo5DOUxHO_07hB-cOmWTblZX0iv4CoHqaq2gmm7Tzm3WgV2QfIPViE3IWnEFFhSLj0SkUylFs-6mhnQyNVmLyfMcJqIk-c91u0CscaDzVfQHaUdIVm40 "LAYOUT_AS_SKETCH() Sample")

21
README.md
Unescape Escape View File

@ -14,6 +14,9 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
* [Background](#background)
* [License](#license)
>### Update notice
>Supports PlantUML version 1.2019.6
## Getting Started
At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo.
@ -29,7 +32,7 @@ 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/release/1-0/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Container.puml
```
Now let's create a C4 Container diagram:
@ -38,7 +41,7 @@ After you have included `C4_Container.puml` you can use the defined macro defini
```csharp
@startuml C4_Elements
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Container.puml
Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
@ -56,7 +59,7 @@ Take a look a look at the following sample of a C4 Container Diagram:
```csharp
@startuml Basic Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Container.puml
Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
@ -74,13 +77,13 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
## Supported Diagram Types
* System Context & System Landscape diagrams
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Context.puml`
* Import: `!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Context.puml`
* Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `SystemDb`, `SystemDb_Ext`, `Boundary`, `System_Boundary`, `Enterprise_Boundary`
* Container diagram
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml`
* Import: `!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Container.puml`
* Additional Macros: `Container`, `ContainerDb`, `Container_Boundary`
* Component diagram
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml`
* Import: `!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-1/C4_Component.puml`
* Additional Macros: `Component`, `ComponentDb`
Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
@ -100,9 +103,9 @@ It is possible to save them directly inside VS Code: [Creating your own snippets
C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams:
* [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend)
* [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch)
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend)
* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)
## Advanced Samples

3
samples/C4CoreDiagrams.md
Unescape Escape View File

@ -8,7 +8,8 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia
Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml)
![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLF1Zjem4BqZyGzJBgKI2vUUUjfT6hKh0KKBgEefcZX3i71iP4yA_7t78Q51qDxiyPitxxsHdmEZvweq_Tu7RPMfSggyWHtp8NoPJ3mUnuNcNPLLWRnobidoMBboyguL-jmjD1t8JAQVdvO6BM_ciqc9WSbBAPr6_8d7Xvh_8rHMEajX0DuHR9qnxgXj0KPR0hGvt3nh7-JaG2Q3SGgDEKUILYRS3UZtPY-_VcpMwS-tzVTqbdnB5bzZbJKRWjLPP9NGj42kiV1OYWeFRrBobXXUqUwZe0iszYx91sU7gWhiIl8Z65mgQAxWQVCsaCSNQ97WjhMDJ50ZE4g6S6WxOmrGALTP3kF1ftxlCd2ONIZJK5-5xn_Awb4nlN2T5s9KlpKTGLlnL29hPm4pLzLnQdyxTLJdNUAUu83d6Ff5I2ibJKuyB56RlrgIftY7S5Mm5dkw5YYUvbfv5zoM8Jcf7Tg2WBeD7PijjztA0aY8vktvWSqLEqy1PFjjeaeAq2JrmEmra577B7kq0LM4oOrODMRVoNHsUnV_9b28G86bhwZs7UnjDYkoUMWCnqsqJGlInIvp_cwp_sclNS_NouRZKUirkLRWin387_W3 "System Context diagram for Internet Banking System")
![System Context diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/0/xLfxRo8v4ly_Khw3bnc9sPiaaCmh5n6qF3gJQ7b4G3ItDxD2fjj0QngxrpP3sDlzxbTsT_DqGtU0xAoq7Ic0NQwgNvNjgYxx9o4nb-EHTtoKHPMtf_SUflAXNZj1tmWNBgFe_2n_bbUzGobzSPNB3Lmv7FVER3RAjLmRSuSrNE8JBxSm_FX8ysCUuq9zUx7rKID-67YiXptqqgfPTQlHwTuquL-bMMksq3NAlBZHJoPWtfPJpwM39t3lM9NRHi2xVVTV2rYVNoW2yTMbFkPuX1pInsDFTiYZB7dkW8u8bSY6VuGl4quuzZ-vZXoYYtn-iME47-j423mWRVTtWixVvPS7Sc9BJ0SUGVyxFaBmj84tONBganj6PJ3e8kWIG-om2M15VUm9SdpqvugsME8U5ljWLUASJI8-sdtenNlz14sAOKppJCwVCKWBXHuRKmVpQR4uKtLLdnZzyslYt-edQ2upxX0Usw5c2W4hYI5nGlMog8QdR2nJp9x-cDfIBOXQwPVcGwTRQdVRFrkToksh7nVXzh3zTS0Lq50VoxBArSeYoH1JPy9TAGb5ae-9OUOfe0qy8YXJOIFNHcrC1QgtOUe7in3r6LCVXJvJCrD9kkR4ANx2d88rhmevrL545Kwm90wGS-IumXuBjQPF42N44KWor2Fe6_PSHr41I4AT2ASHTATvtwqsFpKKPibypO59oK1nLpbQZzlAfMRTTBgjku-t7SN78tsf675tC9IR-6J1dte2kIJDfZAclusPDaAaHiXc-kebGCVY1BtqS8zueCiFdCWnfoWxNv-Pw-liwu3WTJQ3bcOn5WZwD9DLTPEBXKyrrnD8_q8B0bR35RIix66liyNFqAhulCx-MiWfic9oPPKrMyJ3wfSOklvErWL6tH3YEM3JNouMmCuyV9t90EYGSg4z6eEkma49RBjDg2JsaAOKdWb6Vw6vN63tLQiNFmTy8uFdSXd3x3Sg--fbdxEHKemjJBy0nLhF2SgSdXQLladiO6GGABf9H6GYiwXOevTXlqiBfd1wcXHC7FzKY8poOYKs26n4FSPJkoYnXpQ9IEUgj9vwChX2Ee_j3M4XZUUggLscObaAlrLtTbXQWMn23mxAB6C_k6AbFgI6zN2V0jJ3peZIYVCF3CS_49vOYRNKW5HMbm9IRMT4QGL2ddbmK6OP-y4LAxML6fPElbFWQkqCAhL4zJPmU5mnKlQ4RVwYYMw9vnE-stiBi5eAGIg1LJ_GwUUXwpY4_bezLUq9m2jM3njPFQHXrTh8gfM6LMqZgvgHLHRzwodFKbNetcgrcurk-UD2mIb_-VRYGpcpM9dwJyTgDKgrhedy_QNwMoHl_zBkMFLbglFpzvVbgf6fYVpV-dbgqSjOXr4JaT6W2hDSR0bg5eRws_7HbkxoIjrZrPv0iLYboNzuKtv_iwbOH1v1CugzxhDe6-VN5RKlI-flazfYAYGP7LZRbNcoekIRoeURIZwHRPz5sxZfdSosKNNpUpRjNCVltx9xA7r-kklSTclMHwjHLGKys9e94ZECgg8tWEqvAEWT7_rnZPOU-Dq1ClG7T1LMjubYI8E2LHyInQtE6NLazkLXArOfQjB0CQkC3QJBZEV305e0q1JjBO-emuBTuloz1h5UdLmg2mQjgiOtso2nG8cBaKOPga16XCtDihxGBpGaI2PsW-2kzIWJ0rmF1UcH6WIcGfj21wCMRJr_4aEURHzfa1fbf4AvNUm6mK_pwGv8z-RJdM1NU-kWPqTo-tBgcf05eEl2zkdLQi_iLpF4VRWL999DZjsADvLVztQgPAc3EP-xWdIt7p35dWLbvcmIlSM6As4NYG4ByzlhxkzL5KXWIdSDgxNyMlFspMMr-cwlhpKsP4_OfOGld2ydpRoMJvTZITOoi7LqXYFfhLdZtqFpVpB77JD76BPkzO3tR0OyJuPPYSGPpgB3kfSnVAOu2KNBqpfD6DYctROWdrpBbS2HIE7DAfi2TMHIK-1wPel6ghSblXxQf7kBmZEaEuN46HTZ5TwbjZU6dIkw4SVnv2ou5JSMX2l4i40tNv3BZR3Qzw2fEvDrveVty40M6-axPt98K9zvNd172c8aGHZsnwLkbmjzVmPa8u_PsFEcYibCIuC87NDjvfChL4B2rUjdvgWprNlFtH5O1f5mjxa2muvyHjLtD06iBjNIv_iMD0Z5KWzlZtsVSQcKNkGGqWhqQe65O7qvmPn46sN4w4VaUsC1-pBplG3s2gK8BmjvKwK6XMym4S0GWLwHjbgVE-KI1xhns749jG5uEsA6kJrqOH83C2N48T-8nrGqEDln5cEbMRzlDbGmNifyBj-LopVvFMS-8TgTyuSNUVt4vWohY0mvmuVBqcNrScEsyxrg-q-6yqmPZgPRzKv45ywEvyg4Gd47peJcKpvTtDwitG4peGGARrRvq9dGZXRz2pAXH2OzFZBl9CT7qfNWtU1jNGTJM80G0l50RQ_gXg-ASfmI2LiX_QfYRq2hneRbNdii91iH3YbEq0AhDoAkX7qPw2oXY1AnlWweFQ0wqP4_t4TWf6f3sBPXpuKugrAbi0BP2rY6zHVW5wEP5gMo6p6JfsybVtF91F80m3JITr8HxgapTD33vSjIJtJC7k6l1FbughS3hKYaYgvTZR3hpNMnJjNlSDDI6dG0dal3lQpksfofH0DPZ_OG5XH1P7700io8D-s30mWmgaVV3J3Rad426ORdHHQreG65bZA0dHdaP06iv9WAhESA_2BI3i6gQvzptwwP_q4GaGdlCkWBbNFQPTkqOJAA4B3oH3HeTfrlbVM6uHfrlNCVyZ0DdLakKl0dO00Pwly1 "System Context diagram for Internet Banking System")
### Container Diagram

4
samples/C4_Component Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -1,9 +1,9 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml
' uncomment the following line and comment the first to use locally
' !include C4_Component.puml
LAYOUT_WITH_LEGEND
LAYOUT_WITH_LEGEND()
title Component diagram for Internet Banking System - API Application

8
samples/C4_Container Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -1,11 +1,11 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
title Container diagram for Internet Banking System

8
samples/C4_Container Diagram Sample - message bus.puml
Unescape Escape View File

@ -1,14 +1,14 @@
@startuml "bigbankplc"
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
skinparam wrapWidth 200
skinparam maxMessageSize 200
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")

8
samples/C4_Container Diagram Sample - techtribesjs.puml
Unescape Escape View File

@ -1,11 +1,11 @@
@startuml "techtribesjs"
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person_Ext(anonymous_user, "Anonymous User")

8
samples/C4_Context Diagram Sample - bigbankplc-landscape.puml
Unescape Escape View File

@ -1,11 +1,11 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
' uncomment the following line and comment the first to use locally
' !include C4_Context.puml
'LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
'LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
title System Landscape diagram for Big Bank plc

4
samples/C4_Context Diagram Sample - bigbankplc.puml
Unescape Escape View File

@ -1,9 +1,9 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
' uncomment the following line and comment the first to use locally
' !include C4_Context.puml
LAYOUT_WITH_LEGEND
LAYOUT_WITH_LEGEND()
title System Context diagram for Internet Banking System

8
samples/C4_Context Diagram Sample - enterprise.puml
Unescape Escape View File

@ -1,11 +1,11 @@
@startuml "enterprise"
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
!include https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
' uncomment the following line and comment the first to use locally
' !include C4_Context.puml
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, "Customer", "A customer of Widgets Limited.")

Write Preview
Loading…
Cancel
Save