Merge branch 'master' into intellij_live_template

pull/59/head
Ben Peachey 5 years ago committed by GitHub
commit 0b1211c5dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

18
.github/stale.yml vendored

@ -0,0 +1,18 @@
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
- not-stale
- pinned
- security
# Label to use when marking an issue as stale
staleLabel: stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
activity in the past 60 days. It will be closed in seven days if no
further activity occurs. Thank you for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false

@ -0,0 +1,26 @@
name: Percy Tests
on:
push:
paths:
- '*.puml'
- 'percy/**'
- '.github/workflows/run-percy-tests.yml'
pull_request:
branches:
- '**'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup Graphviz
uses: ts-graphviz/setup-graphviz@v1
- name: Process diagrams
uses: Timmy/plantuml-action@v1
with:
args: '-v percy -o _parsed -DRELATIVE_INCLUDE="."'
- name: Upload
run: npx percy upload percy/_parsed
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

@ -1,66 +1,198 @@
{
"C4_Include_Context": {
"scope": "plantuml",
"prefix": "Include C4 Context Diagram",
"body": [
"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml"
],
"description": "Include C4 Context Diagram"
},
"C4_Include_Container": {
"scope": "plantuml",
"prefix": "Include C4 Container Diagram",
"body": [
"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml"
],
"description": "Include C4 Container Diagram"
},
"C4_Include_Component": {
"scope": "plantuml",
"prefix": "Include C4 Component Diagram",
"body": [
"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml"
],
"description": "Include C4 Component Diagram"
},
"C4_Include_Deployment": {
"scope": "plantuml",
"prefix": "Include C4 Deployment Diagram",
"body": [
"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml"
],
"description": "Include C4 Deployment Diagram"
},
"C4_Include_Dynamic": {
"scope": "plantuml",
"prefix": "Include C4 Dynamic Diagram",
"body": [
"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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_Container_Ext": {
"scope": "plantuml",
"prefix": [
"External Container",
"Container (External)"
],
"body": [
"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Container to C4 diagram"
},
"C4_Container_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Container with Description",
"Container (External) with Description"
],
"body": [
"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Container with Description to C4 diagram"
},
"C4_ContainerDb": {
"scope": "plantuml",
"prefix": "Database Container",
"body": [
"ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add Database Container to C4 diagram"
},
"C4_ContainerDb_Descr": {
"scope": "plantuml",
"prefix": "Database Container with Description",
"body": [
"ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add Database Container with Description to C4 diagram"
},
"C4_ContainerDb_Ext": {
"scope": "plantuml",
"prefix": [
"External Database Container",
"Database Container (External)"
],
"body": [
"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Database Container to C4 diagram"
},
"C4_ContainerDb_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Database Container with Description",
"Database Container (External) with Description"
],
"body": [
"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Database Container with Description to C4 diagram"
},
"C4_ContainerQueue": {
"scope": "plantuml",
"prefix": "Queue Container",
"body": [
"ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add Queue Container to C4 diagram"
},
"C4_ContainerQueue_Descr": {
"scope": "plantuml",
"prefix": "Queue Container with Description",
"body": [
"ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add Queue Container with Description to C4 diagram"
},
"C4_ContainerQueue_Ext": {
"scope": "plantuml",
"prefix": [
"External Queue Container",
"Queue Container (External)"
],
"body": [
"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Queue Container to C4 diagram"
},
"C4_ContainerQueue_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Queue Container with Description",
"Queue Container (External) with Description"
],
"body": [
"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add ExternalQueue Container with Description to C4 diagram"
},
"C4_Container_Boundary": {
"scope": "diagram",
"scope": "plantuml",
"prefix": [
"Container Boundary",
"Boundary for Container"
@ -73,67 +205,235 @@
"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_Component_Ext": {
"scope": "plantuml",
"prefix": [
"External Component",
"Component (External)"
],
"body": [
"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Component to C4 diagram"
},
"C4_Component_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Component with Description",
"Component (External) with Description"
],
"body": [
"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Component with Description to C4 diagram"
},
"C4_ComponentDb": {
"scope": "plantuml",
"prefix": "Database Component",
"body": [
"ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add Database Component to C4 diagram"
},
"C4_ComponentDb_Descr": {
"scope": "plantuml",
"prefix": "Database Component with Description",
"body": [
"ComponentDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add Database Component with Description to C4 diagram"
},
"C4_ComponentDb_Ext": {
"scope": "plantuml",
"prefix": [
"External Database Component",
"Database Component (External)"
],
"body": [
"ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Database Component to C4 diagram"
},
"C4_ComponentDb_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Database Component with Description",
"Database Component (External) with Description"
],
"body": [
"ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Database Component with Description to C4 diagram"
},
"C4_ComponentQueue": {
"scope": "plantuml",
"prefix": "Queue Component",
"body": [
"ComponentQueue(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add Queue Component to C4 diagram"
},
"C4_ComponentQueue_Descr": {
"scope": "plantuml",
"prefix": "Queue Component with Description",
"body": [
"ComponentQueue(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add Queue Component with Description to C4 diagram"
},
"C4_ComponentQueue_Ext": {
"scope": "plantuml",
"prefix": [
"External Queue Component",
"Queue Component (External)"
],
"body": [
"ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Queue Component to C4 diagram"
},
"C4_ComponentQueue_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Queue Component with Description",
"Queue Component (External) with Description"
],
"body": [
"ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Queue 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_SystemDb": {
"scope": "plantuml",
"prefix": "Database System",
"body": [
"SystemDb(${1:alias}, \"${2:label}\")"
],
"description": "Add Database System to C4 diagram"
},
"C4_SystemDb_Descr": {
"scope": "plantuml",
"prefix": "Database System with Description",
"body": [
"SystemDb(${1:alias}, \"${2:label}\", \"${3:description}\")"
],
"description": "Add Database System with Description to C4 diagram"
},
"C4_SystemDb_Ext": {
"scope": "plantuml",
"prefix": [
"External Database System",
"Database System (External)"
],
"body": [
"SystemDb_Ext(${1:alias}, \"${2:label}\")"
],
"description": "Add External Database System to C4 diagram"
},
"C4_SystemDb_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Database System with Description",
"Database System (External) with Description"
],
"body": [
"SystemDb_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")"
],
"description": "Add External Database System with Description to C4 diagram"
},
"C4_SystemQueue": {
"scope": "plantuml",
"prefix": "Queue System",
"body": [
"SystemQueue(${1:alias}, \"${2:label}\")"
],
"description": "Add Queue System to C4 diagram"
},
"C4_SystemQueue_Descr": {
"scope": "plantuml",
"prefix": "Queue System with Description",
"body": [
"SystemQueue(${1:alias}, \"${2:label}\", \"${3:description}\")"
],
"description": "Add Queue System with Description to C4 diagram"
},
"C4_SystemQueue_Ext": {
"scope": "plantuml",
"prefix": [
"External Queue System",
"Queue System (External)"
],
"body": [
"SystemQueue_Ext(${1:alias}, \"${2:label}\")"
],
"description": "Add External Queue System to C4 diagram"
},
"C4_SystemQueue_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Queue System with Description",
"Queue System (External) with Description"
],
"body": [
"SystemQueue_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")"
],
"description": "Add External Queue System with Description to C4 diagram"
},
"C4_System_Boundary": {
"scope": "diagram",
"scope": "plantuml",
"prefix": [
"System Boundary",
"Boundary for System"
@ -146,7 +446,7 @@
"description": "Add a System Boundary to C4 diagram"
},
"C4_Enterprise_Boundary": {
"scope": "diagram",
"scope": "plantuml",
"prefix": [
"Enterprise Boundary",
"Boundary for Enterprise"
@ -159,43 +459,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}\"){",
@ -205,7 +533,7 @@
"description": "Add a generic boundary to C4 diagram."
},
"C4_Boundary_Type": {
"scope": "diagram",
"scope": "plantuml",
"prefix": [
"Boundary with type"
],
@ -215,5 +543,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."
}
}

@ -1,21 +1,34 @@
' C4-PlantUML, version 1.0.0
' https://github.com/RicardoNiepel/C4-PlantUML
' C4-PlantUML
' Colors
' ##################################
!define ELEMENT_FONT_COLOR #FFFFFF
!global $ELEMENT_FONT_COLOR = "#FFFFFF"
!global $ARROW_COLOR = "#666666"
!global $BOUNDARY_COLOR = "#444444"
!global $BOUNDARY_BG_COLOR = "#FFFFFF"
!global $LEGEND_FONT_COLOR = "#FFFFFF"
!global $LEGEND_TITLE_COLOR = "#000000"
!global $LEGEND_UNDEFINED_BK_COLOR = "#87AECA"
!global $LEGEND_UNDEFINED_FONT_COLOR = "#B7DEFA"
' 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
@ -26,81 +39,461 @@ skinparam database {
shadowing false
}
skinparam queue {
StereotypeFontSize 12
shadowing false
}
skinparam Arrow {
Color #666666
FontColor #666666
Color $ARROW_COLOR
FontColor $ARROW_COLOR
FontSize 12
}
' Some boundary skinparam have to be set a package skinparams too (PlantUML uses internal packages)
skinparam package {
StereotypeFontSize 6
StereotypeFontColor $BOUNDARY_BG_COLOR
FontStyle plain
BackgroundColor $BOUNDARY_BG_COLOR
}
skinparam rectangle<<boundary>> {
Shadowing false
StereotypeFontSize 0
FontColor #444444
BorderColor #444444
StereotypeFontSize 6
StereotypeFontColor $BOUNDARY_BG_COLOR
FontColor $BOUNDARY_COLOR
BorderColor $BOUNDARY_COLOR
BackgroundColor $BOUNDARY_BG_COLOR
BorderStyle dashed
}
' Legend and Tags
' ##################################
!global $tagDefaultLegend = ""
!global $tagCustomLegend = ""
!unquoted function $toStereos($elementType, $tags)
!if (%strlen($tags) == 0)
!$stereos = '<<' + $elementType + '>>'
%set_variable_value("$" + $elementType + "Legend", %true())
!return $stereos
!endif
!$stereos = ''
!$brPos = %strpos($tags, "+")
!while ($brPos >= 0)
!$tag = %substr($tags, 0, $brPos)
!$stereos = $stereos + '<<' + $tag + '>>'
%set_variable_value("$" + $tag + "Legend", %true())
!$tags = %substr($tags, $brPos+1)
!$brPos = %strpos($tags, "+")
!endwhile
!if (%strlen($tags)>0)
!$stereos = $stereos + '<<' + $tags + '>>'
%set_variable_value("$" + $tags + "Legend", %true())
!endif
' has to be last, otherwise PlantUML overwrites all tag specific skinparams
!$stereos = $stereos + '<<' + $elementType + '>>'
%set_variable_value("$" + $elementType + "Legend", %true())
!return $stereos
!endfunction
!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$elementSkin = "skinparam " + $element +"<<" + $tagStereo + ">> {" + %newline()
!if ($fontColor!="")
!if ($tagStereo != "boundary")
!$elementSkin = $elementSkin + " StereotypeFontColor " + $fontColor + %newline()
!endif
!$elementSkin = $elementSkin + " FontColor " + $fontColor + %newline()
!endif
!if ($bgColor!="")
!$elementSkin = $elementSkin + " BackgroundColor " + $bgColor + %newline()
!endif
!if ($borderColor!="")
!$elementSkin = $elementSkin + " BorderColor " + $borderColor+ %newline()
!endif
!if ($shadowing == "true")
!$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "true" + %newline()
!endif
!if ($shadowing == "false")
!$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "false" + %newline()
!endif
!$elementSkin = $elementSkin + "}" + %newline()
!return $elementSkin
!endfunction
!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!if ($tagStereo == "boundary" && $bgColor!="")
!$tagSkin = $tagSkin + "skinparam package<<boundary>>StereotypeFontColor " + $bgColor + %newline()
!$tagSkin = $tagSkin + "skinparam rectangle<<boundary>>StereotypeFontColor " + $bgColor + %newline()
!endif
$tagSkin
!endprocedure
!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$tagEntry = "|"
!if ($bgColor!="")
!$bg = $bgColor
!else
!$bg = $LEGEND_UNDEFINED_BK_COLOR
!endif
' named colors have to start with # too
!if (%substr($bg, 0, 1) != "#")
!$bg = "#" + $bg
!endif
!$tagEntry = $tagEntry + "<" + $bg +">"
' <U+25AF> ..white rectangle
!if ($borderColor!="")
!$tagEntry = $tagEntry + "<color:"+$borderColor+"> <U+25AF></color> "
!else
!$tagEntry = $tagEntry + "<color:"+$bg+"> <U+25AF></color> "
!endif
!if ($fontColor!="")
!$tagEntry = $tagEntry + "<color:"+$fontColor+">"
!else
!$tagEntry = $tagEntry + "<color:"+$LEGEND_UNDEFINED_FONT_COLOR+">"
!endif
!$tagEntry = $tagEntry + " " + $tagStereo + " "
!if ($shadowing == "true")
!$tagEntry = $tagEntry + "(shadow) "
!endif
!if ($shadowing == "false")
!$tagEntry = $tagEntry + "(no shadow) "
!endif
!if ($fontColor == "" && $bgColor == "")
!$tagEntry = $tagEntry + "(no font, no back color) "
!else
!if ($fontColor == "")
!$tagEntry = $tagEntry + "(no font color) "
!endif
!if ($bgColor == "")
!$tagEntry = $tagEntry + "(no back color) "
!endif
!endif
!$tagEntry = $tagEntry + "</color> "
!$tagEntry = $tagEntry + "|"
!return $tagEntry
!endfunction
!unquoted procedure $addTagToDynamicLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
!$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry)
!$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n"
!endprocedure
!procedure $showActiveLegendEntries($allDefined)
!$brPos = %strpos($allDefined, "\n")
!while ($brPos >= 0)
!$tagStereo = %substr($allDefined, 0, $brPos)
!$allDefined = %substr($allDefined, $brPos+2)
!$brPos = %strpos($allDefined, "\n")
!if (%variable_exists("$" + $tagStereo + "Legend"))
%get_variable_value("$" + $tagStereo + "LegendEntry")
!endif
!endwhile
!if (%strlen($allDefined)>0)
!$tagStereo = $allDefined
!if (%variable_exists("$" + $tagStereo + "Legend"))
%get_variable_value("$" + $tagStereo + "LegendEntry")
!endif
!endif
!endprocedure
' used by new defined tags
!unquoted procedure AddTagSupport($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
$addTagToDynamicLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!endprocedure
' used by existing elements like person, ...
!unquoted procedure UpdateSkinparamsAndLegendEntry($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
!$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry)
!endprocedure
' tags/stereotypes have to be delimited with \n
!unquoted procedure SetDefaultLegendEntries($tagStereoEntries)
!$tagDefaultLegend = $tagStereoEntries
!endprocedure
' Element properties
' ##################################
' collect all defined properties as table rows
!global $propTable = ""
!global $propTableCaption = ""
!global $propColCaption = "="
!unquoted function SetPropertyHeader($col1Name, $col2Name, $col3Name = "", $col4Name = "")
!$propColCaption = ""
!$propTableCaption = "|= " + $col1Name + " |= " + $col2Name + " |"
!if ($col3Name != "")
!$propTableCaption = $propTableCaption + "= " + $col3Name + " |"
!endif
!if ($col4Name != "")
!$propTableCaption = $propTableCaption + "= " + $col4Name + " |"
!endif
!return ""
!endfunction
!unquoted function WithoutPropertyHeader()
!$propTableCaption = ""
!$propColCaption = "="
!return ""
!endfunction
!unquoted function AddProperty($col1, $col2, $col3 = "", $col4 = "")
!if ($propTable == "")
!if ($propTableCaption != "")
!$propTable = $propTableCaption + "\n"
!endif
!else
!$propTable = $propTable + "\n"
!endif
!$propTable = $propTable + "| " + $col1 + " |" + $propColCaption + " " + $col2 + " |"
!if ($col3 != "")
!$propTable = $propTable + " " + $col3 + " |"
!endif
!if ($col4 != "")
!$propTable = $propTable + " " + $col4 + " |"
!endif
!return ""
!endfunction
!unquoted function $getProps($alignedNL = "\n")
!if ($propTable != "")
!$retTable = $alignedNL + $propTable
!$propTable = ""
!return $retTable
!endif
!return ""
!endfunction
!unquoted function $getProps_L()
!return $getProps("\l")
!endfunction
!unquoted function $getProps_R()
!return $getProps("\r")
!endfunction
SetPropertyHeader("Property","Value")
' 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 <font color=red>Warning:</font> 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
' has to be last call in diagram
!unquoted procedure SHOW_DYNAMIC_LEGEND($hideStereotype="true")
!if ($hideStereotype=="true")
hide stereotype
!endif
legend right
|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
$showActiveLegendEntries($tagDefaultLegend)
$showActiveLegendEntries($tagCustomLegend)
endlegend
!endprocedure
' Boundaries
' ##################################
!define Boundary(e_alias, e_label) rectangle "==e_label" <<boundary>> as e_alias
!define Boundary(e_alias, e_label, e_type) rectangle "==e_label\n<size:TECHN_FONT_SIZE>[e_type]</size>" <<boundary>> as e_alias
!function $getBoundary($label, $type)
!if ($type == "")
!return '==' + $label
!endif
!if (type != "")
!return '==' + $label + '\n<size:' + $TECHN_FONT_SIZE + '>[' + $type + ']</size>'
!endif
!endfunction
!unquoted procedure Boundary($alias, $label, $type="", $tags="")
rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias
!endprocedure
' Relationship
' ##################################
!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label"
!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//"
!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//<size:$TECHN_FONT_SIZE>[$techn]</size>//
!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
!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, "-->")
!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
!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, "<--")
!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
!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, "->")
!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
!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, "<-")
!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
!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)
!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
!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)
!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
!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)
!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
!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 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
!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

@ -1,6 +1,9 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
' Scope: A single container.
' Primary elements: Components within the container in scope.
@ -10,46 +13,77 @@
' Colors
' ##################################
!define COMPONENT_BG_COLOR #85BBF0
!global $COMPONENT_FONT_COLOR = "#000000"
!global $COMPONENT_BG_COLOR = "#85BBF0"
!global $COMPONENT_BORDER_COLOR = "#78A8D8"
!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC"
!global $EXTERNAL_COMPONENT_BORDER_COLOR = "#BFBFBF"
' Styling
' ##################################
skinparam rectangle<<component>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor #000000
BackgroundColor COMPONENT_BG_COLOR
BorderColor #78A8D8
}
skinparam database<<component>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor #000000
BackgroundColor COMPONENT_BG_COLOR
BorderColor #78A8D8
}
UpdateSkinparamsAndLegendEntry("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR)
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<CONTAINER_BG_COLOR> | container |
|<COMPONENT_BG_COLOR> | component |
|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
|<$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 |
|<$EXTERNAL_CONTAINER_BG_COLOR> external container |
|<$EXTERNAL_COMPONENT_BG_COLOR> external component |
endlegend
!enddefinelong
!endprocedure
' Elements
' ##################################
!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
!function $getComponent($label, $techn, $descr, $sprite)
!if ($descr == "") && ($sprite == "")
!return '=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//'
!endif
!if ($descr == "") && ($sprite != "")
!return '<$'+$sprite+'>\n=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//'
!endif
!if ($descr != "") && ($sprite == "")
!return '=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//\n\n '+$descr
!endif
!if ($descr != "") && ($sprite != "")
!return '<$'+$sprite+'>\n=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//\n\n '+$descr
!endif
!endfunction
!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure
!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure
!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure
!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure
!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure
!define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
!define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure

@ -1,6 +1,9 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
' uncomment the following line and comment the first to use locally
' !include C4_Context.puml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Context.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!endif
' Scope: A single software system.
' Primary elements: Containers within the software system in scope.
@ -10,50 +13,79 @@
' Colors
' ##################################
!define CONTAINER_BG_COLOR #438DD5
!global $CONTAINER_BG_COLOR = "#438DD5"
!global $CONTAINER_BORDER_COLOR = "#3C7FC0"
!global $EXTERNAL_CONTAINER_BG_COLOR = "#B3B3B3"
!global $EXTERNAL_CONTAINER_BORDER_COLOR = "#A6A6A6"
' Styling
' ##################################
skinparam rectangle<<container>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor CONTAINER_BG_COLOR
BorderColor #3C7FC0
}
skinparam database<<container>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor CONTAINER_BG_COLOR
BorderColor #3C7FC0
}
UpdateSkinparamsAndLegendEntry("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR)
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<CONTAINER_BG_COLOR> | container |
|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
|<$PERSON_BG_COLOR> person |
|<$SYSTEM_BG_COLOR> system |
|<$CONTAINER_BG_COLOR> container |
|<$EXTERNAL_PERSON_BG_COLOR> external person |
|<$EXTERNAL_SYSTEM_BG_COLOR> external system |
|<$EXTERNAL_CONTAINER_BG_COLOR> external container |
endlegend
!enddefinelong
!endprocedure
' Elements
' ##################################
!define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
!function $getContainer($label, $techn, $descr, $sprite)
!if ($descr == "") && ($sprite == "")
!return '=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//'
!endif
!if ($descr == "") && ($sprite != "")
!return '<$'+$sprite+'>\n=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//'
!endif
!if ($descr != "") && ($sprite == "")
!return '=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//\n\n '+$descr
!endif
!if ($descr != "") && ($sprite != "")
!return '<$'+$sprite+'>\n=='+$label+'\n//<size:'+$TECHN_FONT_SIZE+'>['+$techn+']</size>//\n\n '+$descr
!endif
!endfunction
!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure
!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure
!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure
!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure
!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure
!define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
!define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure
' Boundaries
' ##################################
!define Container_Boundary(e_alias, e_label) Boundary(e_alias, e_label, "Container")
!unquoted procedure Container_Boundary($alias, $label, $tags="")
Boundary($alias, $label, "Container", $tags)
!endprocedure

@ -1,6 +1,9 @@
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml
' uncomment the following line and comment the first to use locally
' !include C4.puml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!endif
' Scope: A single software system.
' Primary elements: The software system in scope.
@ -10,93 +13,233 @@
' 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 $PERSON_BORDER_COLOR = "#073B6F"
!global $EXTERNAL_PERSON_BG_COLOR = "#686868"
!global $EXTERNAL_PERSON_BORDER_COLOR = "#8A8A8A"
!global $SYSTEM_BG_COLOR = "#1168BD"
!global $SYSTEM_BORDER_COLOR = "#3C7FC0"
!global $EXTERNAL_SYSTEM_BG_COLOR = "#999999"
!global $EXTERNAL_SYSTEM_BORDER_COLOR = "#8A8A8A"
' Styling
' ##################################
skinparam rectangle<<person>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor PERSON_BG_COLOR
BorderColor #073B6F
}
skinparam rectangle<<external_person>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_PERSON_BG_COLOR
BorderColor #8A8A8A
}
UpdateSkinparamsAndLegendEntry("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR)
skinparam rectangle<<system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor SYSTEM_BG_COLOR
BorderColor #3C7FC0
}
skinparam rectangle<<external_system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
}
' Sprites
' ##################################
skinparam database<<system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor SYSTEM_BG_COLOR
BorderColor #3C7FC0
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
}
skinparam database<<external_system>> {
StereotypeFontColor ELEMENT_FONT_COLOR
FontColor ELEMENT_FONT_COLOR
BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
BorderColor #8A8A8A
sprite $person2 [48x48/16] {
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000002578888300000000005888864100000000000
0000000007DFFFFFFFFD9643347BFFFFFFFFFB4000000000
00000004EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB10000000
0000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD2000000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
00003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
0000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF50000
0003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD0000
0009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF2000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
0009FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF2000
0003FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFD0000
0000BFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFF50000
00003FFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFB00000
000006FFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFE100000
0000007FFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFD2000000
00000004EFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFB10000000
0000000007DF8FFFFFFFFFFFFFFFFFFFFFF8FB4000000000
000000000002578888888888888888888864100000000000
}
' Layout
' ##################################
!definelong LAYOUT_WITH_LEGEND
SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
|= |= Type |
|<PERSON_BG_COLOR> | person |
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|<SYSTEM_BG_COLOR> | system |
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
|<$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" <<person>> as e_alias
!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<person>> as e_alias
!global $defaultPersonSprite = "person"
!define Person_Ext(e_alias, e_label) rectangle "==e_label" <<external_person>> as e_alias
!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_person>> as e_alias
!procedure HIDE_PERSON_SPRITE()
!$defaultPersonSprite = ""
!endprocedure
!define System(e_alias, e_label) rectangle "==e_label" <<system>> as e_alias
!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<system>> as e_alias
!unquoted procedure SHOW_PERSON_SPRITE($sprite="")
!if ($sprite == "")
!$defaultPersonSprite = "person"
!else
!$defaultPersonSprite = $sprite
!endif
!endprocedure
!define System_Ext(e_alias, e_label) rectangle "==e_label" <<external_system>> as e_alias
!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_system>> as e_alias
!define SystemDb(e_alias, e_label) database "==e_label" <<system>> as e_alias
!define SystemDb(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <<system>> as e_alias
' Elements
' ##################################
!define SystemDb_Ext(e_alias, e_label) database "==e_label" <<external_system>> as e_alias
!define SystemDb_Ext(e_alias, e_label, e_descr) database "==e_label\n\n e_descr" <<external_system>> as e_alias
!function $getPerson($label, $descr, $sprite)
!if ($sprite == "") && ($defaultPersonSprite!="")
!$sprite = $defaultPersonSprite
!endif
!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
!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="", $tags="")
rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias
!endprocedure
!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias
!endprocedure
!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias
!endprocedure
!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias
!endprocedure
!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="", $tags="")
database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias
!endprocedure
!unquoted procedure SystemQueue($alias, $label, $descr="", $sprite="", $tags="")
queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias
!endprocedure
!unquoted procedure SystemDb_Ext($alias, $label, $descr="", $sprite="", $tags="")
database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias
!endprocedure
!unquoted procedure SystemQueue_Ext($alias, $label, $descr="", $sprite="", $tags="")
queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) 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")
!unquoted procedure Enterprise_Boundary($alias, $label, $tags="")
Boundary($alias, $label, "Enterprise", $tags)
!endprocedure
!unquoted procedure System_Boundary($alias, $label, $tags="")
Boundary($alias, $label, "System", $tags)
!endprocedure

