diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e9150297 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +################################################################################ +# This .gitignore file was automatically created by Microsoft(R) Visual Studio. +################################################################################ + +/.vs diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index 275dac11..2c29570a 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -1,219 +1,402 @@ { - "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_Enterprise_Boundary": { - "scope": "diagram", - "prefix": [ - "Enterprise Boundary", - "Boundary for Enterprise" - ], - "body":[ - "Enterprise_Boundary(${1:alias}, \"${2:label}\"){", - "\t$0", - "}" - ], - "description": "Add an Enterprise 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." - } + "C4_Include_stdlib": { + "scope": "diagram", + "prefix": "include C4 diagram definitions (via stdlib, supports no C4_Deployment and C4_Dynamic atm)", + "body": [ + "!include ", + "$0" + ], + "description": "Add C4 diagram specific include (via stdlib, supports no C4_Deployment and C4_Dynamic atm)" + }, + "C4_Include_url": { + "scope": "diagram", + "prefix": "include C4 diagram definitions (via specific url)", + "body": [ + "!includeurl https://${1:url}/${2|C4_Component,C4_Container,C4_Context,C4_Deployment,C4_Dynamic|}.puml", + "$0" + ], + "description": "Add C4 diagram specific include (via url)" + }, + "C4_Include_RicardoNiepel": { + "scope": "diagram", + "prefix": "include C4 diagram definitions (via github RicardoNiepel, supports no C4_Deployment and C4_Dynamic atm)", + "body": [ + "!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/${1|C4_Component,C4_Container,C4_Context|}.puml", + "$0" + ], + "description": "Add C4 diagram specific include (via github RicardoNiepel, supports no C4_Deployment and C4_Dynamic atm)" + }, + "C4_Include_kirchsth": { + "scope": "diagram", + "prefix": "include C4 diagram definitions (via github kirchsth, it supports C4_Dynamic and C4_Deployment)", + "body": [ + "!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/${1|C4_Component,C4_Container,C4_Context,C4_Deployment,C4_Dynamic|}.puml", + "$0" + ], + "description": "Add C4 diagram specific include (via github kirchsth, it supports C4_Dynamic and C4_Deployment)" + }, + + "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_Enterprise_Boundary": { + "scope": "diagram", + "prefix": [ + "Enterprise Boundary", + "Boundary for Enterprise" + ], + "body": [ + "Enterprise_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add an Enterprise 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_Relationship_Direction": { + "scope": "diagram", + "prefix": "Relationship with layout direction", + "body": [ + "Rel_${4|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", + "$0" + ], + "description": "Add unidirectional Relationship to C4 diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor)" + }, + "C4_Relationship_Techn_Direction": { + "scope": "diagram", + "prefix": "Relationship with Technology and layout direction", + "body": [ + "Rel_${5|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", + "$0" + ], + "description": "Add unidirectional Relationship with Technology to C4 diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor" + }, + "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_Layout_Up": { + "scope": "diagram", + "prefix": "Layout to Up side", + "body": [ + "Lay_U(${1:from_alias}, ${2:to_alias})", + "$0" + ], + "description": "Add hidden layout line to put {to} to the up of {from}" + }, + "C4_Layout_Down": { + "scope": "diagram", + "prefix": "Layout to Down side", + "body": [ + "Lay_D(${1:from_alias}, ${2:to_alias})", + "$0" + ], + "description": "Add hidden layout line to put {to} to the down 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." + }, + + "C4_Interact": { + "scope": "diagram", + "prefix": "Interact", + "body": [ + "Interact(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", + "$0" + ], + "description": "Add automatic numbered Interaction to C4 dynamic diagram" + }, + "C4_Interact_Techn": { + "scope": "diagram", + "prefix": "Interact with Technology", + "body": [ + "Interact(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", + "$0" + ], + "description": "Add automatic numbered Interact with Technology to C4 dynamic diagram" + }, + "C4_Interact_Direction": { + "scope": "diagram", + "prefix": "Interact with layout direction", + "body": [ + "Interact_${4|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", + "$0" + ], + "description": "Add automatic numbered Interact to C4 dynamic diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor)" + }, + "C4_Interact_Techn_Direction": { + "scope": "diagram", + "prefix": "Interact with Technology and layout direction", + "body": [ + "Interact_${5|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", + "$0" + ], + "description": "Add automatic numbered Interact with Technology to C4 dynamic diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor" + }, + "C4_Numbered_Interact": { + "scope": "diagram", + "prefix": "Interact (specific index)", + "body": [ + "Interact2(\"${1:GetIndex(0)-1}\", ${2:from_alias}, ${3:to_alias}, \"${4:label}\")", + "$0" + ], + "description": "Add numbered Interaction to C4 dynamic diagram" + }, + "C4_Numbered_Interact_Techn": { + "scope": "diagram", + "prefix": "Interact (specific index) with Technology", + "body": [ + "Interact2(\"${1:GetIndex(0)-1}\", ${2:from_alias}, ${3:to_alias}, \"${4:label}\", \"${5:technology}\")", + "$0" + ], + "description": "Add numbered Interact with Technology to C4 dynamic diagram" + }, + "C4_Numbered_Interact_Direction": { + "scope": "diagram", + "prefix": "Interact (specific index) with layout direction", + "body": [ + "Interact2_${5|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(\"${1:GetIndex(0)-1}\", ${2:from_alias}, ${3:to_alias}, \"${4:label}\")", + "$0" + ], + "description": "Add numbered Interact to C4 dynamic diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor)" + }, + "C4_Numbered_Interact_Techn_Direction": { + "scope": "diagram", + "prefix": "Interact (specific index) with Technology and layout direction", + "body": [ + "Interact2_${6|Right,Left,Up,Down,Back,Neighbor,Back_Neighbor|}(\"${1:GetIndex(0)-1}\", ${2:from_alias}, ${3:to_alias}, \"${4:label}\", \"${5:technology}\")", + "$0" + ], + "description": "Add numbered Interact with Technology to C4 dynamic diagram with specific direction (R..Right, L..Left, U..Up, D..Down, Back, Neighbor, Back_Neighbor" + }, + "C4_SetIndex": { + "scope": "diagram", + "prefix": "SetIndex of next Interact", + "body": [ + "SetIndex(${1:new_index})", + "$0" + ], + "description": "Set the index which will be used by the next automatic numbered Interaction" + }, + "C4_GetIndex": { + "scope": "diagram", + "prefix": "GetIndex (used by Interaction)", + "body": [ + "GetIndex()", + "$0" + ], + "description": "Returns the current index and increase it automatically with default 1" + }, + "C4_GetIndex_SetIncrement": { + "scope": "diagram", + "prefix": "GetIndex and auto increment (used by Interaction)", + "body": [ + "GetIndex(${1:$auto_increase})", + "$0" + ], + "description": "Returns the current index and increase it automatically with the given number (default 1)" + }, + "C4_Node": { + "scope": "diagram", + "prefix": "Node", + "body": [ + "Node(${1:alias}, \"${2:label}\", \"${3:technology}\"){", + "\t$0", + "}" + ], + "description": "Add Node to C4 deployment diagram" + } } \ No newline at end of file diff --git a/C4_Deployment.puml b/C4_Deployment.puml new file mode 100644 index 00000000..f8c1c88b --- /dev/null +++ b/C4_Deployment.puml @@ -0,0 +1,41 @@ +!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 + +' Scope: A single software system. +' Primary elements: Deployment nodes and containers within the software system in scope. +' Intended audience: Technical people inside and outside of the software development team; including software architects, developers and operations/support staff. + +' Colors +' ################################## +!define NODE_FONT_COLOR #444444 +!define NODE_BG_COLOR #FFFFFF + +' Styling +' ################################## + +skinparam rectangle<> { + Shadowing false + StereotypeFontSize 0 + FontColor NODE_FONT_COLOR + BackgroundColor NODE_BG_COLOR + BorderColor #444444 +} + +' Layout +' ################################## + +!definelong LAYOUT_WITH_LEGEND +hide stereotype +legend right +|= |= Type | +| | deployment node | +| | deployment container | +endlegend +!enddefinelong + +' Nodes +' ################################## +' PlantUML does not support automatic line breaks of container, if e_techn is very long insert line breaks with +' "\n" +!define Node(e_alias, e_label, e_techn) rectangle "==e_label\n[e_techn]" <> as e_alias diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml new file mode 100644 index 00000000..d4919549 --- /dev/null +++ b/C4_Dynamic.puml @@ -0,0 +1,173 @@ +!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 + +' Scope: Interactions in an enterprise, software system or container. +' Primary and supporting elements: Depends on the diagram scope - +' enterprise - people and software systems related to the enterprise in scope +' software system - see system context or container diagrams, +' container - see component diagram. +' Intended audience: Technical and non-technical people, inside and outside of the software development team. + +' Dynamic diagram introduces (automatically) numbered interactions: +' Interact(): used automatic calculated index, +' Interact2(): index can be explicit defined, +' SetIndex(): set the next index, +' GetIndex(): get the index and automatically increase index + +' Index +' ################################## + +!function $inc_($value, $step=1) + !return $value + $step +!endfunction + +!$index=1 + +!function SetIndex($new_index) + !$index=$new_index +!endfunction + +!function GetIndex($auto_increase=1) + !$old = $index + !$index=$inc_($index, $auto_increase) + !return $old +!endfunction + +' Interact +' ################################## +!define Interact2(e_index, e_from, e_to, e_label) Rel(e_from, e_to, "e_index: e_label") +!define Interact2(e_index, e_from, e_to, e_label, e_techn) Rel(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_Back(e_index, e_from, e_to, e_label) Rel_Back(e_from, e_to, "e_index: e_label") +!define Interact2_Back(e_index, e_from, e_to, e_label, e_techn) Rel_Back(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_Neighbor(e_index, e_from, e_to, e_label) Rel_Neighbor(e_from, e_to, "e_index: e_label") +!define Interact2_Neighbor(e_index, e_from, e_to, e_label, e_techn) Rel_Neighbor(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_Back_Neighbor(e_index, e_from, e_to, e_label) Rel_Back_Neighbor(e_from, e_to, "e_index: e_label") +!define Interact2_Back_Neighbor(e_index, e_from, e_to, e_label, e_techn) Rel_Back_Neighbor(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_D(e_index, e_from, e_to, e_label) Rel_D(e_from, e_to, "e_index: e_label") +!define Interact2_D(e_index, e_from, e_to, e_label, e_techn) Rel_D(e_from, e_to, "e_index: e_label", e_techn) +!define Interact2_Down(e_index, e_from, e_to, e_label) Rel_Down(e_from, e_to, "e_index: e_label") +!define Interact2_Down(e_index, e_from, e_to, e_label, e_techn) Rel_Down(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_U(e_index, e_from, e_to, e_label) Rel_U(e_from, e_to, "e_index: e_label") +!define Interact2_U(e_index, e_from, e_to, e_label, e_techn) Rel_U(e_from, e_to, "e_index: e_label", e_techn) +!define Interact2_Up(e_index, e_from, e_to, e_label) Rel_Up(e_from, e_to, "e_index: e_label") +!define Interact2_Up(e_index, e_from, e_to, e_label, e_techn) Rel_Up(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_L(e_index, e_from, e_to, e_label) Rel_L(e_from, e_to, "e_index: e_label") +!define Interact2_L(e_index, e_from, e_to, e_label, e_techn) Rel_L(e_from, e_to, "e_index: e_label", e_techn) +!define Interact2_Left(e_index, e_from, e_to, e_label) Rel_Left(e_from, e_to, "e_index: e_label") +!define Interact2_Left(e_index, e_from, e_to, e_label, e_techn) Rel_Left(e_from, e_to, "e_index: e_label", e_techn) + +!define Interact2_R(e_index, e_from, e_to, e_label) Rel_R(e_from, e_to, "e_index: e_label") +!define Interact2_R(e_index, e_from, e_to, e_label, e_techn) Rel_R(e_from, e_to, "e_index: e_label", e_techn) +!define Interact2_Right(e_index, e_from, e_to, e_label) Rel_Right(e_from, e_to, "e_index: e_label") +!define Interact2_Right(e_index, e_from, e_to, e_label, e_techn) Rel_Right(e_from, e_to, "e_index: e_label", e_techn) + +!unquoted function Interact($e_from, $e_to, $e_label) + Interact2($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact($e_from, $e_to, $e_label, $e_techn) + Interact2($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_Back($e_from, $e_to, $e_label) + Interact2_Back($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Back($e_from, $e_to, $e_label, $e_techn) + Interact2_Back($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_Neighbor($e_from, $e_to, $e_label) + Interact2_Neighbor($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Neighbor($e_from, $e_to, $e_label, $e_techn) + Interact2_Neighbor($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_Back_Neighbor($e_from, $e_to, $e_label) + Interact2_Back_Neighbor($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Back_Neighbor($e_from, $e_to, $e_label, $e_techn) + Interact2_Back_Neighbor($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_D($e_from, $e_to, $e_label) + Interact2_D($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_D($e_from, $e_to, $e_label, $e_techn) + Interact2_D($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Down($e_from, $e_to, $e_label) + Interact2_Down($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Down($e_from, $e_to, $e_label, $e_techn) + Interact2_Down($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_U($e_from, $e_to, $e_label) + Interact2_U($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_U($e_from, $e_to, $e_label, $e_techn) + Interact2_U($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Up($e_from, $e_to, $e_label) + Interact2_Up($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Up($e_from, $e_to, $e_label, $e_techn) + Interact2_Up($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_L($e_from, $e_to, $e_label) + Interact2_L($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_L($e_from, $e_to, $e_label, $e_techn) + Interact2_L($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Left($e_from, $e_to, $e_label) + Interact2_Left($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Left($e_from, $e_to, $e_label, $e_techn) + Interact2_Left($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction + +!unquoted function Interact_R($e_from, $e_to, $e_label) + Interact2_R($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_R($e_from, $e_to, $e_label, $e_techn) + Interact2_R($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Right($e_from, $e_to, $e_label) + Interact2_Right($index, "$e_from", "$e_to", "$e_label") + !$index=$inc_($index) +!endfunction +!unquoted function Interact_Right($e_from, $e_to, $e_label, $e_techn) + Interact2_Right($index, "$e_from", "$e_to", "$e_label", $e_techn) + !$index=$inc_($index) +!endfunction diff --git a/LayoutOptions.md b/LayoutOptions.md index c5b64b4e..97900e0d 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -57,13 +57,13 @@ Colors can help to add additional information or simply to make the diagram more 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 -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -76,7 +76,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![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_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/PKzDozD04BxlhnZhuKsX9hpYoLDZBAtGrj2a5azXcunsOJ-MtLb24V-x4rfRmRqCEyyppySoaWoKZ8Pj-VthiUrENzfDjrsjL_lFq4ZZDOetolOw3PY2XWkHZn-B8iWn_wdeaiufOkYT9RIKzyuK1zNBCBYzGe-wg3wygxMqTDnj2oCZOU1LLp5VAeiXzsmjnF_UsLo86aDqDfE3KNO1itAQAbAGvC9iBfehovdkaqjsaE6QzQyBUBb5Vfd3Bm7y7aRPYETEUiyw9pn3wRtcdAISdV6gUhk0igdp_Qhbau3mFd-5tRTgmagjtHXXgXc17717BvbYaYR5Nj2EYWW3a3AesIjojj_tT1dTGDQvqnWK1zH_MprZ7IDVyjoqRTqmQo8zqAVC6Ydo5wVn8pZpxyaIxP2C_WC0 "LAYOUT_WITH_LEGEND Sample") ## LAYOUT_AS_SKETCH @@ -90,13 +90,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 -LAYOUT_AS_SKETCH +LAYOUT_AS_SKETCH() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -109,4 +109,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](http://www.plantuml.com/plantuml/png/NL1DQzj04BtlhvYw1ylWIhZqr9DLOMgexGfBJiX9hAL9lB0Vo-u8OKB-UqROiKDq6JJlpVlOPIGPg3SQDldJ_qFTv5LJ_LlLnHegQRn6yKtPLlSTza73YSZ7traMv92-A3hrnpvYQ9qbj9IspcHxrShGkPr2ZpehVlqejRHqs6uo8oDXu5LJC5ygYo7rR2p4L-Ta9aI98JgRoCueEuT9FauLAKXoOJ8JrPd5JFF7zRQJuPoqYpbCBu6dCtWLmD_D9Xdms4ZlMUSHZv1xhpabAMSdl2g-po6lodItglaa8FnC5x1zA4OirzeD4SQI4SW1D_IIAQRNfDWBwa4HOG1I1ZLxHSxsTasNq0LadIkDGR57_T7g7kiG-PBdkgxBYbaZwORUPVuYHVx5SJm7PpwVBD5susk-0m00 "LAYOUT_AS_SKETCH Sample") diff --git a/README.md b/README.md index 198b334e..b7ea6b7b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,60 @@ + + +# This master branch is not maintained anymore + +The extensions (e.g "Dynamic diagram", "Deployment diagram" and other fixes) are integrated in [github.com/plantuml-stdlib/C4-PlantUML](https://github.com/plantuml-stdlib/C4-PlantUML). + +I leave the master branch unchanged that all existing *.puml diagrams remains valid +(with there **!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/...** references). + +With following small changes you can move to [plantuml-stdlib/C4-PlantUML](https://github.com/plantuml-stdlib/C4-PlantUML). + +- [ ] in all **!includeurl** ...**kirchsth**... to **!include** ...**plantuml-stdlib**... +- [ ] **Interact...**(...) to **Rel...**() (C4_Dynamic.puml defines new Rel...() handling with automatic indexing,...) +- [ ] **Interact2...***(...) to **RelIndex...**() +- [ ] update to latest plantuml-server version + + +old +``` +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(b, "API Application") { + Component(c3, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.") + Component(c4, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Interact_Right(c1, c2, "Submits credentials to", "JSON/HTTPS") +Interact(c2, c3, "Calls isAuthenticated() on") +Interact_Right(c3, c4, "select * from users where username = ?", "JDBC") +@enduml +``` +new +``` +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml + +ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(b, "API Application") { + Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.") + Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Rel_Right(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel_Right(c3, c4, "select * from users where username = ?", "JDBC") +@enduml +``` + +### [Structurizr based C4PlantUML writer](https://github.com/structurizr/dotnet-extensions/blob/master/docs/c4-plantuml.md) + +Related to these *.puml diagrams exists a Structurirz extension [C4PlantUmlWriter](https://github.com/structurizr/dotnet-extensions/blob/master/Structurizr.PlantUML/IO/C4PlantUML/C4PlantUmlWriter.csThe). +This extension will be updated soon. + + + # C4-PlantUML ![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/pPLjZzCu4CVVzrECojlssbrWsKFTYZwmEX2zwrrw1n8WD4ccgOLZHxQpfHnyztDSDoJhLjp3eYChhTePpzy__psPFj46bIbptj7lcIXGOGufhR7aPaKVp8IpJEGa32Js7wd6ggt2uYLBpGREXyD6FCSF2z8QCuhOHuApXysaeiIWo3Z1dnsmJsGrIPfTGTTIc7t1kSle3QPooqG6Q-IQEf-RW6WmHltVH2PAoQrNc4ak5ToxS8-BL4fXjAd_-TYnHgDObY95jHkF3tHjXbF4ms23MnWFtEEYKwbIKgVYaTbnWXJrXj9Jb0KfBOLZ37cyyBLxQemmEiNaVQQgy_hSyFB1-QDfY3XyT7zwSNsAnROPAO7ytRU1khYi_aAeoqdrTmfAxxIX_AvPpiukBgVpaEN-xD7rRFXLWxuDr8_kEMrG-E9z3_vubE_4dk3E4YkEJ92wQvm7zo_dyuV_qAB_ZyR80eo4M1eZBH6hB69IT3Oi9T0rH8TJHY85nRADwNowWjPZlw_i8lZK-JJoGsRiCx0V6YxbN_KwTMYCvXhVOcEtODymBkwlEQXjhl6dtTVMbjgK9T_pTmmpd61MvrA6MNKLQwdWcQWaoLWNXRsZ328dtQcx1hfNLxDIMwD8lH5l14mWyLz1hi5i269RseCjCnj_AEGk1fWazbgCxa9ZkAEk1Tgx12Ylzonlkz3y1NC2PxvZMW8lAOP9KN2Me67IiWu68yq-qkEpy_7hvtY3FOWALIal_fYz7Gsgt7WmSAUQ4sSt5j4TI1iha3WtIHX0aRfm3HWVl5fEkj1kP0ktfVWT5aN85x7gKt-96LMS8L-KA5QO7an4Ld9Kjn2NIjwmb3GWvyTvrgLmZOoScHqOQOrsFckuOLYLC5NHGQpaLfCwmguB3BaNCcRy2FBiNWzUOOwAYPEem5dE3AMWorXRLBd-s-WwOC_t82dTi8H2Uf-lpVUZnfrXxZ-tJn3z-W8EcLj7Y8nKfA7Kf41HnhHHQFc0YRLKkMkm7cniNGfOcWqaYb8IXY7NlQhnIMlWChDVo2G_XB0rNUZtPFdiQtqybybxKlKxVQfLlkApizRkTeGkHhk1IAsNp0xC5jxJ_W8PzuF2RRVQ433XPzE29KfgkJRmz4EoiLNanrKNmfz5jnVbo0wHzbPs8x5McDEjyTIy8UJyq5M93TGdRLmKO2nBywMbUlLawe5HA3GwJ_nTdUJqoWVIWnpq--F3Im-FA-ohtpNfzhNzj5ejeo-tr6rNwmB_NMMZvHi2tSu1fwNjPvnDsvYhRjpooVrHxqJIW-VHBpyF0fR6zdUYLx-oe_uHiTy8Kmrh9NCtaxUA6T9WP7i3hp-VpewvPfNxhOxpsX49gqtzAbDfTZlDHROg00gAIir4TembMgoMJPQca7MjtLTDumAjWNVlrU95QDuJgrdc_2y0 "Container diagram for Internet Banking System") @@ -82,6 +139,14 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") * Component diagram * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml` * Additional Macros: `Component`, `ComponentDb` +* Dynamic diagram + * Import: `!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml` + **!!! Update path during pull request !!!** + * Additional Macros: `Interact`, `Interact2`, `GetIndex`, `SetIndex` +* Deployment diagram + * Import: `!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Deployment.puml` + **!!! Update path during pull request !!!** + * Additional Macros: `Node` Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). @@ -98,11 +163,11 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ## Layout Options -C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: +C4-PlantUML also comes with some layout options to make it easy and reusable 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_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) +* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) ## Advanced Samples @@ -116,11 +181,23 @@ Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%2 ![techtribesjs](http://www.plantuml.com/plantuml/png/pLLjRzis4FxkNt78lco04x-uYRCYDUeNk5sn3btihX_Q8g34iyIM8ZMIgkEk_U-ZICKJBGjRaHOT3KWGUVVSSm_lpe-r8SeK6U_ezqpaH94CA6v8mSqQRysKiqHaA0p4ze6gPhLL97_5g4bXsE_NzZDo-nor9Wcks4U4mNdzK65iY4WumbyTi6jbCL6QNOvBAOnt6BeJdH8gjqmai25SO-TpdI0n92BwVY1JfUIsGfXBBXNySE6MsocHchjr_C_7qhgwYcGXA56xoUIENSYXZN6_4U20nWEttEvCAeggRNzbTXo14fqYRMEPez9IU8uDFXNmqgs0HhWx8_7xH9NvLcVzomV3yQn9iJyUpIwMRLnicQ4IXDzy6r8Nb-MlIUfoMlxQIEcTDfXzRIw3mSNbRD7aCfgFb_F-lmhqRKZzx5QxGCt6-zxwX5J-9_A4TnPRSC84ggzDvy7eSh4u_nA9lYiR8tCm4Y9fZBICM2aHawAJCegWzoGw71CK51HBKjFvz0Y2PR_NrWW-TJvTLKDcKfs07nh-oBVw_kYkC08RNs8JP-0Bnk_xQsxu1ZO-M--xbzGUMUQUVsTV0N3owD5KIB7BPA7XfKPr0iT67T50xink2cjs094a2XDYaEun0jVzyJ5VcZ71j56aLFouVs1o1CDWd1h58jHdxpIyNZantfv0y3zdWUA1Bolt211UOGJJFESiTZ7UY5xlIhEF-70mdBn-HZwGBgnonKG2p_-OTs4jCsi8uxFRjrUzqcxIwxsnNZ3bN6urb1HrML4V66uXHvbpx8Ads7MNWi9q0J_Obzru9oFxH1EVmKR934oAm6LCE9IPTO6oX1dxHGI5NzQWBNDfLGexXcZOOdH3yjobLxMLo-uQkKlBGYogxJ33vxlLxx_2-Tbv8w6LZOIwaO9xGuPPX4gdBBSxXB_NXob5X2Qb-HDcdXOHACnbbUWHzWhv3OsQTxDazktlD6IzdAv7m-DyDH8Lfy04nLlKHu9jBAXlcePQlqahXXFAenr89KKY5pCOdWrRnF9tUBrQzQRbDDaWKWq_HbmcODCt-YTtZsQBQ8un4rB_oPiglCmjHrJDoeGnpANGacDPmGUCl9U6N4cNSRUA6rw98rHL9KW117IS8YquKh2gi6Cq2y_73i-0vdhBZ3aO8rvdxsRyUUZakRJw9CoaHHIwpAoSkjKZAayxuSY2qzF9NOV0GujXDTMeGq6VhjSlLlzeUDAfpQvxW0G3x1v0bODpzkrI-LuZeRxmt5rk5IjltSWGpzPrxzbYDk-wGeJHg7_HWbxhZqQ4mD2NQyFcUCzicSAo58sC9Iz9A0F3SNymhhEe2WjENxxuJrcwtltIL8CWpMHVtUaNMeRPjcj-_znjgAfJgc1FqEox69ZOI9MvOghD4aUbjO2Q0NnRrV13t4WM1l8YuYo6M5Bqeu8PgHX-QIpVaBLG-sbJQ2QISbYwHFO3ior07RygZTFNAQCKnTlhq_fKVuo25Xd_6m00 "techtribesjs") -### Message Bus and Microservices +### Container Diagram - Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![messagebus](http://www.plantuml.com/plantuml/png/pPPjRzis4CVV-rCStBVnx3mqoOh4gEqaQukc3v67laY3W18l4X6P94ZAgRVqku-K55aofMx6MY0qOC2yq_z-l3iVzLeReaosI7lwdd5955a0nJkIfMQEtymaPJ5V83SGsIzKDQy7HUGNHaq2UwDHRNz1lbsYrYJ6WFs5iFkoRbGO6SBZ5E7l7jWLM4qKPYNnGd1JFB2NMtH2g7XWF8OxachiVQy34aD2el-Vo4GfyL0gp4Gg5Bmup5U-uvJytRh-zxPZdPo48kEKgDLu_4JNPEWY7da1DZ0EyfNlJeMYgBhs0xDA4IZH2T8kIebA2rumUZoby4M-AWn_TqgY-rYvyvQsqV71tj7KHnmTxKyFBxfOR9kXuYIz_JLGXyVkuqCTJzod2qgljC75psRPtJqydfxvBFkpeulPw5yJz6kWVizNTuByFzvpo4-9ydpIqwnPPCK9uwX-Dix1_l7PsSjjKlGCQBQuBvpH20b6G2YC4VOOpEML2TvB64NG5NalnHWv1SNYnFGUJw6nxE-vTOB7tkD9EPd6fGMAILEOYlbGcPwwgU5JzEKuToYwhDWlUiDxjk5JfAXujgg3DLdoWh-tlXJxfwUpJDj3e_hAltAOG5J-x4DjQ1DTxRS_36_vdL0Buh86rq5ESzE7nktaH7RBRcWNcKYPiiY9M9RXy4JR-hpQtHjVloDBeYF5fDc12O-pbAYRaw4pZuV30ZnDnSEQKhjoBWWdCO99a2cGIjon5FlGR4uBHQJy0LE0QiaYz7bs893AtR9J8Sm6pJn1a89n0-8EI1IXrc3pK-41MwVB9whSRdKHtCSh6nYccMwINP4mPERoyoQG8bnBeKoE4MQQSSU4I-H6jn0i2lrRw-a7lqAdP8_UdfohB5njX9yf90OrS7Veb6ca-Qp8OLIb9ZCbXSOsdigfEoMJZ3BJJZHxCVpjm_by0-gJ4aj6BPLGCU5CvzKOFDWj84whU8EAMCeCQuCgl1f0vG1iTj1PkTba-gX8bBhNhcW3Ap12eTwwLMZe4LHrwa2uN0MVtxT79sMfh8N24fMsqVDUJjDrzrGb91GI4MrRIHfs5j51D5dFbyXBGpjnBKr0Gf6Pihd19CH0GfPelwH4ZhIxb4xAtY5LxWS3QvKINZcsqpyrwYRLc_dyKx3cwVUSy-3gxHzlveEnzpT-af6Kc8uAWyjjt0n2z8f7E_0k-FXXw0NqOWpUdr_C6zW1SgghR8Yc-1SC0n7Te_cnQ7ca-bneg5TdoVB3hQErYTLJGyDIfoXZqLDiS_oVJMTrlZg5LVEdmtzayuIADjXIn8_UPEeuOh_NY5QFx_oQpvJX66yDTvqmIf7VN0qsPj9hovujqdy0 "messagebus") +![Container Diagram - messagebus](http://www.plantuml.com/plantuml/png/pPPjRzis4CVV-rCStBVnx3mqoOh4gEqaQukc3v67laY3W18l4X6P94ZAgRVqku-K55aofMx6MY0qOC2yq_z-l3iVzLeReaosI7lwdd5955a0nJkIfMQEtymaPJ5V83SGsIzKDQy7HUGNHaq2UwDHRNz1lbsYrYJ6WFs5iFkoRbGO6SBZ5E7l7jWLM4qKPYNnGd1JFB2NMtH2g7XWF8OxachiVQy34aD2el-Vo4GfyL0gp4Gg5Bmup5U-uvJytRh-zxPZdPo48kEKgDLu_4JNPEWY7da1DZ0EyfNlJeMYgBhs0xDA4IZH2T8kIebA2rumUZoby4M-AWn_TqgY-rYvyvQsqV71tj7KHnmTxKyFBxfOR9kXuYIz_JLGXyVkuqCTJzod2qgljC75psRPtJqydfxvBFkpeulPw5yJz6kWVizNTuByFzvpo4-9ydpIqwnPPCK9uwX-Dix1_l7PsSjjKlGCQBQuBvpH20b6G2YC4VOOpEML2TvB64NG5NalnHWv1SNYnFGUJw6nxE-vTOB7tkD9EPd6fGMAILEOYlbGcPwwgU5JzEKuToYwhDWlUiDxjk5JfAXujgg3DLdoWh-tlXJxfwUpJDj3e_hAltAOG5J-x4DjQ1DTxRS_36_vdL0Buh86rq5ESzE7nktaH7RBRcWNcKYPiiY9M9RXy4JR-hpQtHjVloDBeYF5fDc12O-pbAYRaw4pZuV30ZnDnSEQKhjoBWWdCO99a2cGIjon5FlGR4uBHQJy0LE0QiaYz7bs893AtR9J8Sm6pJn1a89n0-8EI1IXrc3pK-41MwVB9whSRdKHtCSh6nYccMwINP4mPERoyoQG8bnBeKoE4MQQSSU4I-H6jn0i2lrRw-a7lqAdP8_UdfohB5njX9yf90OrS7Veb6ca-Qp8OLIb9ZCbXSOsdigfEoMJZ3BJJZHxCVpjm_by0-gJ4aj6BPLGCU5CvzKOFDWj84whU8EAMCeCQuCgl1f0vG1iTj1PkTba-gX8bBhNhcW3Ap12eTwwLMZe4LHrwa2uN0MVtxT79sMfh8N24fMsqVDUJjDrzrGb91GI4MrRIHfs5j51D5dFbyXBGpjnBKr0Gf6Pihd19CH0GfPelwH4ZhIxb4xAtY5LxWS3QvKINZcsqpyrwYRLc_dyKx3cwVUSy-3gxHzlveEnzpT-af6Kc8uAWyjjt0n2z8f7E_0k-FXXw0NqOWpUdr_C6zW1SgghR8Yc-1SC0n7Te_cnQ7ca-bneg5TdoVB3hQErYTLJGyDIfoXZqLDiS_oVJMTrlZg5LVEdmtzayuIADjXIn8_UPEeuOh_NY5QFx_oQpvJX66yDTvqmIf7VN0qsPj9hovujqdy0 "Container Diagram - messagebus") + +### Dynamic Diagram - Message Bus and Microservices + +Source: [C4_Dynamic Diagram Sample - message bus.puml](samples/C4_Dynamic%20Diagram%20Sample%20-%20message%20bus.puml) + +![Dynamic diagram - messagebus](http://www.plantuml.com/plantuml/png/nLdlR-Eu4VtklsBYCv0ObpYNeFsImmANnC7jNhr9pZzmw2U3biOsKObaIIfUj-Z_tg5eCOgTRIa7PmTOBpMQUM_U6ygGmL-CPTeMUTOwuIB9YXGBdS7IMcLkBYyrM_KMt2wBMM5G9r9O5BQNoFnoo1EcK_d8KM5sUV-NY-UC2JlvEhZCcR6eAJIzbxcImbKeHt0AXQ3Id09WbmXpcMLonSK2CYuGc4ZXpMsk3Qqa43LaCc5PjYQCgatO9Q2xeqGgl84lrAXcYULI6E22i05TI6bky1oCdDiLqmXcJRtc83KuROpQq3r2UTOyPtfTjcGAfQIshatCq7LdRg1FgaLgG8gorPIpXMOv6CSE5q0GxYzGkfX2gJAlSelUWCQCMKoTM8Ahrt7XGIl8hLB2DHWkolbyis_aLBsPymeYtDeK9vM9LQfpm1aeKcg95Ib7aP2dOqoMWjCOIWr2YWiR8bxSERLhUEf5oiAMQpalDON6Ktp1J2e_PdHiHDTV2vRp91Z9XTKoBH8qSCOAAtDcURa1kY2AV8QQEkEr6TzKugh1dtLle32K5Qg1wfF2-yn9shVpxPfhAlAtA5V0306_gOmdd9p1EJcMdcygHcY_k3nNOD1lLq7ERm7_MajR-3IVKHhqHXV54utCR1AS9sKf_V_3__rhjKxcXIYTW0u1JSywBomhQ1uTOr5zkkgs04uqsa8ByBVWHt-lTK9Zhee9frFIVxggGmQr7O6hQPdW0AlSr-WsM408HdISw6cbTTDOHsOfV08FLmVsKZQUlYsjAtBrMzIdOQXn1fxu0TUs0axdMkRdW5ChtMV6PfYvXTSFGyosSjgRUpTLThlR1BTyc1eIXBfkQvTgUiUIVyJe28dnOg8OWg8OgdXPZyWNovdKKT92ShoyUAOWiHbb_FIQQTsks6-UyQeRaiTBxqV9xUybiTzCLZzUohjiSYNYn51Yl9veXY0fXYf-G9CeJPEz14sQgPbyR40J5IT5xQT5DHIZFZYOGPIQmLvY1isq33usc07ERPmOIepN4yqG9CLGnGze6ALfk9UWOJCrmuyDQCWNoxW9XSp6Ya9blAfG4Z-aGlopa1PJ2E-huLT4fmBgUAJE1g0BhVhlXlOchqrSPQPV1BAER_0xxxRTDo-lU_NZ0qvGiyv2MSCU_rUJ_XqlpZcVUoZxF5jJ3ttLCOmChrEHPeRyGnaQ61kR6YgFjaCRk-kA3cPnHA_nc_UuPlTZ3UuVpjH-SoFx7p1l_pxbIaJRHxa7T93Ocflegewo2IUnBauEP-6akN-JOsp2YOesJntGFRM7VUeecsyGwz_WSFODchitECRcSx-veksZt0CwI6pDJNHLHzc4mrWNXuUpSDZSl-4nDg7_KHdhdqi-e8UEhhcFhkpFsuY3sxy_JSRJyTFpjF_qnsFh53QHsz5qzBU7yVtdiswLzCUNyUVfuE7NXyS-1LlFg8qKPqbXhCnHdyDzMBLleGgtkwrHUUWvlPE5I9bUdoLNb54bazAvr3bpxRIxy6_g6-2-ElayOqhLas-LE-VpoHJ_ZRqmasYkx3dSYaMHCUt2j-wuseGM35W9EHDiWM2No3KeBUSymtPtYwsgc1hKBpp1ElN8XohQSnWfxSwQxwIqBZXU8YZ9XGKv1vOaQ0oGij05y9hGRUASigczwQmm1FNLNy5TOHpoaCrct7xzlMJHJ1WbjIsnAPqBHuGlAApPWTMuEH6l2HfMiRgYOJ5RjvrQZSoY0U4wpRZ1559cMKaMm40LMac3ktpk3DhMk6xTTPtd_eVBtkF3s2sVjNpXAN59lM22czAOYnM5mC6KH7EMy8oMkrJzsUkmqbbzJdtgTyPCIVUaMP8XN5qdxcfafKOJDH223t8TVjssEi7NzUZtGGsRLSxzYvnxGMq8kzmFMHQ6zUeeIs4famR6Ef9WQqdfk1ze-E4oj59J1smc2xlP962NpCAIlI1zA8K2KwBx3nt56fuhSalg53Mik5s-dirMYzhJxf_CYKhB3RFafdggmEbSk4u-ZyVF8m8FrMNDzaCMKDuVpIlSRwEdnyiTp5susiO8TdZJkIXn-dVtX4225IPypfFt95___7eO_bEtrqkMJ2pSrhGIohFjt9dkZ-WfzDFFqExrUlJFimDtbU1LjBQ_pNTxVli5C4AHrjmeIdl2_AGJmSnQ96vHw_BYYcITXW1rNMlrnwjQ6nErqqCrKTfqSwxpYlHxRDsBQ-TXW7px5RRxnREdg59JZUKTu11wVzxRMArJy7DVkwSLLtvIhL6LzTVkzqJvX_33WgxV2De2hJteGKi5MLSJ1l0BDL7asNy1 "Dynamic diagram - messagebus") + +### Deployment Diagram + +Source: [C4_Deployment Diagram Sample - bigbankplc.puml](samples/C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Deployment diagram for Internet Banking System - Live](http://www.plantuml.com/plantuml/png/pLTjKniv4lxkNz7nVjYGCY_OZi4vGXqOah05c6ASoxtSrPH6wh5LQ4PJaWR2tkQ_NsiqiyE4f80iLxLJjHkvkzNzT3-jbdWXSwvAWQLHi7Aki6ysDmsxsLXAjogJqgBXEdUOkmskiyrBoPaH-bnYWMfpDbw_K2nt7yzEDpDc7HeInJET5JhtEueoKxsVeSnfQqO2S2k4L2kbRsI-12Lp19OBwAYbiRJIGA51QSwKkYKV3Kou7u2q4TS5le43iEHN8LYTkXjcQ75BgB8DChamCcFc5b2XZsNVm14MIjzMWNCjqDPGSiS8bx5mGnMGEO6wvmz8R7r8x_Z4LqUW05OAYJad70lagrmIT2XG5mh9taeHSjMbgzOwxNeMU8rA5w4EoBA_GCYO4cgDcE4hwP0xEsWse0d0_OevgNExQSkYqCQ1TInDDtnzPbffOsdnquDVxuN0r1DpFZywZj_DpnVnR7uwlmJwVXfNNzVay7rhG2RlggyYnTqgGl-ug3rx9VE26PQ1eVoOft5lp_Eolm__xG54AoP2swHCMVGIXmQrkotm7P4MoLyHjaZiVrJvVfq1wGuPlreQNUQYjQ04Mhqs0atGDSb-yRcSibiYxf6frELHci2U7lnZ_d4HVpfPV8XFZzyVdn_rLfv--pludi8b4e56BbUkzzjR-CP7qWMPtXFtVjlhfB1Voq5qUxirdr4v3axEZo_RFHtpzW2GES4Au7elw7zjLhuYv-JsSHr5HisK0A7H4Y87JO-oqkcCESd3D4WCiYiBEcrn342cWB7pPmgaXMkaK-nH-5E5ndKs-ZCB5B2_jscf8VR_dU_vVzyiZcSVpaClH2V_FDxljprCURp4c2d9x83YA9QW6ZG1rzfkXFxRjxNwUrx_LU_wJnsz3x-tCBDG1-drd7GAgxbXSdJKbFcLx-iep9RrEuEfrxlVFo_NUhqAT6iMnwVo6kFuK2wziqBnE1wbkzjfCXn0dwHL321v_wlV89XZmD5ZwQzL1-qHlXEvJ6XzWychLw_YU3XAjv1nSbqhreC6NduUh_c87vCoToLiJpQsnd2wYEf8FnBhe61yXGkTSKRcR3pU6LE088KWxdyjWDsDpqr8-cPDPxriAAWP20J4yITC3ef2ILxDqo4bE9wEX9YINrB17PqFzGkxPjK4ZWhZQJpxsyoBZr1HBiQ6AU-g5gzlKc_jnMqB9050StqLR8d0sZ0R_RKA-vSU_VSaYbWX0qLZvAydh-zGH9f0qUxpKDJ6wb8qsfsce-dqsKawk3ZfahITx8p44CalgHv9qeNHrrAWlSz4MkRSRsPAkbkubhGRVedcvviV5ekB22Z4ZvCYagrjmilvD7rzbn8lVoOkGeYvOLnX_VAX9jXDTwRfX2841Qn3hUktikqX_nODHydtY3XYZYNCegSW7GvtKdyW6w5tV8cAXL928uQ8YC-OrqPE6xJW7vfWS2cjCvKro3pL9glM0rWnkwgUM6v5YTV40ZSe_4-cx00OvsWjABsa7-Zu7-B77tfa-7eowV8pV3v-XWq_4NATYy3GM6oF1DvbA6YVYQCHdSVXTCBPvC_8qPVltMkpqZgTeVdPSfqL9QL8fUAZIOA2qBLQQDGUz9daHlkNCtoIkT0t5hIfnWB20u-3ZF5vG-eJ4D7TS6WeZbzlxuwsTjAT-iQenHxLUwtzX9-j36qVm9d-LIh57aBqJXfCzUT1ZJzYAJEIydbeNrk3Ox74aD9ZXcj4QneSR8bVNOH3pYV3XF885klUv5kpDk965k6YEyYNfMAcCswPKlKVG0zDNgU1rxMsVWpxFTB03IQGXAfI3pssUpATI8K2hoL7VpEnhPsjfDj1mGI2ZSSSAYxdKTK-kJ1QYb38XyjuLZaZ3txS9ybqUyh9Ov02YRt_lxECkCoxvG4bC-bGW2qJY-uFrQgR4bMBAaN7_UdtwbFc_oKoOI6b9gzwuCPGDfO0LlrnT3WZ5C-FeJlVdexXOUwU_XOvOrSKb0o0CwMQyErB8e3uuNFu_m8KVooU_Zh-iIGwRsLTzJblp-ETWruZEyNKFSSZw7dkwKiCAQ4DVqevJJ3_YhaeC_K_ "Deployment diagram for Internet Banking System - Live") ## Background diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f0..5fc473c4 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -8,7 +8,7 @@ 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](http://www.plantuml.com/plantuml/png/VLBBZjf04BpxApfSmaeiN7BAQNS9IbO2WXPGb9FL30sCc0UQRWVu-xIDJN12zZRJKrLTLVOJ2oOflCi-s61SiQOYETY97FZpO93msDzQsHMhWYcP68I2z4tqWpThCAtZrDA1t63uwN7cCCXoCXvuPA6aetnOua_IFvJo7w48IlGg0B8Zs4Jduj66BJWR232ieVLi4-ifWYu65mqwTrQDnYJyBP-Ddtz-Noxo7w-BR_buz7Kq_T9zo3AnuWZcPnRoK1DWRN6RqAk51AywIe44NZ3irKsDpR8P9OwXQmgMw2dre7EPeBj2X_LRHn-VeK52t5G9LehgmL7RWqF3B6U0niGY2FSx3zbbMtTrKSovkghSVsnLcyhU-BgEov9-MJg23Hh8ezWO05Ung8gqgRsqLpNjSKzmmBEdsaTj91-TfElHkZzEHe_b7VYwVw7PR6KF7KoiIP7ZHc1qCZiCMmAw9PJQRUcmqUf9TIRD-Kx6kSH43EXSqwRH0TGrtKbwRQDtarGI1aPJmlH6OggaR-Hklke_pI-PM66Aob_Gx6-WxLxc5DPSXsMGM7EcPBUxLKpTjl2xx2hnP36xIDnZDgKrxfwKNlxrlm40 "System Context diagram for Internet Banking System") ### Container Diagram @@ -31,3 +31,14 @@ Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Dia ![System Landscape diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/jPPTRzis58Rl_IiEijjuTj8koGh7g9sFhS2o5hE3N2H1S28UIuGbKYFfEkxI_pwIfZGgiZ8KQEahyNoSvxnw8-IzDgZCgiXxUib5YGeBOBJ0LMxcz6GcEKz5GS90GiAGYhBM2iiRpam6XyDXT5_WqnLfZIdD-1U2Wr_YeAB4e4XpWdzwOC_Ca29fDYLTIc6s1OS-eZDaSir52WlCDVM-HbqcIibrw70cSwdWfoD__8thrBwD-t_THJGQFSgLOAWsut55rsJe8Xws1hp0UEkFlvrAnKXrtS_C9YTWg3DY3SeIaoMcRSPEdc-OtoL7IKfBqJ4eTBZqnyTttqujUAeST8WDJzuU7a_RBCFZDzEZoouMQqLI0lE77mDrTE9-RQYJYVjrGUcDDbHyRvQ3WwEJwNcRvStPyUNPy7y5-Z5Gl_hpYa0PPmIw7jRBAIN1GF4qCxtdKsWS-potIV3SUnu5Gun31BOls8V2Qwb3rOvnJf1hx1Esk_lxGDokhNCitXQoPxZ92MRRm1yec4xGqZ6EgLDv8HLCUMf54KieywHNomvxfwUVF0lcFkm-5MShRMH1waxS2PX04Xv1Bi1a18ysRH_Mt6HGXb9_1vWaLd2ZVzw3w6yFTTsXEJScWjiBOKYLYckwtuFuA-4R38CP6Wq-k191fW8F0conyrok_vkimKZup6aDN5Wr2ZHS2a0xnRYTk6fki0ye61Iu92XnKr2rL6rDrBx03WrsRTDDvbTT95uyfd0D2UhCTswx7pMWsT7tebyWhrpW9ymp0Yw2EwvuegIM2mCNJqbcgmWehkYUvf8wjxb2Avp2WdQ9FJDIaGRCyyeZYRse5DeXUIt6VYIvKIWq9YxDFf59NaCDD6tGohmm8_MP9sJXSB7mc7L8Xv1s8VyokAYjtPowoyOFeRuzt7rruEDYqPmxOGKNN1iL910CzAeifJBVIl1e-pz8tzz-iIeUw8zVk17UEPhJQqrwBqhxwyDllyzjCfeguoOOKNidmahR7b75gD-FRH6APYIO3gvoTjunegLLA9tefOQ_LwIT4gxsJWm68ys_qBk3m_7jd78gCodeVZHmb-F1OA_tOhN--SURF-s4rxcgLTogDLHjcqYVTl_NirkB1PwEzEYDGV_wKqTUuBpDE6Caxi_xq8HgXUilQgn2dN0T9RmdmTm_n_y2 "System Landscape diagram for Internet Banking System") +### Dynamic Diagram + +Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Dynamic diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/nLdXRzks4_tkl-AIdu76lpd9adPj5o1OaxXeCxXfOCSTzacWfRDDb28raegR3VlVTvH4ntBNJRGpEnzQchntzzwxio23RunbskQfQErn6OiymLmBc5cRcRFZOytcHrDkP_auDwXZ9IrAUnIhz7Z0OwOJTSCnGt5yzUBmLZ1fHn_wnoap5ZLjHLSgpPHqYCmLU0Qv96XA6s1d21CbX9fpEGN19GAJ2TIEkJQqKa2bGQYO2V50EJnD-Be0dGvZbU4PN1DHpMBBbJJ09UK6T5kPvWQxODJ4pfb6C0_4DGMbmMbZH4CVKPPRpLEc7mfA9iyofQsZYG8TEtC6FL8j4mDA5bGJpgQQfM1STJW4Ia5_IoLfBqELYLBbIda36WMpc91ObsuPnsMPrATSWL9UWuiFJWD-iJKvdflf-XIBemeSUnDzg7F06IWJeiJoXAECoTCxZ6UIkYuA3LB9G-jtAd5TecjuKefKkItMQk8qFH9Fy1w5oiesewj6vNeFagKyNXZ9fTKgoMCqSC1ogr9cUJ407P1vEaPDpFXIZy-yED_uWywPcvi45cWWV9oNFdEIzgMxYZabK7b4iHB62FWb4ppcv0nEoB6aMo66QAzTd0COBCTLEkVhYTyjXKshi3A_CwYcY_PZZSnK0SwJ0ah__-zV_rgjlKak2oUWJOcYW_Oz4pdresqiPkSddHR0daQRQmdb4NnNdhNsK2OUJ7dQHVdpa-MK2xLjYVEe2709VUpZxceoltmqekr4HrvhHQojH0BdKAPRJbnAgJojGskA2BzI-jcYgSqCt2iRl3GA64sqIhk0aLNkNy76ADoYr0y352in-zNPcO_UxuJaBRvCWGKMk4xhwrBH9Oi_Dz7X0uF5bC0GHHwnYQmRvDFPMEb6qkh1WV8yE4pY0hLvzyAqrX1hzpD8TK3n0EczHd9xQqdiXSdg1KZvksfgBfk9yO71UWWOA8aG6pPer4ZJQ2r1ep0reyqQDCgQISdMqv85YiasR4o_aPh-McBwOLhwcpMcZnFRJ8mF3DP3m419XDYmGOD6cWPh2Hg4gHbirg01dywQTSX7XYloo11L10biKYv_ovN511Rlgvx1GTidQfUPsbM23hIMVpViLt6KrosjgXQ-MBia-8rtsqxzvNKTFhJoWiAOULWWntyYMRxZDNEkZDsAVPvPi8SbQXT6-jUffcRw-EqPwYk6c-gHEvlGO7VheAtEx0O-E_XkpUurDRYtFLDxuKRsmirx0fvgBXlRHx5RTD1L2pUHK3iPmb5J5qVRit0Kxjze5qCuoXgRbstHlMmD-xAT35-_gN_zxTdN3tUllulXSx-v6jj7iLjqq5KBDv5GEnd2GLCN1zkpS13kts07GrZ-g6pidmlUbeUUMxYF3lPVUUakOgtEOvjh_hi-gcxtFd6Sdy6GJ-MrR5bk1SB5xJLSPEwIZHMg3g6ARRNw5xz-7Dr5lrpVlO_wRz-zlUaTT5gjAtzvsHiV568asaicFtCv7HQNe57KOvQDcS4eEi449ozZakJtdBm1Yg8O4-2tOHZFC6NkT6YLHWEvGGqQfznONLBZSg9qMgoxC6DcLbukpb1QppxMcBYFJ9Wki3X6Oq2eANr06n_jTnxPVulxaDO2RzaKbro9ejFdavUlJvyJlJBWq4Ki6-UO_ypksJ3MFBF5zUA5dEQ2QNTogzKzJqWL4yBVnte2C2uPB2QB2MuVm2g8SsDLYjh0FMSEmpNCSGnZhURaJarFTAbocJ3zy2rXrEYQekSdavF9wGz4ZavgIZhmHmjWSRFVDE4GurmJymMGslzz_EEhLwTKmny-fYrQdMad_1APhBbKSsBvRjxGw3e4fmc8PqnEtOUC6JDNEbbqUHtsvPV2sQcL4AY9_8Izc9oyTZJfZDe5ZwTBv3zyke816hjoUY64cfTJR3npeatBUlChMb3oSkJ_RDMVBEjEwbC8pySfjsRvQqK2Yb4VVhmvVdztTpianfxl4tZz5BDsnGJnvERYyTc0oK47t6Wtz3QaNi13qA30sCB_mJtngzcOpr1ZiPOiHJY7dmf_UvTNnFODoYHFnLy0 "Dynamic diagram for Internet Banking System - API Application") + +### Deployment Diagram + +Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Deployment diagram for Internet Banking System - Live](http://www.plantuml.com/plantuml/png/pLTjKniv4lxkNz7nVjYGCY_OZi4vGXqOah05c6ASoxtSrPH6wh5LQ4PJaWR2tkQ_NsiqiyE4f80iLxLJjHkvkzNzT3-jbdWXSwvAWQLHi7Aki6ysDmsxsLXAjogJqgBXEdUOkmskiyrBoPaH-bnYWMfpDbw_K2nt7yzEDpDc7HeInJET5JhtEueoKxsVeSnfQqO2S2k4L2kbRsI-12Lp19OBwAYbiRJIGA51QSwKkYKV3Kou7u2q4TS5le43iEHN8LYTkXjcQ75BgB8DChamCcFc5b2XZsNVm14MIjzMWNCjqDPGSiS8bx5mGnMGEO6wvmz8R7r8x_Z4LqUW05OAYJad70lagrmIT2XG5mh9taeHSjMbgzOwxNeMU8rA5w4EoBA_GCYO4cgDcE4hwP0xEsWse0d0_OevgNExQSkYqCQ1TInDDtnzPbffOsdnquDVxuN0r1DpFZywZj_DpnVnR7uwlmJwVXfNNzVay7rhG2RlggyYnTqgGl-ug3rx9VE26PQ1eVoOft5lp_Eolm__xG54AoP2swHCMVGIXmQrkotm7P4MoLyHjaZiVrJvVfq1wGuPlreQNUQYjQ04Mhqs0atGDSb-yRcSibiYxf6frELHci2U7lnZ_d4HVpfPV8XFZzyVdn_rLfv--pludi8b4e56BbUkzzjR-CP7qWMPtXFtVjlhfB1Voq5qUxirdr4v3axEZo_RFHtpzW2GES4Au7elw7zjLhuYv-JsSHr5HisK0A7H4Y87JO-oqkcCESd3D4WCiYiBEcrn342cWB7pPmgaXMkaK-nH-5E5ndKs-ZCB5B2_jscf8VR_dU_vVzyiZcSVpaClH2V_FDxljprCURp4c2d9x83YA9QW6ZG1rzfkXFxRjxNwUrx_LU_wJnsz3x-tCBDG1-drd7GAgxbXSdJKbFcLx-iep9RrEuEfrxlVFo_NUhqAT6iMnwVo6kFuK2wziqBnE1wbkzjfCXn0dwHL321v_wlV89XZmD5ZwQzL1-qHlXEvJ6XzWychLw_YU3XAjv1nSbqhreC6NduUh_c87vCoToLiJpQsnd2wYEf8FnBhe61yXGkTSKRcR3pU6LE088KWxdyjWDsDpqr8-cPDPxriAAWP20J4yITC3ef2ILxDqo4bE9wEX9YINrB17PqFzGkxPjK4ZWhZQJpxsyoBZr1HBiQ6AU-g5gzlKc_jnMqB9050StqLR8d0sZ0R_RKA-vSU_VSaYbWX0qLZvAydh-zGH9f0qUxpKDJ6wb8qsfsce-dqsKawk3ZfahITx8p44CalgHv9qeNHrrAWlSz4MkRSRsPAkbkubhGRVedcvviV5ekB22Z4ZvCYagrjmilvD7rzbn8lVoOkGeYvOLnX_VAX9jXDTwRfX2841Qn3hUktikqX_nODHydtY3XYZYNCegSW7GvtKdyW6w5tV8cAXL928uQ8YC-OrqPE6xJW7vfWS2cjCvKro3pL9glM0rWnkwgUM6v5YTV40ZSe_4-cx00OvsWjABsa7-Zu7-B77tfa-7eowV8pV3v-XWq_4NATYy3GM6oF1DvbA6YVYQCHdSVXTCBPvC_8qPVltMkpqZgTeVdPSfqL9QL8fUAZIOA2qBLQQDGUz9daHlkNCtoIkT0t5hIfnWB20u-3ZF5vG-eJ4D7TS6WeZbzlxuwsTjAT-iQenHxLUwtzX9-j36qVm9d-LIh57aBqJXfCzUT1ZJzYAJEIydbeNrk3Ox74aD9ZXcj4QneSR8bVNOH3pYV3XF885klUv5kpDk965k6YEyYNfMAcCswPKlKVG0zDNgU1rxMsVWpxFTB03IQGXAfI3pssUpATI8K2hoL7VpEnhPsjfDj1mGI2ZSSSAYxdKTK-kJ1QYb38XyjuLZaZ3txS9ybqUyh9Ov02YRt_lxECkCoxvG4bC-bGW2qJY-uFrQgR4bMBAaN7_UdtwbFc_oKoOI6b9gzwuCPGDfO0LlrnT3WZ5C-FeJlVdexXOUwU_XOvOrSKb0o0CwMQyErB8e3uuNFu_m8KVooU_Zh-iIGwRsLTzJblp-ETWruZEyNKFSSZw7dkwKiCAQ4DVqevJJ3_YhaeC_K_ "Deployment diagram for Internet Banking System - Live") \ No newline at end of file diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 491a725a..4770af7b 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -3,7 +3,7 @@ ' 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 56dccd9c..0acd507c 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -4,8 +4,8 @@ ' !include C4_Container.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'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 d8485ff7..eef0dfdb 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -7,8 +7,8 @@ skinparam wrapWidth 200 skinparam maxMessageSize 200 LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'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 dbd05697..aca31e1b 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -4,8 +4,8 @@ ' !include C4_Container.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'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 a4b3f4b7..7ca5bbeb 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -4,8 +4,8 @@ ' !include C4_Context.puml 'LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'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 70778cd2..06469b1c 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -3,7 +3,7 @@ ' 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 c58f636d..0b8e3296 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -4,8 +4,8 @@ ' !include C4_Context.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, "Customer", "A customer of Widgets Limited.") diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..aedb7729 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,50 @@ +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Deployment.puml +' uncomment the following line and comment the first to use locally +' !include C4_Deployment + +' PlantUML does not support automatic line breaks of nodes, if e_techn is very long insert line breaks with +' "\n" +' samples see below + +title Internet Banking System - Deployment + +LAYOUT_WITH_LEGEND() + +Node(Deployment__Live__BigBankplc__3f81fb2, "Big Bank plc", "Big Bank plc data center") { + Node(Deployment__Live__BigBankplc__bigbankweb***__23f0eac, "bigbank-web*** (x4)", "Ubuntu 16.04 LTS") { + Node(Deployment__Live__BigBankplc__bigbankweb***__ApacheTomcat__a4474, "Apache Tomcat", "Apache Tomcat 8.x") { + Container(InternetBankingSystem__WebApplication2__2493dd9, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application.") + } + } + Node(Deployment__Live__BigBankplc__bigbankapi***__24ec565, "bigbank-api*** (x8)", "Ubuntu 16.04 LTS") { + Node(Deployment__Live__BigBankplc__bigbankapi***__ApacheTomcat__389f399, "Apache Tomcat", "Apache Tomcat 8.x") { + Container(InternetBankingSystem__APIApplication2__1b73d2e, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API.") + } + } + Node(Deployment__Live__BigBankplc__bigbankdb01__1cc9f55, "bigbank-db01", "Ubuntu 16.04 LTS") { + Node(Deployment__Live__BigBankplc__bigbankdb01__OraclePrimary__28f79f6, "Oracle - Primary", "Oracle 12c") { + ContainerDb(InternetBankingSystem__Database2__1f227f4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Node(Deployment__Live__BigBankplc__bigbankdb02__2eae566, "bigbank-db02", "Ubuntu 16.04 LTS") { + Node(Deployment__Live__BigBankplc__bigbankdb02__OracleSecondary__24d13de, "Oracle - Secondary", "Oracle 12c") { + ContainerDb(InternetBankingSystem__Database3__3296ca6, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } +} +Node(Deployment__Live__Customer'scomputer__2c36bed, "Customer's computer", "Microsoft Windows or Apple \nmacOS") { + Node(Deployment__Live__Customer'scomputer__WebBrowser__18307f7, "Web Browser", "Google Chrome, Mozilla \nFirefox, Apple Safari or \nMicrosoft Edge") { + Container(InternetBankingSystem__SinglePageApplication2__22cc62b, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") + } +} +Node(Deployment__Live__Customer'smobiledevice__38a070b, "Customer's mobile device", "Apple iOS or Android") { + Container(InternetBankingSystem__MobileApp1__1bb919c, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.") +} +Rel(InternetBankingSystem__APIApplication2__1b73d2e, InternetBankingSystem__Database2__1f227f4, "Reads from and writes to", "JDBC") +Rel(InternetBankingSystem__APIApplication2__1b73d2e, InternetBankingSystem__Database3__3296ca6, "Reads from and writes to", "JDBC") +Rel(InternetBankingSystem__MobileApp1__1bb919c, InternetBankingSystem__APIApplication2__1b73d2e, "Makes API calls to", "JSON/HTTPS") +Rel(InternetBankingSystem__SinglePageApplication2__22cc62b, InternetBankingSystem__APIApplication2__1b73d2e, "Makes API calls to", "JSON/HTTPS") +Rel_Up(InternetBankingSystem__WebApplication2__2493dd9, InternetBankingSystem__SinglePageApplication2__22cc62b, "Delivers to the customer's web browser") +Rel_Left(Deployment__Live__BigBankplc__bigbankdb01__OraclePrimary__28f79f6, Deployment__Live__BigBankplc__bigbankdb02__OracleSecondary__24d13de, "Replicates data to") +@enduml \ No newline at end of file diff --git a/samples/C4_Dynamic Diagram Sample - bigbankplc.puml b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..6af80ae0 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -0,0 +1,20 @@ +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml +' uncomment the following line and comment the first to use locally +' !include C4_Dynamic + +' Structurizr.DynamicView: SignIn +title API Application - Dynamic + +LAYOUT_WITH_LEGEND() + +ContainerDb(InternetBankingSystem__Database__1edef6c, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") +Container(InternetBankingSystem__SinglePageApplication__23f6823, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.") +Container_Boundary(InternetBankingSystem__APIApplication__31f1f25, "API Application") { + Component(InternetBankingSystem__APIApplication__SecurityComponent__10c9772, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.") + Component(InternetBankingSystem__APIApplication__SignInController__1fa4f18, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.") +} +Interact_Right(InternetBankingSystem__SinglePageApplication__23f6823, InternetBankingSystem__APIApplication__SignInController__1fa4f18, "Submits credentials to", "JSON/HTTPS") +Interact(InternetBankingSystem__APIApplication__SignInController__1fa4f18, InternetBankingSystem__APIApplication__SecurityComponent__10c9772, "Calls isAuthenticated() on") +Interact_Right(InternetBankingSystem__APIApplication__SecurityComponent__10c9772, InternetBankingSystem__Database__1edef6c, "select * from users where username = ?", "JDBC") +@enduml \ No newline at end of file diff --git a/samples/C4_Dynamic Diagram Sample - message bus.puml b/samples/C4_Dynamic Diagram Sample - message bus.puml new file mode 100644 index 00000000..2f082f48 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - message bus.puml @@ -0,0 +1,39 @@ +@startuml +!includeurl https://raw.githubusercontent.com/kirchsth/C4-PlantUML/master/C4_Dynamic.puml +' uncomment the following line and comment the first to use locally +' !include C4_Dynamic + +LAYOUT_TOP_DOWN +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +Person(customer, Customer, "A customer") +System_Boundary(c1, "Customer Information") { + Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile") + Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information") + Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events") + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes") + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities") + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information") + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes") + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened") +} + +'simple order with Interact +Interact(customer, app, "Updates his profile using", "HTTPS") +Interact(app, customer_service, "Updates customer information using", "JSON/HTTPS") +Interact(customer_service, customer_db, "Stores data in", "JDBC") + +'specific order with Interact2; GetIndex(0)..change auto increment value to 0; "..."..custom index format +Interact2_Right("GetIndex(0)-1", customer_service, message_bus, "Sends customer update events to", "async") +'GetIndex().. increment +1 +Interact2_Up("GetIndex()-2", customer_service, app, "Confirm update to", "async") + +Interact2("GetIndex()-1", message_bus, reporting_service, "Sends customer update events to", "async") +Interact2("GetIndex()-1", reporting_service, reporting_db, "Stores data in") + +' specify a new index +SetIndex(5) +Interact2("GetIndex()-2", message_bus, audit_service, "Sends customer update events to", "async") +Interact2("GetIndex()-2", audit_service, audit_store, "Stores events in") +@enduml \ No newline at end of file