diff --git a/C4.puml b/C4.puml index 2c8d396..2031dfe 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,165 @@ 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 + ' Layout ' ################################## @@ -72,16 +225,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 7e345db..c38ec55 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -11,6 +11,7 @@ ' ################################## !global $COMPONENT_FONT_COLOR = "#000000" + !global $COMPONENT_BG_COLOR = "#85BBF0" !global $COMPONENT_BORDER_COLOR = "#78A8D8" !global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC" @@ -19,51 +20,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 +61,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)" $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)" $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)" $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)" $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)" $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)" $toStereos("external_component",$tags) as $alias !endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index 0cadf9f..eed648a 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -17,52 +17,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 +56,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)" $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)" $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)" $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)" $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)" $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)" $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 1259c67..debfcb0 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -1,6 +1,6 @@ !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4.puml ' uncomment the following line and comment the first to use locally -' !include C4.puml +' !include C4.puml ' Scope: A single software system. ' Primary elements: The software system in scope. @@ -11,40 +11,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 -} +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 $SYSTEM_BG_COLOR - BorderColor #3C7FC0 -} - -skinparam rectangle<> { - StereotypeFontColor $ELEMENT_FONT_COLOR - FontColor $ELEMENT_FONT_COLOR - BackgroundColor $EXTERNAL_SYSTEM_BG_COLOR - BorderColor #8A8A8A -} ' Sprites ' ################################## @@ -154,6 +136,8 @@ sprite $person2 [48x48/16] { ' Layout ' ################################## +SetDefaultLegendEntries("person\nsystem\nexternal_person\nexternal_system") + !procedure LAYOUT_WITH_LEGEND() hide stereotype legend right @@ -215,28 +199,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)" $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)" $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)" $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)" $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 e6936cf..285f3fe 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -6,19 +6,25 @@ ' ################################## !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 $NODE_FONT_COLOR - BorderColor $NODE_BORDER_COLOR - BorderStyle solid } +' Layout +' ################################## + +' comment if node should not be added to legend. No dynamic legend extension required +SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode") + ' Special ' ################################## @@ -30,11 +36,8 @@ skinparam rectangle<> { ' Elements ' ################################## -!unquoted function Deployment_Node($alias, $label) -!return 'rectangle "=='+$label+'" <> as '+$alias -!endfunction -!unquoted function Deployment_Node($alias, $label, $type) +!unquoted function $breakLine($type) !$multiLine = "" !if (%strpos($type, "\n") >= 0) !while (%strpos($type, "\n") >= 0) @@ -65,8 +68,19 @@ skinparam rectangle<> { !endif !if (%strlen($type)>0) !$multiLine = $multiLine + $type -!else !endif -!return 'rectangle "=='+$label+'\n['+$multiLine+']" <> as '+$alias +!return $multiLine +!endfunction + +!function $getNode($label, $type) + !if ($type == "") + !return '==' + $label + !endif + !if (type != "") + !return '==' + $label + '\n[' + $breakLine($type) + ']' + !endif !endfunction +!unquoted procedure Deployment_Node($alias, $label, $type="", $tags="") +rectangle "$getNode($label, $type)" $toStereos("node",$tags) as $alias +!endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index 5531553..b0a3f04 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -53,7 +53,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/PL1DhzCm4BpxLopbq5GgYOeuSMg8IelKGjIa84wHcop4mX-MlL6e4F_zRTI-zadFbvLtPdTcTXr91XgCXdt-yzkfRlQRptLp_BBTrL19upMADygsUkWGUY8VFsPPa6FwMr4_d8U8eNMMq5BQEfFzKQ7j8_LPyU5TgQMbqs6VuL_6E-ousHHCbifYI3rh2l5AD5a8KMA8pYQoCyekOPPFLKKAaboOBKHrYOIc-UG6sybmIThL4kPNh_C5_1F0xwwJZ7XkfFUyvmUU8VTUgrQISdR6hUBj4lAgJBzkQXu92E_J5Ho-5nEMQ-t625F42EI0ytd953DeKgm5zQY8C00fWvgr8dlxVtENq1NaFJSQW-A8-ZdLmzOfyYJNNLsN5RCcqXrzhDaYHVxYL7u5PrwEhFc-VCud "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](http://www.plantuml.com/plantuml/png/PL1Fxz904BtlfnZnG4cm3SQJ9sebO0BOs2Bnr2pjQ3VkdytkD9KOlxlJW63osyjavxsPzzwi8yb0Wz6mpxzzFjND-LEzQ_QRxURu4Iffl4RnIjbM3nr2J-JZ-omBSan_AEg7on0njCuIMafRPxAVAhHzf3uhthqfjRHqEkmp_CLuXnqtcuB9KbaCgMTH8Lwg9WiXIWpHsKHsHjabpFAfgaX1aWkpXQYkaT0q7znWEnckIRjQmlncThw0tmBuFOII4I-Dz9xtdF42kVTQjPAKipDk5Q-Na5TbUjpKF18GtgOhE7mj9YpNseqHfemHo047z98fPj2aM0lgKH5X0586DMj5zlRdxYwX6yXxxZG6nHVK_r8zRPqYJtBTrNLPCMiYFT3dcYrIv2zEvNjmvl-HDH-Ox_aN "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() diff --git a/README.md b/README.md index 21596e6..b0bf902 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Extended C4-PlantUML +# Extended C4-PlantUML This branch is basically https://github.com/plantuml-stdlib/C4-PlantUML/tree/master extended with my open PRs. @@ -111,6 +111,34 @@ Rel_R(api, db, "Reads/Writes") ![test](http://www.plantuml.com/plantuml/png/hL9DZzem4BtdLtWviTA23sqlFIq2saNYW_9Hr1CQue6uTUpKCu7-_8v3Yb0_f1xsP6VUotlpPlnC397hqcKFrkUkDgWAvehUQntXqZzPBkf3JHZpu1azz_DGwcysvWLneOTlUqi7dhUpgSOVWXiqKjmFXGpMO-nNIJfxC7YKJpKQVvuC5_FrVtXmNO69RtILz4MaPmNj7ONHeofQHj8b46FK1iy9evlBXyLyCzYDrulP-5MDcXfSa4A9lNUtWTrIQV2dsa4R-a_uAvpXNrX9tzsUC9xnzz_lqkZKExKpdGw-BBQR_MwoUTbFnn_7yr7tCSkMGWY-cuXFgZEiYQNPs97x4aFbK741h3oYKLKCfiwP4jW8Tnwps-AwL87Kryj1WjjWwRefK9L2KTOpnYFahIHBFM_jhXY8jhh8pEyLxYsWie8CbfD4ICD9vmjuuv0KEATaLq8aKYwSR7vZtMcC3brpaFe860v0c3WpcyT0uSXg_MdQI0Pdw5VS9nMYaHR5Hjey1vkZdCSGIs0RVEBVxKAyiXMwTfxNcMm9AT6QfoM4X3U8vFaxl5zTipQjhX0CwLtpiWH-Hc_IFdy2 "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 @@ -221,7 +249,7 @@ Rel_L(x, s4, "uses") 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) @@ -230,6 +258,96 @@ 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) +## 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") + ## 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). diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 0f2c39e..79941df 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"){ @@ -48,4 +50,5 @@ 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