diff --git a/C4.puml b/C4.puml index d28711a..d19dcb2 100644 --- a/C4.puml +++ b/C4.puml @@ -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<> { ' Layout ' ################################## -!definelong LAYOUT_AS_SKETCH +!function LAYOUT_AS_SKETCH() skinparam backgroundColor #EEEBDC skinparam handwritten true skinparam defaultFontName "Comic Sans MS" center footer Warning: 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" <> as e_alias -!define Boundary(e_alias, e_label, e_type) rectangle "==e_label\n[e_type]" <> as e_alias +!unquoted function Boundary($alias, $label) +!return 'rectangle "=='+$label+'" <> as '+$alias +!endfunction +!unquoted function Boundary($alias, $label, $type) +!return 'rectangle "=='+$label+'\n['+$type+']" <> 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//[e_techn]//" - -!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//[$techn]//" +!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 \ No newline at end of file +!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 \ No newline at end of file diff --git a/C4_Component.puml b/C4_Component.puml index 40a8a24..d645f95 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -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<> { - StereotypeFontColor ELEMENT_FONT_COLOR + StereotypeFontColor $ELEMENT_FONT_COLOR FontColor #000000 - BackgroundColor COMPONENT_BG_COLOR + BackgroundColor $COMPONENT_BG_COLOR BorderColor #78A8D8 } skinparam database<> { - 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 | -| | external person | -| | system | -| | external system | -| | container | -| | 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//[e_techn]//" <> as e_alias -!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias - -!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted function Component($alias, $label, $techn) +rectangle "==$label\n//[$techn]//" <> as $alias +!endfunction +!unquoted function Component($alias, $label, $techn, $descr) +rectangle "==$label\n//[$techn]//\n\n $descr" <> as $alias +!endfunction + +!unquoted function ComponentDb($alias, $label, $techn) +database "==$label\n//[$techn]//" <> as $alias +!endfunction +!unquoted function ComponentDb($alias, $label, $techn, $descr) +database "==$label\n//[$techn]//\n\n $descr" <> as $alias +!endfunction \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 2bc697c..680c23e 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -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<> { - 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<> { - 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 | -| | external person | -| | system | -| | external system | -| | 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//[e_techn]//" <> as e_alias -!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted function Container($alias, $label, $techn) +rectangle "==$label\n//[$techn]//" <> as $alias +!endfunction +!unquoted function Container($alias, $label, $techn, $descr) +rectangle "==$label\n//[$techn]//\n\n $descr" <> as $alias +!endfunction -!define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted function ContainerDb($alias, $label, $techn) +database "==$label\n//[$techn]//" <> as $alias +!endfunction +!unquoted function ContainerDb($alias, $label, $techn, $descr) +database "==$label\n//[$techn]//\n\n $descr" <> as $alias +!endfunction ' Boundaries ' ################################## -!define Container_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Container") \ No newline at end of file +!unquoted function Container_Boundary($alias, $label) +!return Boundary($alias, $label, "Container") +!endfunction diff --git a/C4_Context.puml b/C4_Context.puml index a28a9cb..1377798 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -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<> { - 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<> { - 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<> { - 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<> { - 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<> { - 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<> { - 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 | -| | external person | -| | system | -| | 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" <> as e_alias -!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define Person_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define System(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define System_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define SystemDb(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias - -!define SystemDb_Ext(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb_Ext(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias +!unquoted function Person($alias, $label) +rectangle "==$label" <> as $alias +!endfunction +!unquoted function Person($alias, $label, $descr) +rectangle "==$label\n\n $descr" <> as $alias +!endfunction + +!unquoted function Person_Ext($alias, $label) +rectangle "==$label" <> as $alias +!endfunction +!unquoted function Person_Ext($alias, $label, $descr) +rectangle "==$label\n\n $descr" <> as $alias +!endfunction + +!unquoted function System($alias, $label) +rectangle "==$label" <> as $alias +!endfunction +!unquoted function System($alias, $label, $descr) +rectangle "==$label\n\n $descr" <> as $alias +!endfunction + +!unquoted function System_Ext($alias, $label) +rectangle "==$label" <> as $alias +!endfunction +!unquoted function System_Ext($alias, $label, $descr) +rectangle "==$label\n\n $descr" <> as $alias +!endfunction + +!unquoted function SystemDb($alias, $label) +database "==$label" <> as $alias +!endfunction +!unquoted function SystemDb($alias, $label, $descr) +database "==$label\n\n $descr" <> as $alias +!endfunction + +!unquoted function SystemDb_Ext($alias, $label) +database "==$label" <> as $alias +!endfunction +!unquoted function SystemDb_ext($alias, $label, $descr) +database "==$label\n\n $descr" <> 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") \ No newline at end of file +!unquoted function Enterprise_Boundary($alias, $label) +!return Boundary($alias, $label, "Enterprise") +!endfunction +!unquoted function System_Boundary($alias, $label) +!return Boundary($alias, $label, "System") +!endfunction diff --git a/LayoutOptions.md b/LayoutOptions.md index c5b64b4..7890f12 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -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 `<>` 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") diff --git a/README.md b/README.md index 198b334..fa437c2 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f..a317fa8 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -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 diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 491a725..27f0850 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -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 diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 56dccd9..066ea63 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -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 diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index d8485ff..5b4100c 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -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") diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index dbd0569..a2a8c80 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -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") diff --git a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml index a4b3f4b..e29f8f5 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -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 diff --git a/samples/C4_Context Diagram Sample - bigbankplc.puml b/samples/C4_Context Diagram Sample - bigbankplc.puml index 70778cd..c7550dd 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -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 diff --git a/samples/C4_Context Diagram Sample - enterprise.puml b/samples/C4_Context Diagram Sample - enterprise.puml index c58f636..c11da10 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -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.")