#97 Context Diagram supports selectable default person sprites (3 - resolve merge conflicts)

pull/101/head
KIRCHSTH 5 years ago
commit 36fc5f2cbc

7
.github/stale.yml vendored

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

@ -19,7 +19,7 @@ jobs:
- name: Process diagrams - name: Process diagrams
uses: Timmy/plantuml-action@v1 uses: Timmy/plantuml-action@v1
with: with:
args: '-v percy -o _parsed' args: '-v percy -o _parsed -DRELATIVE_INCLUDE="."'
- name: Upload - name: Upload
run: npx percy upload percy/_parsed run: npx percy upload percy/_parsed
env: env:

@ -4,8 +4,15 @@
' ################################## ' ##################################
!global $ELEMENT_FONT_COLOR = "#FFFFFF" !global $ELEMENT_FONT_COLOR = "#FFFFFF"
!global $ARROW_COLOR = "#666666"
!global $BOUNDARY_COLOR = "#444444"
!global $LEGEND_FONT_COLOR = "#FFFFFF" !global $LEGEND_FONT_COLOR = "#FFFFFF"
!global $LEGEND_TITLE_COLOR = "#000000" !global $LEGEND_TITLE_COLOR = "#000000"
!global $LEGEND_UNDEFINED_BK_COLOR = "#87AECA"
!global $LEGEND_UNDEFINED_FONT_COLOR = "#B7DEFA"
' Styling ' Styling
' ################################## ' ##################################
@ -37,19 +44,228 @@ skinparam queue {
} }
skinparam Arrow { skinparam Arrow {
Color #666666 Color $ARROW_COLOR
FontColor #666666 FontColor $ARROW_COLOR
FontSize 12 FontSize 12
} }
skinparam rectangle<<boundary>> { skinparam rectangle<<boundary>> {
Shadowing false Shadowing false
StereotypeFontSize 0 StereotypeFontSize 0
FontColor #444444 FontColor $BOUNDARY_COLOR
BorderColor #444444 BorderColor $BOUNDARY_COLOR
BorderStyle dashed 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!="")
!$elementSkin = $elementSkin + " StereotypeFontColor " + $fontColor + %newline()
!$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)
$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 ' Layout
' ################################## ' ##################################
@ -72,16 +288,34 @@ top to bottom direction
left to right direction left to right direction
!endprocedure !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 ' Boundaries
' ################################## ' ##################################
!unquoted function Boundary($alias, $label) !function $getBoundary($label, $type)
!return 'rectangle "=='+$label+'" <<boundary>> as '+$alias !if ($type == "")
!endfunction !return '==' + $label
!unquoted function Boundary($alias, $label, $type) !endif
!return 'rectangle "=='+$label+'\n<size:'+$TECHN_FONT_SIZE+'>['+$type+']</size>" <<boundary>> as '+$alias !if (type != "")
!return '==' + $label + '\n<size:' + $TECHN_FONT_SIZE + '>[' + $type + ']</size>'
!endif
!endfunction !endfunction
!unquoted procedure Boundary($alias, $label, $type="", $tags="")
rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias
!endprocedure
' Relationship ' Relationship
' ################################## ' ##################################

@ -1,6 +1,9 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
' uncomment the following line and comment the first to use locally !if %variable_exists("RELATIVE_INCLUDE")
' !include C4_Container.puml !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. ' Scope: A single container.
' Primary elements: Components within the container in scope. ' Primary elements: Components within the container in scope.
@ -11,6 +14,7 @@
' ################################## ' ##################################
!global $COMPONENT_FONT_COLOR = "#000000" !global $COMPONENT_FONT_COLOR = "#000000"
!global $COMPONENT_BG_COLOR = "#85BBF0" !global $COMPONENT_BG_COLOR = "#85BBF0"
!global $COMPONENT_BORDER_COLOR = "#78A8D8" !global $COMPONENT_BORDER_COLOR = "#78A8D8"
!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC" !global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC"
@ -19,51 +23,14 @@
' Styling ' Styling
' ################################## ' ##################################
skinparam rectangle<<component>> { UpdateSkinparamsAndLegendEntry("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR)
StereotypeFontColor $COMPONENT_FONT_COLOR UpdateSkinparamsAndLegendEntry("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR)
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam database<<component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam queue<<component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam rectangle<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
skinparam database<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
skinparam queue<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
' Layout ' Layout
' ################################## ' ##################################
SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component")
!procedure LAYOUT_WITH_LEGEND() !procedure LAYOUT_WITH_LEGEND()
hide stereotype hide stereotype
legend right legend right
@ -97,26 +64,26 @@ endlegend
!endif !endif
!endfunction !endfunction
!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias
!endprocedure !endprocedure
!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure !endprocedure

@ -1,6 +1,9 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
' uncomment the following line and comment the first to use locally !if %variable_exists("RELATIVE_INCLUDE")
' !include C4_Context.puml !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. ' Scope: A single software system.
' Primary elements: Containers within the software system in scope. ' Primary elements: Containers within the software system in scope.
@ -17,52 +20,14 @@
' Styling ' Styling
' ################################## ' ##################################
UpdateSkinparamsAndLegendEntry("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR)
skinparam rectangle<<container>> { UpdateSkinparamsAndLegendEntry("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR)
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam database<<container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam queue<<container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam rectangle<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
skinparam database<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
skinparam queue<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
' Layout ' Layout
' ################################## ' ##################################
SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container")
!procedure LAYOUT_WITH_LEGEND() !procedure LAYOUT_WITH_LEGEND()
hide stereotype hide stereotype
legend right legend right
@ -94,33 +59,33 @@ endlegend
!endif !endif
!endfunction !endfunction
!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
rectangle "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="") !unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
queue "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure !endprocedure
' Boundaries ' Boundaries
' ################################## ' ##################################
!unquoted function Container_Boundary($alias, $label) !unquoted procedure Container_Boundary($alias, $label, $tags="")
!return Boundary($alias, $label, "Container") Boundary($alias, $label, "Container", $tags)
!endfunction !endprocedure

@ -1,6 +1,9 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
' uncomment the following line and comment the first to use locally !if %variable_exists("RELATIVE_INCLUDE")
' !include C4.puml !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. ' Scope: A single software system.
' Primary elements: The software system in scope. ' Primary elements: The software system in scope.
@ -11,40 +14,22 @@
' ################################## ' ##################################
!global $PERSON_BG_COLOR = "#08427B" !global $PERSON_BG_COLOR = "#08427B"
!global $PERSON_BORDER_COLOR = "#073B6F"
!global $EXTERNAL_PERSON_BG_COLOR = "#686868" !global $EXTERNAL_PERSON_BG_COLOR = "#686868"
!global $EXTERNAL_PERSON_BORDER_COLOR = "#8A8A8A"
!global $SYSTEM_BG_COLOR = "#1168BD" !global $SYSTEM_BG_COLOR = "#1168BD"
!global $SYSTEM_BORDER_COLOR = "#3C7FC0"
!global $EXTERNAL_SYSTEM_BG_COLOR = "#999999" !global $EXTERNAL_SYSTEM_BG_COLOR = "#999999"
!global $EXTERNAL_SYSTEM_BORDER_COLOR = "#8A8A8A"
' Styling ' Styling
' ################################## ' ##################################
skinparam rectangle<<person>> { UpdateSkinparamsAndLegendEntry("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR)
StereotypeFontColor $ELEMENT_FONT_COLOR UpdateSkinparamsAndLegendEntry("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR)
FontColor $ELEMENT_FONT_COLOR UpdateSkinparamsAndLegendEntry("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR)
BackgroundColor $PERSON_BG_COLOR UpdateSkinparamsAndLegendEntry("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR)
BorderColor #073B6F
}
skinparam rectangle<<external_person>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_PERSON_BG_COLOR
BorderColor #8A8A8A
}
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 ' Sprites
' ################################## ' ##################################
@ -154,6 +139,8 @@ sprite $person2 [48x48/16] {
' Layout ' Layout
' ################################## ' ##################################
SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system")
!procedure LAYOUT_WITH_LEGEND() !procedure LAYOUT_WITH_LEGEND()
hide stereotype hide stereotype
legend right legend right
@ -215,28 +202,28 @@ endlegend
!endif !endif
!endfunction !endfunction
!unquoted procedure Person($alias, $label, $descr="", $sprite="") !unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getPerson($label, $descr, $sprite)" <<person>> as $alias rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="") !unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getPerson($label, $descr, $sprite)" <<external_person>> as $alias rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure System($alias, $label, $descr="", $sprite="") !unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getSystem($label, $descr, $sprite)" <<system>> as $alias rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias
!endprocedure !endprocedure
!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="") !unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getSystem($label, $descr, $sprite)" <<external_system>> as $alias rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias
!endprocedure !endprocedure
' Boundaries ' Boundaries
' ################################## ' ##################################
!unquoted function Enterprise_Boundary($alias, $label) !unquoted procedure Enterprise_Boundary($alias, $label, $tags="")
!return Boundary($alias, $label, "Enterprise") Boundary($alias, $label, "Enterprise", $tags)
!endfunction !endprocedure
!unquoted function System_Boundary($alias, $label) !unquoted procedure System_Boundary($alias, $label, $tags="")
!return Boundary($alias, $label, "System") Boundary($alias, $label, "System", $tags)
!endfunction !endprocedure

@ -1,23 +1,178 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
' uncomment the following line and comment the first to use locally !if %variable_exists("RELATIVE_INCLUDE")
' !include C4_Container.puml !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 ' 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>> { skinparam rectangle<<node>> {
Shadowing false FontStyle normal
StereotypeFontSize 0
FontColor #000000
BorderColor #A2A2A2
BorderStyle solid
} }
' 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 ' Elements
' ################################## ' ##################################
!unquoted function Deployment_Node($alias, $label)
!return 'rectangle "=='+$label+'" <<node>> as '+$alias !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 !endfunction
!unquoted function Deployment_Node($alias, $label, $type)
!return 'rectangle "=='+$label+'\n<size:'+$TECHN_FONT_SIZE+'>['+$type+']</size>" <<node>> as '+$alias !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 !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

@ -1,6 +1,9 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
' uncomment the following line and comment the first to use locally !if %variable_exists("RELATIVE_INCLUDE")
' !include C4_Component.puml !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. ' Scope: Interactions in an enterprise, software system or container.
' Primary and supporting elements: Depends on the diagram scope - ' Primary and supporting elements: Depends on the diagram scope -

@ -53,7 +53,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![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_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. Colors can help to add additional information or simply to make the diagram more aesthetically pleasing.
It can also help to save some space. It can also help to save some space.
@ -80,6 +80,32 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![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_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")
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() ## LAYOUT_AS_SKETCH()
@ -140,7 +166,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![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_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="") ## 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. 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.

@ -1,4 +1,4 @@
# C4-PlantUML # C4-PlantUML
![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") ![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")
@ -18,17 +18,12 @@ 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. At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo.
To be independent of any internet connectivity, you can also download 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)
```csharp ```csharp
!include path/to/C4.puml java -jar plantuml.jar -DRELATIVE_INCLUDE="." ...
!include path/to/C4_Context.puml
!include path/to/C4_Container.puml
!include path/to/C4_Component.puml
``` ```
Just remember to change the `!include` statements at the top of the files.
If you want to use the always up-to-date version in this repo, use the following: If you want to use the always up-to-date version in this repo, use the following:
```csharp ```csharp
@ -55,7 +50,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology")
In addition to this, it is also possible to define a system or component boundary. In addition to this, it is also possible to define a system or component boundary.
Take a look a look at the following sample of a C4 Container Diagram: Take a look at the following sample of a C4 Container Diagram:
```csharp ```csharp
@startuml Basic Sample @startuml Basic Sample
@ -102,6 +97,34 @@ Rel_R(api, db, "Reads/Writes")
![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") ![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 ## Supported Diagram Types
@ -110,17 +133,17 @@ Diagram types
* System Context & System Landscape diagrams * System Context & System Landscape diagrams
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml` * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml`
* Macros: * Macros:
* `Person(alias, label, ?description, ?sprite)` * `Person(alias, label, ?description, ?sprite, ?tags)`
* `Person_Ext` * `Person_Ext`
* `System(alias, label, ?description, ?sprite)` * `System(alias, label, ?description, ?sprite, ?tags)`
* `System_Ext` * `System_Ext`
* `Boundary(alias, label, ?type)` * `Boundary(alias, label, ?type, ?tags)`
* `Enterprise_Boundary(alias, label)` * `Enterprise_Boundary(alias, label, ?tags)`
* `System_Boundary` * `System_Boundary`
* Container diagram * Container diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml` * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml`
* Additional Macros: * Additional Macros:
* `Container(alias, label, technology, ?description, ?sprite)` * `Container(alias, label, technology, ?description, ?sprite, ?tags)`
* `ContainerDb` * `ContainerDb`
* `ContainerQueue` * `ContainerQueue`
* `Container_Ext` * `Container_Ext`
@ -130,7 +153,7 @@ Diagram types
* Component diagram * Component diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml` * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml`
* Additional Macros: * Additional Macros:
* `Component(alias, label, technology, ?description, ?sprite)` * `Component(alias, label, technology, ?description, ?sprite, ?tags)`
* `ComponentDb` * `ComponentDb`
* `ComponentQueue` * `ComponentQueue`
* `Component_Ext` * `Component_Ext`
@ -145,7 +168,10 @@ Diagram types
* Deployment diagram * Deployment diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml` * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml`
* Additional Macros: * Additional Macros:
* `Deployment_Node(alias, label, ?type)` * `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). Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
@ -161,21 +187,191 @@ You can force the direction of a relationship by using:
* `Rel_L`, `Rel_Left` * `Rel_L`, `Rel_Left`
* `Rel_R`, `Rel_Right` * `Rel_R`, `Rel_Right`
In rare cases, you can force the layout using hidden relationships, `Lay_U`, `Lay_D`, `Lay_L`, `Lay_R`. 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 ## Layout Options
C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) * [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) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)
* [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)
C4-PlantUML also comes with some default person sprite options: C4-PlantUML also comes with some default person sprite options:
* [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite) * [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite)
* [SHOW_PERSON_SPRITE_ACTIVE()](LayoutOptions.md#show_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 ## Snippets for Visual Studio Code

@ -1,8 +1,10 @@
@startuml @startuml
!include ./../C4_Component.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4_Container.puml !if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Context.puml !include ./../C4_Component.puml
!include ./../C4.puml !else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!endif
LAYOUT_WITH_LEGEND() LAYOUT_WITH_LEGEND()

@ -1,7 +1,10 @@
@startuml @startuml
!include ./../C4_Container.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4_Context.puml !if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4.puml !include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
LAYOUT_TOP_DOWN() LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH() 'LAYOUT_AS_SKETCH()

@ -1,7 +1,10 @@
@startuml "bigbankplc" @startuml
!include ./../C4_Container.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4_Context.puml !if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4.puml !include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
skinparam wrapWidth 200 skinparam wrapWidth 200
skinparam maxMessageSize 200 skinparam maxMessageSize 200
@ -10,7 +13,6 @@ LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH() 'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND() LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer") Person(customer, Customer, "A customer")
System_Boundary(c1, "Customer Information") { System_Boundary(c1, "Customer Information") {

@ -1,13 +1,15 @@
@startuml "techtribesjs" @startuml
!include ./../C4_Container.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4_Context.puml !if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4.puml !include ./../C4_Container.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!endif
LAYOUT_TOP_DOWN() LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH() 'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND() LAYOUT_WITH_LEGEND()
Person_Ext(anonymous_user, "Anonymous User") Person_Ext(anonymous_user, "Anonymous User")
Person(aggregated_user, "Aggregated User") Person(aggregated_user, "Aggregated User")
Person(administration_user, "Administration User") Person(administration_user, "Administration User")

@ -1,6 +1,10 @@
@startuml @startuml
!include ./../C4_Context.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4.puml !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_TOP_DOWN()
'LAYOUT_AS_SKETCH() 'LAYOUT_AS_SKETCH()

@ -1,6 +1,10 @@
@startuml @startuml
!include ./../C4_Context.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4.puml !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() LAYOUT_WITH_LEGEND()

@ -1,6 +1,10 @@
@startuml "enterprise" @startuml
!include ./../C4_Context.puml ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!include ./../C4.puml !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_TOP_DOWN()
'LAYOUT_AS_SKETCH() 'LAYOUT_AS_SKETCH()

@ -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

@ -44,12 +44,16 @@ Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sam
Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml)
![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/png/rLPBRziu4BxhLypwaWSIkp62HT5J73lR96l7HkKqBR20CI9fcLkA54ZAhhVeV-zGiYChSO2cFQqFWZZcDuzlNhfm7gqlCXNz8JLJ1HUmy3vtxpeTYwjsAlsYI0edB3FQ2-tRp6GTv5QYNgeYBphzyzE9GktlHyEEGY-S9z5i879brba0v47v0HIQa440VY5WRfGoAwbJK58BGCsXyRUqZjuCa6LGXg5IQzBnwE8U2z71iFTvV3-TzU9P_FVLj7yTRGGFDzFhsV3g_TNTuF0eYhpqIa0DXu74r696FbcueI2j5XukKNy9xiLhvqK6fp2KIn55DMnsPxWup1KxWTQbJ4i0qB7rv0mSFG8JGN7hw5i4z7kgXMi29J9D27EAkJm-Flx7VtqRLDqdXVO5dFtPVdCEmscyLR5F3UR85e90lV85fYPZw5jF1V2s_NLNJVZrARj8cR2aH0R0v0PwUQuatPT61nstkCGoKN5k0pEZZ_qWdbYpb5ouvzJDAUK1Z4hwDImbeU4s7jzrhgVJIGnaejqwUlJYUrG_dmQseOOdRyvsY0h7rr9aB38LA1gNBvJNYPKPsdMhbfrrsOlq3993dj3L0IKrGIS2x8DGMCK9Mp74H7U6uT_O6qliX1O2ArBfl2rlWzHKS5dvVW8BT0l10GkgVkqth0EpWeSZAdS2o9XmZheXfOFmxFNaTPlaTN-DlEukUx6WkS1VoL_tVqPWialSIYHLUvx_MdjsVxC_oJu17aJoa_qv48ecbtNbNALXJzp0PfQNjuFuMUiwUb0cSqnfDjTczZ7s_VbGp4nmiLyuRp9X3noGG98wBfQIYIhUdCutunXevlOqjqRoRSXrg1MCheygFA42-1DImqhT63v8UoIJdYh05OcZICnyVsJDeKGRXctSTEM48eoqJNz3q7k2f7MLDwCCaY9C-U2nf8NfpDp3WzJSh5nmg8ewGpQENze4YQMxmcuoV5cTWiBtneICz1UMh9t0oFmdbKBuIrenDurogVbpEOR-gN8v2RdSKp8nipAlIg6dqqAXRHAhrEznIVKAcwYsvLCM3JNzOuAhdJF2BsGmR9wmxwbWJV3aNsTqjJ487K1bLAz2b2rJaL5tWobZOdNwTXpTu4eZvRZ_890xc1Ft9L4hIwMsDNSxkEmt0TsVHmJjMq2L6hfLVZ7GLVfOkH2QqzVD3m00 "Deployment Diagram for Internet Banking System - Live") ![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 ## Icons
Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) 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") ![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")

@ -14,7 +14,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info
Container_Boundary(api, "API Application") { Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") 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(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.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe 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(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(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") 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") 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(customer, email_system, "Sends e-mails to")
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
@enduml @enduml

@ -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

@ -3,8 +3,10 @@
' uncomment the following line and comment the first to use locally ' uncomment the following line and comment the first to use locally
' !include C4_Deployment.puml ' !include C4_Deployment.puml
'LAYOUT_AS_SKETCH AddTagSupport("fallback", $bgColor="#c0c0c0")
LAYOUT_WITH_LEGEND()
' dynamic legend is used (activated in last line)
' LAYOUT_WITH_LEGEND()
title Deployment Diagram for Internet Banking System - Live title Deployment Diagram for Internet Banking System - Live
@ -19,9 +21,9 @@ Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
} }
} }
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS"){ Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="fallback") {
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c"){ 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.") 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(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){
@ -36,16 +38,17 @@ Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
} }
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){ Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox"){ 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.") 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(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel(web, spa, "Delivers to the customer's web browser") Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC")
Rel(db, db2, "Replicates data to") Rel_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml @enduml
Loading…
Cancel
Save