diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index 0800b8bd..e062414d 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -1,84 +1,116 @@ { + "C4_Include_Context": { + "scope": "plantuml", + "prefix": "Include C4 Context Diagram", + "body": [ + "!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml" + ], + "description": "Include C4 Context Diagram" + }, + "C4_Include_Container": { + "scope": "plantuml", + "prefix": "Include C4 Container Diagram", + "body": [ + "!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml" + ], + "description": "Include C4 Container Diagram" + }, + "C4_Include_Component": { + "scope": "plantuml", + "prefix": "Include C4 Component Diagram", + "body": [ + "!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Component.puml" + ], + "description": "Include C4 Component Diagram" + }, + "C4_Include_Deployment": { + "scope": "plantuml", + "prefix": "Include C4 Deployment Diagram", + "body": [ + "!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Deployment.puml" + ], + "description": "Include C4 Deployment Diagram" + }, + "C4_Include_Dynamic": { + "scope": "plantuml", + "prefix": "Include C4 Dynamic Diagram", + "body": [ + "!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Dynamic.puml" + ], + "description": "Include C4 Dynamic Diagram" + }, "C4_Person": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Person", "body": [ - "Person(${1:alias}, \"${2:label}\")", - "$0" + "Person(${1:alias}, \"${2:label}\")" ], "description": "Add Person to C4 diagram" }, "C4_Person_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Person with Description", "body": [ - "Person(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "Person(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add Person with Description to C4 diagram" }, "C4_Person_Ext": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External Person", "Person (External)" ], "body": [ - "Person_Ext(${1:alias}, \"${2:label}\")", - "$0" + "Person_Ext(${1:alias}, \"${2:label}\")" ], "description": "Add External Person to C4 diagram" }, "C4_Person_Ext_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External Person with Description", "Person (External) with Description" ], "body": [ - "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add External Person with Description to C4 diagram" }, "C4_Container": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Container", "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Container to C4 diagram" }, "C4_Container_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Container with Description", "body": [ - "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Container with Description to C4 diagram" }, "C4_ContainerDb": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Database Container", "body": [ - "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Database Container to C4 diagram" }, "C4_ContainerDb_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Database Container with Description", "body": [ - "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Database Container with Description to C4 diagram" }, "C4_Container_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Container Boundary", "Boundary for Container" @@ -91,85 +123,77 @@ "description": "Add a Container Boundary to C4 diagram" }, "C4_Component": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Component", "body": [ - "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Component to C4 diagram" }, "C4_Component_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Component with Description", "body": [ - "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Component with Description to C4 diagram" }, "C4_ComponentDb": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Database Component", "body": [ - "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\")", - "$0" + "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\")" ], "description": "Add Database Component to C4 diagram" }, "C4_ComponentDb_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Database Component with Description", "body": [ - "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")", - "$0" + "ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")" ], "description": "Add Database Component with Description to C4 diagram" }, "C4_System": { - "scope": "diagram", + "scope": "plantuml", "prefix": "System", "body": [ - "System(${1:alias}, \"${2:label}\")", - "$0" + "System(${1:alias}, \"${2:label}\")" ], "description": "Add System to C4 diagram" }, "C4_System_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": "System with Description", "body": [ - "System(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "System(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add System with Description to C4 diagram" }, "C4_System_Ext": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External System", "System (External)" ], "body": [ - "System_Ext(${1:alias}, \"${2:label}\")", - "$0" + "System_Ext(${1:alias}, \"${2:label}\")" ], "description": "Add External System to C4 diagram" }, "C4_System_Ext_Descr": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "External System with Description", "System (External) with Description" ], "body": [ - "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", - "$0" + "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")" ], "description": "Add External System with Description to C4 diagram" }, "C4_System_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "System Boundary", "Boundary for System" @@ -182,7 +206,7 @@ "description": "Add a System Boundary to C4 diagram" }, "C4_Enterprise_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Enterprise Boundary", "Boundary for Enterprise" @@ -195,43 +219,71 @@ "description": "Add an Enterprise Boundary to C4 diagram" }, "C4_Relationship": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Relationship", "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")", - "$0" + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")" ], "description": "Add unidirectional Relationship to C4 diagram" }, "C4_Relationship_Techn": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Relationship with Technology", "body": [ - "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")", - "$0" + "Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")" ], "description": "Add unidirectional Relationship with Technology to C4 diagram" }, + "C4_Relationship_Bi": { + "scope": "plantuml", + "prefix": "Bidirectional Relationship", + "body": [ + "BiRel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")" + ], + "description": "Add bidirectional Relationship to C4 diagram" + }, + "C4_Relationship_Bi_Techn": { + "scope": "plantuml", + "prefix": "Bidirectional Relationship with Technology", + "body": [ + "BiRel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")" + ], + "description": "Add bidirectional Relationship with Technology to C4 diagram" + }, + "C4_Relationship_Index": { + "scope": "plantuml", + "prefix": "Relationship with Index", + "body": [ + "RelIndex(${1:index}, ${2:from_alias}, ${3:to_alias}, \"${4:label}\")" + ], + "description": "Add unidirectional Relationship to C4 Dynamic Diagram" + }, + "C4_Relationship_Index_Techn": { + "scope": "plantuml", + "prefix": "Relationship with Technology and Index", + "body": [ + "RelIndex(${1:index}, ${2:from_alias}, ${3:to_alias}, \"${4:label}\", \"${5:technology}\")" + ], + "description": "Add unidirectional Relationship with Technology to C4 Dynamic Diagram" + }, "C4_Layout_Right": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Layout to Right side", "body": [ - "Lay_R(${1:from_alias}, ${2:to_alias})", - "$0" + "Lay_R(${1:from_alias}, ${2:to_alias})" ], "description": "Add hidden layout line to put {to} to the right of {from}" }, "C4_Layout_Left": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Layout to Left side", "body": [ - "Lay_L(${1:from_alias}, ${2:to_alias})", - "$0" + "Lay_L(${1:from_alias}, ${2:to_alias})" ], "description": "Add hidden layout line to put {to} to the left of {from}" }, "C4_Boundary": { - "scope": "diagram", + "scope": "plantuml", "prefix": "Boundary", "body": [ "Boundary(${1:alias}, \"${2:label}\"){", @@ -241,7 +293,7 @@ "description": "Add a generic boundary to C4 diagram." }, "C4_Boundary_Type": { - "scope": "diagram", + "scope": "plantuml", "prefix": [ "Boundary with type" ], @@ -251,5 +303,102 @@ "}" ], "description": "Add a generic boundary to C4 diagram." + }, + "C4_Deployment_Node": { + "scope": "plantuml", + "prefix": "Deployment Node", + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." + }, + "C4_Deployment_Node_Type": { + "scope": "plantuml", + "prefix": [ + "Deployment Node with type" + ], + "body": [ + "Deployment_Node(${1:alias}, \"${2:label}\", \"${3:type}\"){", + "\t$0", + "}" + ], + "description": "Add a deployment node to C4 diagram." + }, + "C4_Dynamic_Increment": { + "scope": "plantuml", + "prefix": [ + "Increment index" + ], + "body": [ + "increment(${1:count})" + ], + "description": "Increment index of C4 Dynamic Diagram." + }, + "C4_Dynamic_Set_Index": { + "scope": "plantuml", + "prefix": [ + "Set index" + ], + "body": [ + "setIndex(${1:value})" + ], + "description": "Set index of C4 Dynamic Diagram" + }, + "C4_Hide_Stereotype": { + "scope": "plantuml", + "prefix": [ + "Hide stereotype", + "No stereotype" + ], + "body": [ + "HIDE_STEREOTYPE()" + ], + "description": "Hide stereotypes from C4 diagram.." + }, + "C4_Layout_With_Legend": { + "scope": "plantuml", + "prefix": [ + "Layout with legend", + "Legend layout" + ], + "body": [ + "LAYOUT_WITH_LEGEND()" + ], + "description": "Add legend to C4 diagram." + }, + "C4_Layout_Left_Right": { + "scope": "plantuml", + "prefix": [ + "Layout left to right", + "Left to right layout" + ], + "body": [ + "LAYOUT_LEFT_RIGHT()" + ], + "description": "Left to right layout for C4 diagram." + }, + "C4_Layout_Top_Down": { + "scope": "plantuml", + "prefix": [ + "Layout top down", + "Top down layout" + ], + "body": [ + "LAYOUT_TOP_DOWN()" + ], + "description": "Top down layout for C4 diagram." + }, + "C4_Layout_As_Sketch": { + "scope": "plantuml", + "prefix": [ + "Layout as sketch", + "Sketch layout" + ], + "body": [ + "LAYOUT_AS_SKETCH()" + ], + "description": "Sketch layout for C4 diagram." } } \ No newline at end of file diff --git a/C4.puml b/C4.puml index d28711a3..9f6a90b6 100644 --- a/C4.puml +++ b/C4.puml @@ -1,21 +1,27 @@ -' C4-PlantUML, version 1.0.0 -' https://github.com/RicardoNiepel/C4-PlantUML +' C4-PlantUML +' https://github.com/adrianvlupu/C4-PlantUML ' Colors ' ################################## -!define ELEMENT_FONT_COLOR #FFFFFF +!global $ELEMENT_FONT_COLOR = "#FFFFFF" +!global $LEGEND_FONT_COLOR = "#FFFFFF" +!global $LEGEND_TITLE_COLOR = "#000000" ' Styling ' ################################## -!define TECHN_FONT_SIZE 12 +!global $TECHN_FONT_SIZE = 12 skinparam defaultTextAlignment center skinparam wrapWidth 200 skinparam maxMessageSize 150 +skinparam LegendBorderColor transparent +skinparam LegendBackgroundColor transparent +skinparam LegendFontColor $LEGEND_FONT_COLOR + skinparam rectangle { StereotypeFontSize 12 shadowing false @@ -43,64 +49,196 @@ skinparam rectangle<> { ' Layout ' ################################## -!definelong LAYOUT_AS_SKETCH +!procedure HIDE_STEREOTYPE() +hide stereotype +!endprocedure + +!procedure 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 +!endprocedure + +!procedure LAYOUT_TOP_DOWN() +top to bottom direction +!endprocedure -!define LAYOUT_TOP_DOWN top to bottom direction -!define LAYOUT_LEFT_RIGHT left to right direction +!procedure LAYOUT_LEFT_RIGHT() +left to right direction +!endprocedure ' Boundaries ' ################################## -!define Boundary(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Boundary(e_alias, e_label, e_type) rectangle "==e_label\n[e_type]" <> as e_alias +!unquoted function Boundary($alias, $label) +!return 'rectangle "=='+$label+'" <> as '+$alias +!endfunction +!unquoted function Boundary($alias, $label, $type) +!return 'rectangle "=='+$label+'\n['+$type+']" <> as '+$alias +!endfunction ' Relationship ' ################################## -!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label" -!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//[e_techn]//" - -!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->") -!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->") - -!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--") -!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--") - -!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->") -!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->") - -!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-") -!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-") - -!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->") -!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->") -!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label) -!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn) - -!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->") -!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->") -!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label) -!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn) - -!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->") -!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->") -!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label) -!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn) - -!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->") -!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->") -!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label) -!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn) +!unquoted procedure Rel_($alias1, $alias2, $label, $direction="") +$alias1 $direction $alias2 : **$label** +!endprocedure +!unquoted procedure Rel_($alias1, $alias2, $label, $techn, $direction="") +$alias1 $direction $alias2 : **$label**\n//[$techn]// +!endprocedure + +!unquoted procedure Rel($from, $to, $label) +Rel_($from, $to, $label, "-->>") +!endprocedure +!unquoted procedure Rel($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-->>") +!endprocedure + +!unquoted procedure BiRel($from, $to, $label) +Rel_($from, $to, $label, "<<-->>") +!endprocedure +!unquoted procedure BiRel($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-->>") +!endprocedure + +!unquoted procedure Rel_Back($from, $to, $label) +Rel_($from, $to, $label, "<<--") +!endprocedure +!unquoted procedure Rel_Back($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<--") +!endprocedure + +!unquoted procedure Rel_Neighbor($from, $to, $label) +Rel_($from, $to, $label, "->>") +!endprocedure +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "->>") +!endprocedure + +!unquoted procedure Rel_Back_Neighbor($from, $to, $label) +Rel_($from, $to, $label, "<<-") +!endprocedure +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-") +!endprocedure + +!unquoted procedure Rel_D($from, $to, $label) +Rel_($from, $to, $label, "-DOWN->>") +!endprocedure +!unquoted procedure Rel_D($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-DOWN->>") +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label) +Rel_($from, $to, $label, "-DOWN->>") +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-DOWN->>") +!endprocedure + +!unquoted procedure BiRel_D($from, $to, $label) +Rel_($from, $to, $label, "<<-DOWN->>") +!endprocedure +!unquoted procedure BiRel_D($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-DOWN->>") +!endprocedure +!unquoted procedure BiRel_Down($from, $to, $label) +Rel_($from, $to, $label, "<<-DOWN->>") +!endprocedure +!unquoted procedure BiRel_Down($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-DOWN->>") +!endprocedure + +!unquoted procedure Rel_U($from, $to, $label) +Rel_($from, $to, $label, "-UP->>") +!endprocedure +!unquoted procedure Rel_U($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-UP->>") +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label) +Rel_($from, $to, $label, "-UP->>") +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-UP->>") +!endprocedure + +!unquoted procedure BiRel_U($from, $to, $label) +Rel_($from, $to, $label, "<<-UP->>") +!endprocedure +!unquoted procedure BiRel_U($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-UP->>") +!endprocedure +!unquoted procedure BiRel_Up($from, $to, $label) +Rel_($from, $to, $label, "<<-UP->>") +!endprocedure +!unquoted procedure BiRel_Up($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-UP->>") +!endprocedure + +!unquoted procedure Rel_L($from, $to, $label) +Rel_($from, $to, $label, "-LEFT->>") +!endprocedure +!unquoted procedure Rel_L($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-LEFT->>") +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label) +Rel_($from, $to, $label, "-LEFT->>") +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-LEFT->>") +!endprocedure + +!unquoted procedure BiRel_L($from, $to, $label) +Rel_($from, $to, $label, "<<-LEFT->>") +!endprocedure +!unquoted procedure BiRel_L($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-LEFT->>") +!endprocedure +!unquoted procedure BiRel_Left($from, $to, $label) +Rel_($from, $to, $label, "<<-LEFT->>") +!endprocedure +!unquoted procedure BiRel_Left($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-LEFT->>") +!endprocedure + +!unquoted procedure Rel_R($from, $to, $label) +Rel_($from, $to, $label, "-RIGHT->>") +!endprocedure +!unquoted procedure Rel_R($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-RIGHT->>") +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label) +Rel_($from, $to, $label, "-RIGHT->>") +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "-RIGHT->>") +!endprocedure + +!unquoted procedure BiRel_R($from, $to, $label) +Rel_($from, $to, $label, "<<-RIGHT->>") +!endprocedure +!unquoted procedure BiRel_R($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-RIGHT->>") +!endprocedure +!unquoted procedure BiRel_Right($from, $to, $label) +Rel_($from, $to, $label, "<<-RIGHT->>") +!endprocedure +!unquoted procedure BiRel_Right($from, $to, $label, $techn) +Rel_($from, $to, $label, $techn, "<<-RIGHT->>") +!endprocedure ' Layout Helpers ' ################################## -!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to -!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to -!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to -!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to \ No newline at end of file +!unquoted procedure Lay_D($from, $to) +$from -[hidden]D- $to +!endprocedure +!unquoted procedure Lay_U($from, $to) +$from -[hidden]U- $to +!endprocedure +!unquoted procedure Lay_R($from, $to) +$from -[hidden]R- $to +!endprocedure +!unquoted procedure Lay_L($from, $to) +$from -[hidden]L- $to +!endprocedure \ No newline at end of file diff --git a/C4_Component.puml b/C4_Component.puml index 40a8a24e..85d6a4ee 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -1,4 +1,4 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml @@ -10,46 +10,63 @@ ' Colors ' ################################## -!define COMPONENT_BG_COLOR #85BBF0 +!global $COMPONENT_BG_COLOR = "#85BBF0" ' Styling ' ################################## skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR + StereotypeFontColor #000000 FontColor #000000 - BackgroundColor COMPONENT_BG_COLOR + BackgroundColor $COMPONENT_BG_COLOR BorderColor #78A8D8 } skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR + StereotypeFontColor #000000 FontColor #000000 - BackgroundColor COMPONENT_BG_COLOR + BackgroundColor $COMPONENT_BG_COLOR BorderColor #78A8D8 } ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | -| | container | -| | component | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system | +|<$CONTAINER_BG_COLOR> container | +|<$COMPONENT_BG_COLOR> component | +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | endlegend -!enddefinelong +!endprocedure ' 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 +!function $getComponent($label, $techn, $descr, $sprite) +!if ($descr == "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr == "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr != "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!if ($descr != "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!endfunction -!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="") +database "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 2bc697cb..fa81f97e 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -1,4 +1,4 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml @@ -10,50 +10,69 @@ ' Colors ' ################################## -!define CONTAINER_BG_COLOR #438DD5 +!global $CONTAINER_BG_COLOR = "#438DD5" ' Styling ' ################################## skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor CONTAINER_BG_COLOR + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $CONTAINER_BG_COLOR BorderColor #3C7FC0 } skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor CONTAINER_BG_COLOR + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $CONTAINER_BG_COLOR BorderColor #3C7FC0 } ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | -| | container | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system | +|<$CONTAINER_BG_COLOR> container | +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | endlegend -!enddefinelong +!endprocedure ' Elements ' ################################## -!define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//[e_techn]//" <> as e_alias -!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!function $getContainer($label, $techn, $descr, $sprite) +!if ($descr == "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr == "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//' +!endif +!if ($descr != "") && ($sprite == "") +!return '=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!if ($descr != "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//\n\n '+$descr +!endif +!endfunction -!define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//[e_techn]//" <> as e_alias -!define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//[e_techn]//\n\n e_descr" <> as e_alias +!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="") +rectangle "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="") +database "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure ' Boundaries ' ################################## -!define Container_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Container") \ No newline at end of file +!unquoted function Container_Boundary($alias, $label) +!return Boundary($alias, $label, "Container") +!endfunction diff --git a/C4_Context.puml b/C4_Context.puml index a28a9cbc..06699a04 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,4 +1,4 @@ -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4.puml ' uncomment the following line and comment the first to use locally ' !include C4.puml @@ -10,93 +10,184 @@ ' Colors ' ################################## -!define PERSON_BG_COLOR #08427B -!define EXTERNAL_PERSON_BG_COLOR #686868 -!define SYSTEM_BG_COLOR #1168BD -!define EXTERNAL_SYSTEM_BG_COLOR #999999 +!global $PERSON_BG_COLOR = "#08427B" +!global $EXTERNAL_PERSON_BG_COLOR = "#686868" +!global $SYSTEM_BG_COLOR = "#1168BD" +!global $EXTERNAL_SYSTEM_BG_COLOR = "#999999" ' Styling ' ################################## skinparam rectangle<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor PERSON_BG_COLOR + 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 + 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 + 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 + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR BorderColor #8A8A8A } skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor SYSTEM_BG_COLOR + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $SYSTEM_BG_COLOR BorderColor #3C7FC0 } skinparam database<> { - StereotypeFontColor ELEMENT_FONT_COLOR - FontColor ELEMENT_FONT_COLOR - BackgroundColor EXTERNAL_SYSTEM_BG_COLOR + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR BorderColor #8A8A8A } +sprite $person [48x48/16] { +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +0000000000000000000049BCCA7200000000000000000000 +0000000000000000006EFFFFFFFFB3000000000000000000 +00000000000000001CFFFFFFFFFFFF700000000000000000 +0000000000000001EFFFFFFFFFFFFFF80000000000000000 +000000000000000CFFFFFFFFFFFFFFFF6000000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +00000000000001FFFFFFFFFFFFFFFFFFF900000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000 +0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000 +0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000 +0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000 +0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000 +00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000 +00000000000000EFFFFFFFFFFFFFFFFFF800000000000000 +000000000000007FFFFFFFFFFFFFFFFFF100000000000000 +000000000000000BFFFFFFFFFFFFFFFF5000000000000000 +0000000000000001DFFFFFFFFFFFFFF70000000000000000 +00000000000000000BFFFFFFFFFFFF500000000000000000 +0000000000000000005DFFFFFFFFA1000000000000000000 +0000000000000000000037ABB96100000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +000000000000025788300000000005886410000000000000 +000000000007DFFFFFFD9643347BFFFFFFFB400000000000 +0000000004EFFFFFFFFFFFFFFFFFFFFFFFFFFB1000000000 +000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD200000000 +00000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE10000000 +0000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB0000000 +000000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5000000 +000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000 +000009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000 +00000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF600000 +00000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF800000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000 +00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000 +00000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF700000 +000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000 +0000008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD3000000 +000000014555555555555555555555555555555300000000 +000000000000000000000000000000000000000000000000 +000000000000000000000000000000000000000000000000 +} + ' Layout ' ################################## -!definelong LAYOUT_WITH_LEGEND +!procedure LAYOUT_WITH_LEGEND() hide stereotype legend right -|= |= Type | -| | person | -| | external person | -| | system | -| | external system | +|**Legend** | +|<$PERSON_BG_COLOR> person | +|<$SYSTEM_BG_COLOR> system| +|<$EXTERNAL_PERSON_BG_COLOR> external person | +|<$EXTERNAL_SYSTEM_BG_COLOR> external system | endlegend -!enddefinelong +!endprocedure ' Elements ' ################################## -!define Person(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define Person_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define System(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define System_Ext(e_alias, e_label) rectangle "==e_label" <> as e_alias -!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <> as e_alias - -!define SystemDb(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias - -!define SystemDb_Ext(e_alias, e_label) database "==e_label" <> as e_alias -!define SystemDb_Ext(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <> as e_alias +!function $getPerson($label, $descr, $sprite) +!if ($descr == "") && ($sprite == "") +!return '<$person>\n=='+$label +!endif +!if ($descr == "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label +!endif +!if ($descr != "") && ($sprite == "") +!return '<$person>\n=='+$label+'\n\n '+$descr +!endif +!if ($descr != "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n\n '+$descr +!endif +!endfunction + +!function $getSystem($label, $descr, $sprite) +!if ($descr == "") && ($sprite == "") +!return '=='+$label +!endif +!if ($descr == "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label +!endif +!if ($descr != "") && ($sprite == "") +!return '=='+$label+'\n\n '+$descr +!endif +!if ($descr != "") && ($sprite != "") +!return '<$'+$sprite+'>\n=='+$label+'\n\n '+$descr +!endif +!endfunction + +!unquoted procedure Person($alias, $label, $descr="", $sprite="") +rectangle "$getPerson($label, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="") +rectangle "$getPerson($label, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure System($alias, $label, $descr="", $sprite="") +rectangle "$getSystem($label, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="") +rectangle "$getSystem($label, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="") +database "$getSystem($label, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure SystemDb_ext($alias, $label, $descr="", $sprite="") +database "$getSystem($label, $descr, $sprite)" <> as $alias +!endprocedure ' Boundaries ' ################################## -!define Enterprise_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Enterprise") -!define System_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "System") \ No newline at end of file +!unquoted function Enterprise_Boundary($alias, $label) +!return Boundary($alias, $label, "Enterprise") +!endfunction +!unquoted function System_Boundary($alias, $label) +!return Boundary($alias, $label, "System") +!endfunction diff --git a/C4_Deployment.puml b/C4_Deployment.puml new file mode 100644 index 00000000..31d489a9 --- /dev/null +++ b/C4_Deployment.puml @@ -0,0 +1,23 @@ +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml + +' Styling +' ################################## + +skinparam rectangle<> { + Shadowing false + StereotypeFontSize 0 + FontColor #000000 + BorderColor #A2A2A2 + BorderStyle solid +} + +' Elements +' ################################## +!unquoted function Deployment_Node($alias, $label) +!return 'rectangle "=='+$label+'" <> as '+$alias +!endfunction +!unquoted function Deployment_Node($alias, $label, $type) +!return 'rectangle "=='+$label+'\n['+$type+']" <> as '+$alias +!endfunction diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml new file mode 100644 index 00000000..272ca09e --- /dev/null +++ b/C4_Dynamic.puml @@ -0,0 +1,218 @@ +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/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: +' SetIndex(): set the next index, +' GetIndex(): get the index and automatically increase index + +' Index +' ################################## + +!$index=1 + +!procedure increment($step=1) +!$index = $index + $step +!endprocedure + +!procedure setIndex($new_index) +!$index=$new_index +!endprocedure + +' Relationship override +' ################################## + +' Relationship +' ################################## + +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $direction="") +$alias1 $direction $alias2 : **$e_index: $label** +!endprocedure +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $techn, $direction="") +$alias1 $direction $alias2 : **$e_index: $label**\n//[$techn]// +!endprocedure + +!unquoted procedure Rel($from, $to, $label) +Rel_($index, $from, $to, $label, "-->>") +increment() +!endprocedure +!unquoted procedure Rel($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-->>") +increment() +!endprocedure +!unquoted procedure RelIndex($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-->>") +!endprocedure +!unquoted procedure RelIndex($e_index, $from, $to, $label, $tech) +Rel_($e_index, $from, $to, $label, $tech, "-->>") +!endprocedure + +!unquoted procedure Rel_Back($from, $to, $label) +Rel_($index, $from, $to, $label, "<<--") +increment() +!endprocedure +!unquoted procedure Rel_Back($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "<<--") +increment() +!endprocedure +!unquoted procedure RelIndex_Back($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "<<--") +!endprocedure +!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "<<--") +!endprocedure + +!unquoted procedure Rel_Neighbor($from, $to, $label) +Rel_($index, $from, $to, $label, "->>") +increment() +!endprocedure +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "->>") +increment() +!endprocedure +!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "->>") +!endprocedure +!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "->>") +!endprocedure + +!unquoted procedure Rel_Back_Neighbor($from, $to, $label) +Rel_($index, $from, $to, $label, "<<-") +increment() +!endprocedure +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "<<-") +increment() +!endprocedure +!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "<<-") +!endprocedure +!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "<<-") +!endprocedure + +!unquoted procedure Rel_D($from, $to, $label) +Rel_($index, $from, $to, $label, "-DOWN->>") +increment() +!endprocedure +!unquoted procedure Rel_D($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-DOWN->>") +increment() +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label) +Rel_($index, $from, $to, $label, "-DOWN->>") +increment() +!endprocedure +!unquoted procedure Rel_Down($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-DOWN->>") +increment() +!endprocedure +!unquoted procedure RelIndex_D($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-DOWN->>") +!endprocedure +!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-DOWN->>") +!endprocedure +!unquoted procedure RelIndex_Down($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-DOWN->>") +!endprocedure +!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-DOWN->>") +!endprocedure + +!unquoted procedure Rel_U($from, $to, $label) +Rel_($index, $from, $to, $label, "-UP->>") +increment() +!endprocedure +!unquoted procedure Rel_U($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-UP->>") +increment() +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label) +Rel_($index, $from, $to, $label, "-UP->>") +increment() +!endprocedure +!unquoted procedure Rel_Up($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-UP->>") +increment() +!endprocedure +!unquoted procedure RelIndex_U($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-UP->>") +!endprocedure +!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-UP->>") +!endprocedure +!unquoted procedure RelIndex_Up($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-UP->>") +!endprocedure +!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-UP->>") +!endprocedure + +!unquoted procedure Rel_L($from, $to, $label) +Rel_($index, $from, $to, $label, "-LEFT->>") +increment() +!endprocedure +!unquoted procedure Rel_L($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-LEFT->>") +increment() +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label) +Rel_($index, $from, $to, $label, "-LEFT->>") +increment() +!endprocedure +!unquoted procedure Rel_Left($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-LEFT->>") +increment() +!endprocedure +!unquoted procedure RelIndex_L($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-LEFT->>") +!endprocedure +!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-LEFT->>") +!endprocedure +!unquoted procedure RelIndex_Left($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-LEFT->>") +!endprocedure +!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-LEFT->>") +!endprocedure + +!unquoted procedure Rel_R($from, $to, $label) +Rel_($index, $from, $to, $label, "-RIGHT->>") +increment() +!endprocedure +!unquoted procedure Rel_R($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-RIGHT->>") +increment() +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label) +Rel_($index, $from, $to, $label, "-RIGHT->>") +increment() +!endprocedure +!unquoted procedure Rel_Right($from, $to, $label, $techn) +Rel_($index, $from, $to, $label, $techn, "-RIGHT->>") +increment() +!endprocedure +!unquoted procedure RelIndex_R($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-RIGHT->>") +!endprocedure +!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-RIGHT->>") +!endprocedure +!unquoted procedure RelIndex_Right($e_index, $from, $to, $label) +Rel_($e_index, $from, $to, $label, "-RIGHT->>") +!endprocedure +!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn) +Rel_($e_index, $from, $to, $label, $techn, "-RIGHT->>") +!endprocedure + + diff --git a/LayoutOptions.md b/LayoutOptions.md index c5b64b4e..e0776096 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -1,21 +1,21 @@ # Layout Options -PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. +PlantUML uses [Graphviz](https://www.graphviz.org/) for its graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. ...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended. For this reason, C4-PlantUML also comes with some layout options. -## LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT +## LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() -With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN` is the default. +With the two macros `LAYOUT_TOP_DOWN()` and `LAYOUT_LEFT_RIGHT()` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN()` is the default. ```csharp @startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml /' Not needed because this is the default '/ -LAYOUT_TOP_DOWN +LAYOUT_TOP_DOWN() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -28,15 +28,16 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample") +![LAYOUT_TOP_DOWN Sample](https://www.plantuml.com/plantuml/png/NP1DJyCm38Rl-HLc7DP9ezKG9quh0y5X7nNhc3XLQUknI6aI9IxLXFZlkDhO454aI_Rhruyz3IGzjOs6UVg-skH5ligAnzLs2MlPE8tYIfbAjpN2diY5-oJniei_5EtRiWteAsi83SMLRH9PUoNDfsvTcypkRZ8j3MqMyqHBma2SAcQibigWZnsF528Pmj8I6CGQQoYnakm9j5S1-DCUeSQTR3N1C17_0AEH41dwO4qawqQPCGpIFgf0NfBrWv5O7m9XKppOrjJI7w9gCeRXSQ_X2Bu4y3iZHHsMXNIEVRPOGkgSLfKaPSs0KxFhCQJhB5u-vTpY4MxZ2IpUPdqjrTfs0VfpCBG5leMJB6aONF4io3j5X1v8DQXvLc2sxnDTHCSY-vnaN1Ilg7-tkc1j0dToVCdpRCsgNdIkNcoUaHYZmpxil6t-japHr7pv7m00 "LAYOUT_TOP_DOWN Sample") + Using `LAYOUT_LEFT_RIGHT` ```csharp @startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml -LAYOUT_LEFT_RIGHT +LAYOUT_LEFT_RIGHT() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -49,21 +50,22 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample") +![LAYOUT_LEFT_RIGHT Sample](https://www.plantuml.com/plantuml/png/PL1DIyD05BplhrZheIdKX8edJusXjaAhfKaLJs6RFEt2Vh7xrb34_-uBhLPmBmDlvhsPsMb0uJ5gnPVvwzEsgfUp-whUFCmN5I-5TWhOXJIDYYtmFQ8BjrdcHPU-Izp7NGpW6siG3AQDrPbelHJcGqKNi-BcQgs4mUrgcIc14916TK5g8Gtur94fO_zSan5ZQ_31caIqMfen7-Gzoe1UeFM34IiF0K7NTpQQLlX3qap6V7WCEnpnJyRf_Vea7UnguHpTUO4TpvrJiX4ehHdGgBWSyxnSfu-pYbOyyEjqmbVFHS_bIjakyBvZu6Wv5NI293egbEJ5gquYWkSeDIZo2fJjwvGkmID9Tquo8ja6r4-hSwnje4t2HLMjIrBreb_sV6OEI34wwE7DM_rtPGgcfU_y1W00 "LAYOUT_LEFT_RIGHT Sample") + -## LAYOUT_WITH_LEGEND +## LAYOUT_WITH_LEGEND() Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. It can also help to save some space. All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<>` and with a legend. -This can be enabled with `LAYOUT_WITH_LEGEND`. +This can be enabled with `LAYOUT_WITH_LEGEND()`. ```csharp @startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -76,9 +78,10 @@ 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](https://www.plantuml.com/plantuml/png/PL1DJy905BplhrZnG4cm3SQJ9sebO0BOs2Bnr2pjKpRPh-o-sX3ZV_Sr89YubqdUp7ipizE0mcEh5L-cRy-Rije-bOjgEPlFre-y4DefO5VIrAfjWEyHNRXF4Y-w-4FYljsr0Nnj3OB1kBOw4OsNmdogrhL9TdUJAs5mirecIY04f56LaLf80pvsvChOVzjen5WEFbWJYKPBC-Q3j4SPq0kqVZ1YnI4WwEh1jgOH_X3Lap4V7jCEH_oBSNfdewY3NIMSepjRsF7KEILhWTAQ0Osowp5FYpnUpqfQyS1lumbVlMOzbofbky3xae6ZvTJG2PBeLg4aBrvs4X4yHwb1aLUWRD-dT14UIRfpaX79Na3zjhh4sWJQ95oKPLwGgXUTsSkPEI35wA27Ts_rtvKfc8R-ymS0 "LAYOUT_WITH_LEGEND Sample") + -## LAYOUT_AS_SKETCH +## LAYOUT_AS_SKETCH() C4-PlantUML can be especially helpful during up-front design sessions. One thing which is often ignored is the fact, that these software architecture sketches are just sketches. @@ -90,13 +93,13 @@ Without any proof * if they keep what they promise More often these sketches are used by many people as facts and are manifested into their documentations. -With `LAYOUT_AS_SKETCH` you can make a difference. +With `LAYOUT_AS_SKETCH()` you can make a difference. ```csharp @startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml -LAYOUT_AS_SKETCH +LAYOUT_AS_SKETCH() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -109,4 +112,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/xLfhRziw4lskNy7hV4W3E8sJFfhDEaRzK9fW7IUmbCtURGk3iSQnS6LI8Ecwtct_-mvbcP7D28BatW0BN1g8PN7cp9aHTVX0Faf5XPhF8cUVT7d4XSIBlSBcEBy5C0aP4BVlNhi3VtHnWt-wD_sR8TcxI9g3I9vQHY5xB8dfkztBmGhHk_gtIuvF74V-4RAO2ZeZQ4JdaVBXksf7uIER0LDaZ7z0PCqMWiRtOQ2cvAJHoDoVqU_N82Lz12_y3v3ZTusibu2nekmn0l9VXs3p41MuMiPmmPbQUPmaFN9A0xx0vCY4HXASdrcOjX1yaK8aPILxxvEMtD5GzjriW9_FSces7_YS1LGiMwqrloqMEPmRLeGj7c-JbjpjS160oBkldoYGWCef19hcFkdJ9P-hSeyuuiYut_xzviuVjRsHzm_NxrvcKdwWupyUXKusvU6wRgVNpLXCAGiM8bGA655Y3lO0qTaDw0n8hSjduPXub4boxTMSrLWX4yxrLtF2zVZHOSu51ArxAXZMywnvf3jQf2k0AWZGN90WbEEvb25dTS800aaK9mz0lj4e3BILynkmu2b5a-ywL__cTjIxkH-WNvpuSgKuCWxrCqRORVk-U-6FXbUVBdqImKHf5n4-JbN60mlVMOsA4Cg-lAdZyXMCC0CgwmH64Ns0w23p8jJEpzExDR8n0gaagLyneBxG8_9vOF9vrVirFm9cDeI8wfJbD8nB9egkepMdu_eQz6I3dYdfUQrsGDR6sGxZHyuqULEMKc4KZATiftXVsD5HK-9xVBObbAtFAVpNvf7kRnqTrJPgWDmcWi_gQCOpppgbRNVLIUtmi5KxACGmYTbWjer1tQXR1r_vLwb3ucqJjFiqm-RXeMPO36NpB30ou1le0y0ty86BAiN4h8kmgXVr-PgQ61MBYvX5aBiNUPjuhqfnjR1Q5UxjNjfyRBvW-KHpGXT3M0oBqzWgtrsLyjtTMWdUxLwyFEGuds8U_M80YzjTgRBrgvHDJz5MUltT2vUF3HELJpGdT0543iD-gV8DgvHFBsxi78U_fduvu2XU-HNCpQCOmoPPdCdJ2ffSGXH3wGqOEXjrI63vGQgrvF3pD0m2O5zxXqd7XizTWS_TCpx30f_XCpxz0fz-wfDi5ySyXZFI9Z9CLeYIJzI22hnOIWMprsXoAy8P5Ki24UYDdpmZ_jGo924ZKcDf3syUnrmeHCmutGAFCG1bmRQlJDVMqPACEMDu1G5HdAY2C5TC0GlGbiw34DWOyt2_WLW-y61PrmlzAKcUU3YcKHANSNRuT2TE2DKHKeR1YXYVg-IQJpQ31_0D8XxhJ12IObcgRjvltQ5tCnXrFgrtxetJjoSVEgRV_PVl3WVj_iWoV7-gFyRG-ztptUjC__7n-zDEpmQo3F-MjB9d1JdRO_twSDPgsPjtizErpoiIqqA3pjQETAiYziwvyU5Dv_r5xauUlYCvHgFH2t8sJw6G_6bRVtB9huR_It0s8okNwflkXujkexZEByZP7kt5TTxz7EN-ohySzTrFxg3dJBLkI9EY4y4Zi61rTk3yE2SR3N_xQ4H-E3-QMoEZbLgGrIXDJ4nsURRhacUTjYhHqeQfYcw26iCyKEE42ILfsOSk-yHDXRwi7YQ4Ivo6h3BSEAae0jCN0SYnU1xr2_l2rXOv4RRvZjplgWHdMtbiyZPonGGAmfbuNl9KIsGX4mUBl0LMdRWLmUPRjVB5v7UlV46uwiU6XcB9qqFoUUMNVyXNVGtOvKnHf2OaMOHg6ZAYNcvLE3R1SzQ1_jOghyeYx-_eD8uG4WaR8oh6qr0X6LbVEo2B15TVhKvBZ-GgLI8LdKogBnQxEEcrhmRkCBDwU_lcjDTxzujMRwQEBp99ctIArnRbf-U_fcTqiYgSufhd_ETCuaOBZ2xPksvReCgUgvFiUCsAM1aUbg1N9xGj_ZQvoh9l9LHU-OrhIV4tMUJ9_Ypc3AytPDyu5Gj-PjvuLJnnm069exaaSRLfmf3DcIOyMzPrZ8ooxoBUrxSt0vJ5Z7YVlkjqBXg_IBnDThk9zruZQJcARNB8LUmFk9_gdVwVAVPVYfsEdJzViTD0bc9RF5vOiVF9ETQ_IJZfpf86in09rThwEvHAKCK5ddLlBy_7ntMoxz5P7C7-GVfoFarE2tWOqJX6d7ju8EquZi9nid2iuQtkNfsqlTlN0zT75m7avFKnkVvdL_UreuWl99bBPACrJlFNwZMRHohK-kYZeYeGH8KpY32MH6u_KtQlrAeJSL8px7I64AspUg9r9q7gU9U-V-kXbJOolKymdq19_0dwIvymPrq-0Wlci-X_ "LAYOUT_AS_SKETCH Sample") +![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/NL1DIyD05BplhrZheIdKX8edJusXMB3LO5B5KzWcJxkmN-o-DHJnl_j2QolkPU3Dl3SpEmyeF4Qj-2f_UzhKJLurrSEYBfQy4jefO1VIj2fsm7U8BjnccHTz-Y5n5xSnW6-jGJ2OjbPdelDIc4yLNSoAcwjI2OERzIfJ0Y4WZPg2r48QyAaZJyR-coOJnahmmPf4T5gQAH_b0yg0Ng3remchzW51DtSscaxuVTBEfdnyo3gUy2_6wPriaXwsZN2Exhp2bkVEATaAbDQCQ5HSJdbUbUdZegOL3_mwdV7rIp5mkLAs3toe63XQJlsS88cE2YLvyRgNYE0vIWsAl09b-pwcI_10qfsZZ4Zs3EgtrJdM9j0cuRAkoufKW-Z4di_S0rAC7WPuzrR_NPc3wUWtVm00 "LAYOUT_AS_SKETCH Sample") + + +## HIDE_STEREOTYPE() + +To enable a layout without `<>` and legend. +This can be enabled with `HIDE_STEREOTYPE()`. + +```csharp +@startuml HIDE_STEREOTYPE Sample +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml + +HIDE_STEREOTYPE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![HIDE_STEREOTYPE Sample](https://www.plantuml.com/plantuml/png/NL1DIyD05BplhrZheIdKX8edJuqrMC5gQ5B5KzWcJxkmN-o-DHJnl_j2gnNtCl1ctfkPdGSK7gDMV7b_MpHLNQoBf_grB7Wbj5F0pgHfLUo0xn1TkCuoB_hqNU8kRcC0trg3O31jhSv4vwKm7ogwc2skBaeb36vM3vaI205fr2n8BQG1dpgoPEoVPp9Xh0GVh4b4fwMPyb4-e0pe1Le_ch1g7n1qSsEZwOJV9-rioiU7gEC9_sIStgzBqiEs4SxHdHVOyjmv9Lk1qfeHZHRdKvvNPVfOrBJYWL-cCxvwNWnShfJj0nyQ1ewMKpqdIAAZGabUlEub8dYEKeCYhq3Plexf4ZoGTESe8vAjGVsqEiNQ1DeaNDPrMP5g4FsofpDtW1IZXm7UlDL_L-PWElhCRm00 "HIDE_STEREOTYPE Sample") + + diff --git a/README.md b/README.md index 198b334e..e832e71c 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # 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") +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System") -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. +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. C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. * [Getting Started](#getting-started) * [Supported Diagram Types](#supported-diagram-types) -* [Snippets for Visual Studio Code](#snipptes-for-visual-studio-code) +* [Snippets for Visual Studio Code](#snippets-for-visual-studio-code) * [Layout Options](#layout-options) * [Samples](#advanced-samples) * [Background](#background) @@ -18,18 +18,21 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet 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 connectifity, you can also download the files found in the `root` and reference it locally with +To be independent of any internet connectivity, you can also download the files found in the `root` and reference it locally with ```c# +!include path/to/C4.puml +!include path/to/C4_Context.puml !include path/to/C4_Container.puml +!include path/to/C4_Component.puml ``` -Just remember to change the `!include` statements inside the top of the files. +Just remember to change the `!include` statements at the top of the files. If you want to use the always up-to-date version in this repo, use the following: ```c# -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml ``` Now let's create a C4 Container diagram: @@ -38,7 +41,7 @@ After you have included `C4_Container.puml` you can use the defined macro defini ```csharp @startuml C4_Elements -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml Person(personAlias, "Label", "Optional Description") Container(containerAlias, "Label", "Technology", "Optional Description") @@ -48,7 +51,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![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") +![test](https://www.plantuml.com/plantuml/png/ZOz1Yy9038NlyojgJnNSpiNJdbpqwAAuUfOu3NOWpGoJZEA_trfGLaJPqti9oPUNcIWapHsPaMT7kS6YLOtoQMs2SttqskP35amki29hxK9deKaU-4GvPZkVVgm9M7VVIqkWADgtzlD-6ZnZgkELRTQO970L1_aY3p8foYKSaChUhABwm4350iKbFrJbsDmXbRkvfzKjkfO3XUFb3UZd8efT9OFyzxhP83q6VftYZlWJPsnco4t__Iy0 "test") In addition to this, it is also possible to define a system or component boundary. @@ -56,7 +59,7 @@ Take a look a look at the following sample of a C4 Container Diagram: ```csharp @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml Person(admin, "Administrator") System_Boundary(c1, "Sample System") { @@ -69,19 +72,56 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![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") +![Basic Sample](https://www.plantuml.com/plantuml/png/JP1FIyD04CNl-HHZlAHG4ogUF3KDeWShmQHwBDDaj0lxZzs9eOZVtGcjhNiPcFURUMzs6Ha33qR32gFge47ZDILNodPww0dsp3xU5qN0CVzKl1zsGwJGESjaEU-SAR0F2ksN7lnGL7StjKRBc_LpeP4fihIsbT2eB8NSYr6Ir1IYindsHjavfELKLUI0x48wIvf3P3BRbHjiZ-6GTGk1ZhdWgAKp-4v0tdbpDj9kYzuB-KuxABtNgaDMpgRIggxdK3Pr_lBGoaWWkCqNi7wh9gtKseqHfgiYi0CvoQCWPj2i9ijsLCmKW9KXBLvH8lwSGcPy56NF2HCnUINzTzmbrYRAfDIdjgqReIReh5xMF19BZ96cyX6S-J-o9DlB1_u2 "Basic Sample") + +Entities can also be decorated with icons using the last parameter, for example: + +```cs +@startuml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +!include DEVICONS/angular.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/users.puml + +LAYOUT_WITH_LEGEND() + +Person(user, "Customer", "People that need products", "users") +Container(spa, "SPA", "angular", "The main interface that the customer interacts with", "angular") +Container(api, "API", "java", "Handles all business logic", "java") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", "msql_server") + +Rel(user, spa, "Uses", "https") +Rel(spa, api, "Uses", "https") +Rel_R(api, db, "Reads/Writes") +@enduml +``` + +![test](https://www.plantuml.com/plantuml/png/hL9DZzCm4BtdLtXxeIjjwmDmuRHLMzXA_Q8VL9ogQJnfZHmxUEnM_7l6QRORM90uS8erx-NDl9dtI05yYAN9xhJDJLGeJY5Kz45A3vV-KOTJF4H2dpiRq8P-xae9ockmPnEhA8VlUai3DcndKsaW80KkxOVC1ctHzwka_KP4op-MB2322KNXZ74NRO_2C4c0LU8NM7lYbnFSM1YNWp4_MECsuUi6sPt28acDnbycmyLy_GykGgpOo5jPfV5PfASPxHNCw57bDLkH9L10BnMU4qQtBXyNyyrWDrulPkF_sgYkmGN9bTXx_tAIPrSIx34QQ4o_Xh_16Vw6bVJTx7coC_x-UykDJBDJizFfuEjYkzdl9fkd_NJyQJmVTU-pRCa4Pxk9-20wmqY1X_KTVY_HLGRvWX24HLIYyax5F502Q-7EVNOxN9SguFfwEKXmOomzDvo0aYb2ymfz0NaZcPAHD-sk6B2skF3Esmhj5b1fHWRBIIAavQJl4yVD80bEbU1RCP68KtRK-OtLqXWTkkh0zH44E01XuinqxXsv8eZrvsajwOoYPxiFmdd58wPKQtjscWreMpXVGj3E9dxh5jmhMw5fzddToPQmtbaTBIOal4QkVlu0xrTNh_MeAmH5SbSdY-57j8hl-HC0 "test") + ## Supported Diagram Types * System Context & System Landscape diagrams - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Context.puml` + * Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml` * Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `SystemDb`, `SystemDb_Ext`, `Boundary`, `System_Boundary`, `Enterprise_Boundary` * Container diagram - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml` + * Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml` * Additional Macros: `Container`, `ContainerDb`, `Container_Boundary` * Component diagram - * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml` + * Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Component.puml` * Additional Macros: `Component`, `ComponentDb` +* Dynamic diagram + * Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Dynamic.puml` + * Additional Macros: `RelIndex`, `increment`, `setIndex` +* Deployment diagram + * Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Deployment.puml` + * Additional Macros: `Deployment_Node` Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). @@ -100,9 +140,10 @@ It is possible to save them directly inside VS Code: [Creating your own snippets C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: -* [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend) -* [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch) +* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) +* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) +* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) +* [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) ## Advanced Samples @@ -114,13 +155,15 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![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") +![techtribesjs](https://www.plantuml.com/plantuml/png/ZLLDSziu3BthLs1zgJAZjTkatSpigKwS9csTZqRoPdhIK19iiwL8BKd5yNJwtmjIiYp5tSdwO54W2Bm7F53lZMNQrgM0aSLyRJNFq7mpe-0FBdDH5mXhQolpzsIYsMQyudPTPxL1dIjfKTfnhie9ApHdyb7KLJqvV_lddM3IBgxd4y4i6akcz9oy6PUennMb2bv1BUbWIG70hX6MIWYruN85Wfo0oG86srmRMYcWn21KpeJOKemEuM62O3xzUhj8qkJsBftTFjo4Hy6hrZIDq_ZpHN9-HRRMzF0nkKhd5vSNDpCo1i4TQgDaUl5aGoQLt9QgDgaZ7S5ekZF0WWoZezOvPAkLnXKHBZhFplBSjIYvvCPgPZcbsRaFhBiZGRmr5ilqJDMoO7eRvc-YVgV6rAgZ7m7Gp_zrTGWtcAMigiZx0JEOLfNWkGyz8jCdziWYY2ljQdxzpta4YIff6qx7Jsv_wlfXNBsrSOL_vBY12bKbC88cSmIj12B0HtgGuPlAw1zjFeQbLgNldMyNEC0H59pqGs-klnyJC9XRvKaEaC-oKAD8YunmtAFmcEdGZ5cMCOCEtlKs_ZA7T-Dt3TgOmg0vmEUVK6AP4Oirfr9Gyk_cETwC5IldVidjLPs1nagrB0wWXKikqFYEKDeFz09DVnoA3zFavBW7no3J-HguBF09pUzeIcN-5NJWHZawZY3uivwYaYirEuFZyV60f2_iVHnFffOMIyJ2G9W9jGA2RSsHBwxT8Dh3b65T5QH7fxP5izff0KwTbr54Y9GowXoeg5fvqb4RT5YdTbIz3e1Koy3aQongGQAdPd67uMSdOZTGTiDj0o5fLkJHssuk6DfjiWmt7Kq2C3fpJySk87qSZEXU-3H3nd6vIfAxcFozz_CvVS7zTxFwtqVycMwx9sDMjArp1TjexafhbU_hb_daq-oCHh1IsiB9oUk_sjnTd87gzh6Uk-tarFFe2Md3DRfkMfKhqIOxFdtzvhI5dIxsydW1UE6K-WBwVhW1_eUE_87V8O73SlrVElkeUyLTadvtWgQvN2fTDfVjVcQwilL5q8NQgzEv3Y9aghPGrHdTiZGGz57oyy5fQ3c-47KdQnzqDqorSLSp3Re7rnlsVYZ7TSwswNrtO-vBJLllKHRqDVm5 "techtribesjs") + ### 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") +![messagebus](https://www.plantuml.com/plantuml/png/bLN1Sjem4BtxAxRqa6Gc2Msdfvv2W6dQaa0mcKnFdhKiG1DPqaWoAUdqtxkoZR49CqsvOArNxxrzkmjNpgFrHIwXbtFdSCNJmlMYTq8nMMGSrjuRzwNVj_XykH9-NT1hRfbMdYj_oNJUnymAL1jPcA8__7mnawZym-saBz5pvocK32aRXUBsqX1HT0A5eeiv0O1VSrXgAVMpK2kGb0IeCkYy5jRHamOY1gaPIhabZ4RXQuB8FGbbq68EpnRDeyZy6Zvz-D2Av_ZhjYet5Y-yV1bD1Z-d3ujaCPqbe-dZtUbPT5A71d4I_nWlXZSKgqEFtnOtoMJyTNmtec0KpRXrMfsomdcTStiEm-QfDu1Tk4UfyTPvdYVNkb0Pskqf-qWfkspuffRQvkY5Lhqp-1r5G9-clbCqffqzC4OALcLJ_3jkq34hZ3-7WLeL4cq83uA_hX7XWfavAYe-62mi6AkNGlAWhaktkv9GppU2yJPtN8LslESG6nkQUAsr3y45zSveGLtKIq36o6vgjMraW6YNUiXS3sD2uqPOTQ_WccQJZdDCK-5lxqiQYyePRNq9JkbqdPZuXkR7lSQrFEIIpbP9yrsiNTEyIBVXUsXv66HGGQiKZcUGeSUIhG43KrYZ7Jz2Y4KcV8ji4Cvjek7x_kNTU14UPrPlH4PasgvG2LTwS_5C8IXX0jCIcP3qU8HhbEuRbgNjNer8SOgkv9jQP9B3nqyid6AlBNTlQmhXx-qh2VREjHbkj_7zf0MEE_DUoBmD3I21bqCXvRvXZQcOmLgp__4siEoT3QT0FWuJi3_MMbhr0QQwyFMaq2QWXpLkw2UFbemhdX7VdoYQSzdQwch_7e8Q-hvPB6Pna4L9oRnQpYChys2oSeIEcGoX_bK0GxTLx1o-nzExVWTuScGDAnqnLvbh2j01vP6diMPFtDFjIjNhoztTga0QRKKfjWLwrh5WZz8TjThUiekY-Z4QNG_h4hhRV6m5toQY0tEuMF-6A36Ei1yCzK4f5VK1MtVowXirLtadck2Mp3_2ra6Yn2lIJVzQVm40 "messagebus") + ## Background @@ -147,4 +190,4 @@ More information can be found here: ## License -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details \ No newline at end of file +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details diff --git a/images/vscode_c4plantuml_snippets.gif b/images/vscode_c4plantuml_snippets.gif index 6abfae8f..d16af2da 100644 Binary files a/images/vscode_c4plantuml_snippets.gif and b/images/vscode_c4plantuml_snippets.gif differ diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 69ac13f0..832b4427 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -8,20 +8,23 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml) -![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLF1Zjem4BqZyGzJBgKI2vUUUjfT6hKh0KKBgEefcZX3i71iP4yA_7t78Q51qDxiyPitxxsHdmEZvweq_Tu7RPMfSggyWHtp8NoPJ3mUnuNcNPLLWRnobidoMBboyguL-jmjD1t8JAQVdvO6BM_ciqc9WSbBAPr6_8d7Xvh_8rHMEajX0DuHR9qnxgXj0KPR0hGvt3nh7-JaG2Q3SGgDEKUILYRS3UZtPY-_VcpMwS-tzVTqbdnB5bzZbJKRWjLPP9NGj42kiV1OYWeFRrBobXXUqUwZe0iszYx91sU7gWhiIl8Z65mgQAxWQVCsaCSNQ97WjhMDJ50ZE4g6S6WxOmrGALTP3kF1ftxlCd2ONIZJK5-5xn_Awb4nlN2T5s9KlpKTGLlnL29hPm4pLzLnQdyxTLJdNUAUu83d6Ff5I2ibJKuyB56RlrgIftY7S5Mm5dkw5YYUvbfv5zoM8Jcf7Tg2WBeD7PijjztA0aY8vktvWSqLEqy1PFjjeaeAq2JrmEmra577B7kq0LM4oOrODMRVoNHsUnV_9b28G86bhwZs7UnjDYkoUMWCnqsqJGlInIvp_cwp_sclNS_NouRZKUirkLRWin387_W3 "System Context diagram for Internet Banking System") +![System Context diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/VL9DRnen4BtlhvXoAP48N7hgAGbTjP4WHGKKzRIQzGvWuRMHFGxmxplx6MXeR-lnUs_UUzw7mEWvbYRvfAqoiI3OCH_2ryd4ut6yrRoBUGpabRDCbiVAbHCil4RxPk8XJgPVxXS6BQ_diub1fi0oogOL-iJZGwNy6Q8LMYbqu1t1nXdZZjfkmMXBWBQ0gsljWtmvaBLWd49ZpgBH-_jRFfaz_lwvNcMlpwiVsIpzdhvy6zub2Mis1CjpO2gX9K2XSUkn50iUdcNaBJ4yeTrNRXfiaYp81sU7AWPs9VaH39e9cXuwRUy6Sla87HBSfawG2se4H-aE3XspcW4gvQBbC1xS9SssOTuePg4-Yjm_RDMRgjv2lovK9RrfEeAs4gX4riu2vYxMHMf_lNHKDrtYdk20vwhksaTh94jFF2nHctSdwNrrXj3lNqasNTkJG7Ejl0jkmv2Ur0xjbe0k2UyPEscxaUf9TERTzusCItQU0iYZTsqg6K1RqusaVHkZYwJiqGPK5KnEnAfE-elCnQj-Q7uTA0XCKDaJglq5zBgN9TaYj66hDsWvBwItkzpv3q_w7tQTUBvQD1Atc7rfhRi7eSjV_mS0 "System Context diagram for Internet Banking System") + ### Container Diagram Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) -![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") +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System") + ### Component Diagram Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml) -![Component diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/nPRhRzis4C2_-wyuPC0-9RFpzeh4g1ymrcBPWZZR2hJ5S1BFCbUA54WghhlaVnybognbMLYRj0ZpeHBlSRzxdEgNngAsUIewvWEN6MfCWT4SSs5lwQCT2fx8bAI5cAGblQ6rr9ZznPbTm56ljt6VuiShCWOJcl5F18Udcq9DiKMP289_E-3EpFaaPLSPJPMqtk2eb9W5ChNaCe4v2aETXqr0j1YXUPgJeTPgMNaOAw4q_71MdlAcyBJpDlX_s9NMnKMaSibGhmQ3DLsTeOsurmYmXN5Idl9sf3GZtNO_ioj1mD0iYBLHPgIDafwnmLCvdfOdO3HlHnX_I7IHRoNhzK-EpaTDnDxvyUXisiRYneoqHF7tzu4wwnT_JQZ-iFXhWp8hOodzrYo7XsVzqQJ9SZm-duvx_rkWxmFrStdQ2zHSlEUlJq1vxlAqzInspf5BqjyQv-IuFvcSVcM9dfccMPmqKvAaVGnEhpoxSVgdez6qryGvTwsQz5kByrmq2yu8J0ZM4PIGPA1vih2T-qke7VT-wvJWldD_KNrf1vK4_9VJY_ptBeZMsr7JyNisA1NyrlXxF-iDsvgERxct3NFbHJvXBmfLTIAIpAVMiTmAWd6GCOv9qOsvql1A5j78mWYbQrC2Cn_r08RNhs2OPOB7QBcIdJ1Ai7TvEUFbqpKcjAdqJdQx5uP_eXU7HuEt_-0TcbZpp09A1iuu5wZVNtGBZK6t-yxfmxLMTvoH0HG2x8A0hucYYcYUoxXmZeBR5LW5SMwiIaaRkEDOs70DIueWqcffIF-q1_NbGmCcmte2LohYecIlCx_153MNhP0WUCejCJ1vPCY2ia-0JZr4zG-ZEnxJBleKEzNcbEoJwhbEVaC2VKHOAy0iNb2AMydChD9a83UaGLF2ZTMb8N3f9Y8jd_TXKVwK0SmTghHLVo7Mn8fN56OVC8x9610gSIzaurteBDggExee6bFQ6hX0Las2cfTrZTr5gEa67s2aSXkAwc5KBgrxiXgbmRBwWQlv7vOlR6JgU5j33s_7wtJUEoVXTwQtnenNtwwjtKYasoieJBKIWdIzKLT_Zk66ZFsiiDMWeH1gwHjaYj4nXKCktUFkMVCPxK7zgugcD6po3QjAmInFKvVCeq73McmCzvBR1I0OvrhfLTL6halMqACcQX3jA2V5kUQsmAmiwfIpJ1T5616sRcrz6NMnACHyPMNY9siVuWNwbmoDMIhDml0qwreXDM7RnXkc62EZBoKVmhpK1oMhfgV1SRth3Jm_rTwyuFFJSt0m2DJmeY2z_CEGsIiqGkrBhM3SK0lsXHgBAlaD8OCVOUaa15RLCtmz6Oq_f-RTX03hS1k1wjPlhdxj_d9xUptRTF7GCHaMfZwnDjlNizz_QnW7qv3nrvcdZmwSFYdkIv8iJyL_ "Component diagram for Internet Banking System - API Application") +![Component diagram for Internet Banking System - API Application](https://www.plantuml.com/plantuml/png/fLN9Rjim4BthAwO-j3QGn9UUUggNj4cGnOYTBYTZHD4oMou25xj6qN_laB8bsGcA0Cqbr73uvisRH_gZysXzK39x8pIJeU2mzhvo7uP3YzkBKlXro8FZbXdjkVONpAWX5bQWtiXGXU7a_VbCelPFTxT3YPuxJw7bnAZAw9XVHUnt43GTL1G0l-QmCbAQhT0bIA4ve2xWQ5jOHoi3L1YaOIZbZZ0QXiyBPBUZxmzFY-NNwyNLylRoy-Nzj3_8CY-yfFH3BXG2IukAwbkufdwivXx6g7z6AlETyrp1EOncrp2gAYaOUc5qbaseToIYjkygF8FUdD89TuObxoRsQEi7Rj0nAogVka9T1easxioisOY2Ew1kKfVYG23V4rYHI147fV2xs3uBpXl5hOEDm7X6MDZo779hjZIIYzwWGqr5PdSc5pAHYYM_eK8hz75rabm9pmjm8NTKtVZ_OAFgUlj_1Ty8nezeJVD-aLFzANhCqV78vP5Bh97X48OvMtE5SNVkZIMUqNDWUIcSjocR6DBOL5gVmHhTcdh0G3oqtmy0cEL5_4JfpW0PuywHVqhwu9v5NlMCbvU_V5_bBWf6B5Ta2NvYWmwJE2-pIY8n2ZG2TVW0vYRuLg5Kt0JjQKNqjSCaPSkZ5MWvfhm2xQwFbQ2Y9-Rh3U1t1lJNcBZlHAcJ2KjD9eQ8PEa-yUIokoyJUAHBs8PZT1IlMwsfYwEC4CG_Bb-SlQir69nKRflgZVPBc0T59jkzYaPZmjPAMtfWo9EEK0oXr3gJiIAJHiHdH1ndmP8jempxPRkRHbVPsCUOux7xZqrjen79HKaHNTP3FGEsnlgZGkUsnXRjt8vfa8LMoB3W_p0IV4ePBv0QGNqOIA9w3gh1E1v4SamiJJTdF_wE0a-E7nIA--sGklHEajhZwNO-SYpWBMmfn4cDoEvcEfvq3dImwekJ0ECRG-_-rM8ncrFodonBuF6HtBlqa7OpVxXlyfgaZg5UJ4oPwXLewXLW7xakwBVYBm00 "Component diagram for Internet Banking System - API Application") + ## Supplementary Diagrams @@ -29,5 +32,24 @@ Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%2 Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc-landscape.puml) -![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") +![System Landscape diagram for Big Bank plc](https://www.plantuml.com/plantuml/png/TLHDRzim3BtxLt2vD0NIP8UTTcg-i1PBcg9EKFHaC8eS2v4bJvAR1iF--oWxTkpMySaY7yb7yadtrg5nUIg3Rq8ncUyu9CvbzkTePF0ut0kNvDlSSiEqSbov8TFf27T6e7gNUPQFfZ_kdYKgjrakHX8TjuvCqTIZFzmmyvbl85SKbb8uk8H3hANKHw7s88NYW6e7BRSmbluqK5cGcg6K9yfHy_kSFhXPZDzMctMqNZr7izNhK_-sDet3AFmzNqyVo7OslJwk7wB5_DVyQKR6m0adEOGdwtWA2-9Y6MOSTWBt1bFYQc0YzZ11TO1CiY1uviPgrMUvTJhbPW2zqeAo0FcsfcTVZvnZg92WuwA_BQ46SAJ9GbP5UXiWOpfNpWvxn6jE7PhC2CkZ2LbtQ4vzzfqIDjdqRk5l0FIL_FlRaa1aYoE17tqMnLrDhGGMnFmIRCtE-ec_2tu4eQZf59tG2d2hys8hmhGv3egrfNZWaE79xwwaVI4JpJzS7vrdCLulhrNqOzYHqe2XJNo6JmbI5FBIplpEdy7MJQnfdgBeaOQu5CnegsC7ym-MeDfpuCs0BeBaLZ4jcbEoPVNVCQtGQSCja1QhDJ8om7dW7JEhknmqPkOCAelCm-Z47QifbHegA5MH4TswTy4yiqfG49Oc21t6SQ_fEOF1UaynLg5gkLM3RLJP8Zj4EexB0XCwmQeuNNAFTwbGmXBfiYzQkCspJ1jtlSg_87ZXCdhYOfzijMbSao_Qt5XkASB3NnguKZAlPrtOGXZq553e6UovDl1jXOISRl1vxLvWVhwVAtGCU6mF5lxaz7hvrVWuBoukUPPenQiaioyNx7hn5kMNyY8qnTRglYDj5t3MeOqhq4rxmHseO84dobWGQzTl-wgIjuLnqxwH5-SzzKwlyNy0 "System Landscape diagram for Big Bank plc") + +### Dynamic Diagram + +Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sample%20-%20bigbankplc.puml) + +![C4_Dynamic Diagram Sample - bigbankplc](https://www.plantuml.com/plantuml/png/NPDDRnen48Rl_8ef9wW8g6rEbQg6ZwYX8WaAf5LFQDOxx5hrsgkn3K9H_tl71fhGs_XZvdtc7Vl61-GG6zDvfwqoiIIeGsZzvz68SJ-iTAXZ4JsnSZQG3KFbcX6MhD7kJ6pZQ7fzjJHem_FzOcGma0-ojPaTB3PQ3TjKkRCO_tfyNcz-pjTtcyNjjzk7MQ_VwKob8cfBF2jwwde0tHa6BD1JL-8dacBQMJHmteQLggd1TBeAZib3uWAcIll0-JPektNSv7W0DVgQIi0OQY7NwdX5CPLfYSOF09KYxy6uIXOKrB3RV-NggGz9IzlAqDKIAu9nsvfJdOJn7NUuKgpR06XB6Dig6kHqicItqwKWeZ7WjY04C1S3sLA00krlAGhRQDMnHnqE41oew8DhY3tiDAOSpR2d0WfsUsdr0cupST6Mo8TU8NhZvVm2hWyl7O2fQrfdfTcU-fGw8HKvIVtRprwsd60cXFQ2_98kpqFC54glAvioj5YiQhHLMhJe_Tvn-MhZXVp7R6HbnGH8BR0pXlYD_FsFgMZuyD_fs1XfFG_QdxL5E8KNbavEbguEFb2JvFzq17dpb6Tub8z5euD_EtyfayUuUdmOtQtNovNaILR6pOvDPNmUj1-_FY4gUtr83f_hoxtyUZqPKW7UmvPTSoBUryIKO_aE15_WQzQRJQQIVqEsbE_n5m00 "C4_Dynamic Diagram Sample - bigbankplc") + +### Deployment Diagram + +Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/png/rLPBRziu4BxhLypwaWSIkp62HT5J73lR96l7HkKqBR20CI9fcLkA54ZAhhVeV-zGiYChSO2cFQqFWZZcDuzlNhfm7gqlCXNz8JLJ1HUmy3vtxpeTYwjsAlsYI0edB3FQ2-tRp6GTv5QYNgeYBphzyzE9GktlHyEEGY-S9z5i879brba0v47v0HIQa440VY5WRfGoAwbJK58BGCsXyRUqZjuCa6LGXg5IQzBnwE8U2z71iFTvV3-TzU9P_FVLj7yTRGGFDzFhsV3g_TNTuF0eYhpqIa0DXu74r696FbcueI2j5XukKNy9xiLhvqK6fp2KIn55DMnsPxWup1KxWTQbJ4i0qB7rv0mSFG8JGN7hw5i4z7kgXMi29J9D27EAkJm-Flx7VtqRLDqdXVO5dFtPVdCEmscyLR5F3UR85e90lV85fYPZw5jF1V2s_NLNJVZrARj8cR2aH0R0v0PwUQuatPT61nstkCGoKN5k0pEZZ_qWdbYpb5ouvzJDAUK1Z4hwDImbeU4s7jzrhgVJIGnaejqwUlJYUrG_dmQseOOdRyvsY0h7rr9aB38LA1gNBvJNYPKPsdMhbfrrsOlq3993dj3L0IKrGIS2x8DGMCK9Mp74H7U6uT_O6qliX1O2ArBfl2rlWzHKS5dvVW8BT0l10GkgVkqth0EpWeSZAdS2o9XmZheXfOFmxFNaTPlaTN-DlEukUx6WkS1VoL_tVqPWialSIYHLUvx_MdjsVxC_oJu17aJoa_qv48ecbtNbNALXJzp0PfQNjuFuMUiwUb0cSqnfDjTczZ7s_VbGp4nmiLyuRp9X3noGG98wBfQIYIhUdCutunXevlOqjqRoRSXrg1MCheygFA42-1DImqhT63v8UoIJdYh05OcZICnyVsJDeKGRXctSTEM48eoqJNz3q7k2f7MLDwCCaY9C-U2nf8NfpDp3WzJSh5nmg8ewGpQENze4YQMxmcuoV5cTWiBtneICz1UMh9t0oFmdbKBuIrenDurogVbpEOR-gN8v2RdSKp8nipAlIg6dqqAXRHAhrEznIVKAcwYsvLCM3JNzOuAhdJF2BsGmR9wmxwbWJV3aNsTqjJ487K1bLAz2b2rJaL5tWobZOdNwTXpTu4eZvRZ_890xc1Ft9L4hIwMsDNSxkEmt0TsVHmJjMq2L6hfLVZ7GLVfOkH2QqzVD3m00 "Deployment Diagram for Internet Banking System - Live") + + +## Icons + +Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) + +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDSzis4BthLspLGvKPofnEcqjEaIMrTcfz9AJZzCHPaf241WHO09IYwVI_Tm6H52dPJJfJduZ5VZoyVRloMsDHsweGW--up4ILCzXPMvetOQZnSBFbTbUbbM4wKz8oQMyoLOIOQuvoBwgo2gS_ZzS2fNrSF8G2BJEMJCcKl95BfczAdpjd6ph1RFxnVhfQHjzGmrObbVafB5rooZ7cT3lUaCVOb9fJeR10OvaESxPtTwQjyijg6K-Uvj5gCVzV2taR7fXH1Hk_7lm0bQG41IK2ksEmKKAe0vTR40u5oXnwrrmR-b90042e38KuKewMzcTOQwuQsaAKsqhWYzUvifBPbsx_m3s-T5UOFqL2nEolQdV83B_gmEIU2LMoamkzxc7o--enJkBLEfcjdfQZLsVR94gYt-Rnz8wCjUdfFhvB7kQ_pfSpCWuiju9uQKY1dEDMOq54QxYd1cfwBDoY_EmuZuxKes8mM3Djb1nbbR7K9Xt0jFqQJg0nWzhufgGK7S21X06b3qJXRO1PfYffpP1md58djsJ8KHz7sO-KwnB0y1NyDG3wQ_6E3YnDi2p9-OcbC2bBmJEqNCaXcTvHDmA8I644Vl5nwcmp9ZWHR3mq6apBCwYbwkNap6tTj7duUk9YNNS9R1-1AQd6C28tmSPht3A7egaUPPgNDe39ILJElDPgptDcWCJvVBKDQTuz0GMtHwVchFA46jXpT25S0xqRKgqE91UNj1Rj5RX2fLomcg65FpJmfjy7y0aB97Bwi6Yq2Xh974oL6e9Lj_5RO9ehd2S0uFS7StLEytC9T9QEShIOec6kH_Mdyu_UFq3lR9Kcb6x3W6PRRgn60W5SacGBt_e0TkIS0rOakKopd7hBKPZ0AOuPGvjXImTcinkNiJENL_obc7rcCYS2kTFs-lvvYSqKkUbpN8_Ghn3dkAB4BgG5yNSx4FClTiGAv8JG6yXhFbxGkHv65nPJTxWlGfEru9bMHcqipBzaEz85gRprR7O7bUZaht6TAr1-kQ4jm2uclyE_4syjZ8mCxTiwRG1CLMNFgWZQWG-0cYODUXQQJj0I-C14PwcSH_lHCEDgtyNnEYB7ljzf0F_TfpS7tlLKBbaoljsbghD8JkcQDL5dyiQ-69g2Q8uo2-1Tj5g6tUBTalyfChabxpEmyrpqitnWc1lOQ5NulNNmFwCqXbv8fyIpssdpJfUpmyU5f29AQu2DdTNdE0EvK5yVGp-kCcv7j-MZHRok4xMFwOLVwQuXniM7DJkVw7-UXfot54e_Uly0 "Container diagram for Internet Banking System") diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 491a725a..df55e42c 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -1,9 +1,9 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Component.puml ' uncomment the following line and comment the first to use locally ' !include C4_Component.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title Component diagram for Internet Banking System - API Application diff --git a/samples/C4_Container Diagram Sample - bigbankplc-icons.puml b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 00000000..9b286b03 --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,45 @@ +@startuml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.puml + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +title Container diagram for Internet Banking System + +Person(customer, Customer, "A customer of the bank, with personal bank accounts") + +System_Boundary(c1, "Internet Banking") { + Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +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") +Rel(customer, mobile_app, "Uses") + +Rel_Neighbor(web_app, spa, "Delivers") +Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") +@enduml \ No newline at end of file diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 56dccd9c..81e6d86e 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,11 +1,11 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index d8485ff7..cee85180 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,14 +1,14 @@ -@startuml "bigbankplc" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +@startuml "messagebus" +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml skinparam wrapWidth 200 skinparam maxMessageSize 200 -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, Customer, "A customer") diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index dbd05697..60451972 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,11 +1,11 @@ @startuml "techtribesjs" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person_Ext(anonymous_user, "Anonymous User") @@ -34,11 +34,11 @@ Rel(anonymous_user, web_app, "Uses", "HTTPS") Rel(aggregated_user, web_app, "Uses", "HTTPS") Rel(administration_user, web_app, "Uses", "HTTPS") -Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") Rel(web_app, filesystem, "Reads from") Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") -Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306") +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") Rel_U(updater, filesystem, "Writes to") Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") diff --git a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml index a4b3f4b7..111e3094 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -1,11 +1,11 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -'LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title System Landscape diagram for Big Bank plc diff --git a/samples/C4_Context Diagram Sample - bigbankplc.puml b/samples/C4_Context Diagram Sample - bigbankplc.puml index 70778cd2..5c298dec 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -1,9 +1,9 @@ @startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title System Context diagram for Internet Banking System diff --git a/samples/C4_Context Diagram Sample - enterprise.puml b/samples/C4_Context Diagram Sample - enterprise.puml index c58f636d..68426c51 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -1,11 +1,11 @@ @startuml "enterprise" -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +LAYOUT_TOP_DOWN() +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, "Customer", "A customer of Widgets Limited.") diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 00000000..54624cc6 --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -0,0 +1,51 @@ +@startuml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Deployment.puml +' uncomment the following line and comment the first to use locally +' !include C4_Deployment.puml + +'LAYOUT_AS_SKETCH +LAYOUT_WITH_LEGEND() + +title Deployment Diagram for Internet Banking System - Live + +Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){ + Deployment_Node(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.") + } + } + Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){ + Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){ + ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS"){ + Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c"){ + ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") + } + } + Deployment_Node(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){ + Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){ + Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.") + } + } +} + +Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){ + Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.") +} + +Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){ + Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox"){ + Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.") + } +} + +Rel(mobile, api, "Makes API calls to", "json/HTTPS") +Rel(spa, api, "Makes API calls to", "json/HTTPS") +Rel(web, spa, "Delivers to the customer's web browser") +Rel(api, db, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(db, db2, "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..6b6a8b96 --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -0,0 +1,15 @@ +@startuml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Dynamic.puml + +LAYOUT_WITH_LEGEND() + +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_R(c1, c2, "Submits credentials to", "JSON/HTTPS") +Rel(c2, c3, "Calls isAuthenticated() on") +Rel_R(c3, c4, "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..c0094f8a --- /dev/null +++ b/samples/C4_Dynamic Diagram Sample - message bus.puml @@ -0,0 +1,35 @@ +@startuml +!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Dynamic.puml + +LAYOUT_TOP_DOWN() +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") +} + +Rel(customer, app, "Updates his profile using", "HTTPS") +Rel(app, customer_service, "Updates customer information using", "JSON/HTTPS") +Rel(customer_service, customer_db, "Stores data in", "JDBC") + +RelIndex($index-1, customer_service, message_bus, "Sends customer update events to", "async") +RelIndex($index-2, customer_service, app, "Confirm update to", "async") +increment() + +RelIndex($index-1, message_bus, reporting_service, "Sends customer update events to", "async") +increment() +RelIndex($index-1, reporting_service, reporting_db, "Stores data in") + +setIndex(5) +RelIndex($index-2, message_bus, audit_service, "Sends customer update events to", "async") +increment() +RelIndex($index-2, audit_service, audit_store, "Stores events in") +@enduml \ No newline at end of file