#232 Legend details can be Small()==default, Normal() or None(); defined via SHOW_LEGEND($details=...)

- if $legendText contains a `\n` then the part before is the label and the part behind the details
3 years ago · e68bf9db4c
parent fb4520a5e9
commit e68bf9db4c
6 changed files with 295 additions and 65 deletions
--- a/C4.puml
+++ b/C4.puml
@ -37,19 +37,22 @@ rectangle C4VersionDetailsArea <<legendArea>> [
 ' Labels
 ' ##################################

-!global $LEGEND_SHADOW_TEXT = "(shadow) "
-!global $LEGEND_NO_SHADOW_TEXT = "(no shadow) "
-!global $LEGEND_NO_FONT_BG_TEXT = "(no text, no back color) "
-!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) "
-!global $LEGEND_DASHED_BOUNDARY = "boundary (dashed) "
-!global $LEGEND_DASHED_TRANSPARENT_BOUNDARY = "boundary (dashed, transparent) "
+!global $LEGEND_SHADOW_TEXT = "shadow"
+!global $LEGEND_NO_SHADOW_TEXT = "no shadow"
+!global $LEGEND_NO_FONT_BG_TEXT = "last text and back color"
+!global $LEGEND_NO_FONT_TEXT = "last text color"
+!global $LEGEND_NO_BG_TEXT = "last back color"
+!global $LEGEND_NO_LINE_TEXT = "last 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"
+!global $LEGEND_BOUNDARY = "boundary"
+!global $LEGEND_DASHED_BOUNDARY = "dashed"
+' ignore transparent atm, that the legend is smaller
+'!global $LEGEND_DASHED_TRANSPARENT_BOUNDARY = "dashed, transparent"
+!global $LEGEND_DASHED_TRANSPARENT_BOUNDARY = "dashed"

 !global $SKETCH_FOOTER_WARNING = "Warning:"
 !global $SKETCH_FOOTER_TEXT = "Created for discussion, needs to be validated"
@ -61,6 +64,10 @@ rectangle C4VersionDetailsArea <<legendArea>> [
 !global $ROUNDED_BOX_SIZE = 25
 !global $EIGHT_SIDED_SIZE = 18

+!global $LEGEND_DETAILS_SMALL_SIZE = 10
+!global $LEGEND_DETAILS_NORMAL_SIZE = 14
+!global $LEGEND_DETAILS_SIZE = $LEGEND_DETAILS_SMALL_SIZE
+
 !global $ROUNDED_BOX = "roundedBox"
 !global $EIGHT_SIDED = "eightSided"

@ -68,6 +75,10 @@ rectangle C4VersionDetailsArea <<legendArea>> [
 !global $DASHED_LINE = "dashed"
 !global $BOLD_LINE = "bold"

+!global $LEGEND_DETAILS_NONE = "none"
+!global $LEGEND_DETAILS_NORMAL = "normal"
+!global $LEGEND_DETAILS_SMALL = "small"
+
 skinparam defaultTextAlignment center

 skinparam wrapWidth 200
@ -473,7 +484,7 @@ $elementSkin
  !return $formatted
 !endfunction

-!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite)
+!function $setTagLegendVariables($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite)
  !$bg = $bgColor
  !$fo = $fontColor
  !$bo = $borderColor
@ -514,6 +525,7 @@ $elementSkin
  !endif

  !$tagEntry = "|"
+  !$tagDetails = "("
  !$tagEntry = $tagEntry + "<" + $colorWithHash($bg) +">"
  ' <U+25AF> ..white rectangle
  !$tagEntry = $tagEntry + "<color:"+$bo+"> <U+25AF></color> "
@ -524,9 +536,11 @@ $elementSkin
  !if ($legendText == "")
    !if ($tagStereo == "boundary")
      !if ($bgColor == "#00000000" || %lower($bgColor) == "transparent")
-        !$tagEntry = $tagEntry + " " + $LEGEND_DASHED_TRANSPARENT_BOUNDARY
+        !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY + " "
+        !$tagDetails = $tagDetails + $LEGEND_DASHED_TRANSPARENT_BOUNDARY + ", "
      !else
-        !$tagEntry = $tagEntry + " " + $LEGEND_DASHED_BOUNDARY
+        !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY + " "
+        !$tagDetails = $tagDetails + $LEGEND_DASHED_BOUNDARY + ", "
      !endif
    !elseif (%strpos($tagStereo, "boundary") >= 0)
      ' if contains/ends with _boundary remove _boundary and add "boundary (dashed)"
@ -534,46 +548,68 @@ $elementSkin
      !if ($pos > 0)
        !$tagEntry = $tagEntry + " " + %substr($tagStereo, 0 ,$pos)
        !if ($bgColor == "#00000000" || %lower($bgColor) == "transparent")
-          !$tagEntry = $tagEntry + " " + $LEGEND_DASHED_TRANSPARENT_BOUNDARY
+          !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY + " "
+          !$tagDetails = $tagDetails + $LEGEND_DASHED_TRANSPARENT_BOUNDARY + ", "
        !else
-          !$tagEntry = $tagEntry + " " + $LEGEND_DASHED_BOUNDARY
+          !$tagEntry = $tagEntry + " " + $LEGEND_BOUNDARY + " "
+          !$tagDetails = $tagDetails + $LEGEND_DASHED_BOUNDARY + ", "
        !endif
      !endif
    !else
      !$tagEntry = $tagEntry + " " + $tagStereo + " "
    !endif
    !if ($shadowing == "true")
-      !$tagEntry = $tagEntry + $LEGEND_SHADOW_TEXT
+      !$tagDetails = $tagDetails + $LEGEND_SHADOW_TEXT + ", "
    !endif
    !if ($shadowing == "false")
-      !$tagEntry = $tagEntry + $LEGEND_NO_SHADOW_TEXT
+      !$tagDetails = $tagDetails + $LEGEND_NO_SHADOW_TEXT + ", "
    !endif
    !if ($shape == $ROUNDED_BOX)
-      !$tagEntry = $tagEntry + $LEGEND_ROUNDED_BOX
+      !$tagDetails = $tagDetails + $LEGEND_ROUNDED_BOX + ", "
    !endif
    !if ($shape == $EIGHT_SIDED)
-      !$tagEntry = $tagEntry + $LEGEND_EIGHT_SIDED
+      !$tagDetails = $tagDetails + $LEGEND_EIGHT_SIDED + ", "
    !endif
    !if ($fontColor == "" && $bgColor == "")
-        !$tagEntry = $tagEntry + $LEGEND_NO_FONT_BG_TEXT
+      !$tagDetails = $tagDetails + $LEGEND_NO_FONT_BG_TEXT + ", "
    !else 
      !if ($fontColor == "")
-        !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT
+        !$tagDetails = $tagDetails + $LEGEND_NO_FONT_TEXT + ", "
      !endif
      !if ($bgColor == "")
-        !$tagEntry = $tagEntry + $LEGEND_NO_BG_TEXT
+        !$tagDetails = $tagDetails + $LEGEND_NO_BG_TEXT + ", "
      !endif
    !endif
+    !if ($tagDetails=="(")
+      !$tagDetails = "</size>"
+    !else
+      !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2)
+      !$tagDetails = $tagDetails + ")</size>"
+    !endif 
  !else
-    !$tagEntry = $tagEntry + " " + $legendText + " "
+    !$brPos = %strpos($legendText, "\n")
+    !if ($brPos > 0)
+      !$tagEntry = $tagEntry + %substr($legendText, 0, $brPos) + " "
+      !$details = %substr($legendText, $brPos + 2)
+      !if ($details=="")
+        !$tagDetails = "</size>"
+      !else
+        !$tagDetails = $tagDetails + $details + ")</size>"
+      !endif
+    !else
+      !$tagEntry = $tagEntry + " " + $legendText + " "
+      !$tagDetails = "</size>"
+    !endif
  !endif

-  !$tagEntry = $tagEntry + "</color> "
-  !$tagEntry = $tagEntry + "|"
+  !$tagDetails = $tagDetails + "</color> "
+  !$tagDetails = $tagDetails + "|"
+%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry)
+%set_variable_value("$" + $tagStereo + "LegendDetails", $tagDetails)
  !return $tagEntry
 !endfunction

-!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness)
+!function $setTagRelLegendVariables($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness)
  !$tc = $textColor
  !$lc = $lineColor

@ -593,6 +629,7 @@ $elementSkin
  !endif

  !$tagEntry = "|"
+  !$tagDetails = "("
  ' <U+2500> ..white line
  !$tagEntry = $tagEntry + "<color:"+$lc+"> <U+2500></color> "
  !$tagEntry = $tagEntry + "<color:"+$tc+">"
@ -602,45 +639,60 @@ $elementSkin
  !if ($legendText == "")
    !$tagEntry = $tagEntry + " " + $tagStereo + " "
    !if ($textColor == "")
-      !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT
+      !$tagDetails = $tagDetails + $LEGEND_NO_FONT_TEXT + ", "
    !endif
    !if ($lineColor == "")
-      !$tagEntry = $tagEntry + $LEGEND_NO_LINE_TEXT
+      !$tagDetails = $tagDetails + $LEGEND_NO_LINE_TEXT + ", "
    !endif
    !if ($lineStyle != "")
      !if ($lineStyle == $DOTTED_LINE)
-        !$tagEntry = $tagEntry + $LEGEND_DOTTED_LINE
+        !$tagDetails = $tagDetails + $LEGEND_DOTTED_LINE + ", "
      !elseif ($lineStyle == $DASHED_LINE)
-        !$tagEntry = $tagEntry + $LEGEND_DASHED_LINE
+        !$tagDetails = $tagDetails + $LEGEND_DASHED_LINE + ", "
      !elseif ($lineStyle == $BOLD_LINE)
-        !$tagEntry = $tagEntry + $LEGEND_BOLD_LINE
+        !$tagDetails = $tagDetails + $LEGEND_BOLD_LINE + ", "
      !else
-        !$tagEntry = $tagEntry + "(" + $lineStyle + ") "
+        !$tagDetails = $tagDetails + $lineStyle + ", "
      !endif
    !endif
    !if ($lineThickness != "")
-      !$tagEntry = $tagEntry + "(thickness " + $lineThickness + ") "
+      !$tagDetails = $tagDetails + thickness " + $lineThickness + ") "
    !endif
+    !if ($tagDetails=="(")
+      !$tagDetails = "</size>"
+    !else
+      !$tagDetails = %substr($tagDetails, 0, %strlen($tagDetails)-2)
+      !$tagDetails = $tagDetails + ")</size>"
+    !endif 
  !else
-    !$tagEntry = $tagEntry + " " + $legendText + " "
+    !$brPos = %strpos($legendText, "\n")
+    !if ($brPos > 0)
+      !$tagEntry = $tagEntry + " " + %substr($legendText, 0, $brPos) + " "
+      !$details = %substr($legendText, $brPos + 2)
+      !if ($details=="")
+        !$tagDetails = "</size>"
+      !else
+        !$tagDetails = $tagDetails + $details + ")</size>"
+      !endif
+    !else
+      !$tagEntry = $tagEntry + " " + $legendText + " "
+      !$tagDetails = "</size>"
+    !endif
  !endif

-  !$tagEntry = $tagEntry + "</color> "
-  !$tagEntry = $tagEntry + "|"
+  !$tagDetails = $tagDetails + "</color> "
+  !$tagDetails = $tagDetails + "|"
+%set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry)
+%set_variable_value("$" + $tagStereo + "_LineLegendDetails", $tagDetails)
  !return $tagEntry
 !endfunction

-!global $LEGEND_DOTTED_LINE = "(dotted) "
-!global $LEGEND_DASHED_LINE = "(dashed) "
-!global $LEGEND_BOLD_LINE = "(bold) "
-
 !unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $legendText="", $legendSprite="")
 '' 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, $shape, $legendText, $legendSprite)
-%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry)
+  !$dummyAlreadyVariables = $setTagLegendVariables($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite)
  !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n"
  !$tagMask = $tagLegendMask( $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite)
 %set_variable_value("$" + $tagStereo + "LegendMask", $tagMask)
@ -655,9 +707,8 @@ $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, $lineStyle, $legendText, $legendSprite, $lineThickness)
-%set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry)
-    !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n"
+     !$dummyAlreadyVariables = $setTagRelLegendVariables($tagStereo, $textColor, $lineColor, $lineStyle, $legendText, $legendSprite, $lineThickness)
+     !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n"
 '  !endif
 !endprocedure

@ -668,13 +719,23 @@ $elementSkin
    !$allDefined = %substr($allDefined, $brPos+2)
    !$brPos = %strpos($allDefined, "\n")
    !if (%variable_exists("$" + $tagStereo + "Legend"))
-%get_variable_value("$" + $tagStereo + "LegendEntry")
+      ' </size> is part of legendDetails
+      !$part1 = %get_variable_value("$" + $tagStereo + "LegendEntry")
+      !$partSize = "<size:" + $LEGEND_DETAILS_SIZE + ">"
+      !$part2 = %get_variable_value("$" + $tagStereo + "LegendDetails")
+      !$line = $part1 + $partSize + $part2
+$line
    !endif
  !endwhile
  !if (%strlen($allDefined) > 0)
    !$tagStereo = $allDefined
    !if (%variable_exists("$" + $tagStereo + "Legend"))
-%get_variable_value("$" + $tagStereo + "LegendEntry")
+      ' </size> is part of legendDetails
+      !$part1 = %get_variable_value("$" + $tagStereo + "LegendEntry")
+      !$partSize = "<size:" + $LEGEND_DETAILS_SIZE + ">"
+      !$part2 = %get_variable_value("$" + $tagStereo + "LegendDetails")
+      !$line = $part1 + $partSize + $part2
+$line
    !endif
  !endif
 !endprocedure
@ -722,7 +783,8 @@ $addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $sha
  !$shape=$restoreEmpty($elementName, "shape", $shape, %true())
  !$sprite=$restoreEmpty($elementName, "sprite", $sprite, %true())
  !$techn=$restoreEmpty($elementName, "techn", $techn, %true())
-  !$legendText=$restoreEmpty($elementName, "legendText", $legendText, %true())
+  ' new style should has its own legend text
+  ' !$legendText=$restoreEmpty($elementName, "legendText", $legendText, %true())
  !$legendSprite=$restoreEmpty($elementName, "legendSprite", $legendSprite, %true())

  AddElementTag($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite)
@ -765,8 +827,7 @@ $defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing,
  !if ($techn != "")
 %set_variable_value("$" + $elementName + "ElementTagTechn", $techn)
  !endif
-  !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite)
-%set_variable_value("$" + $elementName + "LegendEntry", $tagEntry)
+  !$dummyAlreadyVariables = $setTagLegendVariables($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite)
  ' default tags sets at least bgColor and fontColor
  !$tagMask = $tagLegendMask("CHANGED", "CHANGED", $borderColor, $shadowing, $shape, $sprite)
 %set_variable_value("$" + $elementName + "LegendMask", $tagMask)
@ -946,22 +1007,34 @@ SetPropertyHeader("Property","Value")
 ' Layout
 ' ##################################

+!function $getLegendDetailsSize($detailsFormat)
+  !if $detailsFormat == $LEGEND_DETAILS_NONE
+    !$size = 0
+  !elseif $detailsFormat == $LEGEND_DETAILS_SMALL 
+    !$size = $LEGEND_DETAILS_SMALL_SIZE
+  !else
+    !$size = $LEGEND_DETAILS_NORMAL_SIZE
+  !endif
+  !return $size
+!endfunction
+
 !procedure $getHideStereotype($hideStereotype)
 !if ($hideStereotype == "true")
 hide stereotype
 !endif
 !endprocedure

-!procedure $getLegendTable()
+!procedure $getLegendTable($detailsFormat)
+!global $LEGEND_DETAILS_SIZE = $getLegendDetailsSize($detailsFormat)
 <#00000000,#00000000>|<color:$LEGEND_TITLE_COLOR>**Legend**</color> |
 $showActiveLegendEntries($tagDefaultLegend)
 $showActiveLegendEntries($tagCustomLegend)
 !endprocedure

-!procedure $getLegendArea($areaAlias, $hideStereotype)
+!procedure $getLegendArea($areaAlias, $hideStereotype, $details)
 $getHideStereotype($hideStereotype)
 rectangle $areaAlias<<legendArea>> [
-$getLegendTable()
+$getLegendTable($details)
 ]
 !endprocedure

@ -1072,11 +1145,24 @@ left to right direction
 left to right direction
 !endprocedure

+' legend details can displayed as Normal(), Small(), None()
+!function None()
+!return $LEGEND_DETAILS_NONE
+!endfunction
+
+!function Normal()
+!return $LEGEND_DETAILS_NORMAL
+!endfunction
+
+!function Small()
+!return $LEGEND_DETAILS_SMALL 
+!endfunction
+
 ' has to be last call in diagram
-!unquoted procedure SHOW_LEGEND($hideStereotype="true")
+!unquoted procedure SHOW_LEGEND($hideStereotype="true", $details=Small())
 $getHideStereotype($hideStereotype)
 legend right
-$getLegendTable()
+$getLegendTable($details)
 endlegend
 !endprocedure

@ -1093,8 +1179,8 @@ SHOW_LEGEND($hideStereotype)
 !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)
+!unquoted procedure SHOW_FLOATING_LEGEND($alias=LEGEND(), $hideStereotype="true", $details=Normal())
+$getLegendArea($alias, $hideStereotype, $details)
 !endprocedure

 ' Boundaries
--- a/LayoutOptions.md
+++ b/LayoutOptions.md
@ -130,7 +130,7 @@ SHOW_LEGEND()

 ![LAYOUT_LANDSCAPE Sample](https://www.plantuml.com/plantuml/png/NOzFRvj04CNlV8gjUmYM75kfUkef5ApaG1nae55FQ0sJUANzizeTXAAgtxqpCNQiSa7lDxFllRcFA0EEHeio-_tSDbsPxOewpwgjgANn6f8lolPw740S4NtyiTa4EQtV51x7mnWXzCuYM5ptpcoybfQzRYCEMXqs-VVRYb7xL6wCZ0Y1K9VJ2waiXBMdtIJvFpXT9aa58JgRoi4eknABZFygOf3emcAPrEzaPhgVRhI33EzfVxSIDwU-Dqln9n7qNMBI2GwTz9vyNk0WCk-rwYKgPnU4ygyhaTNLUhTjw4a0yMrz9vv-vJpBj7PJ57nc5EW4tUWbhPXHew8iqKmA4O90PK1JLgHkV-TsAPw6v3ElqJ3PWpvVzLchZH0vxx5fgfgsUEao_RHv08maWN-lmPdh9-VGUhLWULOjIT7wAr8mATnahrZ9h8HNl69xPdlrTiIvTjTwSXTrouNPaHaRVT22A8kPiza7Bucpc3aRdWPx6bpiwyVdbwxSFcntHKho7kmm6lqF "LAYOUT_LANDSCAPE Sample")

-## LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)
+## LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details)

 Colors can help to add additional information or simply to make the diagram more aesthetically pleasing.
 It can also help to save some space.
@ -157,12 +157,17 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")

 ![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/PL1DJy905BplhrZnG4cm3SQJ9sebO0BOs2Bnr2pjKpRPh-o-sX3ZV_Sr89YubqdUp7ipizE0mcEh5L-cRy-Rije-bOjgEPlFre-y4DefO5VIrAfjWEyHNRXF4Y-w-4FYljsr0Nnj3OB1kBOw4OsNmdogrhL9TdUJAs5mirecIY04f56LaLf80pvsvChOVzjen5WEFbWJYKPBC-Q3j4SPq0kqVZ1YnI4WwEh1jgOH_X3Lap4V7jCEH_oBSNfdewY3NIMSepjRsF7KEILhWTAQ0Osowp5FYpnUpqfQyS1lumbVlMOzbofbky3xae6ZvTJG2PBeLg4aBrvs4X4yHwb1aLUWRD-dT14UIRfpaX79Na3zjhh4sWJQ95oKPLwGgXUTsSkPEI35wA27Ts_rtvKfc8R-ymS0 "LAYOUT_WITH_LEGEND Sample")

-Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a calculated legend can be activated with `SHOW_LEGEND(?hideStereotype)`.
+Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a calculated legend can be activated with `SHOW_LEGEND(?hideStereotype, ?details)`.

 The calculated legend has following differences:
 * only relevant elements are listed
 * custom tags/styles are supported
 * stereotypes can remain visible (with `SHOW_LEGEND(false)`)
+* details can be displayed in different sizes via the `$details` argument
+  * `$details = Small()` .. default; details are displayed with a smaller size compared to the legend labels
+  * `$details = Normal()` .. details and labels are displayed with same size
+  * `$details = None()` .. only the labels are displayed
+  * if `$legendText` contains `\n` then the text before is the label and the text behind the details
 * **`SHOW_LEGEND()` has to be last call in the diagram**

 ```plantuml
@ -184,7 +189,71 @@ 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()
+Legend labels and details can be defined via `\n` in `$legendTest` arguments too.
+
+```plantuml
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+!endif
+' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) 
+AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape")
+' $legendText without \n defines only a label 
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call")
+' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+System_Boundary(c1, "Internet Banking") {
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
+}
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
+
+SHOW_LEGEND()
+@enduml
+```
+
+![SHOW_LEGEND Sample, $legendText defines legend details](https://www.plantuml.com/plantuml/png/hLDHRo8t47xdLqpsSYf815HTxwKIqd6mxUL480BIzk4aDBiUm3gllR9dIL3L_zxnRjWIagelvG7js9xFt_VDvq-1qNDLcCuFa3jx8C-W6Hurxm6LqgoTHIDRHO5MWT6M0FskAiWot4oNwMoyllqjtTpE9xE7QJfA1iF1805sK0K2ut8qvjYvqbjuVq2lCJEqeISTE7IJo-Qarm6uqZOtbI9uloFUj3q7D1MzrJAS_BIPECiepFoWZ4gko0GwXzepb-7duT3Zus0dogfCoFbSkaJ5GBGDIuCskd0JM1cT2UZDVLnwk9iD2mnC_irxhD9RCUxQq4w-r_JqxDmt2ugsSZ80xmaCPcGW-gT804m0jsqswZuG5lu8tIJ3_7kiyzCz2UZGTFSX8RtRCmIjI47OOqbnzuJOWyvOgTHG7CmQTorOopdfm_LMYeappe-kqrbwbyxNcryMyZTPp1PBsSzspMxoxiE7ZzFnnzXJNpLAu-MhUFSgrjrU_rprw3NrR_OrtzuRNhcAp-rorXm16ysrf2MPMWw6eyqZ7wQdauRnShdulIKVi_cl6oi-6XfDCUn9pQI-5D3WGunhJLC2QzqBiWr35HdWBZgF5Ri2MTSHlvYpB9q_7wL3QV182ahlIlAiIVeznQxJ1C_5HYx3_qUnOpufxdKwgsDWAZQVNMKL-cCt_r62TMkPl2M6psY_QxjBUl1d1-JNPgTRk4mRsc1Polcxke1nMIPIJTxruGyiq6iRotll3bf5UM1qeJaElye2yIdpxMrPSnjiAvitFcaM7ntaLH1doGSuQ8mzsaD301GTT2v1kg3td3xXfuN2-FusaZCwnuWRMNt50_PXwkIO_wVldEz_yOfK13XfvXz6hzwNaFhhv6_wnDrdc4sebw9jScphiQ2Jpz2SZYnMx7pqp9YJJRaij5IaqVcYLWEOnIVJUjG7p7CP9yiNUxG1Qz9I4US38TMHKBsOtqkp7W85OT3almzVLulvyCjwVRzgbJPRWYH0ctbyrPcxiFn2Qujw5cG9oTti4laivp6SNoJ2i_JNT3xjzZgV1BqgpDy0 "SHOW_LEGEND Sample, $legendText defines legend details")
+
+Legend details can be deactivated via `SHOW_LEGEND($details=None())`
+
+```plantuml
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+!endif
+' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) 
+AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape")
+' $legendText without \n defines only a label 
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call")
+' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+System_Boundary(c1, "Internet Banking") {
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
+}
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
+
+SHOW_LEGEND($details=None())
+@enduml
+```
+
+![SHOW_LEGEND Sample, hide details with $details=None()](https://www.plantuml.com/plantuml/png/hLDHZ-8s47xdLypczbIGM51rlPTAICT1sjiJ2ojWspwS54tY8LZds97ji8kg_lUE4nAbx5PzAGyeu_7CVDytdpyvZzPNXHhy09dH9x8Uf8TdwO-0GaWlZKR5gQ90BK19JO0shmhI7kwMstWrtz__5YVtwyNgQHdFeibqCed06wWSWJ8PAdKUtCW3l3-XbPWgIkX5Ek-6qNLnD1e0t4YTgKeGlC_99rtD2LL5RvLC5pyb2wCzCZ8xAGEJ6rAE-gsEtfVkv-dKulCaPsPLok1inbNCOiBSfgL27LIuSruecNBJkyTmzFImcXReFDatvsWX3opShQASl_VqSb7kcmP11xxfm1y95AQa8EWdY1ie1-PG9vewO1Js3CCenUnxYBDsJWJIDTLZY4ZcHmzE2XBWZbXIoBOTHp2O2n4h2elPOzurwp17OxWzSB0mojZPRRoA7-BrFlbbmt-BpMgpvNoQDzdetOSF7vVpZw6c7ZMBm_1TcBqByN0qxhEUlOR-JR_6Etf3ArFvlbn6gpDWmxccj2LLqq5trbd0u-cbvJ3VRZU_T-23D_yriVDdHRCbkYE95SVN19h-4EnQmsJ3QjE_SK4e0WBCW_9OULEWbxN5h_RCH_td8wHZXvr9G6bDITPBudfBeQhTO9zim3BzVnWRxrl6ey5WTtQUYkIpgRH0UnvcFxAnxhKdgyd3PzJVfSwZ4Vmv0FvrtXaM9fMA4YnBllzG1p0louYZnRin_845Mgb3-6ZDIOf03vGif0_Bhr97llLyDorjfi6XqbcZa_Iieu6iSgmiMGSdYQ56McW0WA2JpDX8L_0kxcDyaY7C7-y3E2Kp37q3ggzumZ4i3L-pqDNryVuNhW256qVD_jtirVjYK7-r-iOlVdXfaxZwACZ6rmuM2sfrXkPsGB7pnWRDb6fbolYWWyA5nXOr6y0qF9bEep5Wbl4wFNzvYzfX3PeZyjc4GGtOLFtzmJ_5UdBa647Z_p5ytMtMqo_x_UEkOzgak1CtIjRXLQVcIl9hhctNdf7P90-hgyvzdmTpVc4Bh-9Vu_LoU7jv5RErQQpxYOTLXVeR "SHOW_LEGEND Sample, hide details with $details=None()")
+
+## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) 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.

--- a/README.md
+++ b/README.md
@ -387,8 +387,8 @@ Lay_Distance(LEGEND(), db, 1)
 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() or LAYOUT_LANDSCAPE()](LayoutOptions.md#layout_top_down-or-layout_left_right-or-layout_landscape)
-* [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_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details)](LayoutOptions.md#layout_with_legend-or-show_legend)
+* [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-legend)
 * [LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch)
 * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)

--- a/percy/TestLegendDetailsNone.puml
+++ b/percy/TestLegendDetailsNone.puml
@ -0,0 +1,25 @@
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+!endif
+' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) 
+AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape")
+' $legendText without \n defines only a label 
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call")
+' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+System_Boundary(c1, "Internet Banking") {
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
+}
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
+
+SHOW_LEGEND($details=None())
+@enduml
--- a/percy/TestLegendDetailsNormal.puml
+++ b/percy/TestLegendDetailsNormal.puml
@ -0,0 +1,25 @@
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+!endif
+' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) 
+AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape")
+' $legendText without \n defines only a label 
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call")
+' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+System_Boundary(c1, "Internet Banking") {
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
+}
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
+
+SHOW_LEGEND($details=Normal())
+@enduml
--- a/percy/TestLegendDetailsSmall.puml
+++ b/percy/TestLegendDetailsSmall.puml
@ -0,0 +1,25 @@
+@startuml
+' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
+!if %variable_exists("RELATIVE_INCLUDE")
+  !include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
+!else
+  !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+!endif
+' $legendText with \n defines the label and details of the legend entry ("backend container" is label, "eight sided shape" is details) 
+AddElementTag("backendContainer", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape(), $legendText="backend container\neight sided shape")
+' $legendText without \n defines only a label 
+AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine(), $legendText="async call")
+' if no $legendText defined, $tag is automatically the label and all additional displayed properties are the details
+AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine())
+
+System_Boundary(c1, "Internet Banking") {
+    Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+    Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", $tags="backendContainer")
+}
+System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async")
+Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS", $tags="sync/async")
+
+SHOW_LEGEND($details=Small())
+@enduml