Tags support sprites (incl. img support), technology and custom legend text #173

kirchsth · 2021-08-06T13:15:41Z

AddElementTag(), AddRelTag() and UpdateElementStyle() is extended with ?sprite, ?legendText and ?legendSprite

that

an element can be extended with a sprite via a tag
additional the used sprite is documented in the legend (if it can be automatically scaled no legendSprite has to be defined)
custom legend text can be set

The extended calls are:

AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite):
AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?legendText, ?legendSprite):
UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite):

Element specific tags with element specific default colors are added:

AddPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddExternalPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddExternalSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddExternalComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddExternalContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)
AddNodeTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite)

it enables diagrams like Sample with tag dependent sprites and custom legend text

@startuml
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
!include osaPuml/Common.puml
!include osaPuml/User/all.puml

!include <office/Servers/database_server>
!include <office/Servers/file_server>
!include <office/Servers/application_server>
!include <office/Concepts/service_application>
!include <office/Concepts/firewall>

AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user")
AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user")
AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user")

AddContainerTag("webApp", $sprite="application_server", $legendText="web app container")
AddContainerTag("db", $sprite="database_server", $legendText="database container")
AddContainerTag("files", $sprite="file_server", $legendText="file server container")
AddContainerTag("conApp", $sprite="service_application", $legendText="console app container")

AddRelTag("firewall", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall")

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", $tags="webApp")
    ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", $tags="db")
    Container(filesystem, "File System", "FAT32", $tags="files")
    ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", $tags="db")
    Container(updater, "Updater", "Java 7 Console App", $tags="conApp")
}

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")

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, port 3306")
Rel_U(updater, filesystem, "Writes to")
Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017")

Lay_R(rel_db, filesystem)

SHOW_LEGEND()
@enduml

It can be tested with my extended branch

BR Helmut

@Potherca: based on Github docu (I followed the in the languages YAML file link) supports it plantuml syntax highlighting, but I couldn't get it working (it highlights only @startuml)

…XxxxxxxStyle() with specific default colors)

…st file)

…mage support)

kirchsth · 2021-08-07T20:11:07Z

Fixed OpenIconic errors and add image support to $sprite="..." (via img:....). This enables diagrams like

@startuml
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

!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 <office/Servers/database_server>
!include <office/Servers/file_server>
!include <office/Servers/application_server>
!include <office/Concepts/service_application>
!include <office/Concepts/firewall>

AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user")
AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user")
AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user")

AddContainerTag("webApp", $sprite="application_server", $legendText="web application")

AddContainerTag("db", $sprite="database_server", $legendText="database container")
AddContainerTag("files", $sprite="file_server", $legendText="file server container")

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")

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")
}

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")

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, 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", $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

BR Helmut

Potherca · 2021-08-24T12:59:13Z

At first glance this looks good, I'll try to do an actual review soon. 👍

kirchsth · 2021-08-29T14:34:20Z

@Potherca: I have a branch that tags supports tech/type properties too (branch kirchsth/feature/TagsSupportsTechn or my extended merged kirchsth/extended_tag_techn) should I add the extensions to this branch too? This extension enables shorter diagram source without additional $techn properties but we would start to mix $techn./$type with $tags.

BR Helmut

@startuml
' !!!! only extended_tag_techn supports tags with $techn !!!!
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended_tag_techn/C4_Component.puml

!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 <office/Servers/database_server>
!include <office/Servers/file_server>
!include <office/Servers/application_server>
!include <office/Concepts/service_application>
!include <office/Concepts/firewall>

!include <tupadr3/common>
!include <tupadr3/devicons2/mysql>
!include <tupadr3/devicons2/mongodb>

AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user")
AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user")
AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user")

AddContainerTag("webApp", $sprite="application_server", $legendText="web application")

AddContainerTag("mongo_db", $techn="MongoDB 2.2.x", $sprite="mongodb", $legendText="MongoDB container")
AddContainerTag("mysql_db", $techn="MySQL 5.5.x", $sprite="mysql", $legendText="MySQL container")
AddContainerTag("files", $sprite="file_server", $legendText="file server container")

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")

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", $techn="HTTPS", $sprite="firewall,scale=0.3,color=red", $legendText="firewall")
AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $techn="HTTPS", $sprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered")

LAYOUT_LEFT_RIGHT()
' LAYOUT_LANDSCAPE()

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"){
    ' $techn not part of $tags
    Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", $tags="webApp")
    ' $techn part of $tags
    ContainerDb(rel_db, "Relational Database", $tags="mysql_db", $descr="DESCRIPTION")
    ' $techn not part of $tags
    Container(filesystem, "File System", "FAT32", "DESCRIPTION", $tags="files")
    ' $techn part of $tags
    ContainerDb(nosql, "NoSQL Data Store", $tags="mongo_db", $descr="DESCRIPTION")
    Container(updater, "Updater", "Java 7 Console App", $tags="conApp")
}

System_Ext(twitter, "Twitter")
System_Ext(github, "GitHub")
System_Ext(blogs, "Blogs")

' $techn part of $tags
Rel(anonymous_user, web_app, "Uses", $tags="firewall")
Rel(aggregated_user, web_app, "Uses", $tags="firewall")
Rel(administration_user, web_app, "Uses", $tags="firewall")

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, 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", $tags="plantuml")
Rel(updater, github, "Gets information about public code repositories from", $tags="plantuml")
' don't use the default techn. "HTTPS" which is defined via tags, define techn "HTTP" too
Rel(updater, blogs, "Gets content using RSS and Atom feeds from", "HTTP", $tags="plantuml")

' Lay_R(rel_db, filesystem)

' HIDE_STEREOTYPE()
SHOW_LEGEND()
@enduml

kirchsth · 2021-09-03T21:34:41Z

@Potherca: I added the missing tech/type support to this branch too, that the tags supports all properties (and we avoid an additional review cycle)

C4.puml

Potherca · 2021-08-24T12:58:13Z

C4.puml

+  !while ($brPos >= 0)
+    !$tag = %substr($tags, 0, $brPos)
+    !$newSprite = %get_variable_value("$" + $tag + "RelTagSprite")
+    !if ($newSprite>"")


For readability, I would suggest adding whitespace around the >:

!if ($newSprite > "")

README.md

Potherca · 2021-09-07T12:35:40Z

I finally got around to reviewing this. Other than some minor nitpicks, it looks good!

I just noticed that, by merging the other MRs first, I create a conflict here. I probably should have done that in the reversed order. 😞

kirchsth · 2021-09-07T12:39:56Z

thank you for the review; no problem I will resolve the MRs.
BR Helmut

…(resolve conflicts, fix PR findings)

kirchsth added 5 commits August 5, 2021 20:21

Legend supports sprites and custom text

506922d

fix typo

48b2b13

Legend supports sprites and custom text (2 - fix Add/UpdateElementStyle)

636d9f5

Legend supports sprites and custom text (3 - add element specific Add…

0670fc6

…XxxxxxxStyle() with specific default colors)

Legend supports sprites and custom text (4 - update ReadMe.md, add te…

2d23c17

…st file)

kirchsth mentioned this pull request Aug 6, 2021

Github C4-PlantUML syntax highlighting qjebbs/vscode-plantuml#428

Closed

kirchsth changed the title ~~Tag dependent sprites and custom legend text~~ Tag dependent sprites (incl. img support) and custom legend text Aug 7, 2021

Legend supports sprites and custom text (5 - fix OpenIconic and add i…

9029269

…mage support)

kirchsth mentioned this pull request Aug 8, 2021

Use default bgColor and fontColor for new element tags #154

Closed

kirchsth linked an issue Aug 21, 2021 that may be closed by this pull request

Use default bgColor and fontColor for new element tags #154

Closed

kirchsth changed the title ~~Tag dependent sprites (incl. img support) and custom legend text~~ Tags support sprites (incl. img support) and custom legend text Aug 22, 2021

Tags support $techn(/$type) too.

6f645d3

kirchsth changed the title ~~Tags support sprites (incl. img support) and custom legend text~~ Tags support sprites (incl. img support), technology and custom legend text Sep 3, 2021

Potherca approved these changes Sep 7, 2021

View reviewed changes

Potherca added this to the v2.4.0 milestone Sep 7, 2021

plantuml-stdlib#173 Tags support sprites, technology and custom text …

a05be2c

…(resolve conflicts, fix PR findings)

kirchsth requested a review from Potherca September 7, 2021 15:37

kirchsth merged commit ce5a3ea into plantuml-stdlib:master Sep 7, 2021

kirchsth mentioned this pull request Oct 8, 2021

Selectively hiding stereotypes #192

Closed

mikaello mentioned this pull request Jan 7, 2022

Upgrade C4 PlantUML to version 2.4.0 yuzutech/kroki#1055

Closed

kirchsth deleted the feature/defaultSprite branch February 25, 2022 19:22

kirchsth mentioned this pull request Apr 6, 2022

documentation of image (img:) support is missing #219

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Tags support sprites (incl. img support), technology and custom legend text #173

Tags support sprites (incl. img support), technology and custom legend text #173

Uh oh!

kirchsth commented Aug 6, 2021

Uh oh!

kirchsth commented Aug 7, 2021

Uh oh!

Potherca commented Aug 24, 2021

Uh oh!

kirchsth commented Aug 29, 2021

Uh oh!

kirchsth commented Sep 3, 2021

Uh oh!

Uh oh!

Potherca Aug 24, 2021

Uh oh!

kirchsth Sep 7, 2021

Uh oh!

Uh oh!

Potherca commented Sep 7, 2021

Uh oh!

kirchsth commented Sep 7, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Tags support sprites (incl. img support), technology and custom legend text #173

Tags support sprites (incl. img support), technology and custom legend text #173

Uh oh!

Conversation

kirchsth commented Aug 6, 2021

Uh oh!

kirchsth commented Aug 7, 2021

Uh oh!

Potherca commented Aug 24, 2021

Uh oh!

kirchsth commented Aug 29, 2021

Uh oh!

kirchsth commented Sep 3, 2021

Uh oh!

Uh oh!

Potherca Aug 24, 2021

Choose a reason for hiding this comment

Uh oh!

kirchsth Sep 7, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Potherca commented Sep 7, 2021

Uh oh!

kirchsth commented Sep 7, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants