From 9029269285f8bcf284da559862ecdb83512269a4 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 7 Aug 2021 22:01:23 +0200 Subject: [PATCH] Legend supports sprites and custom text (5 - fix OpenIconic and add image support) --- C4.puml | 56 ++++++++++++++++++++++--------------- C4_Component.puml | 4 +-- C4_Container.puml | 4 +-- C4_Context.puml | 8 +++--- C4_Deployment.puml | 6 ++-- README.md | 6 ++-- percy/TestLegendSprite.puml | 21 ++++++-------- 7 files changed, 56 insertions(+), 49 deletions(-) diff --git a/C4.puml b/C4.puml index c6d71ac..c4d26f3 100644 --- a/C4.puml +++ b/C4.puml @@ -400,6 +400,33 @@ $elementSkin !return $combineMasks($mask1, $mask2) !endfunction +' element symbols typically 4 times too big in legend +!function $smallVersionSprite($sprite) + ' ,scale= ... has to be first (...,color=black,scale=0.25... is invalid too) + !if (%strpos($sprite, "=") < 0) + !if (%substr($sprite, 0, 4) == "img:") + !$smallSprite = $sprite + "{scale=0.25}" + !else + !$smallSprite = $sprite + ",scale=0.25" + !endif + !else + !$smallSprite = $sprite + !endif + !return $smallSprite +!endfunction + +' format sprite that it can be used in diagram +!function $getSprite($sprite) + ' if it starts with & it's a OpenIconic, details see https://useiconic.com/open/ + ' if it starts with img: it's an image, details see https://plantuml.com/creole + !if (%substr($sprite, 0, 1) != "&" && %substr($sprite, 0, 4) != "img:") + !$formatted ="<$" + $sprite + ">" + !else + !$formatted ="<" + $sprite + ">" + !endif + !return $formatted +!endfunction + !function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite) !$bg = $bgColor !$fo = $fontColor @@ -446,7 +473,7 @@ $elementSkin !$tagEntry = $tagEntry + " " !$tagEntry = $tagEntry + "" !if ($legendSprite != "") - !$tagEntry = $tagEntry + "<$"+$legendSprite+"> " + !$tagEntry = $tagEntry + $getSprite($legendSprite) + " " !endif !if ($legendText == "") !$tagEntry = $tagEntry + " " + $tagStereo + " " @@ -505,7 +532,7 @@ $elementSkin !$tagEntry = $tagEntry + " " !$tagEntry = $tagEntry + "" !if ($legendSprite != "") - !$tagEntry = $tagEntry + "<$"+$legendSprite+"> " + !$tagEntry = $tagEntry + $getSprite($legendSprite) + " " !endif !if ($legendText == "") !$tagEntry = $tagEntry + " " + $tagStereo + " " @@ -610,13 +637,7 @@ $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $s !if ($sprite!="") %set_variable_value("$" + $tagStereo + "ElementTagSprite", $sprite) !if ($legendSprite == "") - ' ,scale= ... has to be first (...,color=black,scale=0.25... is invalid too) - !if (%strpos($sprite, "=") < 0) - ' element symbols typically 4 times too big - !$legendSprite = $sprite + ",scale=0.25" - !else - !$legendSprite = $sprite - !endif + !$legendSprite = $smallVersionSprite($sprite) !endif !endif $addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite) @@ -641,13 +662,7 @@ $defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing, !if ($sprite!="") %set_variable_value("$" + $elementName + "ElementTagSprite", $sprite) !if ($legendSprite == "") - ' ,scale= ... has to be first (...,color=black,scale=0.25... is invalid too) - !if (%strpos($sprite, "=") < 0) - ' element symbols typically 4 times too big - !$legendSprite = $sprite + ",scale=0.25" - !else - !$legendSprite = $sprite - !endif + !$legendSprite = $smallVersionSprite($sprite) !endif !endif !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape, $legendText, $legendSprite) @@ -921,13 +936,8 @@ rectangle "$getBoundary($label, $type)" $toStereos("boundary", $tags) as $alias !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 + $getSprite($sprite) + ' ' + !endif !if ($link != "") !$rel = $rel + '**[[' + $link + ' ' + $label + ']]**' !else diff --git a/C4_Component.puml b/C4_Component.puml index 4aeb471..2199b2f 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -62,13 +62,13 @@ endlegend !return '=='+$label+'\n//['+$techn+']//' !endif !if ($descr == "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//' +!return $getSprite($sprite)+'\n=='+$label+'\n//['+$techn+']//' !endif !if ($descr != "") && ($sprite == "") !return '=='+$label+'\n//['+$techn+']//\n\n '+$descr !endif !if ($descr != "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//\n\n '+$descr +!return $getSprite($sprite)+'\n=='+$label+'\n//['+$techn+']//\n\n '+$descr !endif !endfunction diff --git a/C4_Container.puml b/C4_Container.puml index ee433dd..3c8304c 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -57,13 +57,13 @@ endlegend !return '=='+$label+'\n//['+$techn+']//' !endif !if ($descr == "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//' +!return $getSprite($sprite)+'\n=='+$label+'\n//['+$techn+']//' !endif !if ($descr != "") && ($sprite == "") !return '=='+$label+'\n//['+$techn+']//\n\n '+$descr !endif !if ($descr != "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label+'\n//['+$techn+']//\n\n '+$descr +!return $getSprite($sprite)+'\n=='+$label+'\n//['+$techn+']//\n\n '+$descr !endif !endfunction diff --git a/C4_Context.puml b/C4_Context.puml index df750fe..fbd525e 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -203,13 +203,13 @@ endlegend !return '=='+$label !endif !if ($descr == "") && ($sprite != "") - !return '<$'+$sprite+'>\n=='+$label + !return $getSprite($sprite)+'\n=='+$label !endif !if ($descr != "") && ($sprite == "") !return '=='+$label+'\n\n '+$descr !endif !if ($descr != "") && ($sprite != "") - !return '<$'+$sprite+'>\n=='+$label+'\n\n '+$descr + !return $getSprite($sprite)+'\n=='+$label+'\n\n '+$descr !endif !endfunction @@ -218,13 +218,13 @@ endlegend !return '=='+$label !endif !if ($descr == "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label +!return $getSprite($sprite)+'\n=='+$label !endif !if ($descr != "") && ($sprite == "") !return '=='+$label+'\n\n '+$descr !endif !if ($descr != "") && ($sprite != "") -!return '<$'+$sprite+'>\n=='+$label+'\n\n '+$descr +!return $getSprite($sprite)+'\n=='+$label+'\n\n '+$descr !endif !endfunction diff --git a/C4_Deployment.puml b/C4_Deployment.puml index 473ae80..dc70b8f 100644 --- a/C4_Deployment.puml +++ b/C4_Deployment.puml @@ -85,7 +85,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !function $getNode($label, $type, $descr, $sprite) !$nodeText = "" !if ($sprite != "") - !$nodeText = $nodeText + '<$'+$sprite+'>\n' + !$nodeText = $nodeText + $getSprite($sprite) + '\n' !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") @@ -100,7 +100,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !function $getNode_L($label, $type, $descr, $sprite) !$nodeText = "" !if ($sprite != "") - !$nodeText = $nodeText + '<$'+$sprite+'>\l' + !$nodeText = $nodeText + $getSprite($sprite) + '\l' !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") @@ -115,7 +115,7 @@ SetDefaultLegendEntries("person\nsystem\ncontainer\nexternal_person\nexternal_sy !function $getNode_R($label, $type, $descr, $sprite) !$nodeText = "" !if ($sprite != "") - !$nodeText = $nodeText + '<$'+$sprite+'>\r' + !$nodeText = $nodeText + $getSprite($sprite) + '\r' !endif !$nodeText = $nodeText + '==' + $label !if ($type != "") diff --git a/README.md b/README.md index 2c1e13b..0fd508e 100644 --- a/README.md +++ b/README.md @@ -394,11 +394,11 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+ **Element specific tag definitions** Sometimes an added element tag is element specific and all element specific colors should be used, e.g. a specific user role should be defined as element tag with the specific colors `...PERSON_...` like -```plantuml +```csharp AddElementTag("admin", $fontColor=$ELEMENT_FONT_COLOR, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR, $sprite="osa_user_audit", $legendText="administration user") ``` Therefore element Add...Tag() shortcuts are added which use the specific colors as default values and the call can be simplified like -```plantuml +```csharp AddPersonTag("admin", $sprite="osa_user_audit", $legendText="administration user") ``` @@ -472,7 +472,7 @@ SHOW_LEGEND(false) **Sample with tag dependent sprites and custom legend text** -```plantuml +```csharp @startuml !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml diff --git a/percy/TestLegendSprite.puml b/percy/TestLegendSprite.puml index 10e3210..d3969d5 100644 --- a/percy/TestLegendSprite.puml +++ b/percy/TestLegendSprite.puml @@ -9,6 +9,7 @@ !define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master !include osaPuml/Common.puml !include osaPuml/User/all.puml +!include osaPuml/Server/all.puml !include !include @@ -25,25 +26,22 @@ AddContainerTag("webApp", $sprite="application_server", $legendText="web applica AddContainerTag("db", $sprite="database_server", $legendText="database container") AddContainerTag("files", $sprite="file_server", $legendText="file server container") -AddContainerTag("conApp", $sprite="service_application", $legendText="console application") +AddContainerTag("conApp", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console application") -AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall") +UpdateElementStyle("external_system", $bgColor=$EXTERNAL_SYSTEM_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$EXTERNAL_SYSTEM_BORDER_COLOR, $sprite = "osa_server", , $legendText="external system") +AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="&envelope-closed", $legendText="firewall") +AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered") Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext") Person(aggregated_user, "Sam, Ivone", $tags="customer") Person(administration_user, "Bernd", $tags="admin") System_Boundary(c1, "techtribes.js"){ - Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector", $tags="webApp") - ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.", $tags="db") - Container(filesystem, "File System", "FAT32", "Stores search indexes", $tags="files") - ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", "Stores from RSS/Atom feeds (blog posts) and tweets", $tags="db") - Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis", $tags="conApp") } @@ -51,7 +49,6 @@ System_Ext(twitter, "Twitter") System_Ext(github, "GitHub") System_Ext(blogs, "Blogs") - Rel(anonymous_user, web_app, "Uses", "HTTPS", $tags="firewall") Rel(aggregated_user, web_app, "Uses", "HTTPS", $tags="firewall") Rel(administration_user, web_app, "Uses", "HTTPS", $tags="firewall") @@ -64,11 +61,11 @@ 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") -Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS") -Rel(updater, github, "Gets information about public code repositories from", "HTTPS") -Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP") +Rel(updater, twitter, "Gets profile information and tweets from", "HTTPS", $tags="plantuml") +Rel(updater, github, "Gets information about public code repositories from", "HTTPS", $tags="plantuml") +Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP", $tags="plantuml") Lay_R(rel_db, filesystem) SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml