From f85e1379e7c4962a184ceb7dd6fb1879a3bcf163 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 27 Feb 2021 17:49:00 +0100 Subject: [PATCH 01/14] #126: workflow tests: add C4 relations checks --- percy/TestRelations.puml | 72 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 percy/TestRelations.puml diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml new file mode 100644 index 0000000..787493d --- /dev/null +++ b/percy/TestRelations.puml @@ -0,0 +1,72 @@ +@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/kirchsth/C4-PlantUML/extended/C4_Component.puml +!endif + +[RelFrom] +[BiRelFrom] + +[RelShort] +[BiRelShort] + +[RelLong] +[BiRelLong] + +Rel_(RelFrom, To_Rel_UP, "A label", "-UP->>") +Rel_(RelFrom, To_Rel_DOWN, "A label", "A techn", "-DOWN->>") + +Rel(RelFrom, "To_Rel", "A label") +Rel(RelFrom, "To_Rel_Tech", "A label", "A techn") +Rel_Back(RelFrom, "To_Rel_Back", "A label") +Rel_Back(RelFrom, "To_Rel_Back_Tech", "A label", "A techn") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor", "A label") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor_Tech", "A label", "A techn") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor", "A label") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor_Tech", "A label", "A techn") + +BiRel(BiRelFrom, "To_BiRel", "A label") +BiRel(BiRelFrom, "To_BiRel_Tech", "A label", "A techn") + +Rel_D(RelShort, "To_Rel_D", "A label") +Rel_D(RelShort, "To_Rel_D_Tech", "A label", "A techn") +Rel_Down(RelLong, "To_Rel_Down", "A label") +Rel_Down(RelLong, "To_Rel_Down_Tech", "A label", "A techn") +Rel_L(RelShort, "To_Rel_L", "A label") +Rel_L(RelShort, "To_Rel_L_Tech", "A label", "A techn") +Rel_Left(RelLong, "To_Rel_Left", "A label") +Rel_Left(RelLong, "To_Rel_Left_Tech", "A label", "A techn") +Rel_R(RelShort, "To_Rel_R", "A label") +Rel_R(RelShort, "To_Rel_R_Tech", "A label", "A techn") +Rel_Right(RelLong, "To_Rel_Right", "A label") +Rel_Right(RelLong, "To_Rel_Right_Tech", "A label", "A techn") +Rel_U(RelShort, "To_Rel_U", "A label") +Rel_U(RelShort, "To_Rel_U_Tech", "A label", "A techn") +Rel_Up(RelLong, "To_Rel_Up", "A label") +Rel_Up(RelLong, "To_Rel_Up_Tech", "A label", "A techn") + +BiRel_D(BiRelShort, "To_BiRel_D", "A label") +BiRel_D(BiRelShort, "To_BiRel_D_Tech", "A label", "A techn") +BiRel_Down(BiRelLong, "To_BiRel_Down", "A label") +BiRel_Down(BiRelLong, "To_BiRel_Down_Tech", "A label", "A techn") +BiRel_L(BiRelShort, "To_BiRel_L", "A label") +BiRel_L(BiRelShort, "To_BiRel_L_Tech", "A label", "A techn") +BiRel_Left(BiRelLong, "To_BiRel_Left", "A label") +BiRel_Left(BiRelLong, "To_BiRel_Left_Tech", "A label", "A techn") +BiRel_R(BiRelShort, "To_BiRel_R", "A label") +BiRel_R(BiRelShort, "To_BiRel_R_Tech", "A label", "A techn") +BiRel_Right(BiRelLong, "To_BiRel_Right", "A label") +BiRel_Right(BiRelLong, "To_BiRel_Right_Tech", "A label", "A techn") +BiRel_U(BiRelShort, "To_BiRel_U", "A label") +BiRel_U(BiRelShort, "To_BiRel_U_Tech", "A label", "A techn") +BiRel_Up(BiRelLong, "To_BiRel_Up", "A label") +BiRel_Up(BiRelLong, "To_BiRel_Up_Tech", "A label", "A techn") + +Lay_U(RelFrom, BiRelFrom) +Lay_D(RelFrom, RelShort) +Lay_D(RelShort, RelLong) +Lay_R(RelLong, BiRelShort) +Lay_L(RelLong, BiRelLong) +@enduml \ No newline at end of file From 1aa86021b3372e9ede2309b630e0c7ca5152f657 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 28 Feb 2021 01:49:44 +0100 Subject: [PATCH 02/14] #126: C4 relationships support description, sprite/openIconic and tags (1 - legend update missing) --- C4.puml | 195 ++++++++++++++++++++++++++------------------------------ 1 file changed, 89 insertions(+), 106 deletions(-) diff --git a/C4.puml b/C4.puml index 47cf597..500cce3 100644 --- a/C4.puml +++ b/C4.puml @@ -62,12 +62,32 @@ skinparam rectangle<> { !global $tagDefaultLegend = "" !global $tagCustomLegend = "" +!unquoted function $toStereos($tags) + !if (%strlen($tags) == 0) + !return '' + !endif + !$stereos = '' + !$brPos = %strpos($tags, "+") + !while ($brPos >= 0) + !$tag = %substr($tags, 0, $brPos) + !$stereos = $stereos + '<<' + $tag + '>>' +%set_variable_value("$" + $tag + "LineLegend", %true()) + !$tags = %substr($tags, $brPos+1) + !$brPos = %strpos($tags, "+") + !endwhile + !if (%strlen($tags)>0) + !$stereos = $stereos + '<<' + $tags + '>>' +%set_variable_value("$" + $tags + "LineLegend", %true()) + !endif + !return $stereos +!endfunction + !unquoted function $toStereos($elementType, $tags) !if (%strlen($tags) == 0) !$stereos = '<<' + $elementType + '>>' %set_variable_value("$" + $elementType + "Legend", %true()) !return $stereos - !endif + !endif !$stereos = '' !$brPos = %strpos($tags, "+") !while ($brPos >= 0) @@ -319,6 +339,32 @@ rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias ' Relationship ' ################################## +!function $getRel($direction, $alias1, $alias2, $label, $techn, $descr, $sprite, $tags) + !$rel = $alias1 + ' ' + $direction + ' ' + $alias2 + !if ($tags != "") + !$rel = $rel + ' ' + $toStereos($tags) + !endif + !$rel = $rel + ' : ' + !if ($sprite != "") + ' if it starts with & it's a OpenIconic, details see https://useiconic.com/open/ + !if (%substr($sprite, 0, 1) != "&") + !$rel = $rel + '<$'+$sprite+'> ' + !else + !$rel = $rel + '<'+$sprite+'> ' + !endif + !endif + !$rel = $rel + '**' + $label + '**' + !if ($techn != "") + ' last version of plantuml server supports automatic line breaks (no $breakType() required) + !$rel = $rel + '\n//[' + $techn + ']//' + !endif + !if ($descr != "") + ' last version of plantuml server supports automatic line breaks (no $breakDescr() required) + !$rel = $rel + '\n\n' + $descr + !endif + !return $rel +!endfunction + !unquoted procedure Rel_($alias1, $alias2, $label, $direction) $alias1 $direction $alias2 : **$label** !endprocedure @@ -326,143 +372,80 @@ $alias1 $direction $alias2 : **$label** $alias1 $direction $alias2 : **$label**\n//[$techn]// !endprocedure -!unquoted procedure Rel($from, $to, $label) -Rel_($from, $to, $label, "-->>") -!endprocedure -!unquoted procedure Rel($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-->>") +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel($from, $to, $label) -Rel_($from, $to, $label, "<<-->>") -!endprocedure -!unquoted procedure BiRel($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-->>") +!unquoted procedure BiRel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Back($from, $to, $label) -Rel_($from, $to, $label, "<<--") -!endprocedure -!unquoted procedure Rel_Back($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<--") +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<--", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label) -Rel_($from, $to, $label, "->>") -!endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "->>") +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label) -Rel_($from, $to, $label, "<<-") -!endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-") +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_D($from, $to, $label) -Rel_($from, $to, $label, "-DOWN->>") -!endprocedure -!unquoted procedure Rel_D($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-DOWN->>") +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Down($from, $to, $label) -Rel_($from, $to, $label, "-DOWN->>") -!endprocedure -!unquoted procedure Rel_Down($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-DOWN->>") +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_D($from, $to, $label) -Rel_($from, $to, $label, "<<-DOWN->>") -!endprocedure -!unquoted procedure BiRel_D($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-DOWN->>") -!endprocedure -!unquoted procedure BiRel_Down($from, $to, $label) -Rel_($from, $to, $label, "<<-DOWN->>") +!unquoted procedure BiRel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_Down($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-DOWN->>") +!unquoted procedure BiRel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_U($from, $to, $label) -Rel_($from, $to, $label, "-UP->>") -!endprocedure -!unquoted procedure Rel_U($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-UP->>") -!endprocedure -!unquoted procedure Rel_Up($from, $to, $label) -Rel_($from, $to, $label, "-UP->>") +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Up($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-UP->>") +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_U($from, $to, $label) -Rel_($from, $to, $label, "<<-UP->>") +!unquoted procedure BiRel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_U($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-UP->>") -!endprocedure -!unquoted procedure BiRel_Up($from, $to, $label) -Rel_($from, $to, $label, "<<-UP->>") -!endprocedure -!unquoted procedure BiRel_Up($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-UP->>") +!unquoted procedure BiRel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_L($from, $to, $label) -Rel_($from, $to, $label, "-LEFT->>") -!endprocedure -!unquoted procedure Rel_L($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-LEFT->>") +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Left($from, $to, $label) -Rel_($from, $to, $label, "-LEFT->>") -!endprocedure -!unquoted procedure Rel_Left($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-LEFT->>") +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_L($from, $to, $label) -Rel_($from, $to, $label, "<<-LEFT->>") -!endprocedure -!unquoted procedure BiRel_L($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-LEFT->>") +!unquoted procedure BiRel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_Left($from, $to, $label) -Rel_($from, $to, $label, "<<-LEFT->>") -!endprocedure -!unquoted procedure BiRel_Left($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-LEFT->>") +!unquoted procedure BiRel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_R($from, $to, $label) -Rel_($from, $to, $label, "-RIGHT->>") -!endprocedure -!unquoted procedure Rel_R($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-RIGHT->>") -!endprocedure -!unquoted procedure Rel_Right($from, $to, $label) -Rel_($from, $to, $label, "-RIGHT->>") +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Right($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "-RIGHT->>") +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_R($from, $to, $label) -Rel_($from, $to, $label, "<<-RIGHT->>") -!endprocedure -!unquoted procedure BiRel_R($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-RIGHT->>") -!endprocedure -!unquoted procedure BiRel_Right($from, $to, $label) -Rel_($from, $to, $label, "<<-RIGHT->>") +!unquoted procedure BiRel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure BiRel_Right($from, $to, $label, $techn) -Rel_($from, $to, $label, $techn, "<<-RIGHT->>") +!unquoted procedure BiRel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) !endprocedure ' Layout Helpers From 4d5dee275be4f21b5e091b6bf2b496f925ff32d9 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 28 Feb 2021 14:04:59 +0100 Subject: [PATCH 03/14] #126: C4 relationships use calculated line breaks (PlantUML internal line breaks are not deterministic) --- C4.puml | 86 +++++++++++++++++++++++++++++++++++++++++++--- C4_Deployment.puml | 49 +++++--------------------- 2 files changed, 91 insertions(+), 44 deletions(-) diff --git a/C4.puml b/C4.puml index 500cce3..3c30374 100644 --- a/C4.puml +++ b/C4.puml @@ -223,6 +223,84 @@ $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !$tagDefaultLegend = $tagStereoEntries !endprocedure +' Line breaks +' ################################## + +' PlantUML supports no DETERMINISTIC/automatic line breaks of "PlantUML line" (C4 Relashionships) +' therefore Rel...() implements an automatic line break based on spaces (like in all other objects). +' If a $type contains \n then these are used (and no automatic space based line breaks are done) +' $REL_TECHN_MAX_CHAR_WIDTH defines the automatic line break position +!global $REL_TECHN_MAX_CHAR_WIDTH = 35 +!global $REL_DESCR_MAX_CHAR_WIDTH = 32 + +!unquoted function $breakDescr($descr, $widthStr) +!$width = %intval($widthStr) +!$multiLine = "" +!if (%strpos($descr, "\n") >= 0) +!else + !while (%strlen($descr)>$width) + !$brPos = $width + !while ($brPos>0 && %substr($descr, $brPos, 1)!= ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($descr, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($descr, 0, $brPos) + "\n" + !$descr = %substr($descr, $brPos + 1) + !else + !$multiLine = $multiLine+ $descr + !$descr = "" + !endif + !endwhile +!endif +!if (%strlen($descr)>0) + !$multiLine = $multiLine + $descr +!endif +!return $multiLine +!endfunction + +' $breakTechn() supports //...//; $breakNode() in C4_Deployment supports no //....// +!unquoted function $breakTechn($techn, $widthStr) +!$width = %intval($widthStr) +!$multiLine = "" +!if (%strpos($techn, "\n") >= 0) + !while (%strpos($techn, "\n") >= 0) + !$brPos = %strpos($techn, "\n") + !$multiLine = $multiLine + %substr($techn, 0, $brPos) + '//\n//' + !$techn = %substr($techn, $brPos+2) + !endwhile +!else + !while (%strlen($techn)>$width) + !$brPos = $width + !while ($brPos>0 && %substr($techn, $brPos, 1)!= ' ') + !$brPos = $brPos - 1 + !endwhile + + !if ($brPos < 1) + !$brPos = %strpos($techn, " ") + !else + !endif + + !if ($brPos > 0) + !$multiLine = $multiLine + %substr($techn, 0, $brPos) + '//\n//' + !$techn = %substr($techn, $brPos + 1) + !else + !$multiLine = $multiLine+ $techn + !$techn = "" + !endif + !endwhile +!endif +!if (%strlen($techn)>0) + !$multiLine = $multiLine + $techn +!endif +!return $multiLine +!endfunction + ' Element properties ' ################################## @@ -355,12 +433,12 @@ rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias !endif !$rel = $rel + '**' + $label + '**' !if ($techn != "") - ' last version of plantuml server supports automatic line breaks (no $breakType() required) - !$rel = $rel + '\n//[' + $techn + ']//' + ' line break is not deterministic, calculate it + !$rel = $rel + '\n//[' + $breakTechn($techn, $REL_TECHN_MAX_CHAR_WIDTH) + ']//' !endif !if ($descr != "") - ' last version of plantuml server supports automatic line breaks (no $breakDescr() required) - !$rel = $rel + '\n\n' + $descr + ' line break is not deterministic, calculate it + !$rel = $rel + '\n\n' + $breakDescr($descr, $REL_DESCR_MAX_CHAR_WIDTH) !endif !return $rel !endfunction diff --git a/C4_Deployment.puml b/C4_Deployment.puml index e3dd8b6..62e6256 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -28,20 +28,17 @@ skinparam rectangle<> { ' comment if node should not be added to legend. No dynamic legend extension required SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode") -' Special +' Line breaks ' ################################## ' PlantUML supports no automatic line breaks of "PlantUML containers" (C4 Deployment_Node is a "PlantUML container") -' therefore Deployment_Node() implements an automatic line break based on spaces (like in all other objects). -' If a $type contains \n then the these are used (and no automatic space based line breaks are done) +' therefore (Deployment_)Node() implements an automatic line break based on spaces (like in all other objects). +' If a $type contains \n then these are used (and no automatic space based line breaks are done) ' $NODE_TYPE_MAX_CHAR_WIDTH defines the automatic line break position !global $NODE_TYPE_MAX_CHAR_WIDTH = 35 !global $NODE_DESCR_MAX_CHAR_WIDTH=32 -' Elements -' ################################## - -!unquoted function $breakType($type, $widthStr) +!unquoted function $breakNode($type, $widthStr) !$width = %intval($widthStr) !$multiLine = "" !if (%strpos($type, "\n") >= 0) @@ -77,36 +74,8 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !return $multiLine !endfunction -!unquoted function $breakDescr($descr, $widthStr) -!$width = %intval($widthStr) -!$multiLine = "" -!if (%strpos($descr, "\n") >= 0) -!else - !while (%strlen($descr)>$width) - !$brPos = $width - !while ($brPos>0 && %substr($descr, $brPos, 1)!= ' ') - !$brPos = $brPos - 1 - !endwhile - - !if ($brPos < 1) - !$brPos = %strpos($descr, " ") - !else - !endif - - !if ($brPos > 0) - !$multiLine = $multiLine + %substr($descr, 0, $brPos) + "\n" - !$descr = %substr($descr, $brPos + 1) - !else - !$multiLine = $multiLine+ $descr - !$descr = "" - !endif - !endwhile -!endif -!if (%strlen($descr)>0) - !$multiLine = $multiLine + $descr -!endif -!return $multiLine -!endfunction +' Elements +' ################################## !function $getNode($label, $type, $descr, $sprite) !$nodeText = "" @@ -115,7 +84,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") - !$nodeText = $nodeText + '\n[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !$nodeText = $nodeText + '\n[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' !endif !if ($descr != "") !$nodeText = $nodeText + '\n\n' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) @@ -130,7 +99,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") - !$nodeText = $nodeText + '\l[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !$nodeText = $nodeText + '\l[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' !endif !if ($descr != "") !$nodeText = $nodeText + '\l\l' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) @@ -145,7 +114,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") - !$nodeText = $nodeText + '\r[' + $breakType($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' + !$nodeText = $nodeText + '\r[' + $breakNode($type, $NODE_TYPE_MAX_CHAR_WIDTH) + ']' !endif !if ($descr != "") !$nodeText = $nodeText + '\r\r' + $breakDescr($descr, $NODE_DESCR_MAX_CHAR_WIDTH) From 433db676fb7a175e2a57bc161918887e9869bbe4 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 6 Mar 2021 23:43:02 +0100 Subject: [PATCH 04/14] #126: C4 relationships support description, sprite/openIconic and tags (2 - incl legend) add procedures: AddRelTagSupport(), UpdateRelStyle() rename procedures: SHOW_DYNAMIC_LEGEND() to SHOW_LEGEND(), UpdateSkinparamsAndLegendEntry() to UpdateElementStyle() --- C4.puml | 117 ++++++++++-- C4_Component.puml | 4 +- C4_Container.puml | 4 +- C4_Context.puml | 8 +- C4_Deployment.puml | 4 +- C4_Dynamic.puml | 172 +++++------------- LayoutOptions.md | 16 +- README.md | 24 +-- ...t Diagram Sample - bigbankplc-details.puml | 2 +- ...eployment Diagram Sample - bigbankplc.puml | 2 +- percy/TestLegend.puml | 52 ++++++ percy/TestRelations.puml | 12 +- percy/TestRelationsDynamic.puml | 71 ++++++++ ...t Diagram Sample - bigbankplc-details.puml | 6 +- ...eployment Diagram Sample - bigbankplc.puml | 2 +- 15 files changed, 314 insertions(+), 182 deletions(-) create mode 100644 percy/TestLegend.puml create mode 100644 percy/TestRelationsDynamic.puml diff --git a/C4.puml b/C4.puml index 3c30374..fc98985 100644 --- a/C4.puml +++ b/C4.puml @@ -11,8 +11,15 @@ !global $LEGEND_FONT_COLOR = "#FFFFFF" !global $LEGEND_TITLE_COLOR = "#000000" -!global $LEGEND_UNDEFINED_BK_COLOR = "#87AECA" -!global $LEGEND_UNDEFINED_FONT_COLOR = "#B7DEFA" +!global $LEGEND_UNDEFINED_BG_COLOR = "#D5CFEE" +!global $LEGEND_UNDEFINED_FONT_COLOR = "#8B77E4" + +!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) " ' Styling ' ################################## @@ -62,6 +69,7 @@ skinparam rectangle<> { !global $tagDefaultLegend = "" !global $tagCustomLegend = "" +' rel specific !unquoted function $toStereos($tags) !if (%strlen($tags) == 0) !return '' @@ -71,13 +79,13 @@ skinparam rectangle<> { !while ($brPos >= 0) !$tag = %substr($tags, 0, $brPos) !$stereos = $stereos + '<<' + $tag + '>>' -%set_variable_value("$" + $tag + "LineLegend", %true()) +%set_variable_value("$" + $tag + "_LineLegend", %true()) !$tags = %substr($tags, $brPos+1) !$brPos = %strpos($tags, "+") !endwhile !if (%strlen($tags)>0) !$stereos = $stereos + '<<' + $tags + '>>' -%set_variable_value("$" + $tags + "LineLegend", %true()) +%set_variable_value("$" + $tags + "_LineLegend", %true()) !endif !return $stereos !endfunction @@ -136,12 +144,26 @@ skinparam rectangle<> { $tagSkin !endprocedure +!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor) + !$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline() + !$elementSkin = $elementSkin + " Color " + !if ($lineColor!="") + !$elementSkin = $elementSkin + $lineColor + !endif + !if ($textColor!="") + !$elementSkin = $elementSkin + ";text:" + $textColor + !endif + !$elementSkin = $elementSkin + %newline() + !$elementSkin = $elementSkin + "}" + %newline() +$elementSkin +!endprocedure + !function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !$tagEntry = "|" !if ($bgColor!="") !$bg = $bgColor !else - !$bg = $LEGEND_UNDEFINED_BK_COLOR + !$bg = $LEGEND_UNDEFINED_BG_COLOR !endif ' named colors have to start with # too !if (%substr($bg, 0, 1) != "#") @@ -161,19 +183,19 @@ $tagSkin !endif !$tagEntry = $tagEntry + " " + $tagStereo + " " !if ($shadowing == "true") - !$tagEntry = $tagEntry + "(shadow) " + !$tagEntry = $tagEntry + $LEGEND_SHADOW_TEXT !endif !if ($shadowing == "false") - !$tagEntry = $tagEntry + "(no shadow) " + !$tagEntry = $tagEntry + $LEGEND_NO_SHADOW_TEXT !endif !if ($fontColor == "" && $bgColor == "") - !$tagEntry = $tagEntry + "(no font, no back color) " + !$tagEntry = $tagEntry + $LEGEND_NO_FONT_BG_TEXT !else !if ($fontColor == "") - !$tagEntry = $tagEntry + "(no font color) " + !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT !endif !if ($bgColor == "") - !$tagEntry = $tagEntry + "(no back color) " + !$tagEntry = $tagEntry + $LEGEND_NO_BG_TEXT !endif !endif !$tagEntry = $tagEntry + " " @@ -181,10 +203,54 @@ $tagSkin !return $tagEntry !endfunction +!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor) + !$tagEntry = "|" + !$bg = $LEGEND_UNDEFINED_BG_COLOR + ' named colors have to start with # too + !if (%substr($bg, 0, 1) != "#") + !$bg = "#" + $bg + !endif +' !$tagEntry = $tagEntry + "<" + $bg +">" + ' ..white line + !if ($lineColor!="") + !$tagEntry = $tagEntry + " " + !else +' !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " + !endif + !if ($textColor!="") + !$tagEntry = $tagEntry + "" + !else + !$tagEntry = $tagEntry + "" + !endif + !$tagEntry = $tagEntry + " " + $tagStereo + " " + !if ($textColor == "") + !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT + !endif + !if ($lineColor == "") + !$tagEntry = $tagEntry + $LEGEND_NO_LINE_TEXT + !endif + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "|" + !return $tagEntry +!endfunction + !unquoted procedure $addTagToDynamicLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") - !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +'' ignore workaround tags with & +' !if (%strpos($tagStereo, "&")<0) + !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) %set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) - !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" + !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" +' !endif +!endprocedure + +!unquoted procedure $addRelTagToDynamicLegend($tagStereo, $textColor="", $lineColor="") +'' ignore workaround tags with & +' !if (%strpos($tagStereo, "&")<0) + !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor) +%set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry) + !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n" +' !endif !endprocedure !procedure $showActiveLegendEntries($allDefined) @@ -211,11 +277,26 @@ $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) $addTagToDynamicLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !endprocedure -' used by existing elements like person, ... -!unquoted procedure UpdateSkinparamsAndLegendEntry($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") -$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) - !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) -%set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) +' used by new defined rel tags +!unquoted procedure AddRelTagSupport($tagStereo, $textColor="", $lineColor="") +$defineRelSkinparams($tagStereo, $textColor, $lineColor) +$addRelTagToDynamicLegend($tagStereo, $textColor, $lineColor) +!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) +%set_variable_value("$" + $elementName + "LegendEntry", $tagEntry) +!endprocedure + +' 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 = $elementSkin + " Color " + $lineColor + %newline() + !$elementSkin = $elementSkin + " FontColor " + $textColor + %newline() + !$elementSkin = $elementSkin + "}" + %newline() +$elementSkin !endprocedure ' tags/stereotypes have to be delimited with \n @@ -387,7 +468,7 @@ left to right direction !endprocedure ' has to be last call in diagram -!unquoted procedure SHOW_DYNAMIC_LEGEND($hideStereotype="true") +!unquoted procedure SHOW_LEGEND($hideStereotype="true") !if ($hideStereotype=="true") hide stereotype !endif diff --git a/C4_Component.puml b/C4_Component.puml index 24d8166..2ca30e7 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -23,8 +23,8 @@ ' Styling ' ################################## -UpdateSkinparamsAndLegendEntry("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) +UpdateElementStyle("component", $COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $COMPONENT_BORDER_COLOR) +UpdateElementStyle("external_component", $EXTERNAL_COMPONENT_BG_COLOR, $COMPONENT_FONT_COLOR, $EXTERNAL_COMPONENT_BORDER_COLOR) ' Layout ' ################################## diff --git a/C4_Container.puml b/C4_Container.puml index 87e60f7..169944b 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -20,8 +20,8 @@ ' Styling ' ################################## -UpdateSkinparamsAndLegendEntry("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR) +UpdateElementStyle("container", $CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $CONTAINER_BORDER_COLOR) +UpdateElementStyle("external_container", $EXTERNAL_CONTAINER_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_CONTAINER_BORDER_COLOR) ' Layout ' ################################## diff --git a/C4_Context.puml b/C4_Context.puml index d78dce3..884cec2 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -25,10 +25,10 @@ ' Styling ' ################################## -UpdateSkinparamsAndLegendEntry("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR) +UpdateElementStyle("person", $PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $PERSON_BORDER_COLOR) +UpdateElementStyle("external_person", $EXTERNAL_PERSON_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_PERSON_BORDER_COLOR) +UpdateElementStyle("system", $SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $SYSTEM_BORDER_COLOR) +UpdateElementStyle("external_system", $EXTERNAL_SYSTEM_BG_COLOR, $ELEMENT_FONT_COLOR, $EXTERNAL_SYSTEM_BORDER_COLOR) ' Sprites diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 62e6256..8c22675 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -16,8 +16,8 @@ ' ################################## ' orig was without background -'UpdateSkinparamsAndLegendEntry("node", $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) -UpdateSkinparamsAndLegendEntry("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) +'UpdateElementStyle("node", $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) +UpdateElementStyle("node", $bgColor=$NODE_BG_COLOR, $fontColor=$NODE_FONT_COLOR, $borderColor=$NODE_BORDER_COLOR) skinparam rectangle<> { FontStyle normal } diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index d08ac8b..70d89e5 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -58,161 +58,89 @@ ' Relationship ' ################################## -!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $direction="") +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $direction) $alias1 $direction $alias2 : **$e_index: $label** !endprocedure -!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $techn, $direction="") +!unquoted procedure Rel_($e_index, $alias1, $alias2, $label, $techn, $direction) $alias1 $direction $alias2 : **$e_index: $label**\n//[$techn]// !endprocedure -!unquoted procedure Rel($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-->>") +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-->>") -!endprocedure -!unquoted procedure RelIndex($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-->>") -!endprocedure -!unquoted procedure RelIndex($e_index, $from, $to, $label, $tech) -Rel_($e_index, $from, $to, $label, $tech, "-->>") +!unquoted procedure RelIndex($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Back($from, $to, $label) -Rel_(Index(), $from, $to, $label, "<<--") -!endprocedure -!unquoted procedure Rel_Back($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "<<--") +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<--", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Back($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "<<--") -!endprocedure -!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "<<--") +!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<--", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label) -Rel_(Index(), $from, $to, $label, "->>") -!endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "->>") -!endprocedure -!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "->>") +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "->>") +!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel($e_index, $from, $to, $label, $techn, "->>") !endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label) -Rel_(Index(), $from, $to, $label, "<<-") +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("<<-", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "<<-") -!endprocedure -!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "<<-") -!endprocedure -!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "<<-") +!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel($e_index, $from, $to, $label, $techn, "<<-") !endprocedure -!unquoted procedure Rel_D($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-DOWN->>") -!endprocedure -!unquoted procedure Rel_D($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-DOWN->>") -!endprocedure -!unquoted procedure Rel_Down($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-DOWN->>") -!endprocedure -!unquoted procedure Rel_Down($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-DOWN->>") -!endprocedure -!unquoted procedure RelIndex_D($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-DOWN->>") +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-DOWN->>") +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Down($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-DOWN->>") +!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-DOWN->>") +!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_U($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-UP->>") +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_U($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-UP->>") +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Up($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-UP->>") +!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Up($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-UP->>") -!endprocedure -!unquoted procedure RelIndex_U($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-UP->>") -!endprocedure -!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-UP->>") -!endprocedure -!unquoted procedure RelIndex_Up($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-UP->>") -!endprocedure -!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-UP->>") +!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_L($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-LEFT->>") -!endprocedure -!unquoted procedure Rel_L($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-LEFT->>") -!endprocedure -!unquoted procedure Rel_Left($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-LEFT->>") +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_Left($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-LEFT->>") +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_L($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-LEFT->>") +!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-LEFT->>") -!endprocedure -!unquoted procedure RelIndex_Left($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-LEFT->>") -!endprocedure -!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-LEFT->>") +!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure Rel_R($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-RIGHT->>") -!endprocedure -!unquoted procedure Rel_R($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-RIGHT->>") -!endprocedure -!unquoted procedure Rel_Right($from, $to, $label) -Rel_(Index(), $from, $to, $label, "-RIGHT->>") -!endprocedure -!unquoted procedure Rel_Right($from, $to, $label, $techn) -Rel_(Index(), $from, $to, $label, $techn, "-RIGHT->>") -!endprocedure -!unquoted procedure RelIndex_R($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-RIGHT->>") +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-RIGHT->>") +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Right($e_index, $from, $to, $label) -Rel_($e_index, $from, $to, $label, "-RIGHT->>") +!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure -!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn) -Rel_($e_index, $from, $to, $label, $techn, "-RIGHT->>") +!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") +$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) !endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index 023f07f..72cfa4d 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -53,7 +53,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_LEFT_RIGHT Sample](https://www.plantuml.com/plantuml/png/PL1DIyD05BplhrZheIdKX8edJusXjaAhfKaLJs6RFEt2Vh7xrb34_-uBhLPmBmDlvhsPsMb0uJ5gnPVvwzEsgfUp-whUFCmN5I-5TWhOXJIDYYtmFQ8BjrdcHPU-Izp7NGpW6siG3AQDrPbelHJcGqKNi-BcQgs4mUrgcIc14916TK5g8Gtur94fO_zSan5ZQ_31caIqMfen7-Gzoe1UeFM34IiF0K7NTpQQLlX3qap6V7WCEnpnJyRf_Vea7UnguHpTUO4TpvrJiX4ehHdGgBWSyxnSfu-pYbOyyEjqmbVFHS_bIjakyBvZu6Wv5NI293egbEJ5gquYWkSeDIZo2fJjwvGkmID9Tquo8ja6r4-hSwnje4t2HLMjIrBreb_sV6OEI34wwE7DM_rtPGgcfU_y1W00 "LAYOUT_LEFT_RIGHT Sample") -## LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype) +## LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype) Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. It can also help to save some space. @@ -80,16 +80,16 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/PL1DJy905BplhrZnG4cm3SQJ9sebO0BOs2Bnr2pjKpRPh-o-sX3ZV_Sr89YubqdUp7ipizE0mcEh5L-cRy-Rije-bOjgEPlFre-y4DefO5VIrAfjWEyHNRXF4Y-w-4FYljsr0Nnj3OB1kBOw4OsNmdogrhL9TdUJAs5mirecIY04f56LaLf80pvsvChOVzjen5WEFbWJYKPBC-Q3j4SPq0kqVZ1YnI4WwEh1jgOH_X3Lap4V7jCEH_oBSNfdewY3NIMSepjRsF7KEILhWTAQ0Osowp5FYpnUpqfQyS1lumbVlMOzbofbky3xae6ZvTJG2PBeLg4aBrvs4X4yHwb1aLUWRD-dT14UIRfpaX79Na3zjhh4sWJQ95oKPLwGgXUTsSkPEI35wA27Ts_rtvKfc8R-ymS0 "LAYOUT_WITH_LEGEND Sample") -Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a dynamic legend can be activated with `SHOW_DYNAMIC_LEGEND(?hideStereotype)`. +Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a dynamic legend can be activated with `SHOW_LEGEND(?hideStereotype)`. The dynamic legend has following differences: * only relevant elements are listed -* custom tags/stereotypes are supported -* stereotypes can remain visible (with `SHOW_DYNAMIC_LEGEND(false)`) -* **`SHOW_DYNAMIC_LEGEND()` has to be last call in the diagram** +* custom tags/styles are supported +* stereotypes can remain visible (with `SHOW_LEGEND(false)`) +* **`SHOW_LEGEND()` has to be last call in the diagram** ```csharp -@startuml SHOW_DYNAMIC_LEGEND Sample +@startuml SHOW_LEGEND Sample !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(admin, "Administrator") @@ -101,11 +101,11 @@ System(twitter, "Twitter") Rel(admin, web_app, "Uses", "HTTPS") Rel(web_app, twitter, "Gets tweets from", "HTTPS") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml ``` -![SHOW_DYNAMIC_LEGEND Sample](http://www.plantuml.com/plantuml/png/RL5Dgzf05DtFhxYrYnV1bs3fgYlJA5fG6vfOwIfCajiwC1_3p0r1IlzxRz1g5o-RIyx7uHnc5Ka66eo6QlVrtAn_7FF3bwBPRxQRunegQRn6yKxPJWyzmeN8nqzP5kIO_b9q6TeXOkYS9RIKTivaNaixnRr6whLgi-BZQpb1fyC-Cp8I1eQQWXrIMGofPwqG9OReR29xe-m2PlbqLQGWoONPN5HNDfhcinjiByCrwPOBUBbrUvd3Rm7yFIAJ4Tj6UiyvPsmXzrwhJf9oTiPGyNu1ULMcnqtDbe3m8Lt2uNinSRdMRemmJOf03dYFbomnWoRbDK8zAY8CGCgWLXOZT_jpRvVGZUISkun9yGtrlrNFMgV8JhwxkYuhLasY1_kCsI95_iNf_0pE_6yHRxnMCXShjFrWz5y0 "LAYOUT_WITH_LEGEND Sample") +![SHOW_LEGEND Sample](http://www.plantuml.com/plantuml/png/JL4z3zem4DtzAwvq84YGYAfJ9z8KmG0qQa8P8oUv5al-iEoB8bJrl_SYAE3bv7iVVa_UH9A11gEXsd-_D8VjRdlw1fKqNgFue6odXnxXIkJZbomBSan_AxeExH0nTCuIMaexPpAlfPriLf5whTgi-BmgfzNvUCYCZ8I1Lqt12gaiXjGpLuWIGtGsaRrHTWcpV9egKf3amcmXgXiBJVFL3RQNuPPqwoNCxzdc2_WZWC_JCXcnRQJtx7F15dBljUeaAMTdl2e-BY6lolIqhLaI43wbQpZ-B2OirzgD4QPA4SW1z_6IAMRGfBn6g4T5X0586TJyLkHiVn_f4hg3xFEWCIX-eFxVwXNh75d9Sr_NPSMiYVH4NpOxfCXNdCQluCoxHBpzKh8G6xJzOFG_ "LAYOUT_WITH_LEGEND Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index 7facfb7..f1bf77f 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ Rel_R(api, db, "Reads/Writes") Rel(admin, spaAdmin, "Uses", "https") Rel(spaAdmin, api, "Uses", "https") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml ``` @@ -238,7 +238,7 @@ Rel_L(x, s4, "uses") C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND() or SHOW_DYNAMIC_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_dynamic_legend) +* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-SHOW_LEGEND) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) @@ -253,7 +253,7 @@ Additional tags/stereotypes can be added to the existing element stereotypes (co * `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: After this call the given tag can be used in the diagram, the styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. -* `UpdateSkinparamsAndLegendEntry(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` +* `UpdateElementStyle(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` This call updates the style of the default element stereotypes (component, ...) and creates no additional legend entry. Each element can be extended with one or multiple custom tags/stereotypes via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. @@ -261,9 +261,9 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ **Comments** -* `SHOW_DYNAMIC_LEGEND()` supports the customized stereotypes +* `SHOW_LEGEND()` supports the customized stereotypes (`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend). -* `SHOW_DYNAMIC_LEGEND()` has to be last line in diagram. +* `SHOW_LEGEND()` has to be last line in diagram. * Don't use space between `$tags` and `=` (PlantUML does not support it). * Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments). * If 2 tags defines the same skinparameter, the first definition is used. @@ -289,7 +289,7 @@ Rel(spaAdmin, api, "Uses", "https") Rel_L(spa, spa2, "Updates", "https") Rel_R(spaAdmin, spaAdmin2, "Updates", "https") -SHOW_DYNAMIC_LEGEND(false) +SHOW_LEGEND(false) @enduml ``` @@ -297,7 +297,7 @@ SHOW_DYNAMIC_LEGEND(false) **Custom schema definition** -If the custom (color) schema is defined via `UpdateSkinparamsAndLegendEntry()` then the legend of existing elements is updated too. +If the custom (color) schema is defined via `UpdateElementStyle()` then the legend of existing elements is updated too. ```csharp @startuml @@ -315,10 +315,10 @@ If the custom (color) schema is defined via `UpdateSkinparamsAndLegendEntry()` t !$COLOR_B_4 = "#542788" !$COLOR_B_5 = "#2d004b" -UpdateSkinparamsAndLegendEntry("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") -UpdateSkinparamsAndLegendEntry("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1) -UpdateSkinparamsAndLegendEntry("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2) -UpdateSkinparamsAndLegendEntry("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2) +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") +UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1) +UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2) +UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2) Person(customer, "Personal Banking Customer") System(banking_system, "Internet Banking System") @@ -331,7 +331,7 @@ Rel_Back(customer, mail_system, "Sends e-mails to") Rel_Neighbor(banking_system, mail_system, "Sends e-mails") Rel(banking_system, mainframe, "Uses") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml ``` diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml index 0baf7db..ee61197 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -64,5 +64,5 @@ Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC") Rel_R(db, db2, "Replicates data to") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml \ No newline at end of file diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml index db9839d..45b88c0 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -53,5 +53,5 @@ Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC") Rel_R(db, db2, "Replicates data to") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml \ No newline at end of file diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml new file mode 100644 index 0000000..5d18af2 --- /dev/null +++ b/percy/TestLegend.puml @@ -0,0 +1,52 @@ +@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/kirchsth/C4-PlantUML/extended/C4_Component.puml +!endif + +SHOW_PERSON_SPRITE(person2) + +UpdateElementStyle("system", $bgColor="chocolate", $fontColor="orange", $borderColor="orange") +UpdateRelStyle(black, black) + +AddTagSupport("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") +AddTagSupport("role2", $fontColor="#d73027", $shadowing="true") +AddTagSupport("role3", $bgColor="orange") +AddTagSupport("role4", $borderColor="blue") +AddTagSupport("unusedRole") + +AddRelTagSupport("line1", $lineColor="green", $textColor="blue") +AddRelTagSupport("line2", $lineColor="blue", $textColor="green") +AddRelTagSupport("line3", $textColor="orange") +AddRelTagSupport("line4", $lineColor="orange") +' PlantUML cannot combine line styles, a combination has to be added as workaround as first additional tag +AddRelTagSupport("line3&line4", $lineColor="orange", $textColor="orange") +AddRelTagSupport("unusedLine", $lineColor="red", $textColor="red") + +Person(person, "Person") +Person(person1, "Person1", $tags="role1") +Person(person2, "Person2", $tags="role2") +Person(person21, "Person21", $tags="role2+role1") +Person(person321, "Person321", $tags="role3+role2+role1") +Person(person4321, "Person43", $tags="role4+role3") +Person(person31, "Person31", $tags="role3+role1") +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") + +Rel(allInOne, component, "without a tag") +Rel(allInOne, component, "uses line 1", $tags="line1") +Rel(allInOne, component, "uses line 2", $tags="line2") +Rel(allInOne, system1A, "uses line 3", $tags="line3") +Rel(allInOne, system1A, "uses line 4", $tags="line4") +Rel(allInOne, system2, "line 3+4 cannot be combined without workaround", $tags="line3+line4") +Rel(allInOne, system2, "line 3+4 with workaround", $tags="line3&line4+line3+line4") + +SHOW_LEGEND(false) +@enduml \ No newline at end of file diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml index 787493d..eb62632 100644 --- a/percy/TestRelations.puml +++ b/percy/TestRelations.puml @@ -6,14 +6,14 @@ !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml !endif -[RelFrom] -[BiRelFrom] +System(RelFrom, RelFrom) +System(BiRelFrom, BiRelFrom) -[RelShort] -[BiRelShort] +System(RelShort, RelShort) +System(BiRelShort, BiRelShort) -[RelLong] -[BiRelLong] +System(RelLong, RelLong) +System(BiRelLong, BiRelLong) Rel_(RelFrom, To_Rel_UP, "A label", "-UP->>") Rel_(RelFrom, To_Rel_DOWN, "A label", "A techn", "-DOWN->>") diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml new file mode 100644 index 0000000..c31ed60 --- /dev/null +++ b/percy/TestRelationsDynamic.puml @@ -0,0 +1,71 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Dynamic.puml +!else + !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Dynamic.puml +!endif + +System(RelFrom, RelFrom) +System(RelShort, RelShort) +System(RelLong, RelLong) + +System(RelIndexFrom, RelIndexFrom) +System(RelIndexShort, RelIndexShort) +System(RelIndexLong, RelIndexLong) + +Rel_(Index(), RelFrom, To_Rel_UP, "A label", "-UP->>") +Rel_(Index(), RelFrom, To_Rel_DOWN, "A label", "A techn", "-DOWN->>") + +Rel(RelFrom, "To_Rel", "A label") +Rel(RelFrom, "To_Rel_Tech", "A label", "A techn") +Rel_Back(RelFrom, "To_Rel_Back", "A label") +Rel_Back(RelFrom, "To_Rel_Back_Tech", "A label", "A techn") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor", "A label") +Rel_Neighbor(RelFrom, "To_Rel_Neighbor_Tech", "A label", "A techn") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor", "A label") +Rel_Back_Neighbor(RelFrom, "To_Rel_Back_Neighbor_Tech", "A label", "A techn") + +RelIndex(Index(), RelIndexFrom, "To_RelIndex", "A label") +RelIndex(Index(), RelIndexFrom, "To_RelIndex_Tech", "A label", "A techn") + +Rel_D(RelShort, "To_Rel_D", "A label") +Rel_D(RelShort, "To_Rel_D_Tech", "A label", "A techn") +Rel_Down(RelLong, "To_Rel_Down", "A label") +Rel_Down(RelLong, "To_Rel_Down_Tech", "A label", "A techn") +Rel_L(RelShort, "To_Rel_L", "A label") +Rel_L(RelShort, "To_Rel_L_Tech", "A label", "A techn") +Rel_Left(RelLong, "To_Rel_Left", "A label") +Rel_Left(RelLong, "To_Rel_Left_Tech", "A label", "A techn") +Rel_R(RelShort, "To_Rel_R", "A label") +Rel_R(RelShort, "To_Rel_R_Tech", "A label", "A techn") +Rel_Right(RelLong, "To_Rel_Right", "A label") +Rel_Right(RelLong, "To_Rel_Right_Tech", "A label", "A techn") +Rel_U(RelShort, "To_Rel_U", "A label") +Rel_U(RelShort, "To_Rel_U_Tech", "A label", "A techn") +Rel_Up(RelLong, "To_Rel_Up", "A label") +Rel_Up(RelLong, "To_Rel_Up_Tech", "A label", "A techn") + +RelIndex_D(Index(), RelIndexShort, "To_RelIndex_D", "A label") +RelIndex_D(Index(), RelIndexShort, "To_RelIndex_D_Tech", "A label", "A techn") +RelIndex_Down(Index(), RelIndexLong, "To_RelIndex_Down", "A label") +RelIndex_Down(Index(), RelIndexLong, "To_RelIndex_Down_Tech", "A label", "A techn") +RelIndex_L(Index(), RelIndexShort, "To_RelIndex_L", "A label") +RelIndex_L(Index(), RelIndexShort, "To_RelIndex_L_Tech", "A label", "A techn") +RelIndex_Left(Index(), RelIndexLong, "To_RelIndex_Left", "A label") +RelIndex_Left(Index(), RelIndexLong, "To_RelIndex_Left_Tech", "A label", "A techn") +RelIndex_R(Index(), RelIndexShort, "To_RelIndex_R", "A label") +RelIndex_R(Index(), RelIndexShort, "To_RelIndex_R_Tech", "A label", "A techn") +RelIndex_Right(Index(), RelIndexLong, "To_RelIndex_Right", "A label") +RelIndex_Right(Index(), RelIndexLong, "To_RelIndex_Right_Tech", "A label", "A techn") +RelIndex_U(Index(), RelIndexShort, "To_RelIndex_U", "A label") +RelIndex_U(Index(), RelIndexShort, "To_RelIndex_U_Tech", "A label", "A techn") +RelIndex_Up(Index(), RelIndexLong, "To_RelIndex_Up", "A label") +RelIndex_Up(Index(), RelIndexLong, "To_RelIndex_Up_Tech", "A label", "A techn") + +Lay_U(RelFrom, RelIndexFrom) +Lay_D(RelFrom, RelShort) +Lay_D(RelShort, RelLong) +Lay_R(RelLong, RelIndexShort) +Lay_L(RelLong, RelIndexLong) +@enduml \ No newline at end of file diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index bcf430a..42c9e83 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -58,8 +58,8 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") -Rel_R(db, db2, "Replicates data to") +Rel(api, db2, "Reads from and writes to", "JDBC", $descr="only in case of a problem", $sprite="person", $tags="fallback") +Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml \ No newline at end of file diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index d050be6..9facb36 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -50,5 +50,5 @@ Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC") Rel_R(db, db2, "Replicates data to") -SHOW_DYNAMIC_LEGEND() +SHOW_LEGEND() @enduml \ No newline at end of file From fc2ff6d4077fae41e75927b99a5e4d4120e07a24 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 7 Mar 2021 02:34:36 +0100 Subject: [PATCH 05/14] #126: C4 relationships support description, sprite/openIconic and tags (3 - update/add samples) --- C4.puml | 8 ++--- LayoutOptions.md | 2 +- README.md | 94 +++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 86 insertions(+), 18 deletions(-) diff --git a/C4.puml b/C4.puml index fc98985..2d9414b 100644 --- a/C4.puml +++ b/C4.puml @@ -211,12 +211,12 @@ $elementSkin !$bg = "#" + $bg !endif ' !$tagEntry = $tagEntry + "<" + $bg +">" - ' ..white line + ' ..white line, not working with png use - !if ($lineColor!="") - !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " - " !else -' !$tagEntry = $tagEntry + " " - !$tagEntry = $tagEntry + " " +' !$tagEntry = $tagEntry + " - " + !$tagEntry = $tagEntry + " - " !endif !if ($textColor!="") !$tagEntry = $tagEntry + "" diff --git a/LayoutOptions.md b/LayoutOptions.md index 72cfa4d..a983888 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -105,7 +105,7 @@ SHOW_LEGEND() @enduml ``` -![SHOW_LEGEND Sample](http://www.plantuml.com/plantuml/png/JL4z3zem4DtzAwvq84YGYAfJ9z8KmG0qQa8P8oUv5al-iEoB8bJrl_SYAE3bv7iVVa_UH9A11gEXsd-_D8VjRdlw1fKqNgFue6odXnxXIkJZbomBSan_AxeExH0nTCuIMaexPpAlfPriLf5whTgi-BmgfzNvUCYCZ8I1Lqt12gaiXjGpLuWIGtGsaRrHTWcpV9egKf3amcmXgXiBJVFL3RQNuPPqwoNCxzdc2_WZWC_JCXcnRQJtx7F15dBljUeaAMTdl2e-BY6lolIqhLaI43wbQpZ-B2OirzgD4QPA4SW1z_6IAMRGfBn6g4T5X0586TJyLkHiVn_f4hg3xFEWCIX-eFxVwXNh75d9Sr_NPSMiYVH4NpOxfCXNdCQluCoxHBpzKh8G6xJzOFG_ "LAYOUT_WITH_LEGEND Sample") +![SHOW_LEGEND Sample](http://www.plantuml.com/plantuml/png/JL4z3zem4DtzAwvq84YGYAfJ9z8KmG0qQa8P8oUv5al-iEoB8bJrl_SYAE3bv7iVVa_UH9A11gEXsd-_D8VjRdlw1fKqNgFue6odXnxXIkJZbomBSan_AxeExH0nTCuIMaexPpAlfPriLf5whTgi-BmgfzNvUCYCZ8I1Lqt12gaiXjGpLuWIGtGsaRrHTWcpV9egKf3amcmXgXiBJVFL3RQNuPPqwoNCxzdc2_WZWC_JCXcnRQJtx7F15dBljUeaAMTdl2e-BY6lolIqhLaI43wbQpZ-B2OirzgD4QPA4SW1z_6IAMRGfBn6g4T5X0586TJyLkHiVn_f4hg3xFEWCIX-eFxVwXNh75d9Sr_NPSMiYVH4NpOxfCXNdCQluCoxHBpzKh8G6xJzOFG_ "SHOW_LEGEND Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index f1bf77f..2fba513 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ Rel_R(api, db, "Reads/Writes") ![test](https://www.plantuml.com/plantuml/png/hL9DZzCm4BtdLtXxeIjjwmDmuRHLMzXA_Q8VL9ogQJnfZHmxUEnM_7l6QRORM90uS8erx-NDl9dtI05yYAN9xhJDJLGeJY5Kz45A3vV-KOTJF4H2dpiRq8P-xae9ockmPnEhA8VlUai3DcndKsaW80KkxOVC1ctHzwka_KP4op-MB2322KNXZ74NRO_2C4c0LU8NM7lYbnFSM1YNWp4_MECsuUi6sPt28acDnbycmyLy_GykGgpOo5jPfV5PfASPxHNCw57bDLkH9L10BnMU4qQtBXyNyyrWDrulPkF_sgYkmGN9bTXx_tAIPrSIx34QQ4o_Xh_16Vw6bVJTx7coC_x-UykDJBDJizFfuEjYkzdl9fkd_NJyQJmVTU-pRCa4Pxk9-20wmqY1X_KTVY_HLGRvWX24HLIYyax5F502Q-7EVNOxN9SguFfwEKXmOomzDvo0aYb2ymfz0NaZcPAHD-sk6B2skF3Esmhj5b1fHWRBIIAavQJl4yVD80bEbU1RCP68KtRK-OtLqXWTkkh0zH44E01XuinqxXsv8eZrvsajwOoYPxiFmdd58wPKQtjscWreMpXVGj3E9dxh5jmhMw5fzddToPQmtbaTBIOal4QkVlu0xrTNh_MeAmH5SbSdY-57j8hl-HC0 "test") -Entities can be decorated with tags and explained via dynamic calculated legends, for example: +Entities and Relations can be decorated with tags and explained via dynamic calculated legends, for example: ```csharp @startuml @@ -105,6 +105,9 @@ Entities can be decorated with tags and explained via dynamic calculated legends AddTagSupport("v1.0", $borderColor="#d73027") AddTagSupport("v1.1", $fontColor="#d73027") +AddTagSupport("backup", $fontColor="orange") + +AddRelTagSupport("backup", $textColor="orange", $lineColor="orange") Person(user, "Customer", "People that need products") Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") @@ -112,18 +115,20 @@ Container(spa, "SPA", "angular", "The main interface that the customer interacts Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1") ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information") +Container(archive, "Archive", "Audit logging", "Stores 5 years", $tags="backup") Rel(user, spa, "Uses", "https") Rel(spa, api, "Uses", "https") Rel_R(api, db, "Reads/Writes") Rel(admin, spaAdmin, "Uses", "https") Rel(spaAdmin, api, "Uses", "https") +Rel_L(api, archive, "Writes", "messages", $tags="backup") SHOW_LEGEND() @enduml ``` -![tags](http://www.plantuml.com/plantuml/png/bLDHQnf147xtLsolVJYfyKnR21G25GrDG5Eh2Q5FCdSxwfQztMDdJllpEtiQjSbHoDF2p3VpVVFDx3lZ2bjhL1lcYhvcMO1TVsruK-SrOIYyOtJSBtoPLHOSrwMz8DRMvDdeoyKiXXwdawm4OWmIMewa0ep3qAy4s-aCjNw0zQAkAXyuJRQN_K7IKnzo7pI6aRS-N2VlzTNdmQUhfDk2lepebJHzXUtCC91tQTJPKyce9lOb1i4dC_ILHSKROEKGjQg2rtN196M7Aj2bSG8TnjSG1s3_gXPEIIG9uR6HsXfe0WvtAifKOb7bdPX5KJ73cguR_K9vz2Ib2eHYCHj69d3hsa93-Y2TIe4e8tw75HG70P6XE0ospq4atyc26WMDdUTqWvTqm_CvLJipd7lmHWb70_upDLGcAfZTHSBVi8NuteBJ5ac1jKfkJO14olgrALGQZx9_iXR_C3eotb7tts4_lgGQvwdEfVaO678WZ4HJKmHFViLgyNFIC7khwNcJFTLSeX8rCjtMcmBbNVbG0WjZlBCvsiEHxTVtI4YnJ_Db113pJKRcR4ylvtiF6crp14tPKp2CX_JpCHxNrSvnIhSJTHQtFvwMur_tm-dTQ3cv-NvpFqwxdM_eTFoAVm40 "tags") +![tags](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "tags") ## Supported Diagram Types @@ -183,7 +188,7 @@ Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md) ## Relationship Types -* `Rel(from, to, label, ?technology)` +* `Rel(from, to, label, ?technology, ?description, ?sprite, ?tags)` * `BiRel` (bidirectional relationship) You can force the direction of a relationship by using: @@ -193,6 +198,44 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` +Relation specific sprites are not down scaled, they requires typically smaller icons. +Or alternatively if sprite argument starts with `&` an OpenIconic name can be used (details see https://useiconic.com/open) + +```csharp +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml + +Person(user, "User1") +Person(user2, "User2") +System(system, "System") + +' 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") + +' normal sprites are too big +Rel_R(user, user2, "informs", "courier", "normal sprites are too big", "person2") + +' special smaller sprites have to be used +sprite $triangle { + 00000000000 + 00000F00000 + 0000FBF0000 + 0000FBF0000 + 000F999F000 + 000F999F000 + 00F66666F00 + 00F66666F00 + 0F3333333F0 + 0F3333333F0 + 0FFFFFFFFF0 + 00000000000 +} +Rel(user, system, "orders", "http", "only small sprites looks ok, like the small triangle", "triangle") +@enduml +``` + +![Relation with sprite or OpenIconic](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "Relation with sprite or OpenIconic") + In rare cases, you can force the layout of objects which have no relationships by using: * `Lay_U` @@ -252,11 +295,16 @@ C4-PlantUML also comes with some default person sprite options: Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: * `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: - After this call the given tag can be used in the diagram, the styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. -* `UpdateElementStyle(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` - This call updates the style of the default element stereotypes (component, ...) and creates no additional legend entry. + Introduces a new element tag. The styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. +* `AddRelTagSupport(tagStereo, ?textColor, ?lineColor)`: + Introduces a new relation tag. The styles of the tagged relations are updated and the tag is be displayed in the dynamic legend. + +* `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` + This call updates the default style of the elements (component, ...) and creates no additional legend entry. +* `UpdateRelStyle(textColor, lineColor)` + This call updates the default relationship colors and creates no additional legend entry. -Each element can be extended with one or multiple custom tags/stereotypes via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. +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")`. **Comments** @@ -266,17 +314,26 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ * `SHOW_LEGEND()` has to be last line in diagram. * Don't use space between `$tags` and `=` (PlantUML does not support it). * Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments). -* If 2 tags defines the same skinparameter, the first definition is used. -* If specific skinparameters have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names. This convention can be used in other tools. +* If 2 tags defines the same skinparam, the first definition is used. +* If specific skinparams have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names. + +* Colors of relationship tags cannot be automatically merged (PlantUML does not support it). + If one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used. ```csharp @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +UpdateElementStyle(person, $fontColor="green") AddTagSupport("v1.0", $fontColor="#d73027", $borderColor="#d73027") AddTagSupport("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") AddTagSupport("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") -AddTagSupport("fallback", $bgColor="#888888") +AddTagSupport("fallback", $bgColor="#444444") + +UpdateRelStyle(black, black) +AddRelTagSupport("service1", $textColor="red") +AddRelTagSupport("service2", $lineColor="red") +AddRelTagSupport("service1&service2", $textColor="red", $lineColor="red") Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") @@ -289,11 +346,19 @@ 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") + +Lay_D(api, user) SHOW_LEGEND(false) @enduml ``` -![merged tags](http://www.plantuml.com/plantuml/png/jLDXQzim5FpkNw5bOoIajHDlh6DGQ4ZBMaYxq3ICVGhFbkneaoMZzvpivq-Avj3KPh0FzHUPUwUxuvvzXGIMcaf5RwJELSC5snBL-2L9BEpZKjAsoHeKDZUQXAOuDrLIAz3-pZaILp9BvX_FbnvQto-I2f24TT1cxcw0rCB6jTUFPfm_GRbgwjfO6WvsqtWoE6Fl2aUR6sNivU0jl_WmIIyycXdBXNs1ZteqfYyr2lTaHLSZuBqQa_UzGXp4fsbNAE1TeGAKoY3_TRXHjkpFXyUnesCVGwpXZ0rMozd07Q3BHe7rhqzRmIf7OLAJi0NaWj4MY973ymR9LCA66UI4RE-MmtOIM5ibGOcNeTZHgTsCLr8xXyF9-ft1poII1JBsVoDeiMTjYSSOqvCOK4kVO7dd3N_23lnv2vehWGoKObc3ZeZ8b2bbpeR-WuoFoapy9g5H6esZ4vUmlR5_6tTCiOOqT9s-MjdZTlEzhQVFQqzVl_SsJDj5z2XK-EB20jOeq5iVVdCt3-EGzH-SpIA8_2rqNNEWBkdncTInW7vwjBhzzdrp_UDXTdyttonkljuyN0zTU1IZw4fetbJg3m00 "merged tags") +![merged tags](http://www.plantuml.com/plantuml/png/jLHHJziy57tFh_2NRqAj2YtDq90c8O4A6fEwhQAWFQARvBRnvjYHxqqP_twsWrcxTcLxe2zsppq-v-haskV4OBcjLVAVr8LgInGLSqFlHoCB3yEbvAhDMq9R6CseULYOUjGeqFxC4N6fP3wQd1pDF7JtQJggWHYjW-udfcwCzcSQhv_SDIKmNYci7JRdHuMz1YqPVIZUB9pwn2XZpzAbHTHfFxaeorjOpjkcCPPxwMeyF4utcV-Nfs-FirEFviQMQ3VndHhZtpKMxfSljZGYlhEFWvr29U2xyPPGnBU45g1K3iNtS68PsIVXb_PZN3UekgXovRY78Yn1orNMvGZjIXOO6c3y4TkoMAPxw9cdAwdnx-ZZWtXkssQdKZ9n2O53ROyQE1JfV7QHkWNqibLW_VQsGb4xYf2QqIwWGC4Li6275osngT5sDIYOn8FaIgmaY3WG34iwwyQZlsbtKTPIEuUmYjtEu6kIs08R-wyjQ7mGSHIUsnXlj06Dz1tCFdh3Rx02lrw3BXMI0AL4tf8Z4Wbbbh8GFNyBXy_AmaMCcgJHr5zpYJCuyBl1bYara7LPPwyMzY3ExyxKi_NOizVFFJOJiqZS_7OJrts0EqBork5jStLVZhtkuTnFEv6dGCELt2RTh4d5tH_eoIoyU3t_elg8XDyuVFv8Z7MFmX8AtTQLWiNbqubdWljB8jxA40fNaaG1IlrA9TQToeiYsGiYsLwHt70LbMY_qjeZCeZ8OCqacSAZSmdVn5kvSAw_VBsVNdsu-dpPMu0Yx2VdgCksLZy1 "merged tags") **Custom schema definition** @@ -314,11 +379,14 @@ If the custom (color) schema is defined via `UpdateElementStyle()` then the lege !$COLOR_B_3 = "#8073ac" !$COLOR_B_4 = "#542788" !$COLOR_B_5 = "#2d004b" +!$COLOR_REL_LINE = "#8073ac" +!$COLOR_REL_TEXT = "#8073ac" UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1) UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2) UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2) +UpdateRelStyle($lineColor=$COLOR_REL_LINE, &textColor=$COLOR_REL_TEXT) Person(customer, "Personal Banking Customer") System(banking_system, "Internet Banking System") @@ -335,7 +403,7 @@ SHOW_LEGEND() @enduml ``` -![custom schema](https://www.plantuml.com/plantuml/png/dPHVRw905CNV-HIKxODDgY1W9PkOL2ZPROBQw9hDFf4PvegaC92P8Ms_VOS_hUFMRhF65_pTU-uzvsAyvG8nKHUvTf7H9Ay9w7iXAlxTD1bw6gMPsDUuvi2IaWgWOfIKXLdbY3QQ8HSapx0PkCE71cqNaLaWBe1950UDubcCgcQwTd4PhABLEfx74tsc6z-cEmTRdg5mj-NOcNZMZSgTbeFbsMDNvNRBTmHxDuxAnnq7iB0oPnbkVwtdKLURDfz3pUyrn2C8iCgx7TX6cDWgxpnvrjH1YSgx31FNddgUohlCDh4iLyxNjXL10ZQF6QqGGmMVKn912fI4LB2NWL41uoKrhlLBd0PbNhBPuNeIxkHbZt0Vhkal6G7sbsOi2toFIFcKqNHc25Q3SVMb2VdkW56Knv-wySzm8s_zzMh-8dz4nSdyxXdvxVy8--bg_upLVhDQUsZlDqXgBie2sBLkT0Jbke-ej9JgGL-JhsNJ6XZWhjBxaPfxsZW4yQxf6gMYbyJXinWKACiFcd3OVDVvM-Tn8zt9Iu1iMxmzdvYzXbnn_i7LbWENRR8hzb7ogBGUEzd8KtCTMZzS5sMlMKAMxkNXFiJzXxgJdbAy1-fTQPkVgz_ntP_bV74Vn57u8rpU3QwqMpbD_YUz0W00 "custom schema") +![custom schema](http://www.plantuml.com/plantuml/png/dP9lRvim4CRVyoaegwPKoXz2I8CcHMh9q5Q99bN-Q7k7R7n9K8s9RAEsttu6i-5cT9EYlcb-Ty_Ty_Yu4n9nMURKkifOIai2zb7Aa_Wo6d7qCZnaybZYKW1F2oQ1oM5QvACJHQpI38GaDCEZXJzugj3kCHxbI4ZW2YMBIl4gXwTgkdLrlLZ5gtLodqpjkUryckqds0qSW_irnvDfuDwQV59pS0Dlx9lSg_cUuE1sOlAnvW0kDkOiezrsVH_hsgpwQsjXeo41GO1DhdTW3s7YcLnx2jpP1AKcrncclZSB0fFhp1vnNT-OluxY97vOHXt3T74R_To-Argx4q4I8WevCBcHRnHwpWcuA9ZJjw_nOL7GWi_RjrPmh-xGulOfglw24-1dch4gY2CYnKl63dD7yXAScyx5whh06QB9Xmx22noeQtIl4sz2GjwPqxyWf_UVK1-k2ozO5xRhra3rgckQCMYxZ0-YRt-MoaTRCxw76yjwgf-xbvP25ZdmlkreWgWT8lQipcOlcfgwtAREqSEwqiHIcWTM1GNvHwCRbQAH9D6hxEKeewqc6bI_RT5qdZMoFKSvgBR7t_ztp5Rn3UT_kTe94AfDTIKXIf-DrlTEDi28iA7s8snPD9ebP8SZBlXPt7-gjRHBeKEqhgpDzzMF98w-HSkllHlhJaqfS_eB "custom schema") ## Element properties From 878b3b96b156101a46669978c6772b7358f46dd8 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 7 Mar 2021 18:19:49 +0100 Subject: [PATCH 06/14] #126: C4 relationships support description, sprite/openIconic and tags (4 - rename AddTagSupport() to AddElementTag(), AddRelTagSupport() to AddRelTag(), update img links) --- C4.puml | 20 +++--- C4_Deployment.puml | 2 +- LayoutOptions.md | 14 ++-- README.md | 70 ++++++++++--------- ...t Diagram Sample - bigbankplc-details.puml | 8 ++- ...eployment Diagram Sample - bigbankplc.puml | 7 +- samples/C4CoreDiagrams.md | 6 +- ...t Diagram Sample - bigbankplc-details.puml | 10 +-- ...eployment Diagram Sample - bigbankplc.puml | 9 +-- 9 files changed, 77 insertions(+), 69 deletions(-) diff --git a/C4.puml b/C4.puml index 2d9414b..dc232ce 100644 --- a/C4.puml +++ b/C4.puml @@ -211,12 +211,12 @@ $elementSkin !$bg = "#" + $bg !endif ' !$tagEntry = $tagEntry + "<" + $bg +">" - ' ..white line, not working with png use - + ' ..white line !if ($lineColor!="") - !$tagEntry = $tagEntry + " - " + !$tagEntry = $tagEntry + " " !else -' !$tagEntry = $tagEntry + " - " - !$tagEntry = $tagEntry + " - " +' !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " !endif !if ($textColor!="") !$tagEntry = $tagEntry + "" @@ -235,7 +235,7 @@ $elementSkin !return $tagEntry !endfunction -!unquoted procedure $addTagToDynamicLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") '' ignore workaround tags with & ' !if (%strpos($tagStereo, "&")<0) !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) @@ -244,7 +244,7 @@ $elementSkin ' !endif !endprocedure -!unquoted procedure $addRelTagToDynamicLegend($tagStereo, $textColor="", $lineColor="") +!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="") '' ignore workaround tags with & ' !if (%strpos($tagStereo, "&")<0) !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor) @@ -272,15 +272,15 @@ $elementSkin !endprocedure ' used by new defined tags -!unquoted procedure AddTagSupport($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) -$addTagToDynamicLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !endprocedure ' used by new defined rel tags -!unquoted procedure AddRelTagSupport($tagStereo, $textColor="", $lineColor="") +!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="") $defineRelSkinparams($tagStereo, $textColor, $lineColor) -$addRelTagToDynamicLegend($tagStereo, $textColor, $lineColor) +$addRelTagToLegend($tagStereo, $textColor, $lineColor) !endprocedure ' update the style of existing elements like person, ... diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 8c22675..0ced07a 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -25,7 +25,7 @@ skinparam rectangle<> { ' Layout ' ################################## -' comment if node should not be added to legend. No dynamic legend extension required +' comment if node should not be added to legend. No calculated legend extension required SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_system\nexternal_container\nnode") ' Line breaks diff --git a/LayoutOptions.md b/LayoutOptions.md index a983888..71445ef 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -80,9 +80,9 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_WITH_LEGEND Sample](https://www.plantuml.com/plantuml/png/PL1DJy905BplhrZnG4cm3SQJ9sebO0BOs2Bnr2pjKpRPh-o-sX3ZV_Sr89YubqdUp7ipizE0mcEh5L-cRy-Rije-bOjgEPlFre-y4DefO5VIrAfjWEyHNRXF4Y-w-4FYljsr0Nnj3OB1kBOw4OsNmdogrhL9TdUJAs5mirecIY04f56LaLf80pvsvChOVzjen5WEFbWJYKPBC-Q3j4SPq0kqVZ1YnI4WwEh1jgOH_X3Lap4V7jCEH_oBSNfdewY3NIMSepjRsF7KEILhWTAQ0Osowp5FYpnUpqfQyS1lumbVlMOzbofbky3xae6ZvTJG2PBeLg4aBrvs4X4yHwb1aLUWRD-dT14UIRfpaX79Na3zjhh4sWJQ95oKPLwGgXUTsSkPEI35wA27Ts_rtvKfc8R-ymS0 "LAYOUT_WITH_LEGEND Sample") -Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a dynamic legend can be activated with `SHOW_LEGEND(?hideStereotype)`. +Instead of a static legend (activated with `LAYOUT_WITH_LEGEND()`) a calculated legend can be activated with `SHOW_LEGEND(?hideStereotype)`. -The dynamic legend has following differences: +The calculated legend has following differences: * only relevant elements are listed * custom tags/styles are supported * stereotypes can remain visible (with `SHOW_LEGEND(false)`) @@ -105,7 +105,7 @@ SHOW_LEGEND() @enduml ``` -![SHOW_LEGEND Sample](http://www.plantuml.com/plantuml/png/JL4z3zem4DtzAwvq84YGYAfJ9z8KmG0qQa8P8oUv5al-iEoB8bJrl_SYAE3bv7iVVa_UH9A11gEXsd-_D8VjRdlw1fKqNgFue6odXnxXIkJZbomBSan_AxeExH0nTCuIMaexPpAlfPriLf5whTgi-BmgfzNvUCYCZ8I1Lqt12gaiXjGpLuWIGtGsaRrHTWcpV9egKf3amcmXgXiBJVFL3RQNuPPqwoNCxzdc2_WZWC_JCXcnRQJtx7F15dBljUeaAMTdl2e-BY6lolIqhLaI43wbQpZ-B2OirzgD4QPA4SW1z_6IAMRGfBn6g4T5X0586TJyLkHiVn_f4hg3xFEWCIX-eFxVwXNh75d9Sr_NPSMiYVH4NpOxfCXNdCQluCoxHBpzKh8G6xJzOFG_ "SHOW_LEGEND Sample") +![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") ## LAYOUT_AS_SKETCH() @@ -185,7 +185,7 @@ Person(userB, "User B", "with predefined sprite person2", "person2") @enduml ``` -![Predefined sprites Sample](http://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample") +![Predefined sprites Sample](https://www.plantuml.com/plantuml/png/XOxDIiKm48NtUOfuLrxmDY2kNFLdgr2GhYLjHXj89c5cGb_VH2m8BbpDOVZupkbPB4c9GMS21nyUmMdEv0LOlzcO0wWxZrie3lGkaldP6B97z-bbBsjXe2sX04gtfMXoiDXiDnON_6gcfzlSNilhYucM1QY-tgU4OciJTRcoIir0dF2-oOO7VLdgrSEbfgEM_1scypVVW9zq_QqOJyNuh-An4MUygXxGrK5V "Predefined sprites Sample") **Using HIDE_PERSON_SPRITE()** @@ -207,7 +207,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![HIDE_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample") +![HIDE_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL1TgzD047tVNp7MXvj2Ry8LdtowCGPRi3KqgJw6JJBQXVrOTYU48lvtPsbj1VCoPCwPyx6laMIWsMZOxZxLVLCVsw-7lcsEkww6LXglKRnHTjJpX70cyl53KGIvv3yLdUTXZXX6PmajvQCpXTVI9hNdI9DMGr6zVsxIwhJ_KXWP2GEl-eelfB8OSizS8VwtpjP2D1YYivcSZB8RM9LfgaX1aWkhjMWlaT3q7zri9naksVYoWQThugSr_1B0tzqeMt3efVUiynq7ABtNQfIad5tngdgxWR9jyaFTyKb0U9U_mFvRbR1IQxT4I4KZa0DkwILJpAn9iHTqYoB20AGCQlQAdEttBLr6Lv1rRZG6nH7rtrQFMAU8CVbjkwvfcPL8T_GXynafyY-cyICuy-_9AzeflUSV "HIDE_PERSON_SPRITE Sample") **Using SHOW_PERSON_SPRITE()** @@ -229,7 +229,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![SHOW_PERSON_SPRITE Sample](http://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample") +![SHOW_PERSON_SPRITE Sample](https://www.plantuml.com/plantuml/png/PL5DQzmm4BthLqpTWxsmiKdfgQUuPcaApSQidUPeP6lI5UX3I6DCAFtl7JLfjb1V1i-yz-QzqKqY6Mcr1eRR-yUfFvo6--CqzAUlum46QOD1yKwxnQmAuKmKqgUcYNAhVsWwh_EQC2xU4Jgg5s-ROAJBQbU9bD5pqtsywdFhuUvROsKYZDoQEcP8xJ3MWR52D2KSFO53LAXWnaMoBj1P9z29AuB29xaQWestGWfH4q8HC2Rl2YWRyR_vQYT4_mTGIMMrsqFHvgeJHKa-5ZinFBCXEttsgrCoFbVBzHxAbypb3duAuE_DQhNXFCaGMESHPsX3C7gHfDa0jxhtUsY7lZuUHgP4X0_rDTnzx_AiDSPl2VAf4f07lbEG3B4SIFCk63aLOGJI5WtlIkpjrwkxYbw6hFCAuw4ueVcRwcBh8J6Jw-quzWEZCkXjUf7vWfJu5tDvYjx-Ixb1f_AB_0O0 "SHOW_PERSON_SPRITE Sample") **Using SHOW_PERSON_SPRITE(sprite)** @@ -253,5 +253,5 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![SHOW_PERSON_SPRITE(sprite) Sample](http://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)") +![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)") diff --git a/README.md b/README.md index 2fba513..a4692cd 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![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") -C4-PlantUML combines the benefits of [PlantUML](http://en.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. +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. C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. @@ -32,6 +32,8 @@ If you want to use the always up-to-date version in this repo, use the following Now let's create a C4 Container diagram: +\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](http://www.plantuml.com/plantuml/uml/ZOxDIWGn48JlUOeufn5qSjcJfvNHsugBFsV99iqcsEc4T0VTjpSCE2AYUAeAgVwgjYosIakevytBBK824bPdaHms3pg85BuofjgtwHWbj4DZg2wJzDpaSZAliRh04ioykToZ9Nc-snbux_yUlEdGkOTj9AXJwJLAxQ5ofh4iSetHyeKUTlO0E7HpNoHcigXlW5sDosiuLojaT9_kn-aJk40Py_7q1-Znn09fv4N-swuU0ByFNbVyZlYQqmbR8DyIVW00) too.) + After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary` ```csharp @@ -97,17 +99,17 @@ Rel_R(api, db, "Reads/Writes") ![test](https://www.plantuml.com/plantuml/png/hL9DZzCm4BtdLtXxeIjjwmDmuRHLMzXA_Q8VL9ogQJnfZHmxUEnM_7l6QRORM90uS8erx-NDl9dtI05yYAN9xhJDJLGeJY5Kz45A3vV-KOTJF4H2dpiRq8P-xae9ockmPnEhA8VlUai3DcndKsaW80KkxOVC1ctHzwka_KP4op-MB2322KNXZ74NRO_2C4c0LU8NM7lYbnFSM1YNWp4_MECsuUi6sPt28acDnbycmyLy_GykGgpOo5jPfV5PfASPxHNCw57bDLkH9L10BnMU4qQtBXyNyyrWDrulPkF_sgYkmGN9bTXx_tAIPrSIx34QQ4o_Xh_16Vw6bVJTx7coC_x-UykDJBDJizFfuEjYkzdl9fkd_NJyQJmVTU-pRCa4Pxk9-20wmqY1X_KTVY_HLGRvWX24HLIYyax5F502Q-7EVNOxN9SguFfwEKXmOomzDvo0aYb2ymfz0NaZcPAHD-sk6B2skF3Esmhj5b1fHWRBIIAavQJl4yVD80bEbU1RCP68KtRK-OtLqXWTkkh0zH44E01XuinqxXsv8eZrvsajwOoYPxiFmdd58wPKQtjscWreMpXVGj3E9dxh5jmhMw5fzddToPQmtbaTBIOal4QkVlu0xrTNh_MeAmH5SbSdY-57j8hl-HC0 "test") -Entities and Relations can be decorated with tags and explained via dynamic calculated legends, for example: +Elements and relations can be decorated with tags and explained via a calculated legend, for example: ```csharp @startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -AddTagSupport("v1.0", $borderColor="#d73027") -AddTagSupport("v1.1", $fontColor="#d73027") -AddTagSupport("backup", $fontColor="orange") +AddElementTag("v1.0", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#d73027") +AddElementTag("backup", $fontColor="orange") -AddRelTagSupport("backup", $textColor="orange", $lineColor="orange") +AddRelTag("backup", $textColor="orange", $lineColor="orange") Person(user, "Customer", "People that need products") Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") @@ -128,7 +130,7 @@ SHOW_LEGEND() @enduml ``` -![tags](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "tags") +![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") ## Supported Diagram Types @@ -172,7 +174,7 @@ Diagram types * (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output) * `LastIndex()`: return the last used index (function which can be used as argument) - following 2 macros requires V1.2020.24Beta4 (can be already tested with http://www.plantuml.com/plantuml/) + following 2 macros requires V1.2020.24Beta4 (can be already tested with https://www.plantuml.com/plantuml/) * `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument) * `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument) @@ -198,8 +200,8 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` -Relation specific sprites are not down scaled, they requires typically smaller icons. -Or alternatively if sprite argument starts with `&` an OpenIconic name can be used (details see https://useiconic.com/open) +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) ```csharp @startuml @@ -234,7 +236,7 @@ Rel(user, system, "orders", "http", "only small sprites looks ok, like the small @enduml ``` -![Relation with sprite or OpenIconic](http://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprmkZGWpz4L8b9AA0IgNGfWJ49Hfx9ywswztLpZYqRzzPnv0GBAfUxMhcp9mviyS-8uR8RMFt_ZEkigr6jMGEzAae8ZoCQiFBjcm9O-KTe-DHvPiYM72fvf1OMrCMam-7inIwlPeM3H1ZbD3zH2h0E8oZaFhlZRM-WNhUXk0ZvzdgU7IK7QWtfOyQuyHR7q-p__N9-wDt9zd-0FeueHVIz6_O4ggVRTX1-mYkHW4dz3NQuGB6Npi54hGYuaMN6KRoBa-hEL3Pf2Ns3KQ1PpFqmQBY9R1oY5g5w7LRCKbPNmMwCKwWutGQuWZiNzJ29eaa8Nngf5O6ke331vKse-HLWdVec3eLKDDfjpAXV7g6d088nNmsJaoYexNGaTv8fqOWoZZ6k82g7o0nLBsmTGuI-ODuefkWVy4DtT4ktNXRfnfcXkqT_EC8JmjuHJK4aoQOVKc4Fs05wRm4fosI0ckLs5k0HChwsbGgJz_1QBDQSGGwCjxH_dEnRtUfpijSbzBy71XA84n4LwQAdlo2rVpxj6FsLjFZInweplnAfX5rAsygb7FXOmCiZCzrn6ffLfYqh6zPkhRQS1gyDgvEWJdxABe-gjy8SSiClSN5kEBzthLhFzmIKghiFdi1f7oNWM26q_VNwwLsOgyHD1LtqJ3swKTtRzv_cADFlqOqNHDjfFSySckG26eSb3Y__7PtFxtuVF7rFD_VEqEdqm_e3m00 "Relation with sprite or OpenIconic") +![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") In rare cases, you can force the layout of objects which have no relationships by using: @@ -274,7 +276,7 @@ Rel_L(x, s4, "uses") @enduml ``` -![Relation versus Layout](http://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout") +![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") ## Layout Options @@ -294,10 +296,10 @@ C4-PlantUML also comes with some default person sprite options: Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: -* `AddTagSupport(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: - Introduces a new element tag. The styles of the tagged elements are updated and the tag is be displayed in the dynamic legend. -* `AddRelTagSupport(tagStereo, ?textColor, ?lineColor)`: - Introduces a new relation tag. The styles of the tagged relations are updated and the tag is be displayed in the dynamic legend. +* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: + 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)`: + 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)` This call updates the default style of the elements (component, ...) and creates no additional legend entry. @@ -322,18 +324,18 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ ```csharp @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml UpdateElementStyle(person, $fontColor="green") -AddTagSupport("v1.0", $fontColor="#d73027", $borderColor="#d73027") -AddTagSupport("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") -AddTagSupport("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") -AddTagSupport("fallback", $bgColor="#444444") +AddElementTag("v1.0", $fontColor="#d73027", $borderColor="#d73027") +AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") +AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") +AddElementTag("fallback", $bgColor="#444444") UpdateRelStyle(black, black) -AddRelTagSupport("service1", $textColor="red") -AddRelTagSupport("service2", $lineColor="red") -AddRelTagSupport("service1&service2", $textColor="red", $lineColor="red") +AddRelTag("service1", $textColor="red") +AddRelTag("service2", $lineColor="red") +AddRelTag("service1&service2", $textColor="red", $lineColor="red") Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0") Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1") @@ -358,7 +360,7 @@ SHOW_LEGEND(false) @enduml ``` -![merged tags](http://www.plantuml.com/plantuml/png/jLHHJziy57tFh_2NRqAj2YtDq90c8O4A6fEwhQAWFQARvBRnvjYHxqqP_twsWrcxTcLxe2zsppq-v-haskV4OBcjLVAVr8LgInGLSqFlHoCB3yEbvAhDMq9R6CseULYOUjGeqFxC4N6fP3wQd1pDF7JtQJggWHYjW-udfcwCzcSQhv_SDIKmNYci7JRdHuMz1YqPVIZUB9pwn2XZpzAbHTHfFxaeorjOpjkcCPPxwMeyF4utcV-Nfs-FirEFviQMQ3VndHhZtpKMxfSljZGYlhEFWvr29U2xyPPGnBU45g1K3iNtS68PsIVXb_PZN3UekgXovRY78Yn1orNMvGZjIXOO6c3y4TkoMAPxw9cdAwdnx-ZZWtXkssQdKZ9n2O53ROyQE1JfV7QHkWNqibLW_VQsGb4xYf2QqIwWGC4Li6275osngT5sDIYOn8FaIgmaY3WG34iwwyQZlsbtKTPIEuUmYjtEu6kIs08R-wyjQ7mGSHIUsnXlj06Dz1tCFdh3Rx02lrw3BXMI0AL4tf8Z4Wbbbh8GFNyBXy_AmaMCcgJHr5zpYJCuyBl1bYara7LPPwyMzY3ExyxKi_NOizVFFJOJiqZS_7OJrts0EqBork5jStLVZhtkuTnFEv6dGCELt2RTh4d5tH_eoIoyU3t_elg8XDyuVFv8Z7MFmX8AtTQLWiNbqubdWljB8jxA40fNaaG1IlrA9TQToeiYsGiYsLwHt70LbMY_qjeZCeZ8OCqacSAZSmdVn5kvSAw_VBsVNdsu-dpPMu0Yx2VdgCksLZy1 "merged tags") +![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") **Custom schema definition** @@ -403,7 +405,7 @@ SHOW_LEGEND() @enduml ``` -![custom schema](http://www.plantuml.com/plantuml/png/dP9lRvim4CRVyoaegwPKoXz2I8CcHMh9q5Q99bN-Q7k7R7n9K8s9RAEsttu6i-5cT9EYlcb-Ty_Ty_Yu4n9nMURKkifOIai2zb7Aa_Wo6d7qCZnaybZYKW1F2oQ1oM5QvACJHQpI38GaDCEZXJzugj3kCHxbI4ZW2YMBIl4gXwTgkdLrlLZ5gtLodqpjkUryckqds0qSW_irnvDfuDwQV59pS0Dlx9lSg_cUuE1sOlAnvW0kDkOiezrsVH_hsgpwQsjXeo41GO1DhdTW3s7YcLnx2jpP1AKcrncclZSB0fFhp1vnNT-OluxY97vOHXt3T74R_To-Argx4q4I8WevCBcHRnHwpWcuA9ZJjw_nOL7GWi_RjrPmh-xGulOfglw24-1dch4gY2CYnKl63dD7yXAScyx5whh06QB9Xmx22noeQtIl4sz2GjwPqxyWf_UVK1-k2ozO5xRhra3rgckQCMYxZ0-YRt-MoaTRCxw76yjwgf-xbvP25ZdmlkreWgWT8lQipcOlcfgwtAREqSEwqiHIcWTM1GNvHwCRbQAH9D6hxEKeewqc6bI_RT5qdZMoFKSvgBR7t_ztp5Rn3UT_kTe94AfDTIKXIf-DrlTEDi28iA7s8snPD9ebP8SZBlXPt7-gjRHBeKEqhgpDzzMF98w-HSkllHlhJaqfS_eB "custom schema") +![custom schema](https://www.plantuml.com/plantuml/png/dPHVRzem5CNVyodI34qWyIU4KA99I6rOj5LAeUAFjhV8YIyGrN6GxQZqsy-9iyMqwIeXNk1tpxdt7jlYZWl4H94HuoQb2Iamc4SXJlpRQCJGo_2GYcCH5nnOabC1L0oJF1kT2AAbPy059cayMhY3fnBj7iDHXhW09b6qA1rdCJoLtOsRpc8LhjRHVJGrvwRrPRQVnBPdQTojU3oPUlQjpYSL1zjpngxEdOhlSUpTJdG-LXp0ZhK-os2tNT-7gZOhFqtDhptOmmXYdQiPiODYxEXSxUJPimbATAuoJ5rdvdawLvaTRDkkrdyTX57ui0nQcgdYDlYzlIWQknD60W826L2n4Qy4kjO96C-frJSxyM6HavpDcxEMS9zJeV3bKPJwd65WRpnZMU17XFENb1xcbc05MBtMmN0Mm2WYqOSR-5Ti86-ZVHn_vGAorfpk5JcTJq9zECw_OfpVZ5i3KQCw9AMWgPe7qJU_2ZXhxRNtq3ECf-gukqd1HPu1wvkM8eYOFgBFyjhCHLsJDxUfSdHZLQbZISy3BOE2-ETHGkceBL5m5jqCfQJn18FojybhvHiXtJEKWPGz_ltUqbl6rpP_jzME0vSogOfyb3nhqijDDa0nDw7QXviYhprBI0z7UVxlulx7hQnj3XMYsShO_5pzYiBWHx3ytkqPTx9B-UVs1m00 "custom schema") ## Element properties @@ -445,7 +447,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml ``` -![properties sample](http://www.plantuml.com/plantuml/png/ZP9HRzCm4CVVyobCNaYbhc4L4X9FcpeGI6Mhe834ItLDZiQIuxFiiqP0V7VEqRfiQO0z-NB--P_xnRa839vZQx9dsbOcrgWQPXTUbwM7syL1SnFtCQ2lo39QNbJKbiw0JMVE0jT6xylLoxDDQdt-i2vR28nUMhihT8QwDXrowGNPSrNZTuY6LODGerSRJmuzTtFr1Kp4xBAkZwqYluOMyxdAtne8JJvxl7dZ3s3rJs1DDa7VY9YSXZ6t9J9f_xrbz1PPlVaXGtdqwjNYXS0Rz85iuVhbqcW80gzXZ_sf6vVomQWh39NN_PCgRZKtzoRkxbLtIZF9p3uX7oTurtUB_FYSp_Easeiz21sFdQhpnFImL8bcq2QSJw7BUtJv05qAEjp1xffgtAqBAylVHRUTm_-OLp4mjHFYwbUMAVLL68hZ3p2JdPEnLuEYbDF8e2PbGbPanSvAPdMiJdIsM3MM31swVxjGdBp0ttA5NM1iYz0lu_od9MeC_T_m4StZ_sjgxb7k82095sZhs9e_ "properties sample") +![properties sample](https://www.plantuml.com/plantuml/png/ZP9HRzCm4CVVyobCNaYbhc4L4X9FcpeGI6Mhe834ItLDZiQIuxFiiqP0V7VEqRfiQO0z-NB--P_xnRa839vZQx9dsbOcrgWQPXTUbwM7syL1SnFtCQ2lo39QNbJKbiw0JMVE0jT6xylLoxDDQdt-i2vR28nUMhihT8QwDXrowGNPSrNZTuY6LODGerSRJmuzTtFr1Kp4xBAkZwqYluOMyxdAtne8JJvxl7dZ3s3rJs1DDa7VY9YSXZ6t9J9f_xrbz1PPlVaXGtdqwjNYXS0Rz85iuVhbqcW80gzXZ_sf6vVomQWh39NN_PCgRZKtzoRkxbLtIZF9p3uX7oTurtUB_FYSp_Easeiz21sFdQhpnFImL8bcq2QSJw7BUtJv05qAEjp1xffgtAqBAylVHRUTm_-OLp4mjHFYwbUMAVLL68hZ3p2JdPEnLuEYbDF8e2PbGbPanSvAPdMiJdIsM3MM31swVxjGdBp0ttA5NM1iYz0lu_od9MeC_T_m4StZ_sjgxb7k82095sZhs9e_ "properties sample") ## Snippets for Visual Studio Code @@ -460,7 +462,7 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ## Advanced Samples -The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). +The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](https://simonbrown.je/). The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md). @@ -468,25 +470,25 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) -![techtribesjs](https://www.plantuml.com/plantuml/png/ZLLDSziu3BthLs1zgJAZjTkatSpigKwS9csTZqRoPdhIK19iiwL8BKd5yNJwtmjIiYp5tSdwO54W2Bm7F53lZMNQrgM0aSLyRJNFq7mpe-0FBdDH5mXhQolpzsIYsMQyudPTPxL1dIjfKTfnhie9ApHdyb7KLJqvV_lddM3IBgxd4y4i6akcz9oy6PUennMb2bv1BUbWIG70hX6MIWYruN85Wfo0oG86srmRMYcWn21KpeJOKemEuM62O3xzUhj8qkJsBftTFjo4Hy6hrZIDq_ZpHN9-HRRMzF0nkKhd5vSNDpCo1i4TQgDaUl5aGoQLt9QgDgaZ7S5ekZF0WWoZezOvPAkLnXKHBZhFplBSjIYvvCPgPZcbsRaFhBiZGRmr5ilqJDMoO7eRvc-YVgV6rAgZ7m7Gp_zrTGWtcAMigiZx0JEOLfNWkGyz8jCdziWYY2ljQdxzpta4YIff6qx7Jsv_wlfXNBsrSOL_vBY12bKbC88cSmIj12B0HtgGuPlAw1zjFeQbLgNldMyNEC0H59pqGs-klnyJC9XRvKaEaC-oKAD8YunmtAFmcEdGZ5cMCOCEtlKs_ZA7T-Dt3TgOmg0vmEUVK6AP4Oirfr9Gyk_cETwC5IldVidjLPs1nagrB0wWXKikqFYEKDeFz09DVnoA3zFavBW7no3J-HguBF09pUzeIcN-5NJWHZawZY3uivwYaYirEuFZyV60f2_iVHnFffOMIyJ2G9W9jGA2RSsHBwxT8Dh3b65T5QH7fxP5izff0KwTbr54Y9GowXoeg5fvqb4RT5YdTbIz3e1Koy3aQongGQAdPd67uMSdOZTGTiDj0o5fLkJHssuk6DfjiWmt7Kq2C3fpJySk87qSZEXU-3H3nd6vIfAxcFozz_CvVS7zTxFwtqVycMwx9sDMjArp1TjexafhbU_hb_daq-oCHh1IsiB9oUk_sjnTd87gzh6Uk-tarFFe2Md3DRfkMfKhqIOxFdtzvhI5dIxsydW1UE6K-WBwVhW1_eUE_87V8O73SlrVElkeUyLTadvtWgQvN2fTDfVjVcQwilL5q8NQgzEv3Y9aghPGrHdTiZGGz57oyy5fQ3c-47KdQnzqDqorSLSp3Re7rnlsVYZ7TSwswNrtO-vBJLllKHRqDVm5 "techtribesjs") +![techtribesjs](https://www.plantuml.com/plantuml/png/ZLHDR-Cs4BthLqnzMGVGshj9jm5wMYTEazqw7uta1Zq9b3YMcLAaIb9nZAB_lKDAaQsuWEk39G_V3D-RUUElrZ7Zcah2o66nTaRaQ9_jAFf1g48s767jN6r_dauDsqnAuTPDtbWqXLOEbPiKkfhMaYbVugDrN8fyUldZnmSVMjukfXMp3Ws5ialAO4AXcTI4ZJv0eoYveYBWrWWhBQNU25M2910mnM5mB8obDmrqEKXTC2ctLADdUNX1j9ZzSRzCi_J-8PlVFzsDJw8FNMYMPCclL-db3SMwqDEtz2PRN5rVtSqf64KFQAnMsTMh6pEbrRRIZSsyy1X6ixS0B2amEkd0OrQM1alcaFV8Fl8UoYkXX7M6EQ5L3nz4trAYP6iTLjc5RXHdPZikFiVxqvhGk4x-Ze0-uQllmtY3USRgcj1FcCEihgKeGkaHXRwp5nP3KXlVyzlVBsD8TKN7S3vvzUSpFmyBdfhrZNyHk84QTIqnXlRc63eRn80lzA30iyxf6rqnWPNH5Ssk6nTumZ5mGHvYCiptMmeM2wUzo27pUJusA3EU4uz7b84p9SsPOpcpwEdTRfFV5l1bygLbcr0Pj0VymXCgh79IiHOrHPZyqxxdcpDUUlYrS3TD3WPhtQaue3PU2OasJ8Ik_OL-G3kVaVyvIyzEz-XOPAPOWr0SNz7-bqobxL-I4kuqoGa28UG6YLgLUdu1fvFJWSZGsCSacSuSlQmGkOLnBdK9HDlPaz1Sjq5qzf1-KtFcWjkMxTkR5-3SewoMw9qowW4MQgE3wBWhEknJkAtp0MW536onHjv8v4334fx3Fxs9_KAvZN0jXRHz8yJUSVidGwVjBSD3BzFIsGKzWxg8_76meZlZqmvPh-KcJHyImXDwkAV7uSDTFPeISlhZFHiptetEDsnZX6-jqpwLHZ_zFh-W5QorSN1szkadAZIeitFTeDPxMB3J4B5df8qmwAVfTA5bTzdf-QVFvntjRDdRunXnGh4Zx0Vb1loVUl47k23WIBl-hvnTrPtZhj7rXWQXLjfKOQoxdUdRrazqK6hdJe8EA-IwSL0tkHG559fZkn_2QIFmIDNErg5elqoD5QhqYnx8zSi-BEMrBjWsU-p_CNUjfgElg7XJoNy1 "techtribesjs") ### Message Bus and Microservices Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![messagebus](https://www.plantuml.com/plantuml/png/bLN1Sjem4BtxAxRqa6Gc2Msdfvv2W6dQaa0mcKnFdhKiG1DPqaWoAUdqtxkoZR49CqsvOArNxxrzkmjNpgFrHIwXbtFdSCNJmlMYTq8nMMGSrjuRzwNVj_XykH9-NT1hRfbMdYj_oNJUnymAL1jPcA8__7mnawZym-saBz5pvocK32aRXUBsqX1HT0A5eeiv0O1VSrXgAVMpK2kGb0IeCkYy5jRHamOY1gaPIhabZ4RXQuB8FGbbq68EpnRDeyZy6Zvz-D2Av_ZhjYet5Y-yV1bD1Z-d3ujaCPqbe-dZtUbPT5A71d4I_nWlXZSKgqEFtnOtoMJyTNmtec0KpRXrMfsomdcTStiEm-QfDu1Tk4UfyTPvdYVNkb0Pskqf-qWfkspuffRQvkY5Lhqp-1r5G9-clbCqffqzC4OALcLJ_3jkq34hZ3-7WLeL4cq83uA_hX7XWfavAYe-62mi6AkNGlAWhaktkv9GppU2yJPtN8LslESG6nkQUAsr3y45zSveGLtKIq36o6vgjMraW6YNUiXS3sD2uqPOTQ_WccQJZdDCK-5lxqiQYyePRNq9JkbqdPZuXkR7lSQrFEIIpbP9yrsiNTEyIBVXUsXv66HGGQiKZcUGeSUIhG43KrYZ7Jz2Y4KcV8ji4Cvjek7x_kNTU14UPrPlH4PasgvG2LTwS_5C8IXX0jCIcP3qU8HhbEuRbgNjNer8SOgkv9jQP9B3nqyid6AlBNTlQmhXx-qh2VREjHbkj_7zf0MEE_DUoBmD3I21bqCXvRvXZQcOmLgp__4siEoT3QT0FWuJi3_MMbhr0QQwyFMaq2QWXpLkw2UFbemhdX7VdoYQSzdQwch_7e8Q-hvPB6Pna4L9oRnQpYChys2oSeIEcGoX_bK0GxTLx1o-nzExVWTuScGDAnqnLvbh2j01vP6diMPFtDFjIjNhoztTga0QRKKfjWLwrh5WZz8TjThUiekY-Z4QNG_h4hhRV6m5toQY0tEuMF-6A36Ei1yCzK4f5VK1MtVowXirLtadck2Mp3_2ra6Yn2lIJVzQVm40 "messagebus") +![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") ## Background -[PlantUML](http://en.plantuml.com/) is an open source project that allows you to create UML diagrams. +[PlantUML](https://plantuml.com/) is an open source project that allows you to create UML diagrams. Diagrams are defined using a simple and intuitive language. Images can be generated in PNG, in SVG or in LaTeX format. PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description. Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool. -It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](http://en.plantuml.com/running). +It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://en.plantuml.com/running). The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software. The small set of abstractions and diagram types makes the C4 model easy to learn and use. @@ -498,8 +500,8 @@ More information can be found here: * [The C4 model for software architecture](https://c4model.com/) * [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/) -* [Visualising and documenting software architecture cheat sheets](http://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) -* [PlantUML and Structurizr - Create models not diagrams](http://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) +* [Visualising and documenting software architecture cheat sheets](https://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html) +* [PlantUML and Structurizr - Create models not diagrams](https://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html) ## License diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml index ee61197..76d135b 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -6,10 +6,12 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml !endif -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + WithoutPropertyHeader() -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -61,7 +63,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml index 45b88c0..cac0187 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -6,9 +6,10 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml !endif -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -50,7 +51,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index e639581..965cc27 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -1,6 +1,6 @@ # C4 Model Diagrams -The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](https://c4model.com/#coreDiagrams) created by [Simon Brown](https://simonbrown.je/). ## Core Diagrams @@ -44,13 +44,13 @@ Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sam Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml) -![Deployment Diagram for Internet Banking System - Live](http://www.plantuml.com/plantuml/png/pLPXJoCt4FsUNp5DAnqW812XwbJff0i9FK24H6meFQbID6jFDYvUUsLx0sbr_xtZtN1X8UYWz-L0Yko9tyoyDpDsFlg0BfIvRlsaZD2b99Y7KFZVEXs7T_kP2lCoBJqvOKqW4_Q5pJk5HXCnUpv8hT9E_sXl74tNmujEZZwGOzDqG8Msopo2YXZW7PI6qT40OKumirhREsKoqCeGe97G-5evpoiB71sq5QZradryJND3X5PFoWbcILaKreMjzemnAOhRzYxyacPzgwtxqFvP7CJ_zdQBlScbmLm9q9GHnrS-HfEmXIAe1GPUAWEQALKvRZFYelTvT3sPtfnDJgSN9vzEBWTRx2cee0dM-S10OUOmPv8EpbWvPoZ0CPhRo3TPiaOvxC65Mb2hjOPDBwsahKABNMWVgwm206_RJ_OWCI08YexRs_-sWF-UUf66GQdAKiRiOQ5sTdR-2lVlewlhjEJwmU6l-mT7S3597bniSeC5YZang5SjO69pWQ7zr03lz-_NRkg_lZK1MJR7JbG4ZC-WLnHQyNbbJVHnZWkiAfyKBYep_ACVpMDd5qgIVoxTZ7ieWb6hi8I5OZIS9wFBpkbaCaw0G-npPHyo-DAgFZVgiv96fWU7ZuIAsxTAP1qA7IKQLGkkwzYf7DsolROTTiMByWpIBPdoqG46JD5JX5sHnfedF9WXORbpZDycmJggUjM1eqpvuAhJe0mtN5wjTs6EVauIi0nppdMbEWX7CcvH-rr08SXxq3RZ3GNnTl6wJV6w6yNZ-GkO-G_hYTo6R-dPVIneGi8Q-LpIpOvVLhdxeyZyBF7N2fy-5loEqdgiZ_xVM7U_SwuvFWDkA7tbN0z8gmKvNrtmFl1n0Qk79PwEvkSZx_b34nIO4U0wpAPM_VByCirjJB5V-c1pSkyyi46nEqaB9QZcMsWEEqh0EkWPwQoIaNAJQWtZuyCQpwW8_XDpP8QDImj1grp5nyENgMScTXQPVUio2nR4AaqVRxQ8KQwPBvFUH5BOl6YoZ9OolWunO-M4zNOMu4OPQUzyJAXcdQCO9I-z8AdZi-HM5JwEkzhX9sjZHVfpPtEMP6Z_KLeZ_AuSpUpzxiftWZEM9eewLCBL2Pp8Z1x2DVNr1SQ9gsizvbflQgb4E5NKhT8pMQdHDONN-lkqvdw65MjMUjrKLwI_Da3zbWtnbWF65qrmLCyEOoP_UslgbuZH38giteQONjT3nS36lDYAbLWN-56ggrXL69bMjnfA3pEkJYNLdLE17WAU3uxxJK3trOZf5L-XQqXT7lBrhv5W-L0hEHtTJ0UVBtl3i_xwzz57ChBCzNy0 "Deployment Diagram for Internet Banking System - Live") +![Deployment Diagram for Internet Banking System - Live](https://www.plantuml.com/plantuml/png/pLP_J-D64Fq_dsAQLkA7W41AArJff0i9FK24H3YKLgg4nhiJPylQQ-sk0sbrtxqpSgW9ILle_LCZHTxnl9atRsTs-HWY-bZbjWNmbIcKhJJ1BCOo_D3fU7myo4oSLMaLo2jNH2hYWN9vfxHO26e_H6rDskaVxu_5T3kywkGO8dastG-ej6wH2wYK55jG5OmM0yGPmTHPwnvDaO4r1G4M6bO-6n_upG5d1-iKMhjeRJKqDsHezRG-ioI62MRRxIbZKbGFxJtu9itwpZh_eVsrEfI_zevutv1Tyupq55TznIeSdwt7tvuC1jzn1ER3l5HbCP86Inbn4IO8PGtRgAAPonSm1LZM1IJ83eEkUh-CRYVtTnUJy_khiqzdruDj3XPDj0HDKJ0mc7dCMIaF5oo_BoZ2AHOF8bgoOA5ps8ShCwTMgu7TNpjDswLLUz0-DHa807ZPVhK6ZH51aGHkx_pH0dvUHz45WrAJfOpPnzBixkx-6fzE9DHjMd4JmD7t1uV7S3L9daDi2eCbgXang2Sl11ENAupjrmOuENXgmjHFtnKHMJRFGOm0nXVGAqjhsD-uGc9SuXn1sYSflIWp_Aalvh5tSwCfh4itvKOKC5eJ5p0tZ8RBP7JTEPzCnWbmYWFUN5W-drlrxwR2bjBezF3eXL2oVAz4pgEo8j58NWZsOUnDZdxHRcn7NVMtyWpIRPsowm0ZfXX8ODpTMDS9psP8MEuSvMiIdIVfLVBWAJCXUXHlC0KtN8xolWSp33FIW5MSCTUbwg0yQLcY3Nk0Ib48O5t62uhg_U9rLyNhRXHFHXEpyA4PrXtuDpsxBmLDIBb2hqlwpu7NLUx-NsHU8_vMuTENWZzIMe_ryNyRw-uNpZNdPy0TfM-Swm5PCoSVWAM24DbTmV9s4cynhuzyu1zBK696W4sQJQtwUVqmpPrGx5SXkfpyLW0s60wdQMuKrVMMbjEE4d0UUeNspcWfURNK6iRkmnhFA07_Z3boXIk75e8rkP7B8rHfe0XkkbxP-c4M7QWbpI0dcs2CN-NBHMygKhcyNArIB9NS3iBOUEM2cqQuCuLsZq48rLNdg4RI9vjxpRCl-UKEdzOh2VZ9ETcH_ioxd2KPkj-DjGW_6azJzxItZ9tWbAKHKOT6-Ph0cSv8qgstKYXH9gxUwp5cjAcb4kLDMRTAhyWgYtvLU6k_J6lkPrXMpKetJNL3zgy6gE-o8JvmGhdH56SD752O_1PSKTz4Z1OGL_K-nFrjFLGCN9aN9mn1DHlyWcgDh2zPBTr-GwW3JBtBHIfuz2RISyBBmMb_5T1z0sBZUILqR_XGROBK6yP8ZH4Ppawjv7nqr_odz94ANUNsJm00 "Deployment Diagram for Internet Banking System - Live") **with details** Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc-details.puml) -![Deployment Diagram for Internet Banking System - Live with details](http://www.plantuml.com/plantuml/png/vLT_Rzj63FtVduBp1ZGfd1ynqg4OKA2EdJKfuiI8dAO51XYdErg-zNGdt9sSUaE_-qX9gUtOQLfi60RC0Ho98ldu-2XAVXsYyB7CJUi7RQKf5S8inYBySd3WnTr-fkEiJCk0NZeRqSPzwVA3mWZBCNiXAgFJW_xnteXDDyEBWro4Y9vCam4MnYro3YeOu1cKbgBP0766C7N6k3jjCp3Q8WYhOEsoze6E710w62U5CGlAyQNCBGYjdb9ZaILbKJWVTzfJYac5_DZkm4zfrdV6-LVj7-KX_xLtMxT4pfLnv5s1FYxEK2ZqExijGb4BAt8jmM26L9SEN8M27I6Zdek8PB9WY6fL-ov5NFG-NDsC9xVduxF9nUcRqyi1Puew6eHbdJ3G8lCY9_8Upcr4Rp72YR0VkG_98aJCOGykz1nRhMNOvD8ft2cCx42RhxNf_udEga0WyyDpK28AaCW0xTq_Mq0VwiqzqvtsXPCYQcSfa8wjShRg_pKAHOLGRpZY0VxaOaTPyazrbXBEdYZqy-VFVukVNdAMcxIacO2Zd_SFZ-5YdB2j1tUOGa0_HmyUW-Rae2thktffAdpU0I4b1kxoN0luzGMSdB_PEnzHhc7OloUnGUIjc0juXpuqP5vIxLiTt-UV-FgBe-xmSPV0BaU7tUEbpxOsY4B86JB1wW36BfSYjXyQuEL-XTcpG10MWYkzHAXAFZrTQS0QFVxqdOr2M_G4fJd3w1nwHM7qKZNEKccM59wxEdpNPpEncMk5ONEufgML72oCZekgnmBU9bUN1sVZyIW1WjXV8VsvrNm_FJcFJaipA2ezF5eP6pvzR636r3kYamk_g4Ou5G4tUhGLotaX3KjoLHt07epgFEsbxQWh7u1qmEWvBg6UacEGxgYKKWoQ04vtZKRKVOLxCoGq1BdWgqbq7dbxL7T0faFqbJTeEtK-huuxC1DXXWf46MV4gL4Pf4V5fyA4-xi3ZCle1AFyRh6-VczVhwZLNLUh-pMr0afdrLQzQEb6aOLNopMy2uzBUDr8s5tLCAcoRrMnjuJkG8Z2gdIZXawzjNdNJeKsZanGbBvm0GCuQnPF5RafVlU_elvcuPlpyC-iVHgDT7KaQ6_LU__u_xNthvkzt_rN5ZyvKOPRJBznyG-GLvaFLOz397S9pJiRUxDvyvaGwCiW529344kORRlby-RxIEwun7uPeilHFmj01atf5CwrnBehXI7OgmISXvvLtcd5bDUfrc7aFgpZAOg3tujS4CErfve0etCTKK4eqq1Ct9IPFVMqYmvaKsRWCUCOxTVh9TBRI4gN5-iisL8IN9ihrbwwuAOHRhLLxYvmGJNhNCYhv9ximwof9r_qZS8dzHadVECSAzAVUKBhmD3zeOsXsq9xdBfFdIPt8gR2QsxgK4jV5t2gCcIupL4AXU1TL6iz8gstZLGYlIxgKUdPh3J2hpVUcB_NQnxwXZLrUZbKj42_343ziZCK7mcGNtaaeGPAo9Ny7fojNrKeceE8rVT5J6xgcue2r-uNLx6IIu5NIcsmAXYLDa_H05DIfshLdTSHxm7V3axwwm7TRuwWxQBIPKWj3uRwHJuwScebPrUtay67ozxmlB_yYV4QhIfpynS0 "Deployment Diagram for Internet Banking System - Live with details") +![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") ## Icons diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index 42c9e83..a37508f 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -1,12 +1,14 @@ @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") + WithoutPropertyHeader() -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -58,7 +60,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC", $descr="only in case of a problem", $sprite="person", $tags="fallback") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") SHOW_LEGEND() diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 9facb36..6f04971 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -1,11 +1,12 @@ @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml ' uncomment the following line and comment the first to use locally ' !include C4_Deployment.puml -AddTagSupport("fallback", $bgColor="#c0c0c0") +AddElementTag("fallback", $bgColor="#c0c0c0") +AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5") -' dynamic legend is used (activated in last line) +' calculated legend is used (activated in last line) ' LAYOUT_WITH_LEGEND() title Deployment Diagram for Internet Banking System - Live @@ -47,7 +48,7 @@ Rel(mobile, api, "Makes API calls to", "json/HTTPS") Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") -Rel(api, db2, "Reads from and writes to", "JDBC") +Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() From bd6c20115e5a3483ce5aa13c6e824970b5d11053 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 7 Mar 2021 19:43:20 +0100 Subject: [PATCH 07/14] #126: C4 relationships support description, sprite/openIconic and tags (5 - skinparam arrow colors allows no #, resync percy files, fix build) --- C4.puml | 12 ++++- ...Component Diagram Sample - bigbankplc.puml | 2 +- ...ner Diagram Sample - bigbankplc-icons.puml | 51 +++++++++++++++++++ ...Container Diagram Sample - bigbankplc.puml | 6 +-- ...ontainer Diagram Sample - message bus.puml | 3 +- ...ntainer Diagram Sample - techtribesjs.puml | 4 +- ...4_Context Diagram Sample - enterprise.puml | 2 +- percy/TestLegend.puml | 24 ++++----- percy/TestRelations.puml | 2 +- percy/TestRelationsDynamic.puml | 2 +- ...t Diagram Sample - bigbankplc-details.puml | 2 +- 11 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 percy/C4_Container Diagram Sample - bigbankplc-icons.puml diff --git a/C4.puml b/C4.puml index dc232ce..6c55aa5 100644 --- a/C4.puml +++ b/C4.puml @@ -144,14 +144,22 @@ skinparam rectangle<> { $tagSkin !endprocedure +' arrow colors cannot start with # (legend background has to start with #) +!function ColorNoHash($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() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") - !$elementSkin = $elementSkin + $lineColor + !$elementSkin = $elementSkin + ColorNoHash($lineColor) !endif !if ($textColor!="") - !$elementSkin = $elementSkin + ";text:" + $textColor + !$elementSkin = $elementSkin + ";text:" + ColorNoHash($textColor) !endif !$elementSkin = $elementSkin + %newline() !$elementSkin = $elementSkin + "}" + %newline() diff --git a/percy/C4_Component Diagram Sample - bigbankplc.puml b/percy/C4_Component Diagram Sample - bigbankplc.puml index 93762ff..56b4327 100644 --- a/percy/C4_Component Diagram Sample - bigbankplc.puml +++ b/percy/C4_Component Diagram Sample - bigbankplc.puml @@ -17,7 +17,7 @@ System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking info Container_Boundary(api, "API Application") { Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system") - Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts") + Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") diff --git a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml new file mode 100644 index 0000000..3e91f36 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -0,0 +1,51 @@ +@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 + +!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 +' uncomment the following line and comment the first to use locally +' !include C4_Container.puml +!include DEVICONS/angular.puml +!include DEVICONS/dotnet.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/server.puml +!include FONTAWESOME/envelope.puml + +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() + +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", "java") + Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular") + Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet") + ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server") +} + +System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope") +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") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") + +Rel_Back(customer, email_system, "Sends e-mails to") +Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") +Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") +@enduml \ No newline at end of file diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index 241c3a5..f3cc79a 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -6,8 +6,8 @@ !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !endif -LAYOUT_TOP_DOWN() -'LAYOUT_AS_SKETCH() +' LAYOUT_TOP_DOWN() +' LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System @@ -18,7 +18,7 @@ System_Boundary(c1, "Internet Banking") { Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA") Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser") Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device") - ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") + ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.") Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") } diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index 89824d0..cc49d85 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "messagebus" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Container.puml @@ -13,6 +13,7 @@ LAYOUT_TOP_DOWN() 'LAYOUT_AS_SKETCH() LAYOUT_WITH_LEGEND() + Person(customer, Customer, "A customer") System_Boundary(c1, "Customer Information") { diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml index 898844e..6cf8105 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -36,11 +36,11 @@ Rel(anonymous_user, web_app, "Uses", "HTTPS") Rel(aggregated_user, web_app, "Uses", "HTTPS") Rel(administration_user, web_app, "Uses", "HTTPS") -Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, post 3306") +Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306") Rel(web_app, filesystem, "Reads from") Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017") -Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, post 3306") +Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306") Rel_U(updater, filesystem, "Writes to") Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017") diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index b407c2f..034b7ec 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -1,4 +1,4 @@ -@startuml +@startuml "enterprise" ' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Context.puml diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml index 5d18af2..5a6a2db 100644 --- a/percy/TestLegend.puml +++ b/percy/TestLegend.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif SHOW_PERSON_SPRITE(person2) @@ -11,19 +11,19 @@ SHOW_PERSON_SPRITE(person2) UpdateElementStyle("system", $bgColor="chocolate", $fontColor="orange", $borderColor="orange") UpdateRelStyle(black, black) -AddTagSupport("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") -AddTagSupport("role2", $fontColor="#d73027", $shadowing="true") -AddTagSupport("role3", $bgColor="orange") -AddTagSupport("role4", $borderColor="blue") -AddTagSupport("unusedRole") +AddElementTag("role1", $bgColor="green", $fontColor="white", $borderColor="#d73027", $shadowing="false") +AddElementTag("role2", $fontColor="#d73027", $shadowing="true") +AddElementTag("role3", $bgColor="orange") +AddElementTag("role4", $borderColor="blue") +AddElementTag("unusedRole") -AddRelTagSupport("line1", $lineColor="green", $textColor="blue") -AddRelTagSupport("line2", $lineColor="blue", $textColor="green") -AddRelTagSupport("line3", $textColor="orange") -AddRelTagSupport("line4", $lineColor="orange") +AddRelTag("line1", $lineColor="green", $textColor="blue") +AddRelTag("line2", $lineColor="blue", $textColor="green") +AddRelTag("line3", $textColor="orange") +AddRelTag("line4", $lineColor="orange") ' PlantUML cannot combine line styles, a combination has to be added as workaround as first additional tag -AddRelTagSupport("line3&line4", $lineColor="orange", $textColor="orange") -AddRelTagSupport("unusedLine", $lineColor="red", $textColor="red") +AddRelTag("line3&line4", $lineColor="orange", $textColor="orange") +AddRelTag("unusedLine", $lineColor="red", $textColor="red") Person(person, "Person") Person(person1, "Person1", $tags="role1") diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml index eb62632..fc28ea8 100644 --- a/percy/TestRelations.puml +++ b/percy/TestRelations.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Component.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Component.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml !endif System(RelFrom, RelFrom) diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml index c31ed60..45e01d7 100644 --- a/percy/TestRelationsDynamic.puml +++ b/percy/TestRelationsDynamic.puml @@ -3,7 +3,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Dynamic.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Dynamic.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml !endif System(RelFrom, RelFrom) diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index a37508f..5ca247a 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -61,7 +61,7 @@ Rel(spa, api, "Makes API calls to", "json/HTTPS") Rel_U(web, spa, "Delivers to the customer's web browser") Rel(api, db, "Reads from and writes to", "JDBC") Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") -Rel_R(db, db2, "Replicates data to", "message" , $descr="only in case of a problem only in case of a problem", $sprite="&envelope-closed", $tags="fallback") +Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() @enduml \ No newline at end of file From cdc860205125f97705087cd47848df1ffcd5db7e Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 14 Mar 2021 16:26:35 +0100 Subject: [PATCH 08/14] #126: C4 relationships support description, sprite/openIconic and tags (6 - fix PR findings: remove obsolete code, update comments and use https urls) --- C4.puml | 18 +++++++++--------- README.md | 4 ++-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/C4.puml b/C4.puml index 6c55aa5..e84f622 100644 --- a/C4.puml +++ b/C4.puml @@ -213,17 +213,10 @@ $elementSkin !function $tagRelLegendEntry($tagStereo, $textColor, $lineColor) !$tagEntry = "|" - !$bg = $LEGEND_UNDEFINED_BG_COLOR - ' named colors have to start with # too - !if (%substr($bg, 0, 1) != "#") - !$bg = "#" + $bg - !endif -' !$tagEntry = $tagEntry + "<" + $bg +">" ' ..white line !if ($lineColor!="") !$tagEntry = $tagEntry + " " !else -' !$tagEntry = $tagEntry + " " !$tagEntry = $tagEntry + " " !endif !if ($textColor!="") @@ -244,7 +237,9 @@ $elementSkin !endfunction !unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") -'' ignore workaround tags with & +'' 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) %set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) @@ -253,7 +248,12 @@ $elementSkin !endprocedure !unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="") -'' ignore workaround tags with & +'' 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"). +'' This workaround tag could be theoretically removed in the legend but after that there would +'' 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) %set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry) diff --git a/README.md b/README.md index a4692cd..e4909d0 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ If you want to use the always up-to-date version in this repo, use the following Now let's create a C4 Container diagram: -\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](http://www.plantuml.com/plantuml/uml/ZOxDIWGn48JlUOeufn5qSjcJfvNHsugBFsV99iqcsEc4T0VTjpSCE2AYUAeAgVwgjYosIakevytBBK824bPdaHms3pg85BuofjgtwHWbj4DZg2wJzDpaSZAliRh04ioykToZ9Nc-snbux_yUlEdGkOTj9AXJwJLAxQ5ofh4iSetHyeKUTlO0E7HpNoHcigXlW5sDosiuLojaT9_kn-aJk40Py_7q1-Znn09fv4N-swuU0ByFNbVyZlYQqmbR8DyIVW00) too.) +\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](https://www.plantuml.com/plantuml/uml/ZOxDIWGn48JlUOeufn5qSjcJfvNHsugBFsV99iqcsEc4T0VTjpSCE2AYUAeAgVwgjYosIakevytBBK824bPdaHms3pg85BuofjgtwHWbj4DZg2wJzDpaSZAliRh04ioykToZ9Nc-snbux_yUlEdGkOTj9AXJwJLAxQ5ofh4iSetHyeKUTlO0E7HpNoHcigXlW5sDosiuLojaT9_kn-aJk40Py_7q1-Znn09fv4N-swuU0ByFNbVyZlYQqmbR8DyIVW00) too.) After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary` @@ -488,7 +488,7 @@ Images can be generated in PNG, in SVG or in LaTeX format. PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description. Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool. -It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://en.plantuml.com/running). +It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://plantuml.com/running). The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software. The small set of abstractions and diagram types makes the C4 model easy to learn and use. From f3639ab59f078bed3eb1b755ac2e7980fc347807 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 14 Mar 2021 16:31:26 +0100 Subject: [PATCH 09/14] #126: C4 relationships support description, sprite/openIconic and tags (6a - fix PR finding: all files should end with empty line) --- C4.puml | 2 +- C4_Component.puml | 2 +- percy/C4_Container Diagram Sample - bigbankplc-icons.puml | 2 +- percy/C4_Container Diagram Sample - bigbankplc.puml | 2 +- percy/C4_Container Diagram Sample - message bus.puml | 2 +- percy/C4_Container Diagram Sample - techtribesjs.puml | 2 +- percy/C4_Context Diagram Sample - enterprise.puml | 2 +- percy/C4_Deployment Diagram Sample - bigbankplc-details.puml | 2 +- percy/C4_Deployment Diagram Sample - bigbankplc.puml | 2 +- percy/C4_Dynamic Diagram Sample - bigbankplc.puml | 2 +- percy/TestLegend.puml | 2 +- percy/TestRelations.puml | 2 +- percy/TestRelationsDynamic.puml | 2 +- samples/C4_Container Diagram Sample - bigbankplc-icons.puml | 2 +- samples/C4_Container Diagram Sample - message bus.puml | 2 +- samples/C4_Container Diagram Sample - techtribesjs.puml | 2 +- samples/C4_Context Diagram Sample - enterprise.puml | 2 +- samples/C4_Deployment Diagram Sample - bigbankplc-details.puml | 2 +- samples/C4_Deployment Diagram Sample - bigbankplc.puml | 2 +- samples/C4_Dynamic Diagram Sample - bigbankplc.puml | 2 +- .../C4_Dynamic Diagram Sample - message bus - old format.puml | 2 +- samples/C4_Dynamic Diagram Sample - message bus.puml | 3 ++- 22 files changed, 23 insertions(+), 22 deletions(-) diff --git a/C4.puml b/C4.puml index e84f622..0564fe8 100644 --- a/C4.puml +++ b/C4.puml @@ -629,4 +629,4 @@ $from -[hidden]R- $to !endprocedure !unquoted procedure Lay_L($from, $to) $from -[hidden]L- $to -!endprocedure \ No newline at end of file +!endprocedure diff --git a/C4_Component.puml b/C4_Component.puml index 2ca30e7..5eeb434 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -86,4 +86,4 @@ database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos( !unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias -!endprocedure \ No newline at end of file +!endprocedure diff --git a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml index 3e91f36..e41af32 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc-icons.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -48,4 +48,4 @@ Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC Rel_Back(customer, email_system, "Sends e-mails to") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Container Diagram Sample - bigbankplc.puml b/percy/C4_Container Diagram Sample - bigbankplc.puml index f3cc79a..3857753 100644 --- a/percy/C4_Container Diagram Sample - bigbankplc.puml +++ b/percy/C4_Container Diagram Sample - bigbankplc.puml @@ -37,4 +37,4 @@ Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC Rel_Back(customer, email_system, "Sends e-mails to") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Container Diagram Sample - message bus.puml b/percy/C4_Container Diagram Sample - message bus.puml index cc49d85..7112c7f 100644 --- a/percy/C4_Container Diagram Sample - message bus.puml +++ b/percy/C4_Container Diagram Sample - message bus.puml @@ -51,4 +51,4 @@ Rel(audit_service, audit_store, "Stores events in") Lay_R(reporting_service, audit_service) -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Container Diagram Sample - techtribesjs.puml b/percy/C4_Container Diagram Sample - techtribesjs.puml index 6cf8105..9b5d4ff 100644 --- a/percy/C4_Container Diagram Sample - techtribesjs.puml +++ b/percy/C4_Container Diagram Sample - techtribesjs.puml @@ -50,4 +50,4 @@ Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") Lay_R(rel_db, filesystem) -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Context Diagram Sample - enterprise.puml b/percy/C4_Context Diagram Sample - enterprise.puml index 034b7ec..ed51d3a 100644 --- a/percy/C4_Context Diagram Sample - enterprise.puml +++ b/percy/C4_Context Diagram Sample - enterprise.puml @@ -42,4 +42,4 @@ Rel_L(taxamo, braintree, "Uses for credit card processing") Lay_D(customer, braintree) -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml index 76d135b..b09d4ea 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -67,4 +67,4 @@ Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Deployment Diagram Sample - bigbankplc.puml b/percy/C4_Deployment Diagram Sample - bigbankplc.puml index cac0187..861531a 100644 --- a/percy/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/percy/C4_Deployment Diagram Sample - bigbankplc.puml @@ -55,4 +55,4 @@ Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml diff --git a/percy/C4_Dynamic Diagram Sample - bigbankplc.puml b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml index 207e4ec..be5676e 100644 --- a/percy/C4_Dynamic Diagram Sample - bigbankplc.puml +++ b/percy/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -17,4 +17,4 @@ Container_Boundary(b, "API Application") { Rel_R(c1, c2, "Submits credentials to", "JSON/HTTPS") Rel(c2, c3, "Calls isAuthenticated() on") Rel_R(c3, c4, "select * from users where username = ?", "JDBC") -@enduml \ No newline at end of file +@enduml diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml index 5a6a2db..fe740cd 100644 --- a/percy/TestLegend.puml +++ b/percy/TestLegend.puml @@ -49,4 +49,4 @@ Rel(allInOne, system2, "line 3+4 cannot be combined without workaround", $tags=" Rel(allInOne, system2, "line 3+4 with workaround", $tags="line3&line4+line3+line4") SHOW_LEGEND(false) -@enduml \ No newline at end of file +@enduml diff --git a/percy/TestRelations.puml b/percy/TestRelations.puml index fc28ea8..df032ba 100644 --- a/percy/TestRelations.puml +++ b/percy/TestRelations.puml @@ -69,4 +69,4 @@ Lay_D(RelFrom, RelShort) Lay_D(RelShort, RelLong) Lay_R(RelLong, BiRelShort) Lay_L(RelLong, BiRelLong) -@enduml \ No newline at end of file +@enduml diff --git a/percy/TestRelationsDynamic.puml b/percy/TestRelationsDynamic.puml index 45e01d7..762493b 100644 --- a/percy/TestRelationsDynamic.puml +++ b/percy/TestRelationsDynamic.puml @@ -68,4 +68,4 @@ Lay_D(RelFrom, RelShort) Lay_D(RelShort, RelLong) Lay_R(RelLong, RelIndexShort) Lay_L(RelLong, RelIndexLong) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Container Diagram Sample - bigbankplc-icons.puml b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml index e2fdc07..95d0dc8 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc-icons.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc-icons.puml @@ -42,4 +42,4 @@ Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC Rel_Back(customer, email_system, "Sends e-mails to") Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP") Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 5318f45..9d0ce2a 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -48,4 +48,4 @@ Rel(audit_service, audit_store, "Stores events in") Lay_R(reporting_service, audit_service) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index fcbc60a..1b6b058 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -48,4 +48,4 @@ Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") Lay_R(rel_db, filesystem) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Context Diagram Sample - enterprise.puml b/samples/C4_Context Diagram Sample - enterprise.puml index 629bacd..22db5ca 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -39,4 +39,4 @@ Rel_L(taxamo, braintree, "Uses for credit card processing") Lay_D(customer, braintree) -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml index 5ca247a..5c6edb0 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc-details.puml @@ -64,4 +64,4 @@ Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Deployment Diagram Sample - bigbankplc.puml b/samples/C4_Deployment Diagram Sample - bigbankplc.puml index 6f04971..47c946d 100644 --- a/samples/C4_Deployment Diagram Sample - bigbankplc.puml +++ b/samples/C4_Deployment Diagram Sample - bigbankplc.puml @@ -52,4 +52,4 @@ Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback") Rel_R(db, db2, "Replicates data to") SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - bigbankplc.puml b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml index 4fbaafc..0f5caf2 100644 --- a/samples/C4_Dynamic Diagram Sample - bigbankplc.puml +++ b/samples/C4_Dynamic Diagram Sample - bigbankplc.puml @@ -12,4 +12,4 @@ Container_Boundary(b, "API Application") { Rel_R(c1, c2, "Submits credentials to", "JSON/HTTPS") Rel(c2, c3, "Calls isAuthenticated() on") Rel_R(c3, c4, "select * from users where username = ?", "JDBC") -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - message bus - old format.puml b/samples/C4_Dynamic Diagram Sample - message bus - old format.puml index 9d9b99f..4f4fd86 100644 --- a/samples/C4_Dynamic Diagram Sample - message bus - old format.puml +++ b/samples/C4_Dynamic Diagram Sample - message bus - old format.puml @@ -32,4 +32,4 @@ setIndex(5) RelIndex_R($index-2, message_bus, audit_service, "Sends customer update events to", "async") increment() RelIndex($index-2, audit_service, audit_store, "Stores events in") -@enduml \ No newline at end of file +@enduml diff --git a/samples/C4_Dynamic Diagram Sample - message bus.puml b/samples/C4_Dynamic Diagram Sample - message bus.puml index c38341e..5d88d67 100644 --- a/samples/C4_Dynamic Diagram Sample - message bus.puml +++ b/samples/C4_Dynamic Diagram Sample - message bus.puml @@ -1,3 +1,4 @@ + @startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml @@ -28,4 +29,4 @@ RelIndex(Index()-1, reporting_service, reporting_db, "Stores data in") RelIndex_R(SetIndex(5)-2, message_bus, audit_service, "Sends customer update events to", "async") RelIndex(Index()-2, audit_service, audit_store, "Stores events in") -@enduml \ No newline at end of file +@enduml From 1c86ba40b1cb01a2e5ffd6ddbc116208d97ff819 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 19 Mar 2021 17:15:01 +0100 Subject: [PATCH 10/14] #119, #72: Add link support: All elements (except relations) are updated --- C4.puml | 15 +++++++++++++-- C4_Component.puml | 24 ++++++++++++------------ C4_Container.puml | 28 ++++++++++++++-------------- C4_Context.puml | 25 +++++++++++++------------ C4_Deployment.puml | 24 ++++++++++++------------ 5 files changed, 64 insertions(+), 52 deletions(-) diff --git a/C4.puml b/C4.puml index 0564fe8..279443a 100644 --- a/C4.puml +++ b/C4.puml @@ -312,6 +312,17 @@ $elementSkin !$tagDefaultLegend = $tagStereoEntries !endprocedure +' Links +' ################################## + +!function $getLink($link) + !if ($link!="") + !return "[[" + $link + "]]" + !else + !return "" + !endif +!endfunction + ' Line breaks ' ################################## @@ -499,8 +510,8 @@ endlegend !endif !endfunction -!unquoted procedure Boundary($alias, $label, $type="", $tags="") -rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias +!unquoted procedure Boundary($alias, $label, $type="", $tags="", $link="") +rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias $getLink($link) !endprocedure ' Relationship diff --git a/C4_Component.puml b/C4_Component.puml index 5eeb434..5f660d4 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -64,26 +64,26 @@ endlegend !endif !endfunction -!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias +!unquoted procedure Component($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias +!unquoted procedure ComponentDb($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias +!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("component",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias +!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +rectangle "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias +!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +database "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +queue "$getComponent($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_component",$tags) as $alias $getLink($link) !endprocedure diff --git a/C4_Container.puml b/C4_Container.puml index 169944b..3b72153 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -59,33 +59,33 @@ endlegend !endif !endfunction -!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias +!unquoted procedure Container($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias +!unquoted procedure ContainerDb($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias +!unquoted procedure ContainerQueue($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("container", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias +!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +rectangle "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias +!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +database "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="") -queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias +!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="", $tags="", $link="") +queue "$getContainer($label, $techn, $descr, $sprite)$getProps()" $toStereos("external_container", $tags) as $alias $getLink($link) !endprocedure ' Boundaries ' ################################## -!unquoted procedure Container_Boundary($alias, $label, $tags="") -Boundary($alias, $label, "Container", $tags) +!unquoted procedure Container_Boundary($alias, $label, $tags="", $link="") +Boundary($alias, $label, "Container", $tags, $link) !endprocedure diff --git a/C4_Context.puml b/C4_Context.puml index 884cec2..7e04a1d 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -202,28 +202,29 @@ endlegend !endif !endfunction -!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias +!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="") +rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias +!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") +rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias +!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="") +rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="") -rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias +!unquoted procedure System_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") +rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias $getLink($link) !endprocedure ' Boundaries ' ################################## -!unquoted procedure Enterprise_Boundary($alias, $label, $tags="") -Boundary($alias, $label, "Enterprise", $tags) +!unquoted procedure Enterprise_Boundary($alias, $label, $tags="", $link="") +Boundary($alias, $label, "Enterprise", $tags, $link) !endprocedure -!unquoted procedure System_Boundary($alias, $label, $tags="") -Boundary($alias, $label, "System", $tags) + +!unquoted procedure System_Boundary($alias, $label, $tags="", $link="") +Boundary($alias, $label, "System", $tags, $link) !endprocedure diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 0ced07a..00ca6bd 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -122,26 +122,26 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !return $nodeText !endfunction -!unquoted procedure Deployment_Node($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias +!unquoted procedure Deployment_Node($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Deployment_Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias +!unquoted procedure Deployment_Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Deployment_Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias +!unquoted procedure Deployment_Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Node($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias +!unquoted procedure Node($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode($label, $type, $descr, $sprite)$getProps()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias +!unquoted procedure Node_L($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode_L($label, $type, $descr, $sprite)$getProps_L()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure -!unquoted procedure Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="") -rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias +!unquoted procedure Node_R($alias, $label, $type="", $descr="", $sprite="", $tags="", $link="") +rectangle "$getNode_R($label, $type, $descr, $sprite)$getProps_R()" $toStereos("node",$tags) as $alias $getLink($link) !endprocedure From abe96b114209b9f8459486223936742a0569fc50 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 19 Mar 2021 18:39:30 +0100 Subject: [PATCH 11/14] #119, #72: Add link support: Added SystemDb..., SystemQueue... are updated --- C4_Context.puml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/C4_Context.puml b/C4_Context.puml index e612bd8..850f470 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -218,20 +218,20 @@ rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", rectangle "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="", $tags="") -database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias +!unquoted procedure SystemDb($alias, $label, $descr="", $sprite="", $tags="", $link="") +database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure SystemQueue($alias, $label, $descr="", $sprite="", $tags="") -queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias +!unquoted procedure SystemQueue($alias, $label, $descr="", $sprite="", $tags="", $link="") +queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("system", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure SystemDb_Ext($alias, $label, $descr="", $sprite="", $tags="") -database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias +!unquoted procedure SystemDb_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") +database "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias $getLink($link) !endprocedure -!unquoted procedure SystemQueue_Ext($alias, $label, $descr="", $sprite="", $tags="") -queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias +!unquoted procedure SystemQueue_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") +queue "$getSystem($label, $descr, $sprite)$getProps()" $toStereos("external_system", $tags) as $alias $getLink($link) !endprocedure ' Boundaries From e24ddc02ca427702eda8bdbde8892f1aaa4e09ea Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 19 Mar 2021 19:47:58 +0100 Subject: [PATCH 12/14] #119, #72: Add link support: Relationships are updated, Readme.md extended --- C4.puml | 92 ++++++++++++++++++++++++----------------------- C4_Dynamic.puml | 96 ++++++++++++++++++++++++------------------------- README.md | 31 ++++++++++++---- 3 files changed, 121 insertions(+), 98 deletions(-) diff --git a/C4.puml b/C4.puml index b95491a..45106c0 100644 --- a/C4.puml +++ b/C4.puml @@ -523,7 +523,7 @@ rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias ' Relationship ' ################################## -!function $getRel($direction, $alias1, $alias2, $label, $techn, $descr, $sprite, $tags) +!function $getRel($direction, $alias1, $alias2, $label, $techn, $descr, $sprite, $tags, $link) !$rel = $alias1 + ' ' + $direction + ' ' + $alias2 !if ($tags != "") !$rel = $rel + ' ' + $toStereos($tags) @@ -537,7 +537,11 @@ rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias !$rel = $rel + '<'+$sprite+'> ' !endif !endif - !$rel = $rel + '**' + $label + '**' + !if ($link != "") + !$rel = $rel + '**[[' + $link + ' ' + $label + ']]**' + !else + !$rel = $rel + '**' + $label + '**' + !endif !if ($techn != "") ' line break is not deterministic, calculate it !$rel = $rel + '\n//[' + $breakTechn($techn, $REL_TECHN_MAX_CHAR_WIDTH) + ']//' @@ -556,80 +560,80 @@ $alias1 $direction $alias2 : **$label** $alias1 $direction $alias2 : **$label**\n//[$techn]// !endprocedure -!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<--", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<--", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure BiRel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags) +!unquoted procedure BiRel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link) !endprocedure ' Layout Helpers diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index 70d89e5..a307e84 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -65,82 +65,82 @@ $alias1 $direction $alias2 : **$e_index: $label** $alias1 $direction $alias2 : **$e_index: $label**\n//[$techn]// !endprocedure -!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<--", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Back($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<--", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<--", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_Back($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<--", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel($e_index, $from, $to, $label, $techn, "->>") +!unquoted procedure RelIndex_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("<<-", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Back_Neighbor($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel($e_index, $from, $to, $label, $techn, "<<-") +!unquoted procedure RelIndex_Back_Neighbor($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("<<-", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure -!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="") -$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags) +!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="") +$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link) !endprocedure diff --git a/README.md b/README.md index 35c1302..6ee7be9 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![Basic Sample](https://www.plantuml.com/plantuml/png/JP1FIyD04CNl-HHZlAHG4ogUF3KDeWShmQHwBDDaj0lxZzs9eOZVtGcjhNiPcFURUMzs6Ha33qR32gFge47ZDILNodPww0dsp3xU5qN0CVzKl1zsGwJGESjaEU-SAR0F2ksN7lnGL7StjKRBc_LpeP4fihIsbT2eB8NSYr6Ir1IYindsHjavfELKLUI0x48wIvf3P3BRbHjiZ-6GTGk1ZhdWgAKp-4v0tdbpDj9kYzuB-KuxABtNgaDMpgRIggxdK3Pr_lBGoaWWkCqNi7wh9gtKseqHfgiYi0CvoQCWPj2i9ijsLCmKW9KXBLvH8lwSGcPy56NF2HCnUINzTzmbrYRAfDIdjgqReIReh5xMF19BZ96cyX6S-J-o9DlB1_u2 "Basic Sample") -Entities can also be decorated with icons using the last parameter, for example: +Entities can also be decorated with icons/sprites using the $sprite parameter, for example: ```csharp @startuml @@ -86,10 +86,10 @@ Entities can also be decorated with icons using the last parameter, for example: LAYOUT_WITH_LEGEND() -Person(user, "Customer", "People that need products", "users") -Container(spa, "SPA", "angular", "The main interface that the customer interacts with", "angular") -Container(api, "API", "java", "Handles all business logic", "java") -ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", "msql_server") +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", "https") Rel(spa, api, "Uses", "https") @@ -97,7 +97,26 @@ Rel_R(api, db, "Reads/Writes") @enduml ``` -![test](https://www.plantuml.com/plantuml/png/hL9DZzCm4BtdLtXxeIjjwmDmuRHLMzXA_Q8VL9ogQJnfZHmxUEnM_7l6QRORM90uS8erx-NDl9dtI05yYAN9xhJDJLGeJY5Kz45A3vV-KOTJF4H2dpiRq8P-xae9ockmPnEhA8VlUai3DcndKsaW80KkxOVC1ctHzwka_KP4op-MB2322KNXZ74NRO_2C4c0LU8NM7lYbnFSM1YNWp4_MECsuUi6sPt28acDnbycmyLy_GykGgpOo5jPfV5PfASPxHNCw57bDLkH9L10BnMU4qQtBXyNyyrWDrulPkF_sgYkmGN9bTXx_tAIPrSIx34QQ4o_Xh_16Vw6bVJTx7coC_x-UykDJBDJizFfuEjYkzdl9fkd_NJyQJmVTU-pRCa4Pxk9-20wmqY1X_KTVY_HLGRvWX24HLIYyax5F502Q-7EVNOxN9SguFfwEKXmOomzDvo0aYb2ymfz0NaZcPAHD-sk6B2skF3Esmhj5b1fHWRBIIAavQJl4yVD80bEbU1RCP68KtRK-OtLqXWTkkh0zH44E01XuinqxXsv8eZrvsajwOoYPxiFmdd58wPKQtjscWreMpXVGj3E9dxh5jmhMw5fzddToPQmtbaTBIOal4QkVlu0xrTNh_MeAmH5SbSdY-57j8hl-HC0 "test") +![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") + +Similar to icons/sprites is it possible to add links to all elements and relationships: + +```csharp +@startuml Basic Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite") +System_Boundary(c1, "Sample System", $link="https://github.com/plantuml-stdlib/C4-PlantUML") { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", $descr="Allows users to compare multiple Twitter timelines", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md") +} +System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML") + +Rel(admin, web_app, "Uses", "HTTPS", $link="https://plantuml.com/link") +Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/link") +@enduml +``` + +![Links](http://www.plantuml.com/plantuml/png/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Links") Elements and relations can be decorated with tags and explained via a calculated legend, for example: From 19447d73827ea6cbd43c9be41ce4cd0a25ad5c39 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 19 Mar 2021 20:45:25 +0100 Subject: [PATCH 13/14] #119, #72: Add link support: Readme.md - image with links is added as svg --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6ee7be9..ed1d306 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,11 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/l @enduml ``` -![Links](http://www.plantuml.com/plantuml/png/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Links") +> `png` itself supports no links, therefore the following image is generated as `svg` image. +> 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") Elements and relations can be decorated with tags and explained via a calculated legend, for example: From 0ad6fedf38fa719a0def62f433a26ff41905de24 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Fri, 19 Mar 2021 23:28:01 +0100 Subject: [PATCH 14/14] #119, #72: Add link support: Readme.md - add missing args in docu --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index ed1d306..a3cb959 100644 --- a/README.md +++ b/README.md @@ -163,31 +163,31 @@ Diagram types * System Context & System Landscape diagrams * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml` * Macros: - * `Person(alias, label, ?description, ?sprite, ?tags)` + * `Person(alias, label, ?description, ?sprite, ?tags, $link)` * `Person_Ext` - * `System(alias, label, ?description, ?sprite, ?tags)` + * `System(alias, label, ?description, ?sprite, ?tags, $link)` * `SystemDb` * `SystemQueue` * `System_Ext` * `SystemDb_Ext` * `SystemQueue_Ext` - * `Boundary(alias, label, ?type, ?tags)` - * `Enterprise_Boundary(alias, label, ?tags)` + * `Boundary(alias, label, ?type, ?tags, $link)` + * `Enterprise_Boundary(alias, label, ?tags, $link)` * `System_Boundary` * Container diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml` * Additional Macros: - * `Container(alias, label, technology, ?description, ?sprite, ?tags)` + * `Container(alias, label, technology, ?description, ?sprite, ?tags, $link)` * `ContainerDb` * `ContainerQueue` * `Container_Ext` * `ContainerDb_Ext` * `ContainerQueue_Ext` - * `Container_Boundary(alias, label)` + * `Container_Boundary(alias, label, ?tags, $link)` * Component diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml` * Additional Macros: - * `Component(alias, label, technology, ?description, ?sprite, ?tags)` + * `Component(alias, label, technology, ?description, ?sprite, ?tags, $link)` * `ComponentDb` * `ComponentQueue` * `Component_Ext` @@ -196,7 +196,7 @@ Diagram types * Dynamic diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml` * Additional Macros: - * `RelIndex(index, from, to, label)` + * `RelIndex(index, from, to, label, ?tags, $link)` * (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output) * (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output) * `LastIndex()`: return the last used index (function which can be used as argument) @@ -208,16 +208,16 @@ Diagram types * Deployment diagram * Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml` * Additional Macros: - * `Deployment_Node(alias, label, ?type, ?description, ?sprite, ?tags)` - * `Node(alias, label, ?type, ?description, ?sprite, ?tags)`: short name of Deployment_Node() - * `Node_L(alias, label, ?type, ?description, ?sprite, ?tags)`: left aligned Node() - * `Node_R(alias, label, ?type, ?description, ?sprite, ?tags)`: right aligned Node() + * `Deployment_Node(alias, label, ?type, ?description, ?sprite, ?tags, $link)` + * `Node(alias, label, ?type, ?description, ?sprite, ?tags, $link)`: short name of Deployment_Node() + * `Node_L(alias, label, ?type, ?description, ?sprite, ?tags, $link)`: left aligned Node() + * `Node_R(alias, label, ?type, ?description, ?sprite, ?tags, $link)`: right aligned Node() Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md). ## Relationship Types -* `Rel(from, to, label, ?technology, ?description, ?sprite, ?tags)` +* `Rel(from, to, label, ?technology, ?description, ?sprite, ?tags, $link)` * `BiRel` (bidirectional relationship) You can force the direction of a relationship by using: