Merge pull request #401 from kirchsth/feature/400_new_style

#400 support new visual style for C4 diagrams with `!NEW_C4_STYLE=1`

Author: kirchsth

C4.puml

@@ -1,14 +1,22 @@
 ' C4-PlantUML
-
+ 
 ' Global pre-settings
 ' ##################################
+' NEW_C4_STYLE
+' If NEW_C4_STYLE is set BEFORE the first C4_* file is loaded, new C4 layout style is used
+' NEW_C4_STYLE can be set via 
+' !NEW_C4_STYLE = 1
+' or with additional command line argument -DNEW_C4_STYLE=1
+!global NEW_C4_STYLE ?= 0
+
 ' ENABLE_ALL_PLANT_ELEMENTS
 ' If ENABLE_ALL_PLANT_ELEMENTS is set BEFORE the first C4_* file is loaded, nearly "all" PlantUML elements can be used like
 ' Component(StorageA, "Storage A ", $baseShape="storage")
 ' ENABLE_ALL_PLANT_ELEMENTS can be set via 
 ' !ENABLE_ALL_PLANT_ELEMENTS = 1
 ' or with additional command line argument -DENABLE_ALL_PLANT_ELEMENTS=1
 
+' NO_LAY_ROTATE
 ' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE() call
 ' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
 ' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
@@ -73,6 +81,7 @@ rectangle C4VersionDetailsArea <<legendArea>> [
 !$LEGEND_NO_FONT_TEXT ?= "last text color"
 !$LEGEND_NO_BG_TEXT ?= "last back color"
 !$LEGEND_NO_LINE_TEXT ?= "last line color"
+!$LEGEND_SHARP_CORNER ?= "box"
 !$LEGEND_ROUNDED_BOX ?= "rounded box"
 !$LEGEND_EIGHT_SIDED ?= "eight sided"
 !$LEGEND_DOTTED_LINE ?= "dotted"
@@ -129,8 +138,14 @@ rectangle C4VersionDetailsArea <<legendArea>> [
 ' internal 
 ' ##################################
 
+!global $SHARP_CORNER = "sharpCorner"
 !global $ROUNDED_BOX = "roundedBox"
 !global $EIGHT_SIDED = "eightSided"
+!if (NEW_C4_STYLE == 1)
+ !$DEFAULT_SHAPE ?= $ROUNDED_BOX
+!else
+ !$DEFAULT_SHAPE ?= $SHARP_CORNER
+!endif
 
 !global $DOTTED_LINE = "dotted"
 !global $DASHED_LINE = "dashed"
@@ -445,7 +460,10 @@ skinparam package {
  !endif
  ' only rectangle supports shape(d corners), define both skinparam that overlays are working
  !if ($shape != "" && $element == "rectangle")
- !if ($shape == $ROUNDED_BOX)
+ !if ($shape == $SHARP_CORNER)
+ !$elementSkin = $elementSkin + " RoundCorner " + "0" + $bl()
+ !$elementSkin = $elementSkin + " DiagonalCorner " + "0" + $bl()
+ !elseif ($shape == $ROUNDED_BOX)
  !$elementSkin = $elementSkin + " RoundCorner " + $ROUNDED_BOX_SIZE+ $bl()
  !$elementSkin = $elementSkin + " DiagonalCorner " + "0" + $bl()
  !elseif ($shape == $EIGHT_SIDED)
@@ -744,10 +762,13 @@ $elementSkin
  !if ($shadowing == "false")
  !$tagDetails = $tagDetails + $LEGEND_NO_SHADOW_TEXT + ", "
  !endif
- !if ($shape == $ROUNDED_BOX)
+ !if ($shape == $SHARP_CORNER && $shape != $DEFAULT_SHAPE)
+ !$tagDetails = $tagDetails + $LEGEND_SHARP_CORNER + ", "
+ !endif
+ !if ($shape == $ROUNDED_BOX && $shape != $DEFAULT_SHAPE)
  !$tagDetails = $tagDetails + $LEGEND_ROUNDED_BOX + ", "
  !endif
- !if ($shape == $EIGHT_SIDED)
+ !if ($shape == $EIGHT_SIDED && $shape != $DEFAULT_SHAPE)
  !$tagDetails = $tagDetails + $LEGEND_EIGHT_SIDED + ", "
  !endif
  !if ($fontColor == "" && $bgColor == "")
@@ -940,6 +961,11 @@ $line
  !endif
 !endprocedure
 
+' normal rectangle
+!function SharpCornerShape()
+!return $SHARP_CORNER
+!endfunction
+
 !function RoundedBoxShape()
 !return $ROUNDED_BOX
 !endfunction
@@ -966,6 +992,14 @@ $line
 
 ' used by new defined tags
 !unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="")
+
+!if (NEW_C4_STYLE == 1)
+ !$swap=$bgColor
+ !$bgColor=$fontColor
+ !$fontColor=$swap
+ !$borderColor=$swap
+!endif
+
 $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $borderStyle, $borderThickness)
  !if ($sprite!="")
 %set_variable_value("$" + $tagStereo + "ElementTagSprite", $sprite)
@@ -980,6 +1014,15 @@ $addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $sha
 !endprocedure
 
 !unquoted procedure $addElementTagInclReuse($elementName, $tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="")
+
+'stored tags are already swapped (swap before comparing)
+!if (NEW_C4_STYLE == 1)
+ !$swap=$bgColor
+ !$bgColor=$fontColor
+ !$fontColor=$swap
+ !$borderColor=$swap
+!endif
+
  !$bgColor=$restoreEmpty($elementName, "bgColor", $bgColor, %false())
  !$fontColor=$restoreEmpty($elementName, "fontColor", $fontColor, %false())
  !$borderColor=$restoreEmpty($elementName, "borderColor", $borderColor, %false())
@@ -993,6 +1036,14 @@ $addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $sha
  !$borderStyle=$restoreEmpty($elementName, "borderStyle", $borderStyle, %false())
  !$borderThickness=$restoreEmpty($elementName, "borderThickness", $borderThickness, %false())
 
+' swap back
+!if (NEW_C4_STYLE == 1)
+ !$swap=$bgColor
+ !$bgColor=$fontColor
+ !$fontColor=$swap
+ !$borderColor=$swap
+!endif
+
  AddElementTag($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $techn, $legendText, $legendSprite, $borderStyle, $borderThickness)
 !endprocedure
 
@@ -1014,6 +1065,14 @@ $addRelTagToLegend($tagStereo, $textColor, $lineColor, $lineStyle, $legendText,
 
 ' update the style of existing elements like person, ...
 !unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="")
+
+!if (NEW_C4_STYLE == 1)
+ !$swap=$bgColor
+ !$bgColor=$fontColor
+ !$fontColor=$swap
+ !$borderColor=$swap
+!endif
+
 !$bgColor=$restoreEmpty($elementName, "bgColor", $bgColor, %true())
 !$fontColor=$restoreEmpty($elementName, "fontColor", $fontColor, %true())
 !$borderColor=$restoreEmpty($elementName, "borderColor", $borderColor, %true())
@@ -1534,6 +1593,14 @@ $getLegendArea($alias, $hideStereotype, $details)
 ' ##################################
 
 !unquoted procedure UpdateBoundaryStyle($elementName="", $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $type="", $legendText="", $borderStyle="", $borderThickness="", $sprite="", $legendSprite="")
+
+!if (NEW_C4_STYLE == 1)
+ !$swap=$bgColor
+ !$bgColor=$fontColor
+ !$fontColor=$swap
+ !$borderColor=$swap
+!endif
+
  !if ($elementName != "")
  !$elementBoundary = $elementName + '_boundary'
  UpdateElementStyle($elementBoundary, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $sprite, $type, $legendText, $legendSprite, $borderStyle, $borderThickness)

C4_Component.puml

@@ -31,8 +31,8 @@
 ' Styling
 ' ##################################
 
-UpdateElementStyle("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR, $legendText="$COMPONENT_LEGEND_TEXT")
-UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $EXTERNAL_COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR, $legendText="$EXTERNAL_COMPONENT_LEGEND_TEXT")
+UpdateElementStyle("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$COMPONENT_LEGEND_TEXT")
+UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $EXTERNAL_COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$EXTERNAL_COMPONENT_LEGEND_TEXT")
 
 ' shortcuts with default colors
 !unquoted procedure AddComponentTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="")

C4_Container.puml

@@ -35,10 +35,10 @@
 
 ' Styling
 ' ##################################
-UpdateElementStyle("container", $CONTAINER_BG_COLOR, $CONTAINER_FONT_COLOR, $CONTAINER_BORDER_COLOR, $legendText="$CONTAINER_LEGEND_TEXT")
-UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $EXTERNAL_CONTAINER_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR, $legendText="$EXTERNAL_CONTAINER_LEGEND_TEXT")
+UpdateElementStyle("container", $CONTAINER_BG_COLOR, $CONTAINER_FONT_COLOR, $CONTAINER_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$CONTAINER_LEGEND_TEXT")
+UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $EXTERNAL_CONTAINER_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$EXTERNAL_CONTAINER_LEGEND_TEXT")
 
-UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE", $legendText="$CONTAINER_BOUNDARY_LEGEND_TEXT")
+UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE, $legendText="$CONTAINER_BOUNDARY_LEGEND_TEXT")
 
 ' shortcuts with default colors
 !unquoted procedure AddContainerTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="", $borderStyle="", $borderThickness="")

C4_Context.puml

@@ -54,13 +54,13 @@
 ' Styling
 ' ##################################
 
-UpdateElementStyle("person", $PERSON_BG_COLOR, $PERSON_FONT_COLOR, $PERSON_BORDER_COLOR, $legendText="$PERSON_LEGEND_TEXT")
-UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $EXTERNAL_PERSON_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR, $legendText="$EXTERNAL_PERSON_LEGEND_TEXT")
-UpdateElementStyle("system", $SYSTEM_BG_COLOR, $SYSTEM_FONT_COLOR, $SYSTEM_BORDER_COLOR, $legendText="$SYSTEM_LEGEND_TEXT")
-UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $EXTERNAL_SYSTEM_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR, $legendText="$EXTERNAL_SYSTEM_LEGEND_TEXT")
+UpdateElementStyle("person", $PERSON_BG_COLOR, $PERSON_FONT_COLOR, $PERSON_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$PERSON_LEGEND_TEXT")
+UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $EXTERNAL_PERSON_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$EXTERNAL_PERSON_LEGEND_TEXT")
+UpdateElementStyle("system", $SYSTEM_BG_COLOR, $SYSTEM_FONT_COLOR, $SYSTEM_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$SYSTEM_LEGEND_TEXT")
+UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $EXTERNAL_SYSTEM_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$EXTERNAL_SYSTEM_LEGEND_TEXT")
 
-UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE", $legendText="$SYSTEM_BOUNDARY_LEGEND_TEXT")
-UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE", $legendText="$ENTERPRISE_BOUNDARY_LEGEND_TEXT")
+UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE, $legendText="$SYSTEM_BOUNDARY_LEGEND_TEXT")
+UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE, $legendText="$ENTERPRISE_BOUNDARY_LEGEND_TEXT")
 
 ' shortcuts with default colors
 !unquoted procedure AddPersonTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="", $sprite="", $legendText="", $legendSprite="", $type="", $borderStyle="", $borderThickness="")

C4_Deployment.puml

@@ -27,7 +27,7 @@
 !$NODE_TYPE_MAX_CHAR_WIDTH ?= 35
 !$NODE_DESCR_MAX_CHAR_WIDTH ?= 32
 
-UpdateElementStyle("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR, $legendText="$NODE_LEGEND_TEXT")
+UpdateElementStyle("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR, $shape=$DEFAULT_SHAPE, $legendText="$NODE_LEGEND_TEXT")
 skinparam rectangle<<node>> {
  FontStyle normal
 }

C4_Sequence.puml

@@ -33,10 +33,10 @@
 !if ($LEGEND_DASHED_TRANSPARENT_BOUNDARY == "dashed")
  !$LEGEND_DASHED_TRANSPARENT_BOUNDARY = ""
 !endif
-UpdateBoundaryStyle("", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR)
-UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE")
-UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE")
-UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE")
+UpdateBoundaryStyle("", $bgColor=$BOUNDARY_BG_COLOR, $fontColor=$BOUNDARY_COLOR, $borderColor=$BOUNDARY_COLOR, $shape=$DEFAULT_SHAPE)
+UpdateBoundaryStyle("enterprise", $bgColor=$ENTERPRISE_BOUNDARY_BG_COLOR, $fontColor=$ENTERPRISE_BOUNDARY_COLOR, $borderColor=$ENTERPRISE_BOUNDARY_COLOR, $type="$ENTERPRISE_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE)
+UpdateBoundaryStyle("system", $bgColor=$SYSTEM_BOUNDARY_BG_COLOR, $fontColor=$SYSTEM_BOUNDARY_COLOR, $borderColor=$SYSTEM_BOUNDARY_COLOR, $type="$SYSTEM_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE)
+UpdateBoundaryStyle("container", $bgColor=$CONTAINER_BOUNDARY_BG_COLOR, $fontColor=$CONTAINER_BOUNDARY_COLOR, $borderColor=$CONTAINER_BOUNDARY_COLOR, $type="$CONTAINER_BOUNDARY_TYPE", $shape=$DEFAULT_SHAPE)
 
 ' Styling and Layout
 ' ##################################

README.md

@@ -678,6 +678,7 @@ Additional tags/stereotypes can be added to the existing element stereotypes (co
 - `UpdateBoundaryStyle(?elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`:
  This call updates the default style of the existing boundaries and creates no additional legend entry.
  If the element name is "" then it updates generic, enterprise, system and container boundary style in on call.
+- `SharpCornerShape()`: This call returns the name of the sharp corner shape and can be used as ?shape argument (default).
 - `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 or ?borderStyle argument.