@ -0,0 +1,178 @@
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
' Colors
' ##################################
!global $NODE_FONT_COLOR = "#000000"
!global $NODE_BG_COLOR = "#FFFFFF"
!global $NODE_BORDER_COLOR = "#A2A2A2"
' Styling
' ##################################
' orig was without background
'UpdateSkinparamsAndLegendEntry("node", $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR)
UpdateSkinparamsAndLegendEntry("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR)
skinparam rectangle<<node>> {
FontStyle normal
}
' Layout
' ##################################
' comment if node should not be added to legend. No dynamic legend extension required
SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode")
' Special
' ##################################
' PlantUML supports no automatic line breaks of "PlantUML containers" (C4 Deployment_Node is a "PlantUML container")
' therefore Deployment_Node() implements an automatic line break based on spaces (like in all other objects).
' If a $type contains \n then the these are used (and no automatic space based line breaks are done)
' $NODE_TYPE_MAX_CHAR_WIDTH defines the automatic line break position
!global $NODE_TYPE_MAX_CHAR_WIDTH = 35
!global $NODE_DESCR_MAX_CHAR_WIDTH=32
' Elements
' ##################################
!unquoted function $breakType($type, $widthStr)
!$width = %intval($widthStr)
!$multiLine = ""
!if (%strpos($type, "\n") >= 0)
!while (%strpos($type, "\n") >= 0)
!$brPos = %strpos($type, "\n")
!$multiLine = $multiLine + %substr($type, 0, $brPos) + '</size>\n<size:'+$TECHN_FONT_SIZE+'>'
!$type = %substr($type, $brPos+2)
!endwhile
!else
!while (%strlen($type)>$width)
!$brPos = $width
!while ($brPos>0 && %substr($type, $brPos, 1)!= ' ')
!$brPos = $brPos - 1
!endwhile
!if ($brPos < 1)
!$brPos = %strpos($type, " ")
!else
!endif
!if ($brPos > 0)
!$multiLine = $multiLine + %substr($type, 0, $brPos) + '</size>\n<size:'+$TECHN_FONT_SIZE+'>'
!$type = %substr($type, $brPos + 1)
!else
!$multiLine = $multiLine+ $type
!$type = ""
!endif
!endwhile
!endif
!if (%strlen($type)>0)
!$multiLine = $multiLine + $type
!endif
!return $multiLine
!endfunction
!unquoted function $breakDescr($descr, $widthStr)
!$width = %intval($widthStr)
!$multiLine = ""
!if (%strpos($descr, "\n") >= 0)
!else
!while (%strlen($descr)>$width)
!$brPos = $width
!while ($brPos>0 && %substr($descr, $brPos, 1)!= ' ')
!$brPos = $brPos - 1
!endwhile
!if ($brPos < 1)
!$brPos = %strpos($descr, " ")
!else
!endif
!if ($brPos > 0)
!$multiLine = $multiLine + %substr($descr, 0, $brPos) + "\n"
!$descr = %substr($descr, $brPos + 1)
!else
!$multiLine = $multiLine+ $descr
!$descr = ""
!endif
!endwhile
!endif
!if (%strlen($descr)>0)
!$multiLine = $multiLine + $descr
!endif
!return $multiLine
!endfunction
!function $getNode($label, $type, $descr, $sprite)
!$nodeText = ""
!if ($sprite != "")
!$nodeText = $nodeText + '<$'+$sprite+'>\n'
!endif
!$nodeText = $nodeText + '==' + $label
!if ($type != "")
!$nodeText = $nodeText + '\n<size:' + $TECHN_FONT_SIZE + '>[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']</size>'
!endif
!if ($descr != "")
!$nodeText = $nodeText + '\n\n' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH)
!endif
!return $nodeText
!endfunction
!function $getNode_L($label, $type, $descr, $sprite)
!$nodeText = ""
!if ($sprite != "")
!$nodeText = $nodeText + '<$'+$sprite+'>\l'
!endif
!$nodeText = $nodeText + '==' + $label
!if ($type != "")
!$nodeText = $nodeText + '\l<size:' + $TECHN_FONT_SIZE + '>[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']</size>'
!endif
!if ($descr != "")
!$nodeText = $nodeText + '\l\l' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH)
!endif
!return $nodeText
!endfunction
!function $getNode_R($label, $type, $descr, $sprite)
!$nodeText = ""
!if ($sprite != "")
!$nodeText = $nodeText + '<$'+$sprite+'>\r'
!endif
!$nodeText = $nodeText + '==' + $label
!if ($type != "")
!$nodeText = $nodeText + '\r<size:' + $TECHN_FONT_SIZE + '>[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']</size>'
!endif
!if ($descr != "")
!$nodeText = $nodeText + '\r\r' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH)
!endif
!return $nodeText
!endfunction
!unquoted procedure Deployment_Node($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias
!endprocedure
!unquoted procedure Deployment_Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias
!endprocedure
!unquoted procedure Deployment_Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias
!endprocedure
!unquoted procedure Node($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias
!endprocedure
!unquoted procedure Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias
!endprocedure
!unquoted procedure Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="")
rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias
!endprocedure

@ -0,0 +1,218 @@
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!endif
' 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:
' (lowercase) increment($offset=1): increase current index (procedure which has no direct output)
' (lowercase) setIndex($new_index): set the new index (procedure which has no direct output)
'
' (Uppercase) LastIndex(): return the last used index (function which can be used as argument)
' (Uppercase) Index($offset=1): returns current index and calculates next index (function which can be used as argument)
' (Uppercase) SetIndex($new_index): returns new set index and calculates next index (function which can be used as argument)
' Index
' ##################################
!$lastIndex = 0
!$index = 1
!procedure increment($offset=1)
!$lastIndex = $index
!$index = $index + $offset
!endprocedure
!procedure setIndex($new_index)
!$lastIndex = $index
!$index= $new_index
!endprocedure
!function Index($offset=1)
!$lastIndex = $index
!$index = $lastIndex + $offset
!return $lastIndex
!endfunction
!function LastIndex()
!return $lastIndex
!endfunction
!function SetIndex($new_index, $offset=1)
!$lastIndex = $new_index
!$index = $new_index + $offset
!return $lastIndex
!endfunction
' 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//<size:$TECHN_FONT_SIZE>[$techn]</size>//
!endprocedure
!unquoted procedure Rel($from, $to, $label)
Rel_(Index(), $from, $to, $label, "-->>")
!endprocedure
!unquoted procedure Rel($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-->>")
!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, "<<--")
!endprocedure
!unquoted procedure Rel_Back($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "<<--")
!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, "->>")
!endprocedure
!unquoted procedure Rel_Neighbor($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "->>")
!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, "<<-")
!endprocedure
!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "<<-")
!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->>")
!endprocedure
!unquoted procedure Rel_D($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-DOWN->>")
!endprocedure
!unquoted procedure Rel_Down($from, $to, $label)
Rel_(Index(), $from, $to, $label, "-DOWN->>")
!endprocedure
!unquoted procedure Rel_Down($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-DOWN->>")
!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->>")
!endprocedure
!unquoted procedure Rel_U($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-UP->>")
!endprocedure
!unquoted procedure Rel_Up($from, $to, $label)
Rel_(Index(), $from, $to, $label, "-UP->>")
!endprocedure
!unquoted procedure Rel_Up($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-UP->>")
!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->>")
!endprocedure
!unquoted procedure Rel_L($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-LEFT->>")
!endprocedure
!unquoted procedure Rel_Left($from, $to, $label)
Rel_(Index(), $from, $to, $label, "-LEFT->>")
!endprocedure
!unquoted procedure Rel_Left($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-LEFT->>")
!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->>")
!endprocedure
!unquoted procedure Rel_R($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-RIGHT->>")
!endprocedure
!unquoted procedure Rel_Right($from, $to, $label)
Rel_(Index(), $from, $to, $label, "-RIGHT->>")
!endprocedure
!unquoted procedure Rel_Right($from, $to, $label, $techn)
Rel_(Index(), $from, $to, $label, $techn, "-RIGHT->>")
!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

@ -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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
/' Not needed because this is the default '/
LAYOUT_TOP_DOWN
LAYOUT_TOP_DOWN()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -28,15 +28,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`
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/plantuml-stdlib/C4-PlantUML/master/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() or SHOW_DYNAMIC_LEGEND(?hideStereotype)
Colors can help to add additional information or simply to make the diagram more aesthetically pleasing.
It can also help to save some space.
All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<<stereotypes>>` and with a legend.
This can be enabled with `LAYOUT_WITH_LEGEND`.
This can be enabled with `LAYOUT_WITH_LEGEND()`.
```csharp
@startuml LAYOUT_WITH_LEGEND Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_WITH_LEGEND
LAYOUT_WITH_LEGEND()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -76,9 +78,36 @@ 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
Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a dynamic legend can be activated with `SHOW_DYNAMIC_LEGEND(?hideStereotype)`.
The dynamic legend has following differences:
* only relevant elements are listed
* custom tags/stereotypes are supported
* stereotypes can remain visible (with `SHOW_DYNAMIC_LEGEND(false)`)
* **`SHOW_DYNAMIC_LEGEND()` has to be last call in the diagram**
```csharp
@startuml SHOW_DYNAMIC_LEGEND Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
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")
SHOW_DYNAMIC_LEGEND()
@enduml
```
![SHOW_DYNAMIC_LEGEND Sample](http://www.plantuml.com/plantuml/png/RL5Dgzf05DtFhxYrYnV1bs3fgYlJA5fG6vfOwIfCajiwC1_3p0r1IlzxRz1g5o-RIyx7uHnc5Ka66eo6QlVrtAn_7FF3bwBPRxQRunegQRn6yKxPJWyzmeN8nqzP5kIO_b9q6TeXOkYS9RIKTivaNaixnRr6whLgi-BZQpb1fyC-Cp8I1eQQWXrIMGofPwqG9OReR29xe-m2PlbqLQGWoONPN5HNDfhcinjiByCrwPOBUBbrUvd3Rm7yFIAJ4Tj6UiyvPsmXzrwhJf9oTiPGyNu1ULMcnqtDbe3m8Lt2uNinSRdMRemmJOf03dYFbomnWoRbDK8zAY8CGCgWLXOZT_jpRvVGZUISkun9yGtrlrNFMgV8JhwxkYuhLasY1_kCsI95_iNf_0pE_6yHRxnMCXShjFrWz5y0 "LAYOUT_WITH_LEGEND Sample")
## 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.
@ -86,17 +115,86 @@ One thing which is often ignored is the fact, that these software architecture s
Without any proof
* if they are technically possible
* if they can fullfil all requirements
* if they can fulfill all requirements
* 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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_AS_SKETCH()
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
```
![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 `<<stereotypes>>` and legend.
This can be enabled with `HIDE_STEREOTYPE()`.
```csharp
@startuml HIDE_STEREOTYPE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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
```
LAYOUT_AS_SKETCH
![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")
## HIDE_PERSON_SPRITE() or SHOW_PERSON_SPRITE(?sprite)
With the macros `HIDE_PERSON_SPRITE()` and `SHOW_PERSON_SPRITE()` it is possible to change the person related default sprite. `SHOW_PERSON_SPRITE()` is the default.
- **HIDE_PERSON_SPRITE()**: deactivates the default sprite
- **SHOW_PERSON_SPRITE()**: activates the default sprite "person"
- **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite
"person" and "person2" are predefined sprites which can be used as default sprite too.
```csharp
@startuml predefined sprites Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
Person(userA, "User A", "with predefined sprite person", "person")
Person(userB, "User B", "with predefined sprite person2", "person2")
@enduml
```
![Predefined sprites Sample](http://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample")
**Using HIDE_PERSON_SPRITE()**
```csharp
@startuml HIDE_PERSON_SPRITE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
HIDE_PERSON_SPRITE()
Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
@ -109,4 +207,51 @@ 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")
![HIDE_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample")
**Using SHOW_PERSON_SPRITE()**
```csharp
@startuml SHOW_PERSON_SPRITE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
/' Not needed because this is the default with sprite "person" '/
SHOW_PERSON_SPRITE()
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
```
![SHOW_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample")
**Using SHOW_PERSON_SPRITE(sprite)**
```csharp
@startuml SHOW_PERSON_SPRITE(sprite) Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
!include osaPuml/Common.puml
!include osaPuml/User/all.puml
SHOW_PERSON_SPRITE("osa_user_green_architect")
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
```
![SHOW_PERSON_SPRITE(sprite) Sample](http://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)")

@ -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,16 @@ 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 activate the local conversion with additional command line argument `-DRELATIVE_INCLUDE="."` (that the local files are included)
```c#
!include path/to/C4_Container.puml
```csharp
java -jar plantuml.jar -DRELATIVE_INCLUDE="." ...
```
Just remember to change the `!include` statements inside the top of the files.
If you want to use the always up-to-date version in this repo, use the following:
```c#
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml
```csharp
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
```
Now let's create a C4 Container diagram:
@ -38,7 +36,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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
@ -48,15 +46,15 @@ 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.
Take a look a look at the following sample of a C4 Container Diagram:
Take 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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
Person(admin, "Administrator")
System_Boundary(c1, "Sample System") {
@ -69,22 +67,322 @@ 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:
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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")
Entities can be decorated with tags and explained via dynamic calculated legends, for example:
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
AddTagSupport("v1.0", $borderColor="#d73027")
AddTagSupport("v1.1", $fontColor="#d73027")
Person(user, "Customer", "People that need products")
Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1")
Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0")
Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1")
Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1")
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information")
Rel(user, spa, "Uses", "https")
Rel(spa, api, "Uses", "https")
Rel_R(api, db, "Reads/Writes")
Rel(admin, spaAdmin, "Uses", "https")
Rel(spaAdmin, api, "Uses", "https")
SHOW_DYNAMIC_LEGEND()
@enduml
```
![tags](http://www.plantuml.com/plantuml/png/bLDHQnf147xtLsolVJYfyKnR21G25GrDG5Eh2Q5FCdSxwfQztMDdJllpEtiQjSbHoDF2p3VpVVFDx3lZ2bjhL1lcYhvcMO1TVsruK-SrOIYyOtJSBtoPLHOSrwMz8DRMvDdeoyKiXXwdawm4OWmIMewa0ep3qAy4s-aCjNw0zQAkAXyuJRQN_K7IKnzo7pI6aRS-N2VlzTNdmQUhfDk2lepebJHzXUtCC91tQTJPKyce9lOb1i4dC_ILHSKROEKGjQg2rtN196M7Aj2bSG8TnjSG1s3_gXPEIIG9uR6HsXfe0WvtAifKOb7bdPX5KJ73cguR_K9vz2Ib2eHYCHj69d3hsa93-Y2TIe4e8tw75HG70P6XE0ospq4atyc26WMDdUTqWvTqm_CvLJipd7lmHWb70_upDLGcAfZTHSBVi8NuteBJ5ac1jKfkJO14olgrALGQZx9_iXR_C3eotb7tts4_lgGQvwdEfVaO678WZ4HJKmHFViLgyNFIC7khwNcJFTLSeX8rCjtMcmBbNVbG0WjZlBCvsiEHxTVtI4YnJ_Db113pJKRcR4ylvtiF6crp14tPKp2CX_JpCHxNrSvnIhSJTHQtFvwMur_tm-dTQ3cv-NvpFqwxdM_eTFoAVm40 "tags")
## Supported Diagram Types
Diagram types
* System Context & System Landscape diagrams
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Context.puml`
* Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `SystemDb`, `SystemDb_Ext`, `Boundary`, `System_Boundary`, `Enterprise_Boundary`
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml`
* Macros:
* `Person(alias, label, ?description, ?sprite, ?tags)`
* `Person_Ext`
* `System(alias, label, ?description, ?sprite, ?tags)`
* `SystemDb`
* `SystemQueue`
* `System_Ext`
* `SystemDb_Ext`
* `SystemQueue_Ext`
* `Boundary(alias, label, ?type, ?tags)`
* `Enterprise_Boundary(alias, label, ?tags)`
* `System_Boundary`
* Container diagram
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Container.puml`
* Additional Macros: `Container`, `ContainerDb`, `Container_Boundary`
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml`
* Additional Macros:
* `Container(alias, label, technology, ?description, ?sprite, ?tags)`
* `ContainerDb`
* `ContainerQueue`
* `Container_Ext`
* `ContainerDb_Ext`
* `ContainerQueue_Ext`
* `Container_Boundary(alias, label)`
* Component diagram
* Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/release/1-0/C4_Component.puml`
* Additional Macros: `Component`, `ComponentDb`
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml`
* Additional Macros:
* `Component(alias, label, technology, ?description, ?sprite, ?tags)`
* `ComponentDb`
* `ComponentQueue`
* `Component_Ext`
* `ComponentDb_Ext`
* `ComponentQueue_Ext`
* Dynamic diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml`
* Additional Macros:
* `RelIndex(index, from, to, label)`
* (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output)
* (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output)
* `LastIndex()`: return the last used index (function which can be used as argument)
following 2 macros requires V1.2020.24Beta4 (can be already tested with http://www.plantuml.com/plantuml/)
* `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument)
* `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument)
* Deployment diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml`
* Additional Macros:
* `Deployment_Node(alias, label, ?type, ?description, ?sprite, ?tags)`
* `Node(alias, label, ?type, ?description, ?sprite, ?tags)`: short name of Deployment_Node()
* `Node_L(alias, label, ?type, ?description, ?sprite, ?tags)`: left aligned Node()
* `Node_R(alias, label, ?type, ?description, ?sprite, ?tags)`: right aligned Node()
Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
## Relationship Types
* `Rel(from, to, label, ?technology)`
* `BiRel` (bidirectional relationship)
You can force the direction of a relationship by using:
* `Rel_U`, `Rel_Up`
* `Rel_D`, `Rel_Down`
* `Rel_L`, `Rel_Left`
* `Rel_R`, `Rel_Right`
In rare cases, you can force the layout of objects which have no relationships by using:
* `Lay_U`
* `Lay_D`
* `Lay_L`
* `Lay_R`
In following sample a person uses different systems, and group of persons which have no relations
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
HIDE_STEREOTYPE()
Person(a, "A")
Person(b, "B")
Person(c, "C")
Person(d, "D")
Person(e, "E")
Lay_U(a, b)
Lay_R(a, c)
Lay_D(a, d)
Lay_L(a, e)
Person(x, "X")
System(s1, "S1")
System(s2, "S2")
System(s3, "S3")
System(s4, "S4")
Rel_U(x, s1, "uses")
Rel_R(x, s2, "uses")
Rel_D(x, s3, "uses")
Rel_L(x, s4, "uses")
@enduml
```
![Relation versus Layout](http://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout")
## Layout Options
C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_dynamic_legend)
* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)
* [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)
C4-PlantUML also comes with some default person sprite options:
* [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite)
* [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite)
## Custom tags/stereotypes support and skinparam updates
Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects:
* `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`:
After this call the given tag can be used in the diagram, the styles of the tagged elements are updated and the tag is be displayed in the dynamic legend.
* `UpdateSkinparamsAndLegendEntry(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`
This call updates the style of the default element stereotypes (component, ...) and creates no additional legend entry.
Each element can be extended with one or multiple custom tags/stereotypes via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`.
Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`.
**Comments**
* `SHOW_DYNAMIC_LEGEND()` supports the customized stereotypes
(`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend).
* `SHOW_DYNAMIC_LEGEND()` has to be last line in diagram.
* Don't use space between `$tags` and `=` (PlantUML does not support it).
* Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments).
* If 2 tags defines the same skinparameter, the first definition is used.
* If specific skinparameters have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names. This convention can be used in other tools.
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
AddTagSupport("v1.0", $fontColor="#d73027", $borderColor="#d73027")
AddTagSupport("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf")
AddTagSupport("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61")
AddTagSupport("fallback", $bgColor="#888888")
Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0")
Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1")
Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0&v1.1+v1.0+v1.1")
Container(spa2, "SPA2", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0+fallback")
Container(spaAdmin2, "Admin SPA2", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="fallback+v1.1")
Rel(spa, api, "Uses", "https")
Rel(spaAdmin, api, "Uses", "https")
Rel_L(spa, spa2, "Updates", "https")
Rel_R(spaAdmin, spaAdmin2, "Updates", "https")
SHOW_DYNAMIC_LEGEND(false)
@enduml
```
![merged tags](http://www.plantuml.com/plantuml/png/jLDXQzim5FpkNw5bOoIajHDlh6DGQ4ZBMaYxq3ICVGhFbkneaoMZzvpivq-Avj3KPh0FzHUPUwUxuvvzXGIMcaf5RwJELSC5snBL-2L9BEpZKjAsoHeKDZUQXAOuDrLIAz3-pZaILp9BvX_FbnvQto-I2f24TT1cxcw0rCB6jTUFPfm_GRbgwjfO6WvsqtWoE6Fl2aUR6sNivU0jl_WmIIyycXdBXNs1ZteqfYyr2lTaHLSZuBqQa_UzGXp4fsbNAE1TeGAKoY3_TRXHjkpFXyUnesCVGwpXZ0rMozd07Q3BHe7rhqzRmIf7OLAJi0NaWj4MY973ymR9LCA66UI4RE-MmtOIM5ibGOcNeTZHgTsCLr8xXyF9-ft1poII1JBsVoDeiMTjYSSOqvCOK4kVO7dd3N_23lnv2vehWGoKObc3ZeZ8b2bbpeR-WuoFoapy9g5H6esZ4vUmlR5_6tTCiOOqT9s-MjdZTlEzhQVFQqzVl_SsJDj5z2XK-EB20jOeq5iVVdCt3-EGzH-SpIA8_2rqNNEWBkdncTInW7vwjBhzzdrp_UDXTdyttonkljuyN0zTU1IZw4fetbJg3m00 "merged tags")
**Custom schema definition**
If the custom (color) schema is defined via `UpdateSkinparamsAndLegendEntry()` then the legend of existing elements is updated too.
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!$COLOR_A_5 = "#7f3b08"
!$COLOR_A_4 = "#b35806"
!$COLOR_A_3 = "#e08214"
!$COLOR_A_2 = "#fdb863"
!$COLOR_A_1 = "#fee0b6"
!$COLOR_NEUTRAL = "#f7f7f7"
!$COLOR_B_1 = "#d8daeb"
!$COLOR_B_2 = "#b2abd2"
!$COLOR_B_3 = "#8073ac"
!$COLOR_B_4 = "#542788"
!$COLOR_B_5 = "#2d004b"
UpdateSkinparamsAndLegendEntry("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true")
UpdateSkinparamsAndLegendEntry("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1)
UpdateSkinparamsAndLegendEntry("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2)
UpdateSkinparamsAndLegendEntry("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2)
Person(customer, "Personal Banking Customer")
System(banking_system, "Internet Banking System")
System_Ext(mail_system, "E-mail system")
System_Ext(mainframe, "Mainframe Banking System")
Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails")
Rel(banking_system, mainframe, "Uses")
SHOW_DYNAMIC_LEGEND()
@enduml
```
![custom schema](https://www.plantuml.com/plantuml/png/dPHVRw905CNV-HIKxODDgY1W9PkOL2ZPROBQw9hDFf4PvegaC92P8Ms_VOS_hUFMRhF65_pTU-uzvsAyvG8nKHUvTf7H9Ay9w7iXAlxTD1bw6gMPsDUuvi2IaWgWOfIKXLdbY3QQ8HSapx0PkCE71cqNaLaWBe1950UDubcCgcQwTd4PhABLEfx74tsc6z-cEmTRdg5mj-NOcNZMZSgTbeFbsMDNvNRBTmHxDuxAnnq7iB0oPnbkVwtdKLURDfz3pUyrn2C8iCgx7TX6cDWgxpnvrjH1YSgx31FNddgUohlCDh4iLyxNjXL10ZQF6QqGGmMVKn912fI4LB2NWL41uoKrhlLBd0PbNhBPuNeIxkHbZt0Vhkal6G7sbsOi2toFIFcKqNHc25Q3SVMb2VdkW56Knv-wySzm8s_zzMh-8dz4nSdyxXdvxVy8--bg_upLVhDQUsZlDqXgBie2sBLkT0Jbke-ej9JgGL-JhsNJ6XZWhjBxaPfxsZW4yQxf6gMYbyJXinWKACiFcd3OVDVvM-Tn8zt9Iu1iMxmzdvYzXbnn_i7LbWENRR8hzb7ogBGUEzd8KtCTMZzS5sMlMKAMxkNXFiJzXxgJdbAy1-fTQPkVgz_ntP_bV74Vn57u8rpU3QwqMpbD_YUz0W00 "custom schema")
## Element properties
A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented:
* `SetPropertyHeader(col1Name, col2Name, ?col3Name, ?col4Name)`:
The properties table can have up to 4 columns. The default header uses the column names "Name", "Description".
* `WithoutPropertyHeader()`
If no header is used, then the second column is bold.
* `AddProperty(col1, col2, ?col3, `?col4)`
(All columns of) a property which will be added to the next element.
Following sample uses all 3 different property definitions (and the aligned deployment node).
```csharp
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
' default header Property, Value
AddProperty("Name", "Flash")
AddProperty("Organization", "Zootopia")
AddProperty("Tool", "Internet Explorer 7.0")
Person(personAlias, "Label", "Optional Description (with default property header)")
SetPropertyHeader("Property","Value", "Description")
AddProperty("Prop1", "Value1", "Details1")
AddProperty("Prop2", "Value2", "Details2")
Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") {
WithoutPropertyHeader()
AddProperty("PropC1", "ValueC1")
AddProperty("PropC2", "ValueC2")
Container(containerAlias, "Label", "Technology", "Optional Description (without property header)")
}
System(systemAlias, "Label", "Optional Description (without properties)")
Rel(personAlias, containerAlias, "Label", "Optional Technology")
@enduml
```
![properties sample](http://www.plantuml.com/plantuml/png/ZP9HRzCm4CVVyobCNaYbhc4L4X9FcpeGI6Mhe834ItLDZiQIuxFiiqP0V7VEqRfiQO0z-NB--P_xnRa839vZQx9dsbOcrgWQPXTUbwM7syL1SnFtCQ2lo39QNbJKbiw0JMVE0jT6xylLoxDDQdt-i2vR28nUMhihT8QwDXrowGNPSrNZTuY6LODGerSRJmuzTtFr1Kp4xBAkZwqYluOMyxdAtne8JJvxl7dZ3s3rJs1DDa7VY9YSXZ6t9J9f_xrbz1PPlVaXGtdqwjNYXS0Rz85iuVhbqcW80gzXZ_sf6vVomQWh39NN_PCgRZKtzoRkxbLtIZF9p3uX7oTurtUB_FYSp_Easeiz21sFdQhpnFImL8bcq2QSJw7BUtJv05qAEjp1xffgtAqBAylVHRUTm_-OLp4mjHFYwbUMAVLL68hZ3p2JdPEnLuEYbDF8e2PbGbPanSvAPdMiJdIsM3MM31swVxjGdBp0ttA5NM1iYz0lu_od9MeC_T_m4StZ_sjgxb7k82095sZhs9e_ "properties sample")
## Snippets for Visual Studio Code
Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets).
@ -139,13 +437,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
@ -172,4 +472,4 @@ More information can be found here:
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

Binary file not shown.

Before

Width:  |  Height:  |  Size: 685 KiB

After

Width:  |  Height:  |  Size: 4.1 MiB

@ -0,0 +1,35 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Component.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!endif
LAYOUT_WITH_LEGEND()
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
@enduml

@ -0,0 +1,40 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
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")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
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

@ -0,0 +1,53 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
skinparam wrapWidth 200
skinparam maxMessageSize 200
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")
System_Boundary(c1, "Customer Information") {
Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information")
Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes")
Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities")
ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information")
ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes")
Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened")
}
Rel(customer, app, "Uses", "HTTPS")
Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
Rel_L(customer_service, app, "Sends events to", "WebSocket")
Rel_R(customer_service, message_bus, "Sends customer update events to")
Rel(customer_service, customer_db, "Stores data in", "JDBC")
Rel(message_bus, reporting_service, "Sends customer update events to")
Rel(message_bus, audit_service, "Sends customer update events to")
Rel(reporting_service, reporting_db, "Stores data in")
Rel(audit_service, audit_store, "Stores events in")
Lay_R(reporting_service, audit_service)
@enduml

@ -0,0 +1,53 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person_Ext(anonymous_user, "Anonymous User")
Person(aggregated_user, "Aggregated User")
Person(administration_user, "Administration User")
System_Boundary(c1, "techtribes.js"){
Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector")
ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.")
Container(filesystem, "File System", "FAT32", "Stores search indexes")
ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets")
Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis")
}
System_Ext(twitter, "Twitter")
System_Ext(github, "GitHub")
System_Ext(blogs, "Blogs")
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, 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, filesystem, "Writes to")
Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017")
Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS")
Rel(updater, github, "Gets information about public code repositories from", "HTTPS")
Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP")
Lay_R(rel_db, filesystem)
@enduml

@ -0,0 +1,45 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Context.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!endif
'LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
title System Landscape diagram for Big Bank plc
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
Enterprise_Boundary(c0, "Big Bank plc") {
System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
System_Ext(atm, "ATM", "Allows customers to withdraw cash.")
System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Person_Ext(customer_service, "Customer Service Staff", "Customer service staff within the bank.")
Person_Ext(back_office, "Back Office Staff", "Administration and support staff within the bank.")
}
Rel_Neighbor(customer, banking_system, "Uses")
Rel_R(customer, atm, "Withdraws cash using")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_R(customer, customer_service, "Asks questions to", "Telephone")
Rel_D(banking_system, mail_system, "Sends e-mail using")
Rel_R(atm, mainframe, "Uses")
Rel_R(banking_system, mainframe, "Uses")
Rel_D(customer_service, mainframe, "Uses")
Rel_U(back_office, mainframe, "Uses")
Lay_D(atm, banking_system)
Lay_D(atm, customer)
Lay_U(mail_system, customer)
@enduml

@ -0,0 +1,23 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Context.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!endif
LAYOUT_WITH_LEGEND()
title System Context diagram for Internet Banking System
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel(banking_system, mainframe, "Uses")
@enduml

@ -0,0 +1,45 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Context.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!endif
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, "Customer", "A customer of Widgets Limited.")
Enterprise_Boundary(c0, "Widgets Limited") {
Person(csa, "Customer Service Agent", "Deals with customer enquiries.")
System(ecommerce, "E-commerce System", "Allows customers to buy widgts online via the widgets.com website.")
System(fulfilment, "Fulfilment System", "Responsible for processing and shipping of customer orders.")
}
System(taxamo, "Taxamo", "Calculates local tax (for EU B2B customers) and acts as a front-end for Braintree Payments.")
System(braintree, "Braintree Payments", "Processes credit card payments on behalf of Widgets Limited.")
System(post, "Jersey Post", "Calculates worldwide shipping costs for packages.")
Rel_R(customer, csa, "Asks questions to", "Telephone")
Rel_R(customer, ecommerce, "Places orders for widgets using")
Rel(csa, ecommerce, "Looks up order information using")
Rel_R(ecommerce, fulfilment, "Sends order information to")
Rel_D(fulfilment, post, "Gets shipping charges from")
Rel_D(ecommerce, taxamo, "Delegates credit card processing to")
Rel_L(taxamo, braintree, "Uses for credit card processing")
Lay_D(customer, braintree)
@enduml

@ -0,0 +1,68 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Deployment.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
!endif
AddTagSupport("fallback", $bgColor="#c0c0c0")
WithoutPropertyHeader()
' dynamic legend is used (activated in last line)
' LAYOUT_WITH_LEGEND()
title Deployment Diagram for Internet Banking System - Live
Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){
AddProperty("Location", "London and Reading")
Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
AddProperty("Java Version", "8")
AddProperty("Xmx", "512M")
AddProperty("Xms", "1024M")
Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
}
}
AddProperty("Location", "London")
Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){
Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
AddProperty("Location", "Reading")
Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") {
Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
}
}
AddProperty("Location", "London and Reading")
Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
AddProperty("Java Version", "8")
AddProperty("Xmx", "512M")
AddProperty("Xms", "1024M")
Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
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, Apple Safari or Microsoft Edge"){
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_U(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_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml

@ -0,0 +1,57 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Deployment.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
!endif
AddTagSupport("fallback", $bgColor="#c0c0c0")
' dynamic legend is used (activated in last line)
' 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", $tags="fallback") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
}
}
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, Apple Safari or Microsoft Edge"){
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_U(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_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml

@ -0,0 +1,20 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Dynamic.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml
!endif
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

@ -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,28 @@ 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](http://www.plantuml.com/plantuml/png/pLPXJoCt4FsUNp5DAnqW812XwbJff0i9FK24H6meFQbID6jFDYvUUsLx0sbr_xtZtN1X8UYWz-L0Yko9tyoyDpDsFlg0BfIvRlsaZD2b99Y7KFZVEXs7T_kP2lCoBJqvOKqW4_Q5pJk5HXCnUpv8hT9E_sXl74tNmujEZZwGOzDqG8Msopo2YXZW7PI6qT40OKumirhREsKoqCeGe97G-5evpoiB71sq5QZradryJND3X5PFoWbcILaKreMjzemnAOhRzYxyacPzgwtxqFvP7CJ_zdQBlScbmLm9q9GHnrS-HfEmXIAe1GPUAWEQALKvRZFYelTvT3sPtfnDJgSN9vzEBWTRx2cee0dM-S10OUOmPv8EpbWvPoZ0CPhRo3TPiaOvxC65Mb2hjOPDBwsahKABNMWVgwm206_RJ_OWCI08YexRs_-sWF-UUf66GQdAKiRiOQ5sTdR-2lVlewlhjEJwmU6l-mT7S3597bniSeC5YZang5SjO69pWQ7zr03lz-_NRkg_lZK1MJR7JbG4ZC-WLnHQyNbbJVHnZWkiAfyKBYep_ACVpMDd5qgIVoxTZ7ieWb6hi8I5OZIS9wFBpkbaCaw0G-npPHyo-DAgFZVgiv96fWU7ZuIAsxTAP1qA7IKQLGkkwzYf7DsolROTTiMByWpIBPdoqG46JD5JX5sHnfedF9WXORbpZDycmJggUjM1eqpvuAhJe0mtN5wjTs6EVauIi0nppdMbEWX7CcvH-rr08SXxq3RZ3GNnTl6wJV6w6yNZ-GkO-G_hYTo6R-dPVIneGi8Q-LpIpOvVLhdxeyZyBF7N2fy-5loEqdgiZ_xVM7U_SwuvFWDkA7tbN0z8gmKvNrtmFl1n0Qk79PwEvkSZx_b34nIO4U0wpAPM_VByCirjJB5V-c1pSkyyi46nEqaB9QZcMsWEEqh0EkWPwQoIaNAJQWtZuyCQpwW8_XDpP8QDImj1grp5nyENgMScTXQPVUio2nR4AaqVRxQ8KQwPBvFUH5BOl6YoZ9OolWunO-M4zNOMu4OPQUzyJAXcdQCO9I-z8AdZi-HM5JwEkzhX9sjZHVfpPtEMP6Z_KLeZ_AuSpUpzxiftWZEM9eewLCBL2Pp8Z1x2DVNr1SQ9gsizvbflQgb4E5NKhT8pMQdHDONN-lkqvdw65MjMUjrKLwI_Da3zbWtnbWF65qrmLCyEOoP_UslgbuZH38giteQONjT3nS36lDYAbLWN-56ggrXL69bMjnfA3pEkJYNLdLE17WAU3uxxJK3trOZf5L-XQqXT7lBrhv5W-L0hEHtTJ0UVBtl3i_xwzz57ChBCzNy0 "Deployment Diagram for Internet Banking System - Live")
**with details**
Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc-details.puml)
![Deployment Diagram for Internet Banking System - Live with details](http://www.plantuml.com/plantuml/png/vLT_Rzj63FtVduBp1ZGfd1ynqg4OKA2EdJKfuiI8dAO51XYdErg-zNGdt9sSUaE_-qX9gUtOQLfi60RC0Ho98ldu-2XAVXsYyB7CJUi7RQKf5S8inYBySd3WnTr-fkEiJCk0NZeRqSPzwVA3mWZBCNiXAgFJW_xnteXDDyEBWro4Y9vCam4MnYro3YeOu1cKbgBP0766C7N6k3jjCp3Q8WYhOEsoze6E710w62U5CGlAyQNCBGYjdb9ZaILbKJWVTzfJYac5_DZkm4zfrdV6-LVj7-KX_xLtMxT4pfLnv5s1FYxEK2ZqExijGb4BAt8jmM26L9SEN8M27I6Zdek8PB9WY6fL-ov5NFG-NDsC9xVduxF9nUcRqyi1Puew6eHbdJ3G8lCY9_8Upcr4Rp72YR0VkG_98aJCOGykz1nRhMNOvD8ft2cCx42RhxNf_udEga0WyyDpK28AaCW0xTq_Mq0VwiqzqvtsXPCYQcSfa8wjShRg_pKAHOLGRpZY0VxaOaTPyazrbXBEdYZqy-VFVukVNdAMcxIacO2Zd_SFZ-5YdB2j1tUOGa0_HmyUW-Rae2thktffAdpU0I4b1kxoN0luzGMSdB_PEnzHhc7OloUnGUIjc0juXpuqP5vIxLiTt-UV-FgBe-xmSPV0BaU7tUEbpxOsY4B86JB1wW36BfSYjXyQuEL-XTcpG10MWYkzHAXAFZrTQS0QFVxqdOr2M_G4fJd3w1nwHM7qKZNEKccM59wxEdpNPpEncMk5ONEufgML72oCZekgnmBU9bUN1sVZyIW1WjXV8VsvrNm_FJcFJaipA2ezF5eP6pvzR636r3kYamk_g4Ou5G4tUhGLotaX3KjoLHt07epgFEsbxQWh7u1qmEWvBg6UacEGxgYKKWoQ04vtZKRKVOLxCoGq1BdWgqbq7dbxL7T0faFqbJTeEtK-huuxC1DXXWf46MV4gL4Pf4V5fyA4-xi3ZCle1AFyRh6-VczVhwZLNLUh-pMr0afdrLQzQEb6aOLNopMy2uzBUDr8s5tLCAcoRrMnjuJkG8Z2gdIZXawzjNdNJeKsZanGbBvm0GCuQnPF5RafVlU_elvcuPlpyC-iVHgDT7KaQ6_LU__u_xNthvkzt_rN5ZyvKOPRJBznyG-GLvaFLOz397S9pJiRUxDvyvaGwCiW529344kORRlby-RxIEwun7uPeilHFmj01atf5CwrnBehXI7OgmISXvvLtcd5bDUfrc7aFgpZAOg3tujS4CErfve0etCTKK4eqq1Ct9IPFVMqYmvaKsRWCUCOxTVh9TBRI4gN5-iisL8IN9ihrbwwuAOHRhLLxYvmGJNhNCYhv9ximwof9r_qZS8dzHadVECSAzAVUKBhmD3zeOsXsq9xdBfFdIPt8gR2QsxgK4jV5t2gCcIupL4AXU1TL6iz8gstZLGYlIxgKUdPh3J2hpVUcB_NQnxwXZLrUZbKj42_343ziZCK7mcGNtaaeGPAo9Ny7fojNrKeceE8rVT5J6xgcue2r-uNLx6IIu5NIcsmAXYLDa_H05DIfshLdTSHxm7V3axwwm7TRuwWxQBIPKWj3uRwHJuwScebPrUtay67ozxmlB_yYV4QhIfpynS0 "Deployment Diagram for Internet Banking System - Live with details")
## 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")

@ -1,9 +1,9 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
' uncomment the following line and comment the first to use locally
' !include C4_Component.puml
LAYOUT_WITH_LEGEND
LAYOUT_WITH_LEGEND()
title Component diagram for Internet Banking System - API Application
@ -14,7 +14,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

@ -0,0 +1,45 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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

@ -1,11 +1,11 @@
@startuml
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
' LAYOUT_TOP_DOWN()
' LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
title Container diagram for Internet Banking System
@ -15,7 +15,7 @@ System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
@ -34,4 +34,4 @@ 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
@enduml

@ -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/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
skinparam wrapWidth 200
skinparam maxMessageSize 200
LAYOUT_TOP_DOWN
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")

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

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

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

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

@ -0,0 +1,65 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
' uncomment the following line and comment the first to use locally
' !include C4_Deployment.puml
AddTagSupport("fallback", $bgColor="#c0c0c0")
WithoutPropertyHeader()
' dynamic legend is used (activated in last line)
' LAYOUT_WITH_LEGEND()
title Deployment Diagram for Internet Banking System - Live
Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){
AddProperty("Location", "London and Reading")
Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
AddProperty("Java Version", "8")
AddProperty("Xmx", "512M")
AddProperty("Xms", "1024M")
Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
}
}
AddProperty("Location", "London")
Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){
Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
}
}
AddProperty("Location", "Reading")
Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") {
Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
}
}
AddProperty("Location", "London and Reading")
Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
AddProperty("Java Version", "8")
AddProperty("Xmx", "512M")
AddProperty("Xms", "1024M")
Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
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, Apple Safari or Microsoft Edge"){
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_U(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_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml

@ -0,0 +1,54 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
' uncomment the following line and comment the first to use locally
' !include C4_Deployment.puml
AddTagSupport("fallback", $bgColor="#c0c0c0")
' dynamic legend is used (activated in last line)
' 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", $tags="fallback") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
}
}
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, Apple Safari or Microsoft Edge"){
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_U(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_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml

@ -0,0 +1,15 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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

@ -0,0 +1,35 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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_D(customer, app, "Updates his profile using", "HTTPS")
Rel(app, customer_service, "Updates customer information using", "JSON/HTTPS")
Rel_R(customer_service, customer_db, "Stores data in", "JDBC")
RelIndex_D($index-1, customer_service, message_bus, "Sends customer update events to", "async")
RelIndex_U($index-2, customer_service, app, "Confirm update to", "async")
increment()
RelIndex_L($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_R($index-2, message_bus, audit_service, "Sends customer update events to", "async")
increment()
RelIndex($index-2, audit_service, audit_store, "Stores events in")
@enduml

@ -0,0 +1,31 @@
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/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_D(customer, app, "Updates his profile using", "HTTPS")
Rel(app, customer_service, "Updates customer information using", "JSON/HTTPS")
Rel_R(customer_service, customer_db, "Stores data in", "JDBC")
RelIndex_D(Index()-1, customer_service, message_bus, "Sends customer update events to", "async")
RelIndex_U(LastIndex()-2, customer_service, app, "Confirm update to", "async")
RelIndex_L(Index()-1, message_bus, reporting_service, "Sends customer update events to", "async")
RelIndex(Index()-1, reporting_service, reporting_db, "Stores data in")
RelIndex_R(SetIndex(5)-2, message_bus, audit_service, "Sends customer update events to", "async")
RelIndex(Index()-2, audit_service, audit_store, "Stores events in")
@enduml
Loading…
Cancel
Save