diff --git a/.github/stale.yml b/.github/stale.yml index dc90e5a..1bb37ed 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -4,14 +4,15 @@ daysUntilStale: 60 daysUntilClose: 7 # Issues with these labels will never be considered stale exemptLabels: + - not-stale - pinned - security # Label to use when marking an issue as stale -staleLabel: wontfix +staleLabel: stale # Comment to post when marking an issue as stale. Set to `false` to disable markComment: > This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. + activity in the past 60 days. It will be closed in seven days if no + further activity occurs. Thank you for your contributions. # Comment to post when closing a stale issue. Set to `false` to disable closeComment: false diff --git a/.github/workflows/run-percy-tests.yml b/.github/workflows/run-percy-tests.yml index 8433ed4..7aed58d 100644 --- a/.github/workflows/run-percy-tests.yml +++ b/.github/workflows/run-percy-tests.yml @@ -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: diff --git a/C4.puml b/C4.puml index 2c8d396..49c6b17 100644 --- a/C4.puml +++ b/C4.puml @@ -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<> { 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 +">" + ' ..white rectangle + !if ($borderColor!="") + !$tagEntry = $tagEntry + " " + !else + !$tagEntry = $tagEntry + " " + !endif + !if ($fontColor!="") + !$tagEntry = $tagEntry + "" + !else + !$tagEntry = $tagEntry + "" + !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 + " " + !$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 +|**Legend** | +$showActiveLegendEntries($tagDefaultLegend) +$showActiveLegendEntries($tagCustomLegend) +endlegend +!endprocedure + ' Boundaries ' ################################## -!unquoted function Boundary($alias, $label) -!return 'rectangle "=='+$label+'" <> as '+$alias -!endfunction -!unquoted function Boundary($alias, $label, $type) -!return 'rectangle "=='+$label+'\n['+$type+']" <> as '+$alias +!function $getBoundary($label, $type) + !if ($type == "") + !return '==' + $label + !endif + !if (type != "") + !return '==' + $label + '\n[' + $type + ']' + !endif !endfunction +!unquoted procedure Boundary($alias, $label, $type="", $tags="") +rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias +!endprocedure + ' Relationship ' ################################## diff --git a/C4_Component.puml b/C4_Component.puml index ef92391..24d8166 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -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<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $COMPONENT_BG_COLOR - BorderColor $COMPONENT_BORDER_COLOR -} - -skinparam rectangle<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR - BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $COMPONENT_FONT_COLOR - FontColor $COMPONENT_FONT_COLOR - BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR - BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR -} - -skinparam queue<> { - 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)" <> 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)" <> 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)" <> 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)" <> 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)" <> 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)" <> 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 \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 996304f..87e60f7 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -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<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam queue<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $CONTAINER_BG_COLOR - BorderColor $CONTAINER_BORDER_COLOR -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR - BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR -} - -skinparam database<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR - BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR -} - -skinparam queue<> { - 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)" <> 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)" <> 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)" <> 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)" <> 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)" <> 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)" <> 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 diff --git a/C4_Context.puml b/C4_Context.puml index 90edf2b..d78dce3 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -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<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $PERSON_BG_COLOR - BorderColor #073B6F -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_PERSON_BG_COLOR - BorderColor #8A8A8A -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $SYSTEM_BG_COLOR - BorderColor #3C7FC0 -} +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<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A -} ' Sprites ' ################################## @@ -154,6 +139,8 @@ sprite $person2 [48x48/16] { ' Layout ' ################################## +SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system") + !procedure LAYOUT_WITH_LEGEND() hide stereotype legend right @@ -215,28 +202,28 @@ endlegend !endif !endfunction -!unquoted procedure Person($alias, $label, $descr="", $sprite="") -rectangle "$getPerson($label, $descr, $sprite)" <> 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)" <> 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)" <> 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)" <> 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 diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 7d65d84..e3dd8b6 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -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<> { - 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+'" <> 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) + '\n' + !$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) + '\n' + !$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['+$type+']" <> 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[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !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[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !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[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !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 diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index b41eb63..ff4d007 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -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 - diff --git a/LayoutOptions.md b/LayoutOptions.md index fd399d4..023f07f 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -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() @@ -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_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. diff --git a/README.md b/README.md index 12999f9..63ffbd8 100644 --- a/README.md +++ b/README.md @@ -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") @@ -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) ```csharp -!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: ```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. -Take a look a look at the following sample of a C4 Container Diagram: +Take a look at the following sample of a C4 Container Diagram: ```csharp @startuml Basic Sample @@ -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: + +```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 @@ -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). @@ -161,21 +187,191 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `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 C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) +* [LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_dynamic_legend) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) C4-PlantUML also comes with some default person sprite options: * [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite) -* [SHOW_PERSON_SPRITE_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 diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml index bf74c32..93762ff 100644 --- a/percy/C4_Component Diagram Sample - bigbankplc.puml +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -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() diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index 799f99f..241c3a5 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -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() diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index d57d3d6..89824d0 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -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") { diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml index d78a459..898844e 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -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") diff --git a/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml index 73915dc..b7ca084 100644 --- a/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/percy/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -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() diff --git a/percy/C4_Context Diagram Sample - bigbankplc.puml b/percy/C4_Context Diagram Sample - bigbankplc.puml index 98f35cd..a540da0 100644 --- a/percy/C4_Context Diagram Sample - bigbankplc.puml +++ b/percy/C4_Context Diagram Sample - bigbankplc.puml @@ -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() diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index dc8d084..b407c2f 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -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() diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 0000000..0baf7db --- /dev/null +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -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 \ No newline at end of file diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..db9839d --- /dev/null +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -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 \ No newline at end of file diff --git a/percy/C4_Dynamic Diagram Sample - bigbankplc.puml b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..207e4ec --- /dev/null +++ b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -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 \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 832b442..e639581 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -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") diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 8eea756..4f125ec 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -14,7 +14,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info Container_Boundary(api, "API Application") { Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") - Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 5affd26..5d83a61 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -15,7 +15,7 @@ System_Boundary(c1, "Internet Banking") { Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser") Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") - ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") } @@ -34,4 +34,4 @@ Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC Rel_Back(customer, email_system, "Sends e-mails to") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml new file mode 100644 index 0000000..bcf430a --- /dev/null +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -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 \ No newline at end of file diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 087200b..d050be6 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -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 \ No newline at end of file