diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets new file mode 100644 index 0000000..9488065 --- /dev/null +++ b/.vscode/C4.code-snippets @@ -0,0 +1,206 @@ +{ + "C4_Person": { + "scope": "diagram", + "prefix": "Person", + "body": [ + "Person(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add Person to C4 diagram" + }, + "C4_Person_Descr": { + "scope": "diagram", + "prefix": "Person with Description", + "body": [ + "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add Person with Description to C4 diagram" + }, + "C4_Person_Ext": { + "scope": "diagram", + "prefix": [ + "External Person", + "Person (External)" + ], + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External Person to C4 diagram" + }, + "C4_Person_Ext_Descr": { + "scope": "diagram", + "prefix": [ + "External Person with Description", + "Person (External) with Description" + ], + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External Person with Description to C4 diagram" + }, + "C4_Container": { + "scope": "diagram", + "prefix": "Container", + "body": [ + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", + "$0" + ], + "description": "Add Container to C4 diagram" + }, + "C4_Container_Descr": { + "scope": "diagram", + "prefix": "Container with Description", + "body": [ + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", + "$0" + ], + "description": "Add Container with Description to C4 diagram" + }, + "C4_Container_Boundary": { + "scope": "diagram", + "prefix": [ + "Container Boundary", + "Boundary for Container" + ], + "body": [ + "Container_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a Container Boundary to C4 diagram" + }, + "C4_Component": { + "scope": "diagram", + "prefix": "Component", + "body": [ + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", + "$0" + ], + "description": "Add Component to C4 diagram" + }, + "C4_Component_Descr": { + "scope": "diagram", + "prefix": "Component with Description", + "body": [ + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", + "$0" + ], + "description": "Add Component with Description to C4 diagram" + }, + "C4_System": { + "scope": "diagram", + "prefix": "System", + "body": [ + "System(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add System to C4 diagram" + }, + "C4_System_Descr": { + "scope": "diagram", + "prefix": "System with Description", + "body": [ + "System(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add System with Description to C4 diagram" + }, + "C4_System_Ext": { + "scope": "diagram", + "prefix": [ + "External System", + "System (External)" + ], + "body": [ + "System_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External System to C4 diagram" + }, + "C4_System_Ext_Descr": { + "scope": "diagram", + "prefix": [ + "External System with Description", + "System (External) with Description" + ], + "body": [ + "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External System with Description to C4 diagram" + }, + "C4_System_Boundary": { + "scope": "diagram", + "prefix": [ + "System Boundary", + "Boundary for System" + ], + "body": [ + "System_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a System Boundary to C4 diagram" + }, + "C4_Relationship": { + "scope": "diagram", + "prefix": "Relationship", + "body": [ + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", + "$0" + ], + "description": "Add unidirectional Relationship to C4 diagram" + }, + "C4_Relationship_Techn": { + "scope": "diagram", + "prefix": "Relationship with Technology", + "body": [ + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", + "$0" + ], + "description": "Add unidirectional Relationship with Technology to C4 diagram" + }, + "C4_Layout_Right": { + "scope": "diagram", + "prefix": "Layout to Right side", + "body": [ + "Lay_R(${1:from_alias}, ${2:to_alias})", + "$0" + ], + "description": "Add hidden layout line to put {to} to the right of {from}" + }, + "C4_Layout_Left": { + "scope": "diagram", + "prefix": "Layout to Left side", + "body": [ + "Lay_L(${1:from_alias}, ${2:to_alias})", + "$0" + ], + "description": "Add hidden layout line to put {to} to the left of {from}" + }, + "C4_Boundary": { + "scope": "diagram", + "prefix": "Boundary", + "body": [ + "Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a generic boundary to C4 diagram." + }, + "C4_Boundary_Type": { + "scope": "diagram", + "prefix": [ + "Boundary with type" + ] + "body": [ + "Boundary(${1:alias}, \"${2:label}\", \"${3:type}\"){", + "\t$0", + "}" + ], + "description": "Add a generic boundary to C4 diagram." + } +} \ No newline at end of file diff --git a/.vscode/snippets/diagram.json b/.vscode/snippets/diagram.json deleted file mode 100644 index 1cbf8d7..0000000 --- a/.vscode/snippets/diagram.json +++ /dev/null @@ -1,86 +0,0 @@ -{ - "C4_Person": { - "prefix": "Person", - "body": [ - "Person(${1:alias}, \"${2:label}\")", - "$0" - ], - "description": "Add Person to C4 diagram" - }, - "C4_Person_Descr": { - "prefix": "Person with Description", - "body": [ - "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" - ], - "description": "Add Person with Description to C4 diagram" - }, - - "C4_Container": { - "prefix": "Container", - "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" - ], - "description": "Add Container to C4 diagram" - }, - "C4_Container_Descr": { - "prefix": "Container with Description", - "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" - ], - "description": "Add Container with Description to C4 diagram" - }, - - "C4_System": { - "prefix": "System", - "body": [ - "System(${1:alias}, \"${2:label}\")", - "$0" - ], - "description": "Add System to C4 diagram" - }, - "C4_System_Descr": { - "prefix": "System with Description", - "body": [ - "System(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" - ], - "description": "Add System with Description to C4 diagram" - }, - - "C4_Relationship": { - "prefix": "Relationship", - "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", - "$0" - ], - "description": "Add unidirectional Relationship to C4 diagram" - }, - "C4_Relationship_Techn": { - "prefix": "Relationship with Technology", - "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", - "$0" - ], - "description": "Add unidirectional Relationship with Technology to C4 diagram" - }, - - "C4_Layout_Right": { - "prefix": "Layout to Right side", - "body": [ - "Lay_R(${1:from_alias}, ${2:to_alias})", - "$0" - ], - "description": "Add hidden layout line to put {to} to the right of {from}" - }, - "C4_Layout_Left": { - "prefix": "Layout to Left side", - "body": [ - "Lay_L(${1:from_alias}, ${2:to_alias})", - "$0" - ], - "description": "Add hidden layout line to put {to} to the left of {from}" - } -} \ No newline at end of file diff --git a/C4.puml b/C4.puml new file mode 100644 index 0000000..461ba03 --- /dev/null +++ b/C4.puml @@ -0,0 +1,99 @@ +' Colors +' ################################## + +!define ELEMENT_FONT_COLOR #FFFFFF + +' Styling +' ################################## + +!define TECHN_FONT_SIZE 12 + +skinparam defaultTextAlignment center + +skinparam wrapWidth 200 +skinparam maxMessageSize 150 + +skinparam rectangle { + StereotypeFontSize 12 + shadowing false +} + +skinparam Arrow { + Color #666666 + FontColor #666666 + FontSize 12 +} + +skinparam rectangle<> { + Shadowing false + StereotypeFontSize 0 + FontSize 12 + FontColor #444444 + BorderColor #444444 + BorderStyle dashed +} + +' Layout +' ################################## + +!definelong 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 + +!define LAYOUT_TOP_DOWN top to bottom direction +!define LAYOUT_LEFT_RIGHT left to right direction + +' Boundaries +' ################################## + +!define Boundary(e_alias, e_label) rectangle "==e_label" <> as e_alias +!define Boundary(e_alias, e_label, e_type) rectangle "==e_label [e_type]" <> as e_alias + +' 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) + +' 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 diff --git a/C4_Component.puml b/C4_Component.puml new file mode 100644 index 0000000..a85761f --- /dev/null +++ b/C4_Component.puml @@ -0,0 +1,45 @@ +!includeurl 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 + +' Scope: A single container. +' Primary elements: Components within the container in scope. +' Supporting elements: Containers (within the software system in scope) plus people and software systems directly connected to the components. +' Intended audience: Software architects and developers. + +' Colors +' ################################## + +!define COMPONENT_BG_COLOR #85BBF0 + +' Styling +' ################################## + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_FONT_COLOR + FontColor #000000 + BackgroundColor COMPONENT_BG_COLOR + BorderColor #78A8D8 +} + +' Layout +' ################################## + +!definelong LAYOUT_WITH_LEGEND +hide stereotype +legend right +|= |= Type | +| | person | +| | external person | +| | system | +| | external system | +| | container | +| | component | +endlegend +!enddefinelong + +' 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 diff --git a/C4_Container.puml b/C4_Container.puml index e8e8fe1..fce6508 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,38 +1,20 @@ +!includeurl 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 + +' Scope: A single software system. +' Primary elements: Containers within the software system in scope. +' Supporting elements: People and software systems directly connected to the containers. +' Intended audience: Technical people inside and outside of the software development team; including software architects, developers and operations/support staff. + ' Colors ' ################################## -!define PERSON_BG_COLOR #08427B !define CONTAINER_BG_COLOR #438DD5 -!define SYSTEM_BG_COLOR #999999 -!define ELEMENT_FONT_COLOR #FFFFFF ' Styling ' ################################## -!define TECHN_FONT_SIZE 12 - -skinparam defaultTextAlignment center - -skinparam wrapWidth 200 -skinparam maxMessageSize 150 - -skinparam rectangle { - StereotypeFontSize 12 -} - -skinparam Arrow { - Color #666666 - FontColor #666666 - FontSize 12 -} - -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor PERSON_BG_COLOR - BorderColor #073B6F -} - skinparam rectangle<> { StereotypeFontColor ELEMENT_FONT_COLOR FontColor ELEMENT_FONT_COLOR @@ -40,96 +22,28 @@ skinparam rectangle<> { BorderColor #3C7FC0 } -skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor SYSTEM_BG_COLOR - BorderColor #8A8A8A -} - -skinparam package<> { - StereotypeFontSize 0 - FontColor #999999 - BorderColor #cccccc -} - ' Layout ' ################################## -!definelong 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 - !definelong LAYOUT_WITH_LEGEND hide stereotype legend right |= |= Type | | | person | +| | external person | +| | system | +| | external system | | | container | -| | external system | endlegend !enddefinelong -!define LAYOUT_TOP_DOWN top to bottom direction -!define LAYOUT_LEFT_RIGHT left to right direction - ' 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 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 -!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 - -' 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) - -' Layout Helpers +' Boundaries ' ################################## -!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 +!define Container_Boundary(e_alias, e_label) rectangle "==e_label [Container]" <> as e_alias \ No newline at end of file diff --git a/C4_Context.puml b/C4_Context.puml new file mode 100644 index 0000000..0552d8f --- /dev/null +++ b/C4_Context.puml @@ -0,0 +1,81 @@ +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +' uncomment the following line and comment the first to use locally +' !include C4.puml + +' Scope: A single software system. +' Primary elements: The software system in scope. +' Supporting elements: People and software systems directly connected to the software system in scope. +' Intended audience: Everybody, both technical and non-technical people, inside and outside of the software development team. + +' Colors +' ################################## + +!define PERSON_BG_COLOR #08427B +!define EXTERNAL_PERSON_BG_COLOR #686868 +!define SYSTEM_BG_COLOR #1168BD +!define EXTERNAL_SYSTEM_BG_COLOR #999999 + +' Styling +' ################################## + +skinparam rectangle<> { + 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 +} + +skinparam rectangle<> { + 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 +} + +' Layout +' ################################## + +!definelong LAYOUT_WITH_LEGEND +hide stereotype +legend right +|= |= Type | +| | person | +| | external person | +| | system | +| | external system | +endlegend +!enddefinelong + +' 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 + +' Boundaries +' ################################## + +!define System_Boundary(e_alias, e_label) rectangle "==e_label [System]" <> as e_alias \ No newline at end of file diff --git a/README.md b/README.md index ba8c47c..f4651de 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C4-PlantUML -![bigbankplc](http://www.plantuml.com/plantuml/png/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") +![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") C4-PlantUML combines the benefits of [PlantUML](http://en.plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures - especially during up-front design sessions - with an intuitive language using open source and platform independent tools. @@ -18,21 +18,23 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet ## Getting Started -At the top of your C4-PlantUML `.puml` file, you need to include the `C4_Container.puml` file found in the `root` of this repo. +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. -To be independent of any internet connectivity, you can also download `C4_Container.puml` and reference it locally with +To be independent of any internet connectifity, you can also download the files found in the `root` and reference it locally with ```c# !include path/to/C4_Container.puml ``` +Just remember to change the `!include` statements inside the top of the files. + If you want to use the always up-to-date version in this repo, use the following: ```c# !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml ``` -After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `System`, `Container`, `Relationship`. +After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`, `Boundary`, `System_Boundary`, `Container_Boundary`. ```csharp @startuml C4_Elements @@ -46,9 +48,9 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![C4_Elements](http://www.plantuml.com/plantuml/png/ZL31IWCn4Bq7yW_hdbQecqjFdYhRtgejLSybpGxTm6GICXDA_zwmO554yVJU36_UUyoAnMOf0PjXUTmW121XhUuyEImZb8pD99BuqPXiB_tPorHEXI6xI5ArlOl17BopUOml7XAW6POFUxGaxyzR4omBvBew3bLlFK7kKqtJIgizP8xKfHcUq5jUDEtMdW3RIdP9V2IBpHhOPJzFxRrMDv_EVR8Vjs_W9eeOpzU_d5wljLleU8P_vsjr0FnU-lSYDvClZQh72cYiJ_W0 "C4_Elements") +![C4_Elements](http://www.plantuml.com/plantuml/png/xLXhKziu5FtkNw663oqpOGcq1PODcUPX2hCXOV8Ojaix6H4hYQUEv96KGdQx_tqbsH5EX5Phf_2fOWQCTU-vvrx9HuyFZ4FA5_F8UmsQ92AKYOSTP_EyLm6QX1W1l-rV-Pt1wBmhVZMxxMuFx9ohvWcaFbz68Pxcn1pupOjEWjY__DC71uUUnxw6E8OKpe4mWek83z03hqVX5CyHvc0iVY6QDRkdCBu90pu3XvLAvlqSFbmXnk0KzSE_43XuNybwKJJc44yZ1FxsW6XzWOe8NyRed62UU1og7ZQ30RaNoO49Z1Zo_id2r2abzoc4AYlOEL9DlP5Gvjji00bcSgfMxyW21v0kQxKLlmqM5iuL8y86ZtUggRSDGWD4RU_bY28GG3P3WQJv6hJXaYnulY6EY63Shd_g3WUZUd_K_zqVD2yoAT_1yTSfbSccF7pVRxIQ6OiPnC4z3Jb7672wGEO4aTbru1o1KfFCmp7eGyp0LR_a9NC5J0YHVweJ8kUF37D6KL2xWHIBUfvMzsL73JGfWXm5mfo286JZ1MCXmMM04GeOu0JS8V0DHc4WhRnN20UFAUfyLxaEkjUZLlUc8_nYvKiu9u9nACTOm6xQj_tpmQXt-V5Y028quTA5XjCPptY8mZUIMH6Yl1zlwhXyWqOY0yZA08qYU8UYtSo7K3exIz-MmDeCX0oaVcv0-I1dvDF0u3Rf_MAF83BheGZAbDaiZ7CcAbn7Aqu7vHNeuHezNTApKcaNh8op7TeFd4hokYovmd0qdk6judt6-_jL9hxZqmsXhDscy5-g-xA_jhzVMgk1u3QXP5uMPYGprYbjiwiCIdjxjTAk4qCdPeAPDXfrhMuDySc_IHsKjqdGx9CCgtjxag4RokJfCDBWQ-WT9Bx0EqAB55DaxSOgMjIdQwfZ52okm7H3RblaJUAj8iMLmcfKkBLzQUtOv1xRYLf2Eo5CXkuqDietB5A-uRMHu73xujcGOnj5EtqdWCbjcAjixI9baqkqaLvx-yBPiT64subQGbiW70pRkShNAr8-kRanS-pzWFhPmOLuMIjepyEDOP9qP_AuWmONA8fHxWEOSDRge639RggrOEzs5WO1mbzQUwfZpMVey1a-uTDp-FIUy6axVDgfZpekZacCJa4Ti53j41cPy7j8nSEISJJ_HPXSqt0EwHAW2Cc37pi5WvbX248CcCII7lr571FA1MB6wHgHM0I0EDZqPUdUEbg2CS5OFA40S0Au8ymbvWW7mXOkWX3XiSZ3_uReyeu4oxBSwC-06l5m32CL5nEyz_WcLeJA0fA5GK9Cp0drJ2RhmGFq3KKabfa8I2ZAKlJmVktt-jtEgF5nTNAldBmxF6xeVl-FWT_hrDiZm_3eHFvem_wd_i2_olGV71oTD5eca67ugsfvxmeinsFv-H1Sgvc7TttIDUyhbAdJeB5n8jseY7bohXo_RHoTMq_ow46Gmp0QlI1dFGfEyYTr-MCbdqp_b-2iPvQLwjlcyNcpugxp2t8sPxkxpjlVeznS3Yv6RV-ZtsbvCwaRJAVeHMYAS93S7NZVpy1Q4_yFX17uxdslRioCMce1abcgJ7HsDjjLoRDE6vMeISDKHTT1jQ4DL3k9X5HQvgNBQ-2dGfzN3nNX7BSXIORhDnKECFaG83QcJwD-nf_noi8IOPFlo7_WEJWRocEGDv2B9k0Cf-FrrQZco88f1vEy2LQKk1d1u5kqycxosrRU6QxujQ6ccFFs4DmcVlPBlk9xm2R170fgb87xaCz23FZBxGh7EhXb7pZOsEKLsUJz9fp6aO0KXBKHfEDPo0KPLbuv21OALpubjwNxB4aLC0uda-ARnQPOzEgN7R-NsRszUtlIQht_GRitNSSNMQHrEkwzHVxb-UVoB9oC2gUuUfoVPn7NMc3gfpvrcmALzruTPEThLiJoy305lJ2X3V4to1MNVJEX_CglNNEAlyx29llpc63vd9LzxUGM_CowySQzSA1T44SB1k9YouGcQrac-gQionWPPTz6lA-kknqXYndnFddVQ9nNVf1uw-os4--TYceMnTOvM1NxM9odMYVFfjW_5LjO6UEWhT8fy5owdi8_jwxhF0nTDtYyiAxRoScM7ZYJIL9Fc9NQwl0X7hen3uaSxvQ42jL_ucBySPNIWsouglqhYSXq-Hz0wQ4hcKt_DxhNGz4wOOE52V58Ho1yG3XOpAD_0G00 "C4_Elements") -In addition to this, it is also possible to define a system boundary. +In addition to this, it is also possible to define a system or component boundary. Take a look a look at the following sample of a C4 Container Diagram: @@ -57,7 +59,7 @@ Take a look a look at the following sample of a C4 Container Diagram: !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, "Sample System") { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -67,16 +69,16 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![Basic Sample](http://www.plantuml.com/plantuml/png/LL1DIyD04Bq7yX_6UAbG4ogUf9J687gmfJIf7iis6Tl5_M9tGYZYVtUMQejx6PZtvdtiF93mr6i5ZoB85cgXdS8qkPAcLNs7lLTm87BXeIYy6FAzf4E_wmFwrXf2GtbhTR6MhV2TNKfqg8hg_dQbXA7DuhNG8X1wNcqhvWjfqEUExT8aJLReWpKZqMbfnf2LSSf0Nf3rsKsQED5-YZr2TWe5zP6rT0RJwSxsfXF-E9k12D1Eu2jDWD_POpJWRYkSOzbtt47fdEA89At9U5LTZw6iL_dogU4JZt2NJs3nLaMiLCeE0MB306I1wpd15DqhaZ55CqZYIa1IesAl4AD-fyaftOXEC2lz4YES9cjKVqKlqJQ1htc-DCsgZhp8EiCNfMSapZ9W71_UwdytSpGTV-WF "Basic Sample") +![Basic 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 "Basic Sample") ## Snippets for Visual Studio Code -Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/snippets/diagram.json](.vscode/snippets/diagram.json). +Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). -It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets). +Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets). +Just include the `C4.code-snippets` file in the `.vscode` folder of your project. -Or you can use the [Project Snippets extension](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets). -Now it is possible to have workspace/project level code snippets. +It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets). ![C4-PlantUML Snippets Video](images/vscode_c4plantuml_snippets.gif) @@ -100,7 +102,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to LAYOUT_TOP_DOWN Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -110,7 +112,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/NL5TQzj047mNw3zib8Swa4gaz2cO4E66zY6nHImtzCcifBLzvBwuMo5Cw7_l7cuIakDWuMPsTcRlDZ867es6-_hFQjDksrMp_R5wMi8QZTUKPsVAzdeSQ0mQ3im-NbTLmAdSApwCtHWfzCuoMIvxPwf7rMCOt5AH9rqjldzjD5hUFDnN1YDJaAVjGlYeB8NIo-0yoxCli7GCbcYW0JhgKMI13og2N3uG3BJ3KNEUVNAPcXiAqTaP3aRPIoZgL5NaWEn2SP5d7ljdt1CKfqImFeeHKy1ythdH3XYEDpU04VehUCapaFDcS3PHjqNlHVQ9EgYzrvAFbRE5F2tEBw5UD-NohfMMGF2jl8A7tuk4rLgxAK9QZoHm8BlnA1GZALHoqKwAPH_0of2MMJ5P_Pjd9tSpFi6Yz9-Ou3nx9FqQzDtQ9agtr5zjswmJBx7Uu7UbdyJYPQ9KTi6P3pstP0VvZNy0 "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` @@ -121,7 +123,7 @@ Using `LAYOUT_LEFT_RIGHT` LAYOUT_LEFT_RIGHT Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -131,7 +133,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/PL1TIyD047mFv3-iyQL2JQZu94KCeNv0rTAcYa_bagnwU5_SRGX5_E_kKMqHxsLWPtPdvgu22K-zLZ0lNnxNzMO-kwutoxkRsnfMGZk5QN8aJQlw3dklu9t8XOkYy6B8toIzzqqVqBVM41hAMwkBfMo5x-o3H8UggCvF5qeOMj_F2oq2eUVHfcAza0PzxjWwJTBadtiSBj07QqQYqzAC8IiZoa1UaFNPIPeuqNw8DuHibnHMMpRG6KodZUrD9_psyX94W7O2dsa2_FR6em6RZN2EppvZ0wLpYdEJj2RZKNKyXdAro1zcDQzuXBDy0lTFLUHAfUmG8DOEG1QuinCiqRqY6LFKWoJk2IGrAlOACUfNckpIZMX7ywKVOQJJP8dgj-WXsZhmDkDjNIzMKHTLU_fmwGQ9immOuTLR_MVd2at7l_mD "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 @@ -148,7 +150,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`. LAYOUT_WITH_LEGEND Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -158,7 +160,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/PL1TIyD047mFv3-iyQL2JQZu94KCjLYXrj2aYa_bcgpryBwusn14_E_kKJyGxsLWPtPdvgu22K-zLh0id-utpVRnjbbib_ER-UeQQg6TmZGvagPLVOUzL_12vC95KNWnv7j9B_sk3-XRQmWDvQtLnLgsmdTs9T6XAcRdfvKIXZPtoqABGEXvj9snNaY3FdVidIPfyjy-JYlqmPgHwBGqOyZAY3AG5sHzTf8cJhIlOe-G7Q92_SOEEeFfT6Txqmd_Tda98a0xWVSq0Nu_pgC1TrlX79zzn1sKpYaEJjAQZ4Upup6KTPMlvWslU8IpV09t3xF8bKhP8K3i7O0iS6adMA9xHJAcQ0P9N1H8QbJi5MBKZpGvf1lHWUPBNy98fyaQrNVHtsYRmDkCYwQfwgYBgX_wzz8D4cSPCCApj_hFpXMQZh_v4m00 "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 @@ -181,7 +183,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference. LAYOUT_AS_SKETCH Person(admin, "Administrator") -package "Sample System" <> as c1 { +System_Boundary(c1, 'Sample') { Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") } System(twitter, "Twitter") @@ -191,29 +193,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/NL1DIyD04Bq7yX_6UAbG4nHFKaf340MhbYPLF8LjCkhYVh4x8OZutvsbsg9x6PZtvdti8f3mD6W5o_BvOTEqPTtMjrTDTGErq4vXcXn9qwcXny4hU2DouR8el1ZpLqblmtO8w3jh20tbdTN5MdR2z_PUeaDLL1UdAoKCRUwMXHQ1qFEghPWlf46VEtPEapJvRnvtA_J1cedejJHJoCeuPI0loFhi94sSwDx5AqAs2mhr1-lh36QphHrCB_p7V0uYG7S6dsa2_FQ-an6thN2EPPzm2wLpYcEJj2RZLNKyXR9UvVTN3PzuXFFy3EuUguYLIjanG6mTW2nmPIUOeWT5CgPeHabS4qXgLEmLOjIlDDcbcz0EPgKVOeJJP8tgj-WXsYRmDS-RfbdLaHTPU_YWT8t4MKQCuyLR_UTcWQRdJ_u6 "LAYOUT_AS_SKETCH Sample") +![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") ## Advanced Samples The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). +The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4model.com/README.md). + ### techtribes.js Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![techtribesjs](http://www.plantuml.com/plantuml/png/ZLLTJzim57slrFzmbvU1rBKCnf2cQQ9GniVAnqWwjAV8YI-fXsDdjaEfflttNITjqgveZ0UIsEVUUyxrkUwXTSouCfSG929Bc7eeP1fqEw-4IcN9iJGIfiuLziDWODYidmatBPFIeacrSgXSFzNvu5Qap71z9R10EJX-z-P6CkKcb-D1pgn3GqlnCU6PK6Zw1PNhThgTyV3xzIIAe-kRU7HzTzNjl5wi3CCu_78I7PyrcBlpw2mUdvoUN8ryPBTpWyPgjSMKLlDSbpRsb7eG39SBCA65OBj5Pfd1Z3da3RHPsS3oN2XXdM5EQDNWrrQRc6wdOEa3on02X-dK6P6WxV-m0NpycEXISMRcdpu1iv2-XLyU3_JNT6DhXadCYe8At642mwAGr4nV8Q2b2_R8UX0MHgWCBhyTzo3IEMt3GV_9xm-br3CBdg45f-5Hu0mAr8N47jHKUh0ugHxW8preuOTEw3-wj0_tHkVWfWXIfqo2Lz03BkYOwOif3kSHM4oTNcXTvsvGnZmX7hSeAyuKD6AE9SoYftSv3x-EOR-_NxCDAGtQ3NxL4tBC4r8n5TGAAlvW_-QRC9vv-AbmPsK21WkzKF4SjNiXqSx9V3aL_amV45PVdiVdORItkqB88ZFf58JY-8JskMnAsv-I0gwq5-GbGXLRYTGgqwCZsEtlhiciMdiRXeEXevTxH6vXAv4w0oBkx7RLNZT3TC-MB0jEtlJ6czHlIp_0WKTPJPB8BK43eCOQNSdkBTAkzwggj_02a84Ps7IAl9Gq07HWecBnsnEfExNbPiBL3ABwpGCMU_KzG5jrXPKThv0g1qV-MGlhTiWV6xFQ6fz6oNeTPr5q4_gG2lxtmBw4Vsve_n5JHpM05IiplZWytx2P4RwrJbSd-tKyk1WTqHZw8uIzlPtto_9DeZNZjSasS4jBhK1Mp3GJ1lrvEfrgwSiP1xi7EsyF6khnfBN82-Ivz-jB2bRphMcuQpgm2TmKiTcq_vVKvcsjTqe-NXgR9lHUcxo-VzlfQPgtveScLsjLZrrBGVUpWw9CwCgboU1O3ugW-HNuKjgbpwkiox4ghR-eQUWhUYk3lvghrZjcy_YskK7RZbURXwWu_Kh-0G00 "techtribesjs") +![techtribesjs](http://www.plantuml.com/plantuml/png/xLhxSnev4lwTlwAN_92u2h-Js9TrgEM1O-zXxEDnlhqaHOcP1hGPfBcHnfYxtFz-qWZaOUIfAI3hgglQSHLCfEwllswrMe_mYv0aal4iABs61Wzu9DJBgyAdLFh9np5b2ArswwRLwGylRzL7uxPzsuLNbybJKaWzkGWecso8sMyrhZe6iNVzpnOSdvHAuXjb8Od839GGYGFPnqTP2-Y4pP19yDG7HccnUKJ2U-hBAPmS7QNQP-Jn1eKW4-pHVoCSlpjAQqNeIS8c0S9_Ig2Uda95BXSXNd8cZSP9qYEcnETpvHoCII2mzDyqJ2sA-Dn0cB32g_V9axHeABSrRK23kPmkBaOyPZw95jNgYb-6HGxd8yT2XiVRv4bQwppoCSfhroEAu1CnHL_JV0rjik2nt6o80wuOjsk_tGxwmrflsFjhgz-uIhay8jwtIQITNV9ejLhrPYCbCINCdqTKIcGWenZT1D7UTSWCeTpWC-f1Zp01DxrooUGAZ3dNNnTZhlD7c_aOeL-z9n5JyVnmSQWxgj28a4ZqbNW4FXLUB0Jbh08CqHSWEOmG7aX0VIrL-WcP_-IYzNVbQ__sRjYylUyelJ3HvL9onPZgCLQmMVbswx8_x5v_kkf3W6EfLI8wcSgKXWfytMG5nGqdxqfnyGQ7oWCYAe33W8mms4jDXFB7ZylMCgnb816mr2i6r2yw8vy7Xi-czsk-1ULP5mEYNHPJ6cxeg58ThZWTLrQW9slqR4W_bijxi19ETrWz-A39sx1iP4QYDsKxsVl23WylX9h77pA5ilfv2V_rub3tLmyFosinKDp64PzLb1XFZVMIjjjLWVB-VhMyLuXX7NF1N1cBkXQtkfhoRuo2qNO9kdsQuSN-lcPO3ENoB12ou6le7LGpSCIZROAfl2x2sZwepyVKsjWok0gp27Bt86U9DxS9hYwiJeIRkuSs7vlFMJxH7DF542x3GZSouHji4xx1dUFWOFVWvI67-HJpw1S3EDm66uMjlKtOz1BjkDVUFN3vs3YM-KHpJ1T0v31iRnI-xZRXqviRryVkZubV3hWgNlaHpFMZ6CCbMUp9qmuQhZ08SUC3c5AsrI61vNlBMWlxdwVKzv5zRUud7MiwWmATmJCwtGATxZCwxGATzb8dEIvwFCGFK0D1ansYu6Cv9v5wMGY9imCbSXVH6OaMW07gWv_u0Fsf8mYKWT1OMgCNXo6Ff49CATqX3vK1mloihbZkhOC5U9mnzOO-I0womCmrayXy9KjYdoBpb1-j1umM8-ulAdgZFuLanAb7WiGkusp_gILC25KKfA2-8SPZcRppyRfn7nymuA7sH44I5PPj3-zthMxljZEiVrgTt8_EtvwSrMr_wn_zLhTJQmyTmVVd-iyAzdxhzLitgVxZu_VdzQOBv0Z-9NaslIl8EHxhwSDPjUeUtkr9rxslI4GB1UgP4sac8kx9-UZijFx-ClSaZu-A72F1y0Kvsr4e97zUqt-vv4twlmXdcp1vL4yRPvUDe-8ulo1dDzkBuxpxFShzTVzgs6vzQdMQfQck6yAwM0fmWimtTmUbxnzXxL7_xYiX-5xwVf79ZEfI0aoM9YBMkppPLSZJIfb8L1D1CoJhe5Om3zGgAOUCMywbosjecKA_SJrC26zm6s8yNBkfA0BJBpuABteUzGlxmbOIEHQoV8UjHxa1PpiZYibhv5qSA3HdxVMIKTt02pkTNV8MR2VYhWMNxxQHBoQ_Q-GBpMr_RMWfRdXx29-DNlubt_Pxm0PdaYXgaO0vbLFAGBxShj2pndFsWVtCBc-RJTxFIiaBObyJja8aygPKAZAYib9GB0okUZEtfOV2k0f2al5u-yrYGorwjUjEgvlQlRqzFMyst_sWtPkDuuiiqjQTuht5dylpvikpKd8ZR73jEFynYxYj1ROkEQTkfq1jVgyEwNnD5x5DUDY2lZkXJF5toUrUzgr3crT-gxfXyRTUv9NzMSYPVa-NVQjKMF3JwyQRueK3zo0COW7XTik49PkpJFJSigvjf2hxBiNxvkwseyfYgdYVlwlNBuz-KF6stkrMl5yT9KzEnRO-v5RiCtMUQfx_NrNiFoksdSP_UCLU6N8gjiFZvIjs3hbIvgS3fTVExoQUoTTIANM28uopnOp7OXWBZ2fGhgqQOA0QodjBuJTaCebmGYJwLjAsP4Nz6MLKIBF9jE9hhIkLKlR0u1qhMHqE6T4HYeFVHNdF50tzaLevvpWQaZ1KqlSuWbeO1jHBeCkgwLVoG2hG2oDTqs_-tgX0dyzKDvmTFEh-MX3mkG1DJUWY_41nRkzPZULAajh8P0NmGNsfXj_vI8-xz0uWkQZMfJlWUlEk2LV0fnCgbrUurtqGw4ckdSmmZp0O-YF5OlMh1QNI99ACY41DxcRH-riRtXsyCrnx2WI5moxvXXdEHig7ALM1KAQ_YIpR4V4dMlmJbLVn228C-T87bzYO1cYcl39xIOFLSKwpkAprJqzIT0JgfGWey_4HXOl5kFXNeCGxN3kZtGEjQHnKDO4twt1oS99sqGIrs-iTrgHw6IFw0jwC0Zu1HLgAlIImSeuedp4OXpwHIQODpDig3-1CImaUeCwIiXLG8OruudB5W6QYfAsjSW0u0mB2cw8V1-Yhg0ggEEZ597KebtCg3OM-ULCIgMwL7DDOZxknijwftHIghww_jNSbbHtEz7nA-e50eNsvwlVlUafUIwVdQB6uCqyBL18TsvrAOkAReKi2De-e3gtaMbKD_U6lpNgZaWmWd9uUlTUsqpZfd4jXPSLCEgKbqeaqfn7gqPJSuqegETAUd1qTdorf3mSsFOg8AobIm3u5b-5_RvrtvAm3UU7Qm9qdrAUC-uJI9ZHGDkRHp1HQEsUCrMmIM2YRdHff7M74OmbXF58L5ZpkevaVLFA8OW6gIMi3QYTJhBVmUg8dvEnaNuVIlfh_M3GZbWwrwle5cH_FWly1 "techtribesjs") ### Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![bigbankplc](http://www.plantuml.com/plantuml/png/bLN1Rjf04BqZyGzJUcWhqT14FLLHL0AeQKg0OgAe9pHUBx3AUdUrkuRIgl_UMTiOGtr8EM1xFFlUcpSpyDbvj3vB9NHYiOvHFHl9EktMAw6Op1AUMGaRxutxrEjPt5siXTzaSUQuPLfvhlm5qsblBXZQH4y4Drps1X_VpoGg__WmxgNeFBSKMWue7uNYzi8GNRlLRhbdeGnQJ65dqJo9n6_WwiE7-eiKVpvmvt3D8_6B5s_RhN7_n_HniLnCPylXz6dIRhqf8_re6NqRBGPtLSxJryNTSZpwCfeCmybsQyQjq-ejovpNARTT65HtdJuSmfrt8TSWUoPgw1nouAjQQPkY5rf1jAVIqWvSNySwKmdQ_SqDe0Ds2R_3QQ1FLVHRDAPR0-eR8ycq0DIX-3rkqJ4hZEz2NwqpYJQ4-rBgdQjKEV2QB551azzmOS5OlHAI5t9F2G-7bjIhhM2ypXuLeGDp5o9ZXLh3hTO-11SR3aOBvK6l01cZ5W0LNWa1SVIXYJijUhQaGI6qieDmcxa0FiSu5lxXUqvaKJcZhS_XAPsE4nVVqcIv9cJBGpPfhPKrFyJgTSspU1-k0ylHSmSgw9N2yGGIz9ZpLM1WCckquusKc2N2r-ZwuRbEDNZTkvYC5k5sPlLM94IdxHgLSBb3xtSKWXmcSAsG2KctpMnLsvAuth4XQOxHvNnJYqnokBnYuIdosdBtujOS3Sm9ZjxL6HxsqVTn3HmFzlqY-xOqY67-msX8UMnQPIiciD7i_zmDF4TlmrEW7uKvE3wMQceL0jBk-N9UQ2VGmmQtdBwCuOedWV5F89rpMTlvOXaVWoIwtYqMiwZGHcdBUR6h3VlpQ99ybfgyXc33Ei2XsolMXVjeEkcTGOyRjhBG4d6LkAeE7N2UU1nfzinzE5y8-_VqwQOLA9MyBDTRGtrtQiGHvdJgIf_pXehYzsbuEwZAE5tlferyeOuJdFCrUm56WT8Wu6p8p-efsSy8JmUnF5BIYNALnhYdBZGGdc3bgPz9FltF_GK0 "bigbankplc") +![messagebus](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFhG1d4tIbpRNIuprYz9art6obeFUNbiOj4JRH6LI8EcatklzznkADakR5WJPtG07h08a53dpp3D3SlWI_I8L5ce-IuDdgCrJBYGK3agV8FWf8MFA20gxuKtO6mmlR-5N-xPxsqS7b_aJ05Aa5YbbaugOWx1zrJE8qVM_GtJw8WZa5yeoBF0CWH2Ufsf0lgfcIYTiHfX2CVmYmXLx53ZxG1CrHIzEJfpw6VvwGwJ44nBHFmawVNtYQWaIAymcAK7_2H0y4Q0IhXOPkUHC6OqNUOkSueG_WdDeZ5D9Wl-wC4qX-AE1C6551s_o9w_HK7wjQq23-PpEpqTypX8i5et6Yjy6YmBE9vw53HwlyYUlRN6H455KhtkKe0JBAKaqpMUeYnTyhgfrSSg1SRVvn-tzODYCXj5luQ1zvRWyml6NYT3EBdc4OTZgj1s9AMR9ew1A4OQKc1D_W6ZlUdX6KAtDPpH64MOItKIrm8mLDEPS_paVSpr-j9aBGPB61omOnFFT-R5kQA2s85YH1CG5IgYCvr9Ipkg84P98f3WQ4VI0KvfegU0dmfBlBbf_LxuERk-6dTiFFT3BSbsk50V6LFSnm6xATyFBmR1__VvgW58oLbf5qCbKEHeG-9OP5PHKdBmhnSLpCWGFiAmZCapnYAI7paIeNLmiQsjeRGHYYPPwvO2we4VaTc3qqRH-BhO0dlL9YhNBSagpYew2wd35wRI-0dsnHi-6zA9MEqGhORV1wg5tchmDIoKpYiHJjfUzJ-pu-5p2F7wtaIWR7vVmdy-FTNlZ-BYs5WFWDXPyLWSnxlJrahRVL4UrewD6xR0KmphcW_ao5dKjRYsOyi-DWj7s2Vfjck7vqP5cM0xbyomHik1hw3q2Ct34nIx11AyBiVOFwjQOMXix1XSmIo3t3x8NuyukmTM9rOjmP__G5cFpHrP0jDYq3r7EiDIDZV3TxnA--plFmVlzWrU4d1LGB3Rh0vHpkwyKjkukOTDBjETUT__05MEJiIeWMcow0AA4ORTI-FgxX4zlRdmV-pyWViNWaBmA8rZiXuzHJhBSa-yxQ7H5qenKFe21iiqEEIm_HEOD7NsSqYGXx7FdA6zOqxalqRdVejClqUblqUcMw7INElbnCUOPUOUQID9yXoZvM3rY0OM5L6JsCuZS2Jh3Oe58IlJ1Jxv3WwadY2X3KcDfZMYUPLmeG7IKxWZFm01coQQkNEwjqmMAEMDG8WbI7AaICzTC4PQ0B9udbB0O_0WVY5YCUBAewut-5EKzJcESvdOPPqVVQxASK1qW9KqCCJvNUPcFruqdv86aFDEU02I6iEnwUByB-z5jRzXwlpgvdvozUl6sPTl3Vmt2Vg_P7Ng2RyxqZnMC_eW6uOtJVdhwvgpLyO4ymN_aJzMxWeBZiPu-d3KQ_k7TddJz-ufSj5IWjN4YtOY8Vt8-UVkozUQoy2HFlW8vXjFX4tAslL1A_gofVmh9c-7_59pjo2ga-hBzzh9zKXxd9-JiZ_RoEEz_Z_BXUd0rx8RlmrudcEgy8QsBGKecX2NcxY3uTe7M7dWVW13w5dmxtnWPZQK4CgCq5x7U5SckGkugRKIYaGkQBba7jO95e5O9739kUPSkpr1e4dtbV9WJhd0ROZnSkwae0zE5XCXOR4Vzn3wnbKIHXGqJm_2hgi3Popmkj8-yZmEbvgozAE_L2bxOwUoJjs1x4VSj-7ntZNmv-NqZNsPkZsj3Ix7YxI7wQFIAB_bstmEsELCOg0c97gcQKeRKq-qAOskyO1yusDZbxRB9-oSenIb00c4hX4KyfGh8oFfA0LWON2YPsz9ZQLn5Kk7nUFVDOXiMlUPrB-mxkxTNByywdTS_QFTcu_WaYxHrftnlyVVoN7rv1YK_mWRNzlDViuZRN63padVgzX9KzNjrv8vNDubLuM4J-lw4tEJlazihxNiELS_yLhLYyhTU5ANzMSQPBhjftogL9dnttNXUld2GGvIbSucotPO9IxPWcOZyjAvjE9bzd-HzStVRWxJe9E-prwtMvSaFIjxMk_sIzy59_XHaREj3OSP-2-Ufpjd_LSR-EsFRQVoNP-oL8JzZ-poUD6CNamisFXq8dddVJMmPhq6mF7x6SwduZ8WwQjjIhObMrVeVRvlR-VWKH5RIaAZ6NCpohMJj4AQsddFEseQpp9LkPbbAOoCDzR_Y1mpkqKpLKPDDvYaMkhgPflnHMX9IfyWPPdX2TAQa0cM2ZsbAWDs6kPNAK1BnG6FYsevCrSfk7KMPqEc-nRdIbVgYEEEKARtPnd5Cf4JWcwM1gEEgPtbcFXeQZkOIi6xC6shDfORkuz68gflVSpC2CwcNcXmSn2dJbiY3dXa-hY3BPSbngR-gSttgpqSB_TTya28HqrnJAac24gnmRis2eMmkCYx95eDwmL6EiQP-Tmsr3uv_xeK3NRmJ_84cO8oB2MPKvh4vUeGgbCEO3uzYca8HR1LtLp9oUwe3V4TOvjPk1OvJ_KbIhDyYnGMHPLtYXGxWtQYv-3UBwFUk0urNWVkJ9EY120dG-O18KzjPtmEA4pJbSPMuWXKdglfD6m-Xz-shvU9uX_28pzLob20rnGfDyGE1Nrb664d07YngVP8wCzhClNjWep6l1eExIDCo_tRA6xTCb_iCd2i8CTB-JpGObWiMrz6li1uThm5tlIcuuX4HbaZh0DSe7yWeul4Nea3RiFALdNbbGIotUKxM0Srnjg0u0ys6r_GYDOceqselNLYVoTkcNoa97yPqVXM87CEpxX3QweenlM7D7NbMmzWoEe7vvvrdROCt2Fu2lEUpz7y0 "messagebus") ### Big Bank plc Source: [C4_Container Diagram Sample - bigbankplc.puml](samples/C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) -![bigbankplc](http://www.plantuml.com/plantuml/png/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") +![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") ## Background diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 33cff1a..39f6d0c 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,5 +1,7 @@ @startuml "bigbankplc" !includeurl 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 @@ -8,7 +10,7 @@ LAYOUT_WITH_LEGEND Person(customer, Customer, "A customer of the bank, with personal bank accounts") -package "Internet Banking System" <> as c1 { +System_Boundary(c1, "Internet Banking") { Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") @@ -21,8 +23,8 @@ package "Internet Banking System" <> as c1 { Container(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") } -System(email_system, "E-Mail System", "The internal Microsoft Exchange system") -System(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") +System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Rel(customer, web_app, "Uses", "HTTPS") Rel(customer, spa, "Uses", "HTTPS") diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 4167e62..198054d 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,5 +1,7 @@ @startuml "bigbankplc" !includeurl 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 @@ -11,7 +13,7 @@ LAYOUT_WITH_LEGEND Person(customer, Customer, "A customer") -package "Customer Information System" <> as c1 { +System_Boundary(c1, "Customer Information") { Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index 9a65efc..466b873 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,17 +1,19 @@ @startuml "techtribesjs" !includeurl 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 -Person(anonymous_user, "Anonymous User") +Person_Ext(anonymous_user, "Anonymous User") Person(aggregated_user, "Aggregated User") Person(administration_user, "Administration User") -package "techtribes.js" <> as c1 { - +System_Boundary(c1, "techtribes.js"){ + Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector") Container(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.") @@ -23,9 +25,9 @@ package "techtribes.js" <> as c1 { Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis") } -System(twitter, "Twitter") -System(github, "GitHub") -System(blogs, "Blogs") +System_Ext(twitter, "Twitter") +System_Ext(github, "GitHub") +System_Ext(blogs, "Blogs") Rel(anonymous_user, web_app, "Uses", "HTTPS") diff --git a/samples/C4model.com/C4_Component Diagram Sample.puml b/samples/C4model.com/C4_Component Diagram Sample.puml new file mode 100644 index 0000000..942bbb3 --- /dev/null +++ b/samples/C4model.com/C4_Component Diagram Sample.puml @@ -0,0 +1,32 @@ +@startuml +!includeurl 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 + +title Component diagram for Internet Banking System - API Application + +Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") +Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") +Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Container_Boundary(api, "API Application") { + Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") + Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") + Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") + + Rel(sign, security, "Uses") + Rel(accounts, mbsfacade, "Uses") + Rel(security, db, "Read & write to", "JDBC") + Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") +} + +Rel(spa, sign, "Uses", "JSON/HTTPS") +Rel(spa, accounts, "Uses", "JSON/HTTPS") + +Rel(ma, sign, "Uses", "JSON/HTTPS") +Rel(ma, accounts, "Uses", "JSON/HTTPS") +@enduml diff --git a/samples/C4model.com/C4_Container Diagram Sample.puml b/samples/C4model.com/C4_Container Diagram Sample.puml new file mode 100644 index 0000000..775b4e3 --- /dev/null +++ b/samples/C4model.com/C4_Container Diagram Sample.puml @@ -0,0 +1,32 @@ +@startuml +!includeurl 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_WITH_LEGEND + +title Container diagram for Internet Banking System + +Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") +System_Boundary(ibs, "Internet Banking") { + Container(wa, "Web Application", "java and Spring MVC", "Delivers the static content and the internet banking single page application.") + Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") + Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") + Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + Container(api, "API Application", "java and String MVC", "Provides internet banking functionality via a JSON/HTTP API.") + + Rel(api, es, "Sends e-mails", "SMTP") + Rel(api, mbs, "Uses", "XML/HTTPS") + Rel(api, db, "Reads & writes to", "JDBC") + Rel(wa, spa, "Delivers") + Rel(spa, api, "Uses", "JSON/HTTPS") + Rel(ma, api, "Uses", "JSON/HTTPS") +} + +Rel(pbc, wa, "Uses", "HTTPS") +Rel(pbc, spa, "Uses") +Rel(pbc, ma, "Uses") +Rel(es, pbc, "Sends e-mails to") +@enduml diff --git a/samples/C4model.com/C4_Context Diagram Sample.puml b/samples/C4model.com/C4_Context Diagram Sample.puml new file mode 100644 index 0000000..9f01afd --- /dev/null +++ b/samples/C4model.com/C4_Context Diagram Sample.puml @@ -0,0 +1,20 @@ +@startuml +!includeurl 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 + +title System Context diagram for Internet Banking System + +Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System(ibs, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(pbc, ibs, "Uses") +Rel(es, pbc, "Sends e-mails to") +Rel(ibs, es, "Sends e-mails", "SMTP") +Rel(ibs, mbs, "Uses") +@enduml diff --git a/samples/C4model.com/README.md b/samples/C4model.com/README.md new file mode 100644 index 0000000..5ad498a --- /dev/null +++ b/samples/C4model.com/README.md @@ -0,0 +1,21 @@ +# C4Model Core Diagrams + +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). + +## System Context Diagram + +Source: [C4_Context Diagram Sample.puml](samples/C4model.com/C4_Context%20Diagram%20Sample.puml) + +![systemcontext](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNp7N_T06S3QFFfhDJOp6jj84wpY1xQ1xjoqCMg9ZeH8fa7GTxtR_-mufcPND28Bitc0_N0LePN7cp3b3SlZu81KHQfx4taley9WBYIylAX_F-osaquXHy7l-ZTyVZIzlyP_ERUzs02ykpUCXqb0juuWzrCGS-PshVeOulFwN3qV7dYU_HImbWYI0HcGUgn5zL1TnzC0IoXG4-0yLHRE58EcdA5GpE3uyB7nFoECDbP8yq67qRmf7Rm-BNe86Yh27cC9_FC1dYAYKgsLABpbJcSUnQP4p4l85YeCfYINr_bk4kH22Bt88arPuySuyvek6ShyM0sWmbzFPsOJFMKZ4ijLQyTjWKSBvq8cmmUEDUSpNDXSX5MNVTOzI28cSqL3JV0azikHpLQ-BOuwCUnT_tDwFnXV3yV0V_gXpLP0y8S6t1w75vZnytsztEmMB6M7XGaHAKGPApAaxGBIwFaaeD3eyYG8O4YRXPjZmih42KyxrVsTJj8D0XpaND6nz8e9XFa_F3dH32pg24aL3D1SGHZAOInbnrWH6QIX1SPXG-4xYADHMtc-KXJybMhqhhQFRkt7tzbCV_LBZovNY2UBgFaROJVkUVpaQ3wu_NeqWfbEbNKJqC5C53qnyEniL4QqxUNF7vIiwHWL4De6EOpAXyLvX8ZJEp_El3LWRWKH2xbSDg5_qY7mQ63vdhL_B8w2o0Os9bYndKLfJABgELvoEcYlGupLwDgNdZSOUh8oB3TOFJZLvcvPQOHGDPcodU5_OmS6Pn7bykb4eMvzp-Azd1xgzTN3GMCi1SfiAdZJHZ1VwEgVjDZMXiR_VQknLObXXBfXhOr7NyjR6AVygTp3UBa6tJJCysz_N3AkXN9uLHXPy3RrFSGPEkDWccQYw36ltf3wTKnjZo-GYPWNaxabsSjpT9hcwi3ePxkwUsd9ilc0bHCj3kn2L3AjbRAJlVflqtTyv0kztJruPSbf2iJoi2r3DxRvMsdhRf4qlqOwytkw9AyUcKrL2j3nq1KG9mrwjz0ssIP_UtBWQ1xycVoNWMBpACrYgmyMe9bcjvESE6gvedDBQ1p1qjjN1mFAzlDR2_kTP58QKVUtkcuOrd_iAd_idV0OLFeCdV7eLFhtSnnmN0vxIKxW06PaTekHJjI02NvPIqUHlQ78deeI89T2OweEVF8NHp364Y87KMDfZE4zJBXGY5fpkA4yn067Xfg_CzzRn4WBE6BxH41G7LH7ccYdAGhGbyp2YB40T_dSgbXCUBfjwepy3q-DHG68Jbt6s__DBQWWr4L96OKQCpvLvvzFru27zJcEUQYK8IJ0jsnxUx_p1yBO_RdzSdTmFJzuSls_RTl-V8t_Gl-YD7SDt9_hF6Wx_68xycqBxqT6xatRN1N8C_swUkdS59STZFNquQxNSmxizwRht5SQqqg2zSIBTo8XxSZvy_xhzxhBq94yVaHmZyVWPETjUg2H_Sg7_Iibdm_yvEDkHLKhrTUVzPUUmEi_FoDaTxTLvtlqUvTFrw6hSyp_w_QutqtL3MebUJ1ye2xEx0-_7EQmz-7k4Hl33-t6sCJ9QkGLaezIOM7LbjgkK5vqsCj7IXdaLNGUrXcMWrWa56LdkfSjByFD2NxSU6i8rRaCoXMit5LLW-YMaCX1FetvXNzZAeYp2HeYn_wXgS7OhJm7QHTv5G6Ku6szeUhM62ZkTNV8MR2VYRWINxxQPhoQ_Q-QhmkrmRMWfrhmzXC-PN_abt_Pxm0vdYY0r8M4HgLd4G3tVhZ2mmKlsWQEDNTuscxpVqIc84H89MoCYWbcaa8nihXoGXS7LRzbjwO7Cf89KP3hTVhFOmKNluhhl3mgxjpUlJxhTjxzezsRp-2oBj9LJlRVuQtd-_rYUxIot5SSzJxkbf-wDEHH7Oh4yrU5XI_NkX8fbtIMtKq5t1DMlwTQrPbctAieAUf9ofj-B1TqwLPRouehmgdf9e7kGndC9wNOBW2LRiW0CtOAjOnHgzYvb-URkjey5hr2MJzwssvU7lwWiMtMxbUKNX-OfgSLMGsajVeydfUx9NxLucrhyyiUPizpbm7PAPMPEJ-HcTX3yMPKzX_-pAxlLKLRPy-Rdh-pbvBmdHgsd8XMlTkAcs66lGnYH1prxfroOCYGOLT0c3AVrGsxhUVcvD9q4JMXaFqXihJfpgNX2HGCRBo38VwssfnEqQfgA36dkQRu12G8-rmKGxzhpurSqaOXHGiF0np5VI1j3wdBwFQ8BY1WAICpk5GWkAKh7ZiHwfAQfe0dvHY4bouJcmRtY-KaJyFSJ4iKWRTZHZ6A4V8hSH87WkjI3_nZCi3CfqA83GXOH4wFfXY13p3DzGjHGSK4ba3XUvIp03p393LrfLdwp84q9mYG9j1d-eYemqWOqphejI-szf18_urUZDElG8MMXp3NeZEO6neFAJGF3-6PqLxHAYk0Vq7gUnFy3) + +## Container Diagram + +Source: [C4_Container Diagram Sample.puml](samples/C4model.com/C4_Container%20Diagram%20Sample.puml) + +![container](http://www.plantuml.com/plantuml/png/xLXjRziu4lxkNp7h0jS6S2xfUowN6XlRIfCzsp5ivzgzjZ1eYRPvAv42ISVrNVU_tv2IMLcALh2z6zo7LO1M9fzvvfaHENpvKMaYzJ8AQq-XBK8X5RuygNngjHy2EcESWjVrUbv_FBcwnN_QjztR8JoviayDcKPw7J8-tv5pxBMl-mdZwEPV7Zn_KQkfNnYFYIGH88WiGpscN_LboEOyebo3Z_zGcOMj98a_i40luCNfQQOz8bzxL2aofoFs7mhFNvzchIJrDU7paC9_Qu3F25cfqEkONWck4uiNjaSjI21M61pCIAXexTSipQMKOfLIsBJ2apVsiIs6gjYQTV3hWvekBgPYoGCYrytcHbzEHOdcquA7d8vNzh6jBI43AilQpHUb412re86H-HIwP2sMUhTF70fKtBty-VPkFBaSJKR_yCRjwqp8K-B_CfScs5I7vtcjJZk3M10Uh2JJcdBGSacB0yH4roSHXNfRHCo74U4AUgDwBHahC1F2_7SnGnpuniqxIOFc1o8vvlFyuiHqDA4jAT4qGBY4W2b_gHGJl06Sqa215Z2bS4z25XXKxGVAW-yXkdWtiOvl1vFExOS-siNMLcWjK34ptnXfy_YkTpMU36_UNuyXf3DjJ2IRBtJ60XFVIaO5exjEtjHm_OnEC0AY6a0d8PdIy2Wp4UhltgMjTTWQWKH1QbTDQ5xCY7oO63ublL_AFM1aGneI4x9Qi7Z7GD5qij7qlB4XVR4bpwNqNRr-11jmjiFPmRaHxzAoanjD_GK_oDzdVd9oeN0Ud-SAPVDJIl_buiJqDqzEwbivG6qpAQ86maJcMwUoYrqDg1yVD-j7bHmki29P4UDOj_BMmYd_R6DWh8i2Ytr6uSNniL5OJLNKMG5ov5liVOepS2haFid4gCkv3axgWpbrFlPCBd9MKnwQvBpmpZx9DOMraE7EuQajvnOhNYAqt7MHeb9XTHYvzDtjaxwxGI70kyEJLyOSbqiiaryWgDPsjrFQklkapIpHXV2wXoUkd9lET8dGSjSb51KAkpkbRxXF-ipcfXZZyF3y_GOv5g_o39R6KUIe5baToVSTD5pJCAOx7y3Gs5K7IokEqbeBnvyMB0We_z8vjXrRDdSLDdSFs0mhR8OFs7GhRBgfZJqk-YAcvt09YjaTeX8plI8INzPAq-Yl21b85X6v1XfIS_1Jvp1U5830E2Z3PIn6opWMKYDZncX0HOmE20_ojYhTMuThy0Nd-4O3q09qXPiRhYaF44kM0QFSnpYyUohNKn6i6sQZlm3xnPbFGkkN2txylIMsWXf8gLYG2CCnOT_5RDjvGEzfA68J2L8IJCk-X_U1DnpTzYUjzvkJ--dPgnTlMwxV-pZsXltBxgG0V7Dc_XnmzFDexFKo_S-VlpbhTOf41U3VxBFhNK79yTXC7y6RpUBXtPrqY_SL5be9QELEfBcC54_EfszVjjvSbPxawLSKnqauUKJDxYjKYZ-xD7-bufFX_oYQtO0fa_go_VQgVLgTvqVKN1pjrNa-_1xbmytu6YyCtdlzJcrXwePo8TP2EgSyIEuEQj_UmTQ3lyS8Wc-rRnUvaT5C4P2CKWjnqPLXDodF6kKoqJJ0j8fkapfW6Qapme1iMCLBbwVW9OL-vtfe1Uzm6v94k7rJKK5cNWAgVFamwsV-cMyG9HxoUYVULxs3PZSZgiKRviC2g73d_8tiLzqX2ZUTY-8TsM72dOTolVjclbhymPclS7V0jQ6JkEFj8NnAxCel-VRV0xO5rmIbIGKhfXUCWtwyNQ7ld9Vi0yUvNTu-cxo_ev4V8YKATY0Y_GNJA4OrDWQe8k75j-Isz4GbeOBIP3RRVxFOnaNlygRl3JExjrSlppgTrx_JxitbyL4MQHTEzTxYp-Nv_sDvThEyK77SURfGUdQ_COViICoMfrrqk59zkA1SMI-AExoWku1sh-dETCUoxg8eA-XHBBXvpnPqPrHPohChmhFg9O4UGHmk5SJxBG1ERCa2C2eMRECZKxCFASkzmMqV2rwcB9-zRhMkJd-dikoYEwmiFpcrJqajTZ6KrkAtU5BgdErUY_-inSOejzevNZUZ4FKKOOKFaS3S6FYZ2djA_qSNTXT7MM5Fkn-_i9UBgpqmQ6kQwJ1Jjo5WP6xcxKn8Mu0afnfQXEE4dgVxzLejFP76Kxy1zUG72HsglLHQH5JMiVCI_FJNPcCwHLJ3rcA8DvQc3OZlYwKfVNZBdZsxAAJnZYF2DkFGy8wHYV5qUFQOBuKfi-1zzHUOIGeqQv1ZZAQ6ieVnpZ1IcelEi8-qa5G12SEDQbz8b9u2qL38o6wAWU1AfLsGgk72Q82MX2lY6nZ-ejhFw73B8xDYyfck7oKLChD3M174VQ1Jk8pZaFdMkz7wRt9Fx1emYgKHr_jdspHtQCZkKP1LhpJ2VJj7ATSMhLq2gNQ1fKjgJ323vBiRr9qJes9YqfJ01mX_I9No9OiJR_XDbY6HfcSWnJqBakm-h6Asv3Pf96Hw3LfypoxSCs9ic8GLPc8gnKfHMPGN6NKzCMMX5MRSVYGHmVniAu2GHSoilsevLQX0w0CKHOc_z3zSaPbFYzA2gVauH9CfKTIe6TAG9DomQOQHlw0HoOp49OO9aiwPqjAYisEm0GkY5dQVW4guJZy3-986vYS9as59bO9GpDrOp2aZCJCJTd1JFi9qPeIvD5QbosI8m4-uR9rSZyS3G0_6kVMEmIT-gJB1KXweTEeg6trlF43e5ZAPlNUAMiJ7NjUoZl8mc-SX9KZu5rX9fb6e5iRafqwhdK6RUQLYafaocKxROVcSHnD8mMNqsp3SQo0ggPShaa5j0AvNnQuxqnhb6assi2EVCWmG0JzYqp8AQ_y3) + +## Component Diagram + +Source: [C4_Component Diagram Sample.puml](samples/C4model.com/C4_Component%20Diagram%20Sample.puml) + +![component](http://www.plantuml.com/plantuml/png/xLfjRziu4lxkNp7h0jS6S2xfUwwN6kiNfScUanYsizszjZ1eYRPvAv42ISVrNVU_tv2I6LcoJh3T3Ux3Aa33a3FFF3CS3b_G7vKcKY-YiFOKEY8KKc7ZIULNg_qGq2dZ5BoUT-tTZCONj_XFvxPtEu0d5_Qh8T9GhqB6PpjYZhpEvKs2EBpwfmVFNzHgwZV6Oo9912X45g4UqQ-w5R8PZoZNuEC_L6R5bfB47rcWv_3Yz3JJ7v6lrrGfCgD3zcyApr-VPhKazJNXiv32Vsg0tn1HgT2hc5u8hXED5tP4pKaWbkWSJ4ceQEttB4nBIh5C8MnOuSaR-zaU0rNipHhuVIkdy_E9MF20o5MpkUQNOr72-RHW8SVZbVriRrl8WCgoVZEZ50AYvZGmD9z2Zwp4GkysnQ50nhtMhxTtet5hE1x-mnjrBZCkJuZ_sqmQPrCUdkUrkvsCn9pmO2cPrfI3bWjQJ13ZtGs9ADGx8c8-30bNS3sirv9SWQaGvjVvL9ZyCMRUIneqFnB9CPxlpa_CG1CwaX9D0nIN433bBvHYWZU0Kneeq08c5Ev9o08ZLVk1yk31HUVlsjVHRN_SlVruWtgnrHLQ2sJCp1mZR5w-vrsCneEh3vSZ2EbK6nN9PdETqS30jvEiO7JNnPighfxHCNf0L0FeE2GJ6Xvb5aBz_VkqjmuR6KWKf7hLWAPXCd8xC7nAHh-KMq3F1ZGancKrP_6EZgBgUCtfUMCD-cA3dWlf-thz2DR2sG6d1-yCUHUMdSnewi_vGVO-yvEJSuNh-5skK3O_fV1Vpa_CUFFafBuH0-GsbI9ge9Z8p7LAkpZKWFhnSRD-L8dX72k25MKSwaRSshZadwKALhj8i3Xc69uV7nk6rL15dXL23dm3_ORY2fm8kKymqUjgh7s3kZscpiQUmKNCAiZ3WvmdtjqdkAQm5YBSFJoqvTXYoKk8bfikGbGoh7OZ5xwxVS9troyuU7TuyCgGupAAvVGB0DNSxdOAMs-Vi9ajkk1Ux_30bMFJgIuXMcww1AA2OM-dy0ts2Pyvt1Hz77o7-9M3O_4gZM2v7qMCQfBLdZoSeE6IXZ7T-GA6oguwM5XnbDPQEFuqPq50-PVkiHtOqBchqBdReZEeq1biqUbLwFHI7NjTz4LCtq4B5BCdH2McUaaaDbPAq-YlADANB29o1JIavkAdti5eNX04na4PBACnNCIna1eHCqfzAc8qG7YGrrNfsJfSWIyunnODG0lG5MQkkAOyG5co21ZbFlhXtLEvceXWrJ07_JdO6MS-2QrTBlZnGqzi2JKGKh4W8OOvOTjYkcayeFSq5B7n1249XcNVotlV6mnlRyRj3-kR--dPgnTlssxS-sNa3MvQlN51yCsP-N62mr-78-ywC_xy-PkpThS8L13yc_rsVIiekHwRvIDuixdrycuZjEMzmefM2hHpDz9SH8etvzEtBzjlBaflylGhakCa73yYPpSBbUJFMkQdb7oI_e_1sMLMATMNdRSNdTFgE3yYvsAsLyVvy7UKZrUZot7F--3TT6jpKpUKSx4MqXdbGV9sKFls7ZO-_7k4Gl2jzkqybndDL0AIBBKYphiosNN8iqgvI3IjO38bcw1Ei0pKAQ53rgtYeyjJyD92lsizj8HtU0r9FDnygQW0Cus0AbzkH_tCF_ErH8c5FD-nzrNlmDcjY6ho3dbF1ohDENj3EwixUE6MSu6y0pkGkBDGpdVVo5UJFpJobURsVpPq57TyFOHFYLxv8z_-Py2Eu9eWDQbWoVISST2FTohqdV6IS-0eTyhRvv3tTrJoGuH4maw8I7_ED99HZRK2ih2uffMybfwen5LGcaod-nyMExZfjQvkl47czFRgvLct-_exdTvS71zbatRkL9yj_joU_p-sPxVAYvNHtQUBfMVN5tF8PcAsFEt2mvNgmmdboxeZTt11BpgqUqrtgZkMTUT5MK6FOi5DErlGdL9bAS_k2C-gjmHw176uK13ljm4uiYKRmB1Oi8sDJCq-f2nVzszliE1bolBPwtRxulGxbMNdtM5b-Scf_KfgiVEXj1Q_nPjIzsoFMlndBKObjzlbSDsAib9k7d9IBWN-gBgUml_HTTtvKLBN7Oz7h-lbv6fRShQccGupV25WP6QMxLH8MtyafnhQXEDwdgN7TJY6LlyAMd4SCfya_tNWOIDJCMb0VPZKvZwPqQnW7OV-HUu94cMnjfKB7L-4H9gHlXJt3Bq04eQs7B8rWKbAOBhWli51X_JA54r_eRI8J6s-PyJeC0bBEe6954k5MqBzA4CjCioknOI5bfGn-Gk9Y6Hyqpg4B6AcAgl5HA5reGzW4rbxwIzJfvbFDsa54xJU9PfCYAA6oO269C65TJSC_JcDY1aTQY6HvGBT0qbdJ6bffP4VJbfasmsO4pMtEmUou3eDF_YI1kPF4c964j-dIa4ePYOzjMzOPUwCqKIPS164bIIYkIHmJ9BPIYyTFdQuy6Ju0C7zNBlu9CR5Wcji8NskY0ta0u_QbeC4YHaQpQLU_IZPIZ9BJh4PD-pm5wOm62Gfmf3Q7Bl-kGC3glH3Tzs0Xg5O9Z5LPY8D1FB7vlQPLqaCZdAMdLE8c3PXk8WYP5zD8vk2Bb3sp0845A88kKhZpAHbue9O8AAelv2Ob2OCQVDXr4vTB8qVRKesSZ-NqfA693sTA1HF9hK1_fmaVyH4gQMGWPkt70rCeIdnIK3_HoB1XPNOGge5YJ88div3v30s9y9OjgO7D4odFnE1EqKnGcxyOP8SlQBGWxfTdGDA0lWBBB6BWXQ6tK_TTYUZuB0iR0feAynrx-HoDEeFKHYF74RMbiY4fXFx2NTr9-U47DSIGIiPLQEXJ3NOZvG7YoZyBm00) \ No newline at end of file