diff --git a/C4.puml b/C4.puml
index 51d9c349..bef1de5f 100644
--- a/C4.puml
+++ b/C4.puml
@@ -8,12 +8,16 @@
 !global $ARROW_COLOR = "#666666"
 
 !global $BOUNDARY_COLOR = "#444444"
-!global $BOUNDARY_BG_COLOR = "#FFFFFF"
+!global $BOUNDARY_BG_COLOR = "transparent"
 
 !global $LEGEND_FONT_COLOR = "#FFFFFF"
 !global $LEGEND_TITLE_COLOR = "#000000"
-!global $LEGEND_UNDEFINED_BG_COLOR = "#D5CFEE"
-!global $LEGEND_UNDEFINED_FONT_COLOR = "#8B77E4"
+' %darken(darkkhaki,50), #khaki
+!global $LEGEND_DARK_COLOR = "#66622E"
+!global $LEGEND_LIGHT_COLOR = "#khaki"
+
+' Labels
+' ##################################
 
 !global $LEGEND_SHADOW_TEXT = "(shadow) "
 !global $LEGEND_NO_SHADOW_TEXT = "(no shadow) "
@@ -21,11 +25,25 @@
 !global $LEGEND_NO_FONT_TEXT = "(no text color) "
 !global $LEGEND_NO_BG_TEXT = "(no back color) "
 !global $LEGEND_NO_LINE_TEXT = "(no line color) "
+!global $LEGEND_ROUNDED_BOX = "(rounded box) "
+!global $LEGEND_EIGHT_SIDED = "(eight sided) "
+!global $LEGEND_DOTTED_LINE = "(dotted) "
+!global $LEGEND_DASHED_LINE = "(dashed) "
+!global $LEGEND_BOLD_LINE = "(bold) "
 
 ' Styling
 ' ##################################
 
 !global $TECHN_FONT_SIZE = 12
+!global $ROUNDED_BOX_SIZE = 25
+!global $EIGHT_SIDED_SIZE = 18
+
+!global $ROUNDED_BOX = "roundedBox"
+!global $EIGHT_SIDED = "eightSided"
+
+!global $DOTTED_LINE = "dotted"
+!global $DASHED_LINE = "dashed"
+!global $BOLD_LINE = "bold"
 
 skinparam defaultTextAlignment center
 
@@ -36,6 +54,13 @@ skinparam LegendBorderColor transparent
 skinparam LegendBackgroundColor transparent
 skinparam LegendFontColor $LEGEND_FONT_COLOR
 
+skinparam shadowing<<legendArea>> false
+' #00000000 is transparent
+skinparam rectangle<<legendArea>> {
+    backgroundcolor #00000000
+    bordercolor #00000000
+}
+
 skinparam rectangle {
     StereotypeFontSize 12
     shadowing false
@@ -51,13 +76,24 @@ skinparam queue {
     shadowing false
 }
 
-skinparam Arrow {
+skinparam arrow {
     Color $ARROW_COLOR
     FontColor $ARROW_COLOR
     FontSize 12
 }
 
-' Some boundary skinparam have to be set a package skinparams too (PlantUML uses internal packages)
+skinparam actor {
+    StereotypeFontSize 12
+    shadowing false
+    style awesome
+}
+
+skinparam person {
+    StereotypeFontSize 12
+    shadowing false
+}
+
+' Some boundary skinparams have to be set as package skinparams too (PlantUML uses internal packages)
 skinparam package {
     StereotypeFontSize 6
     StereotypeFontColor $BOUNDARY_BG_COLOR
@@ -101,6 +137,7 @@ skinparam rectangle<<boundary>> {
   !return $stereos
 !endfunction
 
+' element specific (unused are hidden based on mask)
 !unquoted function $toStereos($elementType, $tags)
   !if (%strlen($tags) == 0)
     !$stereos = '<<' + $elementType + '>>'
@@ -108,25 +145,38 @@ skinparam rectangle<<boundary>> {
     !return $stereos
   !endif
   !$stereos = ''
+  !$mask = $resetMask()
   !$brPos = %strpos($tags, "+")
   !while ($brPos >= 0)
     !$tag = %substr($tags, 0, $brPos)
     !$stereos = $stereos + '<<' + $tag + '>>'
+    !$mergedMask = $combineMaskWithTag($mask, $tag)
+    !if ($mergedMask != $mask)
 %set_variable_value("$" + $tag + "Legend", %true())
+      !$mask = $mergedMask
+    !endif
     !$tags = %substr($tags, $brPos+1)
     !$brPos = %strpos($tags, "+")
   !endwhile
   !if (%strlen($tags)>0)
     !$stereos = $stereos + '<<' + $tags + '>>'
+    !$mergedMask = $combineMaskWithTag($mask, $tags)
+    !if ($mergedMask != $mask)
 %set_variable_value("$" + $tags + "Legend", %true())
+      !$mask = $mergedMask
+    !endif
   !endif
   ' has to be last, otherwise PlantUML overwrites all tag specific skinparams
   !$stereos = $stereos + '<<' + $elementType + '>>'
+  !$mergedMask = $combineMaskWithTag($mask, $elementType)
+  !if ($mergedMask != $mask)
 %set_variable_value("$" + $elementType + "Legend", %true())
+    !$mask = $mergedMask
+  !endif
   !return $stereos
 !endfunction
 
-!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
+!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
   !$elementSkin = "skinparam " + $element +"<<" + $tagStereo + ">> {" + %newline()
   !if ($fontColor!="")
     !if ($tagStereo != "boundary")
@@ -146,14 +196,28 @@ skinparam rectangle<<boundary>> {
   !if ($shadowing == "false")
     !$elementSkin = $elementSkin + "    Shadowing<<" + $tagStereo + ">> " + "false" + %newline()
   !endif
+  ' only rectangle supports shape(d corners), define both skinparam that overlays are working
+  !if ($shape!="" && $element == "rectangle")
+    !if ($shape == $ROUNDED_BOX)
+      !$elementSkin = $elementSkin + "    RoundCorner " + $ROUNDED_BOX_SIZE+ %newline()
+      !$elementSkin = $elementSkin + "    DiagonalCorner " + "0" + %newline()
+    !elseif ($shape == $EIGHT_SIDED)
+      !$elementSkin = $elementSkin + "    RoundCorner " + "0" + %newline()
+      !$elementSkin = $elementSkin + "    DiagonalCorner " + $EIGHT_SIDED_SIZE+ %newline()
+    !endif
+  !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)
+!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+  ' only rectangle supports shape(d corners)
+  !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+  !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "")
+  !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "")
+  ' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too
+  !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "")
+  !$tagSkin = $tagSkin + $elementTagSkinparams("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "")
   !if ($tagStereo == "boundary" && $bgColor!="")
     !$tagSkin = $tagSkin + "skinparam package<<boundary>>StereotypeFontColor " + $bgColor + %newline()
     !$tagSkin = $tagSkin + "skinparam rectangle<<boundary>>StereotypeFontColor " + $bgColor + %newline()
@@ -162,50 +226,160 @@ $tagSkin
 !endprocedure
 
 ' arrow colors cannot start with # (legend background has to start with #)
-!function ColorNoHash($c)
+!function $colorWithoutHash($c)
   !if (%substr($c, 0, 1) == "#")
     !$c = %substr($c,1)
   !endif
   !return $c
 !endfunction
 
-!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor)
-  !$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline()
+!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle)
+  !$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline()
   !$elementSkin = $elementSkin + "    Color "
   !if ($lineColor!="")
-    !$elementSkin = $elementSkin + ColorNoHash($lineColor)
+    !$elementSkin = $elementSkin + $colorWithoutHash($lineColor)
   !endif
   !if ($textColor!="")
-    !$elementSkin = $elementSkin + ";text:" + ColorNoHash($textColor)
+    !$elementSkin = $elementSkin + ";text:" + $colorWithoutHash($textColor)
+  !endif
+  !if ($lineStyle!="")
+    !$elementSkin = $elementSkin + ";line." + $lineStyle
   !endif
   !$elementSkin = $elementSkin + %newline()
   !$elementSkin = $elementSkin + "}" + %newline()
 $elementSkin
 !endprocedure
 
-!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
-  !$tagEntry = "|"
-  !if ($bgColor!="")
-    !$bg = $bgColor
+' %is_dark() requires PlantUML version >=1.2021.6
+!if (%function_exists("%is_dark"))
+  !$PlantUMLSupportsDynamicLegendColor = %true()
+!else
+  !$PlantUMLSupportsDynamicLegendColor = %false()
+  !log "dynamic undefined legend colors" requires PlantUML version >= 1.2021.6, therefore only static assigned colors are used
+!endif
+
+!unquoted function $contrastLegend($color)
+  !if (%is_dark($color))
+    !$value = $LEGEND_LIGHT_COLOR
   !else
-    !$bg = $LEGEND_UNDEFINED_BG_COLOR
+    !$value = $LEGEND_DARK_COLOR
   !endif
-  ' named colors have to start with # too 
-  !if (%substr($bg, 0, 1) != "#")
-    !$bg = "#" + $bg
+  !return $value
+!endfunction
+
+!unquoted function $flatLegend($color)
+  !if (%is_dark($color))
+    !$value = $LEGEND_DARK_COLOR
+  !else
+    !$value = $LEGEND_LIGHT_COLOR
   !endif
-  !$tagEntry = $tagEntry + "<" + $bg +">" 
-  ' <U+25AF> ..white rectangle
-  !if ($borderColor!="")
-    !$tagEntry = $tagEntry + "<color:"+$borderColor+"> <U+25AF></color> "
+  !return $value
+!endfunction
+
+' legend background has to start with #
+!function $colorWithHash($c)
+  !if (%substr($c, 0, 1) != "#")
+    !$c = "#" + $c
+  !endif
+  !return $c
+!endfunction
+
+!function $addMaskFlag($mask, $attr)
+  !if ($attr == "")
+    !$mask = $mask + "0"
   !else
-    !$tagEntry = $tagEntry + "<color:"+$bg+"> <U+25AF></color> "
+    !$mask = $mask + "1"
   !endif
-  !if ($fontColor!="")
-    !$tagEntry = $tagEntry + "<color:"+$fontColor+">"
+  !return $mask
+!endfunction
+
+!function $orFlags($flag1, $flag2)
+  !if ($flag1 == "0" && $flag2 == "0")
+    !return "0"
+  !endif
+  !return "1"
+!endfunction
+
+!function $tagLegendMask($bgColor, $fontColor, $borderColor, $shadowing, $shape)
+  !$mask = ""
+  !$mask = $addMaskFlag($mask, $bgColor)
+  !$mask = $addMaskFlag($mask, $fontColor)
+  !$mask = $addMaskFlag($mask, $borderColor)
+  !$mask = $addMaskFlag($mask, $shadowing)
+  !$mask = $addMaskFlag($mask, $shape)
+  !return $mask
+!endfunction
+
+!function $resetMask()
+  !return "00000"
+!endfunction
+
+!function $combineMasks($mask1, $mask2)
+  !$mask = ""
+  !$mask = $mask + $orFlags(%substr($mask1, 0, 1), %substr($mask2, 0, 1))
+  !$mask = $mask + $orFlags(%substr($mask1, 1, 1), %substr($mask2, 1, 1))
+  !$mask = $mask + $orFlags(%substr($mask1, 2, 1), %substr($mask2, 2, 1))
+  !$mask = $mask + $orFlags(%substr($mask1, 3, 1), %substr($mask2, 3, 1))
+  !$mask = $mask + $orFlags(%substr($mask1, 4, 1), %substr($mask2, 4, 1))
+  !return $mask
+!endfunction
+
+!function $combineMaskWithTag($mask1, $tag)
+  !$mask2 = %get_variable_value("$" + $tag+ "LegendMask")
+  !if ($mask2=="")
+    ' !log combineMaskWithTag $mask1, $tag, ... only $mask1
+    !return $mask1
+  !endif
+
+  ' !log combineMaskWithTag $mask1, $tag, $mask2 ... $combineMasks($mask1, $mask2)
+  !return  $combineMasks($mask1, $mask2)
+!endfunction
+
+!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+  !$bg = $bgColor
+  !$fo = $fontColor
+  !$bo = $borderColor
+
+  !if ($fo == "")
+    !if ($bg != "")
+!if ($PlantUMLSupportsDynamicLegendColor)
+      !$fo = $contrastLegend($bg)
+!else
+      !$fo = $LEGEND_DARK_COLOR
+!endif
+    !else
+      !if ($bo == "")
+        !$fo = $LEGEND_DARK_COLOR
+        !$bg = $LEGEND_LIGHT_COLOR
+      !else
+!if ($PlantUMLSupportsDynamicLegendColor)
+        !$fo = $flatLegend($bo)
+        !$bg = $contrastLegend($bo)
+!else
+        !$fo = $LEGEND_DARK_COLOR
+        !$bg = $LEGEND_LIGHT_COLOR
+!endif
+      !endif
+    !endif
   !else
-    !$tagEntry = $tagEntry + "<color:"+$LEGEND_UNDEFINED_FONT_COLOR+">"
+    !if ($bg == "")
+!if ($PlantUMLSupportsDynamicLegendColor)
+      !$bg = $contrastLegend($fo)
+!else
+      !$bg = $LEGEND_LIGHT_COLOR
+!endif
+    !endif
+  !endif
+
+  !if ($bo == "")
+    !$bo = $bg
   !endif
+
+  !$tagEntry = "|"
+  !$tagEntry = $tagEntry + "<" + $colorWithHash($bg) +">" 
+  ' <U+25AF> ..white rectangle
+  !$tagEntry = $tagEntry + "<color:"+$bo+"> <U+25AF></color> "
+  !$tagEntry = $tagEntry + "<color:"+$fo+">"
   !$tagEntry = $tagEntry + " " + $tagStereo + " "
   !if ($shadowing == "true")
     !$tagEntry = $tagEntry + $LEGEND_SHADOW_TEXT
@@ -213,6 +387,12 @@ $elementSkin
   !if ($shadowing == "false")
     !$tagEntry = $tagEntry + $LEGEND_NO_SHADOW_TEXT
   !endif
+  !if ($shape == $ROUNDED_BOX)
+    !$tagEntry = $tagEntry + $LEGEND_ROUNDED_BOX
+  !endif
+  !if ($shape == $EIGHT_SIDED)
+    !$tagEntry = $tagEntry + $LEGEND_EIGHT_SIDED
+  !endif
   !if ($fontColor == "" && $bgColor == "")
       !$tagEntry = $tagEntry + $LEGEND_NO_FONT_BG_TEXT
   !else 
@@ -228,19 +408,29 @@ $elementSkin
   !return $tagEntry 
 !endfunction
 
-!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor)
-  !$tagEntry = "|"
-  ' <U+2500> ..white line
-  !if ($lineColor!="")
-    !$tagEntry = $tagEntry + "<color:"+$lineColor+"> <U+2500></color> "
-  !else
-    !$tagEntry = $tagEntry + " <U+2500> "
+!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor, $lineStyle)
+  !$tc = $textColor
+  !$lc = $lineColor
+
+  !if ($tc=="")
+!if ($PlantUMLSupportsDynamicLegendColor)
+    !$tc = $flatLegend($ARROW_COLOR)
+!else
+    !$tc = $LEGEND_DARK_COLOR
+!endif
   !endif
-  !if ($textColor!="")
-    !$tagEntry = $tagEntry + "<color:"+$textColor+">"
-  !else
-    !$tagEntry = $tagEntry + "<color:"+$LEGEND_UNDEFINED_FONT_COLOR+">"
+  !if ($lc=="")
+!if ($PlantUMLSupportsDynamicLegendColor)
+    !$lc = $flatLegend($ARROW_COLOR)
+!else
+    !$lc = $LEGEND_DARK_COLOR
+!endif
   !endif
+
+  !$tagEntry = "|"
+  ' <U+2500> ..white line
+  !$tagEntry = $tagEntry + "<color:"+$lc+"> <U+2500></color> "
+  !$tagEntry = $tagEntry + "<color:"+$tc+">"
   !$tagEntry = $tagEntry + " " + $tagStereo + " "
   !if ($textColor == "")
     !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT
@@ -248,23 +438,40 @@ $elementSkin
   !if ($lineColor == "")
     !$tagEntry = $tagEntry + $LEGEND_NO_LINE_TEXT
   !endif
+  !if ($lineStyle != "")
+    !if ($lineStyle == $DOTTED_LINE)
+      !$tagEntry = $tagEntry + $LEGEND_DOTTED_LINE
+    !elseif ($lineStyle == $DASHED_LINE)
+      !$tagEntry = $tagEntry + $LEGEND_DASHED_LINE
+    !elseif ($lineStyle == $BOLD_LINE)
+      !$tagEntry = $tagEntry + $LEGEND_BOLD_LINE
+    !else
+      !$tagEntry = $tagEntry + "(" + $lineStyle + ") "
+    !endif
+  !endif
   !$tagEntry = $tagEntry + "</color> "
   !$tagEntry = $tagEntry + "|"
   !return $tagEntry 
 !endfunction
 
-!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
+!global $LEGEND_DOTTED_LINE = "(dotted) "
+!global $LEGEND_DASHED_LINE = "(dashed) "
+!global $LEGEND_BOLD_LINE = "(bold) "
+
+!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="")
 '' if a combined element tag is defined (e.g. "v1.0&v1.1") then it is typically a merged color,
 '' like a new $fontColor="#fdae61" therefore it should be added to the legend 
 '' and the & combined tags will be not removed
 '  !if (%strpos($tagStereo, "&")<0)
-    !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
+   !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
 %set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry)
     !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n"
+  !$tagMask = $tagLegendMask( $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+%set_variable_value("$" + $tagStereo + "LegendMask", $tagMask)
 '  !endif
 !endprocedure
 
-!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="")
+!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="", $lineStyle="")
 '' Arrows have a bug with stereotype/skinparams and cannot combine text colors of one stereotype
 '' and the line color of another stereotype. Therefore the text color of one tag and the line color 
 '' of another tag have to be combined via a "workaround" tag ("v1.0&v1.1").
@@ -272,7 +479,7 @@ $elementSkin
 '' be an inconsistency between the element tags and the rel tags and therefore 
 '' & combined workaround tags are not removed too (and in unlikely cases the color itself could be changed)
 '  !if (%strpos($tagStereo, "&")<0)
-    !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor)
+    !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor, $lineStyle)
 %set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry)
     !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n"
 '  !endif
@@ -296,23 +503,46 @@ $elementSkin
   !endif
 !endprocedure
 
+!function RoundedBoxShape()
+!return $ROUNDED_BOX
+!endfunction
+
+!function EightSidedShape()
+!return $EIGHT_SIDED
+!endfunction
+
+!function DottedLine()
+!return $DOTTED_LINE
+!endfunction
+
+!function DashedLine()
+!return $DASHED_LINE
+!endfunction
+
+!function BoldLine()
+!return $BOLD_LINE
+!endfunction
+
 ' used by new defined tags
-!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
-$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
-$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
+!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="")
+$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
 !endprocedure
 
 ' used by new defined rel tags
-!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="")
-$defineRelSkinparams($tagStereo, $textColor, $lineColor)
-$addRelTagToLegend($tagStereo, $textColor, $lineColor)
+!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="", $lineStyle = "")
+$defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle)
+$addRelTagToLegend($tagStereo, $textColor, $lineColor, $lineStyle)
 !endprocedure
 
 ' update the style of existing elements like person, ...
-!unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="")
-$defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing)
-  !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing)
+!unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="")
+$defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
+  !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape)
 %set_variable_value("$" + $elementName + "LegendEntry", $tagEntry)
+  ' default tags sets at least bgColor and fontColor
+  !$tagMask = $tagLegendMask("CHANGED", "CHANGED", $borderColor, $shadowing, $shape)
+%set_variable_value("$" + $elementName + "LegendMask", $tagMask)
 !endprocedure
 
 /' @deprecated in favor of UpdateElementStyle '/
@@ -322,7 +552,7 @@ UpdateElementStyle($elementName, $bgColor, $fontColor, $borderColor, $shadowing)
 
 ' update the style of default relation, it has to set both properties (combined statement not working)
 !unquoted procedure UpdateRelStyle($textColor, $lineColor)
-  !$elementSkin = "skinparam Arrow {" + %newline()
+  !$elementSkin = "skinparam arrow {" + %newline()
   !$elementSkin = $elementSkin + "    Color " + $lineColor + %newline()
   !$elementSkin = $elementSkin + "    FontColor " + $textColor + %newline()
   !$elementSkin = $elementSkin + "}" + %newline()
@@ -489,6 +719,25 @@ SetPropertyHeader("Property","Value")
 ' Layout
 ' ##################################
 
+!procedure $getHideStereotype($hideStereotype) 
+!if ($hideStereotype=="true")
+hide stereotype
+!endif
+!endprocedure
+
+!procedure $getLegendTable() 
+<#00000000,#00000000>|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
+$showActiveLegendEntries($tagDefaultLegend)
+$showActiveLegendEntries($tagCustomLegend)
+!endprocedure
+
+!procedure $getLegendArea($areaAlias, $hideStereotype) 
+$getHideStereotype($hideStereotype)
+rectangle $areaAlias<<legendArea>> [
+$getLegendTable()
+]
+!endprocedure
+
 !procedure HIDE_STEREOTYPE()
 hide stereotype
 !endprocedure
@@ -510,13 +759,9 @@ left to right direction
 
 ' has to be last call in diagram
 !unquoted procedure SHOW_LEGEND($hideStereotype="true")
-!if ($hideStereotype=="true")
-hide stereotype
-!endif
+$getHideStereotype($hideStereotype)
 legend right
-|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
-$showActiveLegendEntries($tagDefaultLegend)
-$showActiveLegendEntries($tagCustomLegend)
+$getLegendTable()
 endlegend
 !endprocedure
 
@@ -525,6 +770,18 @@ endlegend
 SHOW_LEGEND($hideStereotype)
 !endprocedure
 
+' legend is reserved and cannot be uses as alias of SHOW_FLOATING_LEGEND() therefore
+' LEGEND() is introduced. It returns the default name of the floating alias "floating_legend_alias"
+' and can be used in the Lay_Distance() calls
+!function LEGEND()
+!return "floating_legend_alias"
+!endfunction
+
+' enables that legend can be located in drawing area of the diagram. It has to be last call in diagram followed by Lay_Distance()
+!unquoted procedure SHOW_FLOATING_LEGEND($alias=LEGEND(), $hideStereotype="true")
+$getLegendArea($alias, $hideStereotype)
+!endprocedure
+
 ' Boundaries
 ' ##################################
 
@@ -660,6 +917,10 @@ $getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link
 ' Layout Helpers
 ' ##################################
 
+!function $getHiddenLine($distance)
+  !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1)
+!endfunction
+
 !unquoted procedure Lay_D($from, $to)
 $from -[hidden]D- $to
 !endprocedure
@@ -672,3 +933,10 @@ $from -[hidden]R- $to
 !unquoted procedure Lay_L($from, $to)
 $from -[hidden]L- $to
 !endprocedure
+
+' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram
+' uses the same length therefore the method offers no direction at all.
+' If a direction is required the Lay_...() methods can be used
+!unquoted procedure Lay_Distance($from, $to, $distance="0")
+$from $getHiddenLine($distance) $to
+!endprocedure
diff --git a/C4_Context.puml b/C4_Context.puml
index 850f470a..d56d1984 100644
--- a/C4_Context.puml
+++ b/C4_Context.puml
@@ -153,9 +153,11 @@ endlegend
 !endprocedure
 
 !global $defaultPersonSprite = "person"
+!global $portraitPerson = "false"
 
 !procedure HIDE_PERSON_SPRITE()
   !$defaultPersonSprite = ""
+  !$portraitPerson = "false"
 !endprocedure
 
 !unquoted procedure SHOW_PERSON_SPRITE($sprite="")
@@ -164,6 +166,17 @@ endlegend
   !else
     !$defaultPersonSprite = $sprite
   !endif
+  !$portraitPerson = "false"
+!endprocedure
+
+!unquoted procedure SHOW_PERSON_PORTRAIT()
+  !$defaultPersonSprite = ""
+  !$portraitPerson = "portrait"
+!endprocedure
+
+!unquoted procedure SHOW_PERSON_OUTLINE()
+  !$defaultPersonSprite = ""
+  !$portraitPerson = "outline"
 !endprocedure
 
 ' Elements
@@ -203,11 +216,23 @@ endlegend
 !endfunction
 
 !unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="")
+!if ($portraitPerson == "portrait") && ($sprite == "")
+actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link)
+!elseif ($portraitPerson == "outline") && ($sprite == "")
+person "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link)
+!else
 rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link)
+!endif
 !endprocedure
 
 !unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="")
+!if ($portraitPerson == "portrait") && ($sprite == "")
+actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link)
+!elseif ($portraitPerson == "outline") && ($sprite == "")
+person "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link)
+!else
 rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link)
+!endif
 !endprocedure
 
 !unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="")
diff --git a/LayoutOptions.md b/LayoutOptions.md
index 71445ef2..781d0d37 100644
--- a/LayoutOptions.md
+++ b/LayoutOptions.md
@@ -107,6 +107,58 @@ SHOW_LEGEND()
 
 ![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample")
 
+## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) and LEGEND()
+
+`LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created.
+
+```csharp
+@startuml Layout With Whitespace Sample
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+Person(a, "Person A")
+Container(b, "Container B", "techn")
+System(c, "System C")
+Container(d, "Container D", "techn")
+Container_Ext(e, "Ext. Container E", "techn")
+
+Rel_R(a, b, "calls")
+Rel_D(b, c, "uses")
+Rel_D(c, d, "uses")
+Rel_R(d, e, "updates")
+
+SHOW_LEGEND()
+@enduml
+```
+
+![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample")
+
+Therefore a floating legend can be added via SHOW_FLOATING_LEGEND(), positioned with Lay_Distance() and existing whitespace is reused like below.
+
+- `SHOW_FLOATING_LEGEND(?alias, ?hideStereotype): shows the legend in the drawing area
+- `LEGEND()`: is the default alias of the created floating legend and can be used in Lay_Distance() call
+
+```csharp
+@startuml Compact Legend Layout Sample
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+Person(a, "Person A")
+Container(b, "Container B", "techn")
+System(c, "System C")
+Container(d, "Container D", "techn")
+Container_Ext(e, "Ext. Container E", "techn")
+
+Rel_R(a, b, "calls")
+Rel_D(b, c, "uses")
+Rel_D(c, d, "uses")
+Rel_R(d, e, "updates")
+
+SHOW_FLOATING_LEGEND()
+Lay_Distance(LEGEND(), e, 1)
+@enduml
+```
+
+![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/RP7VQ-em5CVVyrUavS9juTwMmPu60vtjtA1JqOqzXfWURLXC9Jbb-j_lr6gri9Ss-Nn_d3OPUPGEcvrXWRRAD2Nm2d7l7zBKoUzagx5greq7fsgBO35HzIxzqavL7gjqSlz_OQJ5ZxSYXGFf9PG4nOJCKbjmoRwjPcm1pjSsalzus2tvE8nPRulM9FGx_XJI5a5LbaoheqVOHOfGj-IJGRGSHBFRQ8z5Vi08IA5tmg_k_DRDbc34ilt6DL4bZV54MvX5H1H1EeWh8r0EsJ8Y02tRbn9Fc0MRnYhKzCT5FirdMHIpm04spl9mOsg9scw5WItOCcG1FIz-jdgPVuhdOZv-VvrDnJbzAObP8OyYqtHzLa6FJ-FlQ2pxouC_7UMFFEm62Eb0XYJzMdssnwGFki_yKZsY8hhK7m00 "Compact Legend Layout Sample")
+
 ## LAYOUT_AS_SKETCH()
 
 C4-PlantUML can be especially helpful during up-front design sessions.
@@ -138,7 +190,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
 @enduml
 ```
 
-![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/NL1DIyD05BplhrZheIdKX8edJusXMB3LO5B5KzWcJxkmN-o-DHJnl_j2QolkPU3Dl3SpEmyeF4Qj-2f_UzhKJLurrSEYBfQy4jefO1VIj2fsm7U8BjnccHTz-Y5n5xSnW6-jGJ2OjbPdelDIc4yLNSoAcwjI2OERzIfJ0Y4WZPg2r48QyAaZJyR-coOJnahmmPf4T5gQAH_b0yg0Ng3remchzW51DtSscaxuVTBEfdnyo3gUy2_6wPriaXwsZN2Exhp2bkVEATaAbDQCQ5HSJdbUbUdZegOL3_mwdV7rIp5mkLAs3toe63XQJlsS88cE2YLvyRgNYE0vIWsAl09b-pwcI_10qfsZZ4Zs3EgtrJdM9j0cuRAkoufKW-Z4di_S0rAC7WPuzrR_NPc3wUWtVm00 "LAYOUT_AS_SKETCH Sample")
+![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/NL1DI_D04BxlhvYtxw4fj0aLJvuQGx5Wgy6aYgUmILQxi1_BxeHGnF_kBDLMp6N8pFFnFBiAo3qEMi4sVttSrqrUDTNzkYusK77jb63_fEdKq0iu8BfmasMUZ-cxnCFG3a7upXeK1jFEwimfRgBM8c2lP9iLruiohlQxRQPvGE5frHJ4uD88dph2ClRNE9anLWeVh4buhwMPmoIFKmRq7AsVp5Xr937TtDh1zDmVasuvX-afxtG67mpeEziaesWRxXpfl8WMSkUKx3XAQoQqAlxF8Q_Az65T4yKBk4gNi7ikuYrNoeu1Oiq0Q84wEauGFIYKv0NrA95Q0Kej57a5olRvdIx1qv5qJh0Od3q9zTFg4ciVY4bpKzTbHQW8EbylCdS20_sAEDwyrRyfAs7w-9fV "LAYOUT_AS_SKETCH Sample")
 
 
 ## HIDE_STEREOTYPE()
@@ -166,13 +218,15 @@ 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(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE()
 
-With the macros `HIDE_PERSON_SPRITE()` and `SHOW_PERSON_SPRITE()` it is possible to change the person related default sprite. `SHOW_PERSON_SPRITE()` is the default.
+With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default.
 
 - **HIDE_PERSON_SPRITE()**: deactivates the default sprite
 - **SHOW_PERSON_SPRITE()**: activates the default sprite "person"
 - **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite
+- **SHOW_PERSON_PORTRAIT()**: activates portrait instead of a rectangle
+- **SHOW_PERSON_OUTLINE()**: activates person outline instead of a rectangle
 
 "person" and "person2" are predefined sprites which can be used as default sprite too.
 
@@ -255,3 +309,52 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
 
 ![SHOW_PERSON_SPRITE(sprite) Sample](https://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)")
 
+**Using SHOW_PERSON_PORTRAIT()**
+
+```csharp
+@startuml SHOW_PERSON_PORTRAIT() Sample
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+SHOW_PERSON_PORTRAIT()
+
+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")
+
+' if a person is combined with a sprite then the rectangle layout is used again
+Person(person, "Person with sprite", $sprite="person2")
+
+Rel(admin, web_app, "Uses", "HTTPS")
+Rel(web_app, twitter, "Gets tweets from", "HTTPS")
+@enduml
+```
+
+![SHOW_PERSON_PORTRAIT() Sample](https://www.plantuml.com/plantuml/png/RL1BQzj04BxhLqpTGcHm919wAXIYcj0KcbXOIdCKAsbYB-nZsPd5cDB_tbcKHm_LGRixyptccnjY5JbP0ztTxcbeR_VTxc5eT_j-t_peopLqoWQ3nGVj9fDcX2Dpe2zr7TMfEcW-fZ4HniaxHiVLv6qTZ79PyP9uDdgijvylsrnwlFzPMqMCKKh3LXXAEunL46nH_D--A5gCv5sfPglT1bPDFZLnLEpZQbrqPsAqmpUVtApYkPokDd2np7onXjy5oFTcLPvm75G8elE48pGX63qfrjwjfBJzk86cQwk7srue4U6wkeBxNzlSQupn9u8SbO0zICwW16AJOIrUq9yqCqPWRT685ybiVrwcAtbfYiuBJ9h51UXdK10mvmDDMNCKvWo2EKg7GjICm4Tq-GSH9rRk86P6dNtYp4aaU7MGTA-BMlJ4QdalOekK1FcqtBwk5jXr7cIFvdMzx_jv9AGS_AxlsqvG6VJMVS_p7PdaYVbuZjx-Ixb1DoTh_W80 "SHOW_PERSON_PORTRAIT()")
+
+**Using SHOW_PERSON_OUTLINE()**
+
+> This call requires PlantUML version >= v1.2021.4!
+
+```csharp
+@startuml SHOW_PERSON_OUTLINE() Sample
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+SHOW_PERSON_OUTLINE()
+
+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")
+
+' if a person is combined with a sprite then the rectangle layout is used again
+Person(person, "Person with sprite", $sprite="person2")
+
+Rel(admin, web_app, "Uses", "HTTPS")
+Rel(web_app, twitter, "Gets tweets from", "HTTPS")
+@enduml
+```
+
+![SHOW_PERSON_OUTLINE() Sample](https://www.plantuml.com/plantuml/png/RL5BQzj04BxhLqpTWcLm919wAXJY6jCK4bj4SdCK8sbYB-nZsHqXJEb_xopAeuVeeDNEV8_vHhUHCV1eDDHtXwUssZtMXtrxE3Rtl_QxV0Kr6gyf-wHihyU1uCpiuxUo33WL9yNdiHiZXTvP9ij5xqpfDTeaU1LvqAehjr-lgbGwFjoN1YDJa5Ax5GOgIw7mWiso3zsphA8GdSrnCCgkOR59fueSa5rOhBBw8dgc_U56Es2uvFtr6fRpoCiL_Cb0dZUdVAAkHUz5vuaws7YlLO-id5r8QVjv3PkwAlQxHYY1uAQuXeVVszJRQEsc22bf17OWCJqAn8oQbNX1CocMOC3Aa1QlABFzVPakvxafEYymQMPBKC-0u2db0nMJPYVC0GHpbaxqGJ41dycc5mJg6Ur9p3HUtCY9CqR1uqdIlIvgrXEh-JwBpL8IvClyzNqnmsxI88-aNzVxlfzZb0XotZLDLGigWTwwxtb-4aUvKZgUWpF_Ksx93kdF_WC0 "SHOW_PERSON_OUTLINE()")
diff --git a/README.md b/README.md
index a3cb959d..6fb02899 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # C4-PlantUML
 
-![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System")
+![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System")
 
 C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools.
 
@@ -97,7 +97,7 @@ Rel_R(api, db, "Reads/Writes")
 @enduml
 ```
 
-![Sprites/Icons](http://www.plantuml.com/plantuml/png/hP9BZzem4CVl-HHUr0ChBPj3sqkbIek0Tf5uK1v5FQ59F05NZfrw9l3rEmvXD-f3wg4dE_EV-VyyCtaYXi1rQPCxut9RQrGdvee-f6c0o-FHyAdEQiAGUyVe-37tPLfPSB5cGAojoTBHky4gXdRpMLe2CGO97KPI0SPXUAoYVtAdiP1FDPvydOwMYyq_WBYkG8Uthq0Zwg2GZ05LmJ3IZQVn73LweNnQBhR3_MIpd4_-AwY9mGN9bpXu_pgrMrSfk6DjeMtwT_axdE5lMaa_x84mdF7NyautQNmxjJET3RyjTzl3VhfzFimcdoUBSVy-ILQIu5q_9ZwetgWczYM6djnNw2kBYa_0oY5gLGMlwvn9n3VNJZ_s6a3lFdbPO9ygaEBDQXWzsWRZTNj2LKgACeun592trYpnlCLUDH26kiZikw2RKnS5bH7ZuMeQ_UEmulaCJbia1TOgsPqa4YdhZoRlsiNihjSuw-jCgiV0a05XT9gRF7Zo1QlDbrbZxQscsnWUb0yQWnASFFliJOvo5ZwKmCQxBgopAs4cQxJjlA-psX5Ij6z-FKc8UgD8Vt-M3-jhxysJrmYQqdr4HVa9dPPz_mG0 "Sprites/Icons")
+![Sprites/Icons](https://www.plantuml.com/plantuml/png/hP9BZzem4CVl-HHUr0ChBPj3sqkbIek0Tf5uK1v5FQ59F05NZfrw9l3rEmvXD-f3wg4dE_EV-VyyCtaYXi1rQPCxut9RQrGdvee-f6c0o-FHyAdEQiAGUyVe-37tPLfPSB5cGAojoTBHky4gXdRpMLe2CGO97KPI0SPXUAoYVtAdiP1FDPvydOwMYyq_WBYkG8Uthq0Zwg2GZ05LmJ3IZQVn73LweNnQBhR3_MIpd4_-AwY9mGN9bpXu_pgrMrSfk6DjeMtwT_axdE5lMaa_x84mdF7NyautQNmxjJET3RyjTzl3VhfzFimcdoUBSVy-ILQIu5q_9ZwetgWczYM6djnNw2kBYa_0oY5gLGMlwvn9n3VNJZ_s6a3lFdbPO9ygaEBDQXWzsWRZTNj2LKgACeun592trYpnlCLUDH26kiZikw2RKnS5bH7ZuMeQ_UEmulaCJbia1TOgsPqa4YdhZoRlsiNihjSuw-jCgiV0a05XT9gRF7Zo1QlDbrbZxQscsnWUb0yQWnASFFliJOvo5ZwKmCQxBgopAs4cQxJjlA-psX5Ij6z-FKc8UgD8Vt-M3-jhxysJrmYQqdr4HVa9dPPz_mG0 "Sprites/Icons")
 
 Similar to icons/sprites is it possible to add links to all elements and relationships:
 
@@ -120,7 +120,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/l
 > Github does not support `svg` links in README.md.
 > If you click on the image a new window is opened and there you can use the links.
 
-![Click on the image that the links are working](http://www.plantuml.com/plantuml/svg/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Click on the image that the links are working")
+![Click on the image that the links are working](https://www.plantuml.com/plantuml/svg/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Click on the image that the links are working")
 
 Elements and relations can be decorated with tags and explained via a calculated legend, for example:
 
@@ -132,7 +132,7 @@ AddElementTag("v1.0", $borderColor="#d73027")
 AddElementTag("v1.1", $fontColor="#d73027")
 AddElementTag("backup", $fontColor="orange")
 
-AddRelTag("backup", $textColor="orange", $lineColor="orange")
+AddRelTag("backup", $textColor="orange", $lineColor="orange", $lineStyle = DashedLine())
 
 Person(user, "Customer", "People that need products")
 Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1")
@@ -153,7 +153,7 @@ SHOW_LEGEND()
 @enduml
 ```
 
-![tags](https://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprukWGWBz4L8b9AA0IgNGfWJ49Hfx9ywswrrhPnpQj--COs884LMlTZLpPiwSsMEV4KFYfl9x_xbG-CQYMJBNz6aqIl0mB1qlcxmXJ4KCZ867HQn6jOUWDOV4rhjyDFbmEDFGxTLqL04n9WdTJwG2NC0qhBN_tjZQ2uyL1hw1Sf2jZeT7sO5vayTaCKsYZ-aq-z-Ul3zwTvBjxq0VAteXJV-6pQ7usTHRw9WWb2XWHL-Ztq8o_jf2Ij2xW2_APvWeXe7kvC1aauOuLfW4diqmrXuDBu5DGBIcJj4s1PEKTLLWAnS4EjRJ4IVW-A8M-YIIX73JoAmSj8603qPNOkGvwXX4ERKgeAJJTbT2kTd_W6eGYlbih4oYe_7Gajv8fqeWnWN6j82Y6q0PYaxOEWTA_Y1cQ2VedgwdEzgc6p_LQNOpmzCT_EC8cmMyeXfgfnFClYZX3rY1dfSGh4SouBqHNmkGoFXOki8Cz0COzgiLHs0W5mFjFnVxTflgF1_ON9gV0qCEX4fqvOeKAIxOpBzFM-ReBJs-v85fNMyWM56tYgv0EHSnLS32-5n7AfPkXQfbVSlqsbZ7EdZfGgc1ESSakZwQtmYfDqDdSJMkcBvpxTeFjuIabUttBW3DjnbPtExq_VLwgQtOQmHBexla6Blqexlxzz_DqQLV8vgkYNhf7O_SAYI24dTAd5z-kxkVNdo--7e-sDyxms3rp_C7 "tags")
+![tags](https://www.plantuml.com/plantuml/png/bLJTRjfC4BtFK-pdhnT6JN3I7qMgX1G4gAb4MWg9Sed6ti5ikzwrTjRGl7rdrn08jLBrQj7CcJbppeov8G_EDvK--q-PGZSInThxcZvbcODjlrH-tUGDeIkiyMXylx1LLcimeUQ2lDGgpqOVBcOXz70tpIeWZuv3on5NW3Be-dNeVpQKSgAnuYRtKAR9vgf_cPoBDxbr4jt8Qki6oV_o-ltbk-karu6-2kWLD_qRDeVYPrEVeAq3KoA30tgE-WJfyTS9aeEQf-yCBloJHZ4GOw0roYb7qXvtdg4ZQz9Wrxb8HWrvMw7ZecI6jkOAlmOl3A8KjREoAJmblNqLo4ePXWx3gyWxyFQFMZWaaJY4put4Ha4C6DoAu9RWJTNMi2aK1K99WsWZKpwl9gKQc68n6mOcbjXeYAJttAbYY536erj1qGuG6OgTi3O7WNpBTn8dY5izfhiyfHiUwnJTp73imR-Ei3VW5TLGgp31x4iW_04R2Eyj6AcH16Wj-EGPI2IqBLKXql1jz0_Myh6W8MKDzLwAVNjADSvJcNFpCNZ8WJ0GtQd2MR8hBnRVfv7PQadxJPwB-448deRLRQmgaD-LTHLuPdofmnLhjS6WfVsLX9-DL3uCNYfJXi22JMHT7yKJWZiSm_xw-N3dg7TNszx30o65olXNm82GZnashZkzdBUcHh5p14dPerCUT-dzTH_jlvkZJRz6D6s93j9RdW2ha0XAx9IukFtsk9nEFa--ZjFUsGqQsLJwDm00 "tags")
 
 
 ## Supported Diagram Types
@@ -227,24 +227,34 @@ You can force the direction of a relationship by using:
 * `Rel_L`, `Rel_Left`
 * `Rel_R`, `Rel_Right`
 
-Relationship specific sprites are not down scaled, they requires typically smaller icons.
-Therefore if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open)
+Relationship specific sprites are typically smaller and therefore following options are possible:
+* use smaller icons (like the $triangle in the following sample)
+* use an additional scale factor (direct as part of the argument, or via a variable)
+* if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open)
 
 ```csharp
 @startuml
-!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
-Person(user, "User1")
-Person(user2, "User2")
-System(system, "System")
+Person(user, "User")
+Person(user1, "User 1")
+Person(user2, "User 2")
+Person(user3, "User 3")
 
-' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/
-Rel_D(user, system, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed")
+System(system, "System")
 
 ' normal sprites are too big 
-Rel_R(user, user2, "informs", "courier", "normal sprites are too big", "person2")
+Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2")
+
+' scaled sprites are ok
+Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5")
 
-' special smaller sprites have to be used
+' combine sprite and scale to a new sprite
+!$combinedSprite="person2,scale=0.5"
+Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite)
+
+
+' special smaller sprites can be used
 sprite $triangle {
     00000000000
     00000F00000
@@ -259,18 +269,21 @@ sprite $triangle {
     0FFFFFFFFF0
     00000000000
 }
-Rel(user, system, "orders", "http", "only small sprites looks ok, like the small triangle", "triangle")
+Rel_R(user1, system, "orders", "http", "small sprites, like the small triangle", $sprite="triangle")
+
+' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/
+Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed")
 @enduml
 ```
 
-![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/VL9XYnCn4Fs-ls8inta7RLUh21M4Gu-0e7YStESZpKxReTbapMJlAE9_Tv9DMoskyoLvRp9lNYQvuQX3x5jRlI1dRDyWR6Fi-7rT1_qytr3SzgkUCHZl8heuDxwjEwjTgfbnR2ojwazlPtU9UlZwfMurHmn2FTxkdMx9pBkaNjrXOE-kajGK9W-ol9vS_yak2hqG-ljUHDehpelm0vP4zH9e3Tm5YWZPEiEpU8JBwO5jS4qE6JHywz1z5jzafi96JPQ1yNH1wKevdI_bvNHTtQDzl2qkZ-q3_kYH8qzahtdl3BJ8h3UOY54_5F_f1Ipj42xHFQ6LdZDZFMCZIXT5vWDCphF3pPqFhRQbcuW6XEWzh6W3sVTzyNsO9hcrL6JNnlU1CAJjk4hATlb15aD3xj1GEYi55iEnPgkVf4XgCFLggcBy8WRIRcCHVbOWyUeK9wp-nkgZ-XzMo-LIZMFrBeKQm-hD46eCbn1yxlTNckZvF_2XmP3dcRvGMhsp-poUqq2jzpi6lviE3nstM0uSffFgZllhwWPTqxVsDm00 "Relation with sprite or OpenIconic")
+![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/bLJVQnin37w_lq8DeMiXoQN9DiWWKDPnCDRHqjBdujXAOkgpRvPlMHdxt-SVSPEikK7rujCdIzyd8TybEMPTMwlYH6gkMe6mTgwXJsLfsMQqacxTBbf2oursgDs8cxfi5DCXPqXEABaehzuFRmFqyFswh1avj1vwl0ePlzoe2TMBMxHaz5aeDO3UWpzwv_lWnHQ5YqDyal798JxD-DJZnVspPwtFA1u-almGUGVQs9efeCPAXmJC8ZXZO25NKDoXUhpUYifiKYzz1lNy9pUjbMZ3PtSL7-qdUDvhei198YRE58g35FCKAU_sAAUTb4VoRxuTOHl4Y_Fnw4FYvQPUI8tRH61Q92bUC33GkDb6YfF-zgguxwpu1hsvMBVYV_YysZ2c1haCe_NpLMXViZdJiC30AOg4GTzPoVHA8VmkmDjuPpk_ElIhpzN__6escrNTVlKnMDNbLzDaLPUVRVnAxvyysRJyBwjhh40RHniUOZZZOF9O1g3a4u9R8oGyZsH_CJAMza4kyoh4nqwmaMuDfuEC2bnAZGGCRXhKNxdHaWyywfXK18IxNuBNAcCu_WQClrt6BhxizYC-P8i_MYGNks3qh3dKICHM681EET8TbP8QFaNz4vMd779b2CMkNPX3xrNqlBX4BTfQ_GK0 "Relation with sprite or OpenIconic")
 
 In rare cases, you can force the layout of objects which have no relationships by using:
 
-* `Lay_U`
-* `Lay_D`
-* `Lay_L`
-* `Lay_R`
+* `Lay_U(from, to)`
+* `Lay_D(from, to)`
+* `Lay_L(from, to)`
+* `Lay_R(from, to)`
 
 In following sample a person uses different systems, and group of persons which have no relations
 
@@ -305,33 +318,75 @@ Rel_L(x, s4, "uses")
 
 ![Relation versus Layout](https://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout")
 
+(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the
+e.g. floating legend could be required that all e.g. corners of the drawing area can be reached.
+
+* `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND().
+
+In following sample the floating legend should be in the left bottom corner of the drawing are.
+(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side)
+
+```
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
+!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
+!include DEVICONS/angular.puml
+!include DEVICONS/java.puml
+!include DEVICONS/msql_server.puml
+!include FONTAWESOME/users.puml
+
+Person(user, "Customer", "People that need products", $sprite="users")
+Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular")
+Container(api, "API", "java", "Handles all business logic", $sprite="java")
+ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server")
+
+Rel(user, spa, "Uses")
+Rel(spa, api, "Uses")
+Rel_R(api, db, "Reads/Writes")
+
+SHOW_FLOATING_LEGEND()
+Lay_Distance(LEGEND(), db, 1)
+@enduml
+```
+
+![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCIIxKQjAFVGKvptFUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VMJEuq7-LNZoRVfQBdO_8CHLoNeyE7Dq0ZRFyYDFfN1C5BZf_4SENfrULmkjiFTPBESJ_whqHM32v8liF-fQUqjLGhkM5ceG_z9VuSp_8qhw8VD2CCPVnjlfqdZswdkT2L7xxeHkbUTKKNi2mmTEQ_GbnOLdu2LGzIg35vNEPEGxswPldIkKfrUyhggBfKWmvlLC6hKKU9nUq9Lo1Lb76CuG5vBi-1vRNlZG3pKHLfk6pLARIieZGWFLzEe7sk9tsTmsY8fi5R9bkGYaRB-QFAsNBpTrXhlktelqsDWs0DXL9gRF7Zo1rQRhxEhjBUQcXhkbGyQWn8xUVRPcnpbU_2X03RUjSrQMn7FP8ssxllMrGiX2HxXAn1ZjT5iVKjwVU0QGLEwYyAHJZRFortsE5iEjzF5KpQRF4qMusulcS7FR6o8mUNORT2RnFjUye1Eo_P_0G00 "db below legend, 1 unit distance")
+
 ## Layout Options
 
 C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
 
 * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
-* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-SHOW_LEGEND)
+* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_legend)
+* [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-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:
+C4-PlantUML also comes with some person sprite/portrait options:
 
 * [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite)
 * [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite)
+* [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait)
+* [SHOW_PERSON_OUTLINE()](LayoutOptions.md#show_person_outline) (requires PlantUML version >= 1.2021.4)
 
 ## Custom tags/stereotypes support and skinparam updates
 
 Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects:
 
-* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`:
+* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`:
   Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
-* `AddRelTag(tagStereo, ?textColor, ?lineColor)`:
+* `AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle)`:
   Introduces a new relation tag. The styles of the tagged relations are updated and the tag is displayed in the calculated legend.
-
-* `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`
+* `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`:
   This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-* `UpdateRelStyle(textColor, lineColor)`
+* `UpdateRelStyle(textColor, lineColor)`:
   This call updates the default relationship colors and creates no additional legend entry.
+* `RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument.
+* `EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument.
+* `DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle argument.
+* `DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle argument.
+* `BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle argument.
 
 Each element can be extended with one or multiple custom tags 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")`.
@@ -359,6 +414,9 @@ AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf")
 AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61")
 AddElementTag("fallback", $bgColor="#444444")
 
+AddElementTag("micro service", $shape=EightSidedShape())
+AddElementTag("storage", $shape=RoundedBoxShape())
+
 UpdateRelStyle(black, black)
 AddRelTag("service1", $textColor="red")
 AddRelTag("service2", $lineColor="red")
@@ -370,24 +428,23 @@ Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extens
 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")
 
+Container(services, "Services", "techn", $tags="micro service")
+Container(fileStorage, "File storage", "techn", $tags="storage")
+
 Rel(spa, api, "Uses", "https")
 Rel(spaAdmin, api, "Uses", "https")
 Rel_L(spa, spa2, "Updates", "https")
 Rel_R(spaAdmin, spaAdmin2, "Updates", "https")
 
-Person(user, "A user")
-System(system, "A system")
-
-Rel_D(user, system, "uses service1 via this call", $tags="service1")
-Rel_D(user, system, "uses service2 via this call", $tags="service2")
-Rel_D(user, system, "uses both services via this call", $tags="service1&service2+service1+service2")
+Rel_D(api, services, "uses service1 via this call", $tags="service1")
+Rel_D(api, services, "uses service2 via this call", $tags="service2")
+Rel_D(services, fileStorage, "both services stores via this call", $tags="service1&service2+service1+service2")
 
-Lay_D(api, user)
 SHOW_LEGEND(false)
 @enduml
 ```
 
-![merged tags](https://www.plantuml.com/plantuml/png/jLJVRzCm47xFNs4Acb9rQzSmCGbfqgPjOaW5glqGZzCbkIO6nubybuxzzzXENLeQLl6mlDYv-_nzf-_EFYS6mssbeZTIPwhDKPJC3NsSJ0myZGl9PPksX2QhDQFcSLPNaqQ1TcUEY7CbqydboT7SXHw-p2OL4AEneSTBUmAaHZDk77_qqEJ0UAsmiZnt_AmmRj1GhG_5kuN5NjQgDcU3mY3gmJ2woFCLzXwAUB2SZey7syYt-Udxu-JKHTFQv6YsuxqSqxyv5lPB5piS8TvRnq4lKGxuOTf3vEExH0jGAeNifpzH1FI9_onwPTSjgiwgL5dieV2Bvx8PpqDebZ93hypuAzHZC1_quHA7KrBZ7jpq81pe8UwZYDRzZgc1Gp6ucryCx0AwQ1KOjxqlKLGM8gHcD0l8K709BDZ6ivQuhj1qESYOn9FaKYmbYD1xXeBEkaaORijTv9NKLi6lebyPN4uI6-3Q_6y96fz4wFgwZEbM6T18Ly7yinFy0KjmwmteN249K4gaBLaWaL1r8JCHkmitNZCBQp5gahMcuOPA6BUHsursHAc1fFCwUJMpHs5KUrrFDcrFNj_tK4pm8hA3sqrSru07GdBI_XcpUPSEjRw0UPnr92j3_UtR1TrkK8NTF-3Ht3zkiNiydKN2RMpyxfaOgvZyuXFTrgQynDNgn1fWVqc4M-bDuLAIo42fFww4l6NPIvBi8KbU94bhBWCJxIjd_OYCGcIq8HBDuDcg-9uuAMlEpRVlZxFhJzTVhsBRQC9XT8uwRolr6m00 "merged tags")
+![merged tags](https://www.plantuml.com/plantuml/png/jLLHRzCm47xlhp01JQswjMkOc8GqQMCh36d0r6xYSRh4byJWs97jTEFVOyTrI9l0nCFwOllkk-_Ed-_ISsr0cRhaerTCfBocI0fZAlr-FbVmECkPAUgargXIAGmACqjbEQyu21Tpf0tbB9bVdXpTEjFzbvjv2TgWigQ7Ini1JA2QLOv_T5zHCBZaM5gUjVd5SLoXqb8SaZUPnLvABjLPb2j44Kr65vHkiNUGZwFDOdOSxI9VqzEtn_6fioPIKLIxza6EnJv7Pdz9rkVmzk4w3WQ9AE2xHP_8s_j46N2UGFgpYSW3-gJvMVG-l6IfaaIZsh0KNOmkeCAp9SiBisOKwTgTnvDU7csaWhmJifAriFWFyYc4XBTP8VVlad1Rs25fbeRGUZoPpzzSq-1JkBn26WtXOeVZJE0pkCL12EWJ3rACskOQwmeEIRI-lOZi0YAlEIYtlIkGb1P2c32eCaYHc08CCTQUrbQL4fNtGMeqUMIc81i693IQWLoV-RQRxAQxe2KJDaEpak7Cu7nC6mLM_lyjGU0Z2ItMbh7OAGCgvYgu_UmI_e0DkFKQ1EMe2N1ExD1QeDQ4ovobPEocUzOo4oin2isaq9DEbj3RKxURkjt-tMElTVnYOa_3N0og7dTbZrzUzr1CqA9RakzOxGJPRbqH1jD2j0HxOzkzKiOuhlrish2FzaJ2gFPfWiTMi4BkUzwtmBtsUPkljlLxjrVh7vY76q-oVL8__ptGgaCLTd-1D_WhtvSTQMgREfmNZSYcO9gam7ddTbk_fNcU9Nw69MvP_X3iQfr8KxJiZUXs6IRjVw2cmJBjv1kjhxzzVxXPVbf-lHfdm3LEHkSegFlV-mq0 "merged tags")
 
 **Custom schema definition**
 
@@ -504,7 +561,7 @@ Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%2
 
 Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml)
 
-![messagebus](https://www.plantuml.com/plantuml/png/bLHVRzis47_NfxXb3qs196wBFUsfZcqixPpOjHm4Un9EqjacIf44IJbpXttt7IMReHSLQFCGYJyTVt-EF7zq7grl6maN3Jc7MofRTv7z8bGbsvfWvxrnluz65fzljiBlMlvCjjBAa_8tbMv6Hg8A1DVErrAKeyblryi0FTxFHmqwJvQXOi8xK2YoDuPhipVGAjxSC0du7S56IwcVXTg2v290LSFPPs4TlsbWSP2wGYaFp15TlXR8t5UX35fiuDcYUHArty67T-yIlC6_x_l8kVX6tSTiFlvhyRWkrejbCLqyFLo-pTuSeN5Uv7_ErfCxnexGqwVrNJ6V_J5xc3AOPKkoJglBgdLUDsIlO1BVBiPmWY-uD3yuJqrngrjLeprSLk-vv5GDdzH6smQzqEhYBVoJPS1_CTyb6fDMZusHekgh6V-CUtIL5SPVmLXjMuasmEFGNnTDkD3C1XM73mqM5epL6o69tPtBnJY58xiN5QNQUG-TTAyWDpOSugtMFe3h7O7HGddG6y2g8kU0iqKR89AehvIF5xBWAyTSnxE2szO5wXMMfV3tNpePYyePRNr7pkL21INQa_BkDQ-bKCi-aqYh4vPcMhNb8Jmdbj2J0nMyIk6eXXezTcgH34nhZNOq88XjBNmYDWxhL6Zow-ZcOROEhqkhzw9cCMstg8JhUdFzp11qD45fWvMG_3gWDIrV3gmkqxEQeiSINQUti5X9WlSVgh3AlRRaVknGc3yc3W9fvrA5-qF-PPwGuwbvtwY6FLd7vDsba38Us4jJiOQThdwcjwoIT3QiWlXiJoekevSa7s2fMt-yAU1tw667U-9_nf2YclN-pR8LoMIg-_bx36xuURTUBtCk2qN5gX_EWP5vD1pkEqs6a7yRoD0TL7K5d_F5m-YCU3umXhsFd5JjOW0TM9wep7NrbJplxbsztfpCLYI9tjhEx0jfppF0aborsDx-54N_OpIzdHmZd4_pm0Z-e8cKff-8dw7ehGoeHsWmIY_zFxNqviKTlLQ_9vlZeLWDgPqnSU57zjqsyZy0 "messagebus")
+![messagebus](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqpL7ho0TuqKFHLO8FumcWJUNSUoaQCmeiOI4OeaICgkM_I_bvHiXN7LJRA7jJYSUU_D38TyQnqQrzG2afginPBonYQZdxXaeYa8AkUq_NqwDNXwABch6hzDXYdfIBe7fkgf5YW3mBrrXU3vTF7R_IQOza_hQOtMaV6cRE4Za4io3zhxZaQpebW9gZt83ijnKdDc57Za8sUKJE0NMw6cnnKlAvVoWeeqhCTtVYSl5qeeyvWib947eKvavg9fWmwUvB9vghYZvEwMnpfbi8mOjggH7dwk_XnW42tzv_Ch-AFqtSkdRBFQfY_FsSj-jtx_l1fxyuQCLNBC6izOavd0elzAPd0rjm1dwwZEva48clEOlV4kLszuBm_ArEYuaiaT_3q2_zVNSenQnyuphGLddREtVy0ZMcQuTXEOoR8HQ89v9dpHRA_1WbDGeyIIm5N43MYZ3bpux6xOhX7PfKynTTgPhhGJIBNXieIvKYuOTnM1LbmwK0T0niXQy9drAe17YVfIEomjFCBDmRXLT3coMTvOp_7KhM3Us42vnJpdxkbZIszGMgsCQqczEvT10Hr9EliVM4F1rSkFCjrURN6gsoO_Xz-58NHaGOOK1BTKG84EMx8U37HZjB9alpy_R0hk8X6pi8u5B7wUFZolTk5pOzIH5sH1cH8bjsqfxq_U12rCK710neN__04Do_nBtuiyRlaI7UPeMnql1faWUFCh2wlKAKFscxtjXd60CMg0funh7tC-dTEFwuWEh-N_Ymeuah6UhZrjGlGT_z8MBA1IxBNkn0g7--9teww4LP2pEfBibxswg0Q0kMhSvV21gz11XKVo_xGcISMmWdz6eos9R1dTATtuxplHoRlTRfDwnywhtHkOsBqkqFrFSo1KgGnOQC-IJU23lzMcCUv-u1BeLAGa2zldf0B89yfJnJwJUoKuck0Uf9VMj5eZq1Pd02KweNt5krRpxYPSpXUNuAy81mRzEpN4CDry_J3407bl6aoa2xiXYuzY7z5HTJ6ZDPwpxH3RLqZNfsoz-cFrlFHFs5kVH7Yg_mK0 "messagebus")
 
 
 ## Background
diff --git a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml
new file mode 100644
index 00000000..59014e61
--- /dev/null
+++ b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml	
@@ -0,0 +1,43 @@
+@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
+
+SHOW_PERSON_OUTLINE()
+AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape())
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine())
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+title Container diagram for Internet Banking System
+
+Person(customer, Customer, "A customer of the bank, with personal bank accounts")
+
+System_Boundary(c1, "Internet Banking") {
+    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backend container")
+}
+
+System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(customer, web_app, "Uses", "HTTPS")
+Rel(customer, spa, "Uses", "HTTPS")
+Rel(customer, mobile_app, "Uses")
+
+Rel_Neighbor(web_app, spa, "Delivers")
+Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+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", $tags="sync/async")
+
+SHOW_LEGEND()
+@enduml
\ No newline at end of file
diff --git a/percy/TestFloatingLegend.puml b/percy/TestFloatingLegend.puml
new file mode 100644
index 00000000..025cace9
--- /dev/null
+++ b/percy/TestFloatingLegend.puml
@@ -0,0 +1,22 @@
+@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
+
+Person(a, "Person A")
+Container(b, "Container B", "techn")
+System(c, "System C")
+Container(d, "Container D", "techn")
+Container_Ext(e, "Ext. Container E", "techn")
+
+Rel_R(a, b, "calls")
+Rel_D(b, c, "uses")
+Rel_D(c, d, "uses")
+Rel_R(d, e, "updates")
+
+SHOW_FLOATING_LEGEND()
+Lay_Distance(LEGEND(), e, 1)
+@enduml
diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml
index fe740cd8..24e7aa68 100644
--- a/percy/TestLegend.puml
+++ b/percy/TestLegend.puml
@@ -17,6 +17,9 @@ AddElementTag("role3", $bgColor="orange")
 AddElementTag("role4", $borderColor="blue")
 AddElementTag("unusedRole")
 
+AddElementTag("micro_service", $shape=EightSidedShape())
+AddElementTag("storage", $shadowing="true", $shape=RoundedBoxShape())
+
 AddRelTag("line1", $lineColor="green", $textColor="blue")
 AddRelTag("line2", $lineColor="blue", $textColor="green")
 AddRelTag("line3", $textColor="orange")
@@ -37,8 +40,8 @@ Person(person13, "Person13", $tags="role1+role3")
 Person(allInOne, "AllInOne", $tags="role4+role3+role2+role1")
 
 Component(component, "Component 1", "PlantUML")
-System(system1A, "System 1A")
-System(system2, "System 2")
+System(system1A, "System 1A", $tags="micro_service")
+System(system2, "System 2", $tags = "storage")
 
 Rel(allInOne, component, "without a tag")
 Rel(allInOne, component, "uses line 1", $tags="line1")
diff --git a/percy/TestLegendHidden.puml b/percy/TestLegendHidden.puml
new file mode 100644
index 00000000..288d34b0
--- /dev/null
+++ b/percy/TestLegendHidden.puml
@@ -0,0 +1,26 @@
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include ./../C4_Component.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
+!endif
+
+AddElementTag("shapeRound", $shape=$ROUNDED_BOX)
+AddElementTag("shapeOct", $shape=$EIGHT_SIDED)
+AddElementTag("shadowed", $shadowing=true)
+AddElementTag("shadowed2", $shadowing=false)
+AddElementTag("yelloTagged", $fontColor=yellow, $borderColor=yellow)
+AddElementTag("greenTagged", $borderColor=green, $bgColor=green)
+AddElementTag("tagged container", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR)
+AddElementTag("tagged person", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR)
+
+Container(c2, Container 2, tech, $tags="tagged container", "'tagged container' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend")
+Person(p2, p2, $tags="tagged person", "produces no person legend entry too")
+
+Person(p4, p4, $tags="yelloTagged", "'yelloTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)")
+
+Component(comp3, comp3, "techn", $tags="yelloTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles")
+
+SHOW_LEGEND(false)
+@enduml
\ No newline at end of file
diff --git a/percy/TestPersonOutline.puml b/percy/TestPersonOutline.puml
new file mode 100644
index 00000000..190075c9
--- /dev/null
+++ b/percy/TestPersonOutline.puml
@@ -0,0 +1,28 @@
+@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
+
+!$COLOR_A_5 = "#7f3b08"
+!$COLOR_A_1 = "#fee0b6"
+!$COLOR_NEUTRAL = "#f7f7f7"
+UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true")
+
+SHOW_PERSON_OUTLINE()
+
+' default header Property, Value
+Person(personAlias, "Label", "Optional Description")
+Person(personAlias1, "Simple")
+Person(personAlias2, "Simple with sprite", $sprite="person2")
+AddProperty("Name", "Flash")
+AddProperty("Organization", "Zootopia")
+AddProperty("Tool", "Internet Explorer 7.0")
+Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)")
+Person_Ext(personAliasExt1, "Simple Ext")
+Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2")
+
+SHOW_LEGEND()
+@enduml
\ No newline at end of file
diff --git a/percy/TestPersonPortrait.puml b/percy/TestPersonPortrait.puml
new file mode 100644
index 00000000..5c0a911a
--- /dev/null
+++ b/percy/TestPersonPortrait.puml
@@ -0,0 +1,32 @@
+@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
+
+
+!$COLOR_A_5 = "#7f3b08"
+!$COLOR_A_1 = "#fee0b6"
+!$COLOR_NEUTRAL = "#f7f7f7"
+UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true")
+
+SHOW_PERSON_PORTRAIT()
+
+' 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)")
+Person(personAlias1, "Simple")
+Person(personAlias2, "Simple with sprite", $sprite="person2")
+AddProperty("Name", "Flash")
+AddProperty("Organization", "Zootopia")
+AddProperty("Tool", "Internet Explorer 7.0")
+Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)")
+Person_Ext(personAliasExt1, "Simple Ext")
+Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2")
+
+SHOW_LEGEND()
+@enduml
\ No newline at end of file
diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md
index 965cc27c..8f52f352 100644
--- a/samples/C4CoreDiagrams.md
+++ b/samples/C4CoreDiagrams.md
@@ -50,7 +50,13 @@ Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram
 
 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](https://www.plantuml.com/plantuml/png/vLT_Rzis4FtVd-AgRQXJE7PYf4Cne40TssjSs8aHEKq7330eafQvKgH0KawyeTzzTv8osx7J7zWm35W2A19rT-_UlUE9UUC3Sw78TECvS6jMqWLG0UvKM08JGWLb3TFuAikO4Q2LaS1SMcJI13WUN0_7lTde_N0-kkoFRmR3rr4xWc2Xy1AqvKphTUEPMi0FA-OKIxISotlbWsz6ZpsZemR0CsMuBeI4TgVTxlJFvWEPQxici7PEIJwJsijjmsK8kV-fqt7ihfrYqaM2q0wP1FB1j3kvPeO87liWj4emwl6Kbcucuqx6V93kC90HQj5ez8IOiJGkyjowq8mMo2XX_6FKWk-Jj6-rTQ-Zx_W9_IA3Myp05c7gR8w5N5z89gHh7ZMmk69jMAOuQ9bYQ52UQYIWoNXGAnOaBXdGc4zPuoFq6FT-kRgPpMz7iulvUFXsU3cWI445BM6JBWmKIntBO64TZ92sCpB0EJCVbKaXNYF138vXh5QoqTYupI-jaCrSynP4z2x2l-SgBHq1bny_Ws210PS441tzWH80O6qUc3QZCQfDpOAEU6-4DK0DSuqbm4HATG4UuS_7JM7GFb5fWZZ7B5SlNhpuDTo_eYWtIO72mUcFxPCp6CzYMkl1dKm05SP61IUzek1KkR2KswyMp6KjO9nBJrLUAGO_luJpqTlZqHHZJNpxWSGUaNTinU2zTBucymfpFsZu8RkdzozFkvEdJJoPd9vqpxPjzil0SiQNaWYMDp2p6POpUhm0hzebPiy0GXZmjd1SGfdoSBXLW1rwzDEt9Z1bf4CeHH6c8-ZbkLORrSeef5cSEwhgv7sVbf7DIWdfzvjhKHXUpGSLrcMD6RoBhoux5xFPD0Q4Q6-H_jGehr_JEKzsIzqe8ZavtMeRUdogOMPOEwIJCRSkMpXXNkxLw22MTOnhakIgl85Zc5PneitQQPS_0cc1njsqWVgI78EaAH8CCQWTADorrAoUkm_B46CJP8pUni4wMKuFsW6fyi6Lrg3Cmhgil6_1alcb5C2Ai4HEjSh0dHJqoBH_s1sWROeFCl1l5klpU_jwIwtkhbhTpwdb9SScEAWN3jt0KlzwCuQFu6a9hsi9kziQncNqWohsDj0jy84PaUpbqAgcDitQ1LFQuXBaXSkjbnwiqUil9RalVlU_elv-ullzyC-CVMoDPBibS6vLS__i_pNth-kvt_rN1ZyQOOHRcNpbu1z86cNEbpNs0Sqvr0ShigRb_M-2nukMaBDK0jl079ejd_RF8vcb5Fk53pQJxha7N50OJiYLukNkeDGHzYe6ww1dXBDA4ELTgfKRcaygV_GYvmyiOyXmvwl6GAjCqVdB5ub79dP1pBxqjGiMU9scfpOZ7-LsyqNIXqXoc-MxB6cbGBY8CbQEMsyN0MuLRgSxJmbLh3F6h-87ie-Z9WvjfQiLFg-UAE1RQqcH_j8XMWiczdUbDMuBvUJ2thVgs373hQEeg1F5NPN0KAIIuFPRoUUCPb6bzHIrFjHICNSghrgbPz92CxTRUAt_NgsfwMlMMEbDK-40_Qi1giFEX7r4G3hoS4Jr690o-SrRKnrLq9kSaDMtUSnlgas5ZZlxnPQi-4RWhLHhh1969FLNrCC2rIbBTUTKa0-0xmRd_Ls7xbTxu7GHoSQbaaVwwY0VB1eruekhsys_5c-a4KMc_mG0 "Deployment Diagram for Internet Banking System - Live with details")
+![Deployment Diagram for Internet Banking System - Live with details](https://www.plantuml.com/plantuml/png/vLTxR-964F-VJp6bbOwSo2CqLqMLJZe2z98J70YJorMgXDRhmMnlxRLsroIqkk_U6TkS8P1xg5LLgKGYzdWUyvlVp7XvvRomFazq0-0xbKgTHmXBxpFty-cf5VSdiVBBFCmTMcbIZwa_aIOvpRH8sUhO-KYhyBHtSJnXqUreU9e8vz6IQDx7J9jrmaOPXtW6UKhMB02_H5WOhSszIcFGAaKGQGGxZvLrT6M0eeCsKcYz9X-VqZmGeT6Dee565in4t6eko2OKyaEp3J-4SSzeOryslvTd_DSyOkqfwZrDZmz-LvUbdED6Ul7ZPR__WZmqxgW-9lSJQpAqVdsD8aBReWVFW1AMkHOU8z0O8w5JZh54q1BIgrNnHAMWgM151Ox8QDZzTNmxcz_TpAxdmy7hmTi-E_FAQuGQBVILYAr8g8GMReWNcwA7Av5-u6e6Qs8WWMCOgXKs6hNP_As9i9LfsOOcFslI_oiL5uP0uiVt40alG287Q1xzsG3wKCqsO5lD8R7YbKd9aAxJoAG5YrEg0YL2zM6BH_7dmrQKadweuf3Y78jCFN_-_3V_SCbURiESEWlEVpevku3XB61P5-un18TsXHOiEiNEgNBS9TkF5i8cRH1IekCghvI0Nrx0rSthuvi9-Hgvams8FI1ln4h0ExIk0dD9kHzKV9yyyFCNvvtHqogELSxFEXUrpg4oY4p89JB0uW9c9g5oDXyBuFBaeH2cG25IS2Qt4g58UJ3OAi0EFFxqJEe5DPQbK8ezJ6wWcsLQrQonbuAp8BDSrT6x7ei9pKf5wFQRQq4ppCP2AxykQYpWJJ1-Utezcqq2e10dMw0_Dehlh-cS9xkbQfGeF3lVQXk-VQfXPbGxWfC8kovQE1GEzsfqC9QnGcgcP5nSq0nDIZ_DMdRUaO-2j47JDDMXlaH7Fsn58RdeLmRiRefQb7M5ZHW2Qe94yDF06ukyFOe9Y9Npjj06bIwCJOhhDYo5Ms848lTBmbIn3D9YnBT2kyrqW3OntQ2NtqpMvsTxkiLMPvUjpkVOSYYf2GxonGjPnEvblQAFu6aAfnM5dMqEWyBxGHQxTUWsE4-J4Exbq2wtDk_QXL3Qa0Yot6R6eGEJwlMNajmdl_DVONy_yVr--6VMFhL6kDqIjBVAlN_n_zhxqshlT_wLnKzAvE4EmwzS_7taLMPTKMFdILr2TV9ZRHRllnCSVMc4JCG8eWvpQBTyt3-F98PJxENEcmJjCmSaKEGkmfMInNHmwXHs782nq4qZQrJ4a7UXbcQaFYhjoOgDtuj44CATjve0hHB5vo-NXuwGc0KZ-zBRpXkGLPgEsunjbDtDbq0V0YbDaksYP4dE1olEM5bfd5buk5CqJlUE4ofH9qAEWmtOnrv3IxfeAuQl-Avq-DeOPgItj1Ij3IFpXzAQna9PN9Y7TkKx43GwYeiwKjAM2GoY63dSVYkvJF0kAhcU4DU7MYgGLcLbgtJJEDV2xXPUwxzNQsxw2ZLLkcwgAUfF3L0UTaRY0mNa8u-ag8uSSYQ_EvEMHnMoPYD2zMqMyzjogCXmPrvCWKhM16-bMiKgmaHXzHPri21sYbBTM-Ln4_1D_wgtQz3v6ej3cvpJdTBhfdPI4eQkFDfxGqgDu7fyL__OU8LfnB-b_W80 "Deployment Diagram for Internet Banking System - Live with details")
+
+## Styles
+
+Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml)
+
+![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System")
 
 ## Icons
 
diff --git a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml
new file mode 100644
index 00000000..67ca780f
--- /dev/null
+++ b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml	
@@ -0,0 +1,38 @@
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+SHOW_PERSON_OUTLINE()
+AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape())
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine())
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+title Container diagram for Internet Banking System
+
+Person(customer, Customer, "A customer of the bank, with personal bank accounts")
+
+System_Boundary(c1, "Internet Banking") {
+    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backend container")
+}
+
+System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(customer, web_app, "Uses", "HTTPS")
+Rel(customer, spa, "Uses", "HTTPS")
+Rel(customer, mobile_app, "Uses")
+
+Rel_Neighbor(web_app, spa, "Delivers")
+Rel(spa, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+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", $tags="sync/async")
+
+SHOW_LEGEND()
+@enduml
\ No newline at end of file
diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml
index 9d0ce2a2..f20a6e81 100644
--- a/samples/C4_Container Diagram Sample - message bus.puml	
+++ b/samples/C4_Container Diagram Sample - message bus.puml	
@@ -3,41 +3,30 @@
 ' uncomment the following line and comment the first to use locally
 ' !include C4_Container.puml
 
-skinparam wrapWidth 200
-skinparam maxMessageSize 200
-
-LAYOUT_TOP_DOWN()
-'LAYOUT_AS_SKETCH()
-LAYOUT_WITH_LEGEND()
+AddElementTag("micro service", $shape=EightSidedShape(), $bgColor="CornflowerBlue", $fontColor="white")
+AddElementTag("storage", $shape=RoundedBoxShape(), $bgColor="lightSkyBlue", $fontColor="white")
 
+SHOW_PERSON_OUTLINE()
 
 Person(customer, Customer, "A customer")
 
 System_Boundary(c1, "Customer Information") {
-
     Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
-
-    Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information")
-
+    Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information", $tags = "micro service")
     Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
-
-    Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes")
-
-    Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities")
-
-    ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information")
-
-    ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes")
-
-    Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened")
+    Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes", $tags = "micro service")
+    Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities", $tags = "micro service")
+    ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information", $tags = "storage")
+    ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes", $tags = "storage")
+    Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened", $tags = "storage")
 }
 
-Rel(customer, app, "Uses", "HTTPS")
+Rel_D(customer, app, "Uses", "HTTPS")
 
-Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
+Rel_D(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
 
-Rel_L(customer_service, app, "Sends events to", "WebSocket")
-Rel_R(customer_service, message_bus, "Sends customer update events to")
+Rel_U(customer_service, app, "Sends events to", "WebSocket")
+Rel_U(customer_service, message_bus, "Sends customer update events to")
 Rel(customer_service, customer_db, "Stores data in", "JDBC")
 
 Rel(message_bus, reporting_service, "Sends customer update events to")
@@ -48,4 +37,5 @@ Rel(audit_service, audit_store, "Stores events in")
 
 Lay_R(reporting_service, audit_service)
 
+SHOW_LEGEND()
 @enduml