Alawn/C4-PlantUML
1
0
Fork 0
mirror of https://github.com/plantuml-stdlib/C4-PlantUML.git synced 2022-10-18 01:14:54 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'feature/110' of https://github.com/kirchsth/C4-PlantUML into master

Browse Source
This commit is contained in:
Adrian Lupu
2021-02-07 15:34:16 +02:00
parent 7df300d396 8c4c1ecc5b
commit 6cc10231fe
22 changed files with 967 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/run-percy-tests.yml
+1 -1
View File
@@ -19,7 +19,7 @@ jobs:
- name: Process diagrams
uses: Timmy/plantuml-action@v1
with:
args: '-v percy -o _parsed'
args: '-v percy -o _parsed -DRELATIVE_INCLUDE="."'
- name: Upload
run: npx percy upload percy/_parsed
env:
C4.puml
+243 -9
View File
@@ -4,8 +4,15 @@
' ##################################
!global $ELEMENT_FONT_COLOR = "#FFFFFF"
!global $ARROW_COLOR = "#666666"
!global $BOUNDARY_COLOR = "#444444"
!global $LEGEND_FONT_COLOR = "#FFFFFF"
!global $LEGEND_TITLE_COLOR = "#000000"
!global $LEGEND_UNDEFINED_BK_COLOR = "#87AECA"
!global $LEGEND_UNDEFINED_FONT_COLOR = "#B7DEFA"
' Styling
' ##################################
@@ -37,19 +44,228 @@ skinparam queue {
}
skinparam Arrow {
Color #666666
FontColor #666666
Color $ARROW_COLOR
FontColor $ARROW_COLOR
FontSize 12
}
skinparam rectangle<<boundary>> {
Shadowing false
StereotypeFontSize 0
FontColor #444444
BorderColor #444444
FontColor $BOUNDARY_COLOR
BorderColor $BOUNDARY_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!="")
!$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
' ##################################
@@ -72,16 +288,34 @@ top to bottom direction
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
' ##################################
!unquoted function Boundary($alias, $label)
!return 'rectangle "=='+$label+'" <<boundary>> as '+$alias
!endfunction
!unquoted function Boundary($alias, $label, $type)
!return 'rectangle "=='+$label+'\n<size:'+$TECHN_FONT_SIZE+'>['+$type+']</size>" <<boundary>> as '+$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
' ##################################
C4_Component.puml
+23 -56
View File
@@ -1,6 +1,9 @@
!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
' 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.
@@ -11,6 +14,7 @@
' ##################################
!global $COMPONENT_FONT_COLOR = "#000000"
!global $COMPONENT_BG_COLOR = "#85BBF0"
!global $COMPONENT_BORDER_COLOR = "#78A8D8"
!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC"
@@ -19,51 +23,14 @@
' Styling
' ##################################
skinparam rectangle<<component>> {
StereotypeFontColor $COMPONENT_FONT_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
}
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
' ##################################
SetDefaultLegendEntries("person\nsystem\ncontainer\ncomponent\nexternal_person\nexternal_system\nexternal_container\nexternal_component")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
@@ -97,26 +64,26 @@ endlegend
!endif
!endfunction
!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="")
rectangle "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias
!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="")
database "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias
!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="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias
!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="")
rectangle "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias
!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="")
database "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias
!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias
!endprocedure
!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $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
C4_Container.puml
+25 -60
View File
@@ -1,6 +1,9 @@
!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
' 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.
@@ -17,52 +20,14 @@
' Styling
' ##################################
skinparam rectangle<<container>> {
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
}
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
' ##################################
SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
@@ -94,33 +59,33 @@ endlegend
!endif
!endfunction
!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="")
rectangle "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias
!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="")
database "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias
!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="")
queue "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias
!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="")
rectangle "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias
!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="")
database "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias
!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="")
database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias
!endprocedure
!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="")
queue "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $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
' ##################################
!unquoted function Container_Boundary($alias, $label)
!return Boundary($alias, $label, "Container")
!endfunction
!unquoted procedure Container_Boundary($alias, $label, $tags="")
Boundary($alias, $label, "Container", $tags)
!endprocedure
C4_Context.puml
+30 -43
View File
@@ -1,6 +1,9 @@
!include https://raw.githubusercontent.com/plantuml-stdlib/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.
@@ -11,40 +14,22 @@
' ##################################
!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
}
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<<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
}
sprite $person [48x48/16] {
000000000000000000000000000000000000000000000000
@@ -100,6 +85,8 @@ sprite $person [48x48/16] {
' Layout
' ##################################
SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system")
!procedure LAYOUT_WITH_LEGEND()
hide stereotype
legend right
@@ -144,28 +131,28 @@ endlegend
!endif
!endfunction
!unquoted procedure Person($alias, $label, $descr="", $sprite="")
rectangle "$getPerson($label, $descr, $sprite)" <<person>> as $alias
!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="")
rectangle "$getPerson($label, $descr, $sprite)" <<external_person>> as $alias
!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="")
rectangle "$getSystem($label, $descr, $sprite)" <<system>> as $alias
!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="")
rectangle "$getSystem($label, $descr, $sprite)" <<external_system>> as $alias
!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="")
rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias
!endprocedure
' Boundaries
' ##################################
!unquoted function Enterprise_Boundary($alias, $label)
!return Boundary($alias, $label, "Enterprise")
!endfunction
!unquoted function System_Boundary($alias, $label)
!return Boundary($alias, $label, "System")
!endfunction
!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
C4_Deployment.puml
+167 -12
View File
@@ -1,23 +1,178 @@
!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
' 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>> {
Shadowing false
StereotypeFontSize 0
FontColor #000000
BorderColor #A2A2A2
BorderStyle solid
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 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
!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
!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
C4_Dynamic.puml
+6 -3
View File
@@ -1,6 +1,9 @@
!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
' 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 -
LayoutOptions.md
+27 -1
View File
@@ -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_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.
@@ -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")
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()
README.md
+173 -15
View File
@@ -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.
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)
```c#
!include path/to/C4.puml
!include path/to/C4_Context.puml
!include path/to/C4_Container.puml
!include path/to/C4_Component.puml
java -jar plantuml.jar -DRELATIVE_INCLUDE="." ...
```
Just remember to change the `!include` statements at the top of the files.
If you want to use the always up-to-date version in this repo, use the following:
```c#
@@ -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")
Entities can be decorated with tags and explained via dynamic calculated legends, for example:
```cs
@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
@@ -110,17 +133,17 @@ Diagram types
* System Context & System Landscape diagrams
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml`
* Macros:
* `Person(alias, label, ?description, ?sprite)`
* `Person(alias, label, ?description, ?sprite, ?tags)`
* `Person_Ext`
* `System(alias, label, ?description, ?sprite)`
* `System(alias, label, ?description, ?sprite, ?tags)`
* `System_Ext`
* `Boundary(alias, label, ?type)`
* `Enterprise_Boundary(alias, label)`
* `Boundary(alias, label, ?type, ?tags)`
* `Enterprise_Boundary(alias, label, ?tags)`
* `System_Boundary`
* Container diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml`
* Additional Macros:
* `Container(alias, label, technology, ?description, ?sprite)`
* `Container(alias, label, technology, ?description, ?sprite, ?tags)`
* `ContainerDb`
* `ContainerQueue`
* `Container_Ext`
@@ -130,7 +153,7 @@ Diagram types
* Component diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml`
* Additional Macros:
* `Component(alias, label, technology, ?description, ?sprite)`
* `Component(alias, label, technology, ?description, ?sprite, ?tags)`
* `ComponentDb`
* `ComponentQueue`
* `Component_Ext`
@@ -145,7 +168,10 @@ Diagram types
* Deployment diagram
* Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml`
* 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).
@@ -206,10 +232,142 @@ Rel_L(x, s4, "uses")
C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams:
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend)
* [LAYOUT_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)
## 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.
```cs
@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.
```cs
@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 = "#fee0b6b"
!$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](http://www.plantuml.com/plantuml/png/dPHVRvim5CNV-HIKzI6LceGGag19aHeesYhbJvKiclQ4R7n3KC4WswZfjvy1RtXfkwfHNiBldkDxZf6uum8nKUMPSPNIEAi8c4SXIlvrE6JeUP2aubZXYWEB2og0Ya5SvCCoGxJszBaWMOg7WTj_hD5-jHpcY0jW4aL1xJY9GLcVRbnT1vlbPXijeeavDwqliyCOsvwbSRVXU3pnxAdEnmq7stD6hiwTXXy8zgPZdOzQ3c3ZAUu6wt3_OxjOjiDP_UjclZ8HZo306bTBi8CmSJIkGddsR8nYZQiI4zUPUPx6LMc7sBOhppVs9K42TayfBH53ELzGieG4A0cfO2yzgmJ62shTcjSu2OgiOFFk-YGy55Hqk2jNwmj6W9rvHdB0ZuWKpobDvfPW5LWt7uQ0am16KHQzcyQ_88sywuzNynSk87-pltj1V-SJPTzTxL-msgzN6u_D_VNYYeiY1tPhMYr1cUaZAYCbPg1cyhNicW0zt4vK7kbve7L247yzhL0wb2KAJwANepJhF66_VZQvKfu9wO6X7AHizUV_6sTl8TEIlqgrvy2bJAeY7yLFclJV93kWX9lGvE6cA9Hd3Mbon0Kxg_jVTsjzxT0AgLJ6xllcPtJ_QxrOFGJHClmMhkzxDyOTK59_b7u3 "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).
```cs
@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).
percy/C4_Component Diagram Sample - bigbankplc.puml
+6 -4
View File
@@ -1,8 +1,10 @@
@startuml
!include ./../C4_Component.puml
!include ./../C4_Container.puml
!include ./../C4_Context.puml
!include ./../C4.puml
' 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()
percy/C4_Container Diagram Sample - bigbankplc.puml
+6 -3
View File
@@ -1,7 +1,10 @@
@startuml
!include ./../C4_Container.puml
!include ./../C4_Context.puml
!include ./../C4.puml
' 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()
percy/C4_Container Diagram Sample - message bus.puml
+7 -5
View File
@@ -1,7 +1,10 @@
@startuml "bigbankplc"
!include ./../C4_Container.puml
!include ./../C4_Context.puml
!include ./../C4.puml
@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
@@ -10,7 +13,6 @@ LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")
System_Boundary(c1, "Customer Information") {
percy/C4_Container Diagram Sample - techtribesjs.puml
+7 -5
View File
@@ -1,13 +1,15 @@
@startuml "techtribesjs"
!include ./../C4_Container.puml
!include ./../C4_Context.puml
!include ./../C4.puml
@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")
percy/C4_Context Diagram Sample - bigbankplc-landscape.puml
+6 -2
View File
@@ -1,6 +1,10 @@
@startuml
!include ./../C4_Context.puml
!include ./../C4.puml
' 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()
percy/C4_Context Diagram Sample - bigbankplc.puml
+6 -2
View File
@@ -1,6 +1,10 @@
@startuml
!include ./../C4_Context.puml
!include ./../C4.puml
' 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()
percy/C4_Context Diagram Sample - enterprise.puml
+7 -3
View File
@@ -1,6 +1,10 @@
@startuml "enterprise"
!include ./../C4_Context.puml
!include ./../C4.puml
@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()
percy/C4_Deployment Diagram Sample - bigbankplc-details.puml
+68
View File
@@ -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
percy/C4_Deployment Diagram Sample - bigbankplc.puml
+57
View File
@@ -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
percy/C4_Dynamic Diagram Sample - bigbankplc.puml
+20
View File
@@ -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
samples/C4CoreDiagrams.md
+6 -2
View File
@@ -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)
![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
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")
samples/C4_Deployment Diagram Sample - bigbankplc-details.puml
+65
View File
@@ -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
samples/C4_Deployment Diagram Sample - bigbankplc.puml
+11 -8
View File
@@ -3,8 +3,10 @@
' uncomment the following line and comment the first to use locally
' !include C4_Deployment.puml
'LAYOUT_AS_SKETCH
LAYOUT_WITH_LEGEND()
AddTagSupport("fallback", $bgColor="#c0c0c0")
' dynamic legend is used (activated in last line)
' LAYOUT_WITH_LEGEND()
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.")
}
}
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS"){
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c"){
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Deployment_Node(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"){
@@ -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(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.")
}
}
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel(web, spa, "Delivers to the customer's web browser")
Rel_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(db, db2, "Replicates data to")
Rel_R(db, db2, "Replicates data to")
SHOW_DYNAMIC_LEGEND()
@enduml