mirror of
https://github.com/plantuml-stdlib/C4-PlantUML.git
synced 2022-10-18 01:14:54 +00:00
#126: C4 relationships support description, sprite/openIconic and tags (7 - update sample with scaled sprites)
#49, #139: Persons can be displayed as portraits - SHOW_PERSON_PORTRAIT()
This commit is contained in:
KIRCHSTH
@@ -50,12 +50,18 @@ skinparam queue {
|
||||
shadowing false
|
||||
}
|
||||
|
||||
skinparam Arrow {
|
||||
skinparam arrow {
|
||||
Color $ARROW_COLOR
|
||||
FontColor $ARROW_COLOR
|
||||
FontSize 12
|
||||
}
|
||||
|
||||
skinparam actor {
|
||||
StereotypeFontSize 12
|
||||
shadowing false
|
||||
style awesome
|
||||
}
|
||||
|
||||
' Some boundary skinparam have to be set a package skinparams too (PlantUML uses internal packages)
|
||||
skinparam package {
|
||||
StereotypeFontSize 0
|
||||
@@ -147,6 +153,8 @@ skinparam rectangle<<boundary>> {
|
||||
!$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
|
||||
!$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
|
||||
!$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing)
|
||||
' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too
|
||||
!$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing)
|
||||
$tagSkin
|
||||
!endprocedure
|
||||
|
||||
@@ -159,7 +167,7 @@ $tagSkin
|
||||
!endfunction
|
||||
|
||||
!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor)
|
||||
!$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline()
|
||||
!$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline()
|
||||
!$elementSkin = $elementSkin + " Color "
|
||||
!if ($lineColor!="")
|
||||
!$elementSkin = $elementSkin + ColorNoHash($lineColor)
|
||||
@@ -306,7 +314,7 @@ $defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing)
|
||||
|
||||
' 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 = "skinparam arrow {" + %newline()
|
||||
!$elementSkin = $elementSkin + " Color " + $lineColor + %newline()
|
||||
!$elementSkin = $elementSkin + " FontColor " + $textColor + %newline()
|
||||
!$elementSkin = $elementSkin + "}" + %newline()
|
||||
|
||||
@@ -153,9 +153,11 @@ endlegend
|
||||
!endprocedure
|
||||
|
||||
!global $defaultPersonSprite = "person"
|
||||
!global $portraitPerson = "false"
|
||||
|
||||
!procedure HIDE_PERSON_SPRITE()
|
||||
!$defaultPersonSprite = ""
|
||||
!$portraitPerson = "false"
|
||||
!endprocedure
|
||||
|
||||
!unquoted procedure SHOW_PERSON_SPRITE($sprite="")
|
||||
@@ -164,6 +166,12 @@ endlegend
|
||||
!else
|
||||
!$defaultPersonSprite = $sprite
|
||||
!endif
|
||||
!$portraitPerson = "false"
|
||||
!endprocedure
|
||||
|
||||
!unquoted procedure SHOW_PERSON_PORTRAIT()
|
||||
!$defaultPersonSprite = ""
|
||||
!$portraitPerson = "true"
|
||||
!endprocedure
|
||||
|
||||
' Elements
|
||||
@@ -203,11 +211,19 @@ endlegend
|
||||
!endfunction
|
||||
|
||||
!unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="")
|
||||
!if ($portraitPerson == "true") && ($sprite == "")
|
||||
actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link)
|
||||
!else
|
||||
rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link)
|
||||
!endif
|
||||
!endprocedure
|
||||
|
||||
!unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="")
|
||||
!if ($portraitPerson == "true") && ($sprite == "")
|
||||
actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link)
|
||||
!else
|
||||
rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link)
|
||||
!endif
|
||||
!endprocedure
|
||||
|
||||
!unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="")
|
||||
|
||||
+27
-2
@@ -166,13 +166,14 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
|
||||
|
||||
|
||||
## HIDE_PERSON_SPRITE() or SHOW_PERSON_SPRITE(?sprite)
|
||||
## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT()
|
||||
|
||||
With the macros `HIDE_PERSON_SPRITE()` and `SHOW_PERSON_SPRITE()` it is possible to change the person related default sprite. `SHOW_PERSON_SPRITE()` is the default.
|
||||
With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default.
|
||||
|
||||
- **HIDE_PERSON_SPRITE()**: deactivates the default sprite
|
||||
- **SHOW_PERSON_SPRITE()**: activates the default sprite "person"
|
||||
- **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite
|
||||
- **SHOW_PERSON_PORTRAIT()**: activates portrait outline instead of a rectangle
|
||||
|
||||
"person" and "person2" are predefined sprites which can be used as default sprite too.
|
||||
|
||||
@@ -255,3 +256,27 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
|
||||
|
||||
|
||||
**Using SHOW_PERSON_PORTRAIT()**
|
||||
|
||||
```csharp
|
||||
@startuml SHOW_PERSON_PORTRAIT() Sample
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
|
||||
|
||||
SHOW_PERSON_PORTRAIT()
|
||||
|
||||
Person(admin, "Administrator")
|
||||
System_Boundary(c1, 'Sample') {
|
||||
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
|
||||
}
|
||||
System(twitter, "Twitter")
|
||||
|
||||
' if a person is combined with a sprite then the rectangle layout is used again
|
||||
Person(person, "Person with sprite", $sprite="person2")
|
||||
|
||||
Rel(admin, web_app, "Uses", "HTTPS")
|
||||
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ Rel_R(api, db, "Reads/Writes")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Similar to icons/sprites is it possible to add links to all elements and relationships:
|
||||
|
||||
@@ -120,7 +120,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/l
|
||||
> 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.
|
||||
|
||||
|
||||
|
||||
|
||||
Elements and relations can be decorated with tags and explained via a calculated legend, for example:
|
||||
|
||||
@@ -227,24 +227,34 @@ You can force the direction of a relationship by using:
|
||||
* `Rel_L`, `Rel_Left`
|
||||
* `Rel_R`, `Rel_Right`
|
||||
|
||||
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)
|
||||
Relationship specific sprites are typically smaller and therefore following options are possible:
|
||||
* use smaller icons (like the $triangle in the following sample)
|
||||
* use an additional scale factor (direct as part of the argument, or via a variable)
|
||||
* if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open)
|
||||
|
||||
```csharp
|
||||
@startuml
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
|
||||
|
||||
Person(user, "User")
|
||||
Person(user1, "User 1")
|
||||
Person(user2, "User 2")
|
||||
Person(user3, "User 3")
|
||||
|
||||
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")
|
||||
Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2")
|
||||
|
||||
' special smaller sprites have to be used
|
||||
' scaled sprites are ok
|
||||
Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5")
|
||||
|
||||
' combine sprite and scale to a new sprite
|
||||
!$combinedSprite="person2,scale=0.5"
|
||||
Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite)
|
||||
|
||||
|
||||
' special smaller sprites can be used
|
||||
sprite $triangle {
|
||||
00000000000
|
||||
00000F00000
|
||||
@@ -259,11 +269,14 @@ sprite $triangle {
|
||||
0FFFFFFFFF0
|
||||
00000000000
|
||||
}
|
||||
Rel(user, system, "orders", "http", "only small sprites looks ok, like the small triangle", "triangle")
|
||||
Rel_R(user1, system, "orders", "http", "small sprites, like the small triangle", $sprite="triangle")
|
||||
|
||||
' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/
|
||||
Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
In rare cases, you can force the layout of objects which have no relationships by using:
|
||||
|
||||
@@ -314,10 +327,11 @@ C4-PlantUML also comes with some layout options to make it easy and reusable to
|
||||
* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)
|
||||
* [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)
|
||||
|
||||
C4-PlantUML also comes with some default person sprite options:
|
||||
C4-PlantUML also comes with some person sprite/portrait options:
|
||||
|
||||
* [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite)
|
||||
* [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite)
|
||||
* [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait)
|
||||
|
||||
## Custom tags/stereotypes support and skinparam updates
|
||||
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
@startuml
|
||||
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
|
||||
!if %variable_exists("RELATIVE_INCLUDE")
|
||||
!include ./../C4_Deployment.puml
|
||||
!else
|
||||
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
|
||||
!endif
|
||||
|
||||
|
||||
!$COLOR_A_5 = "#7f3b08"
|
||||
!$COLOR_A_1 = "#fee0b6"
|
||||
!$COLOR_NEUTRAL = "#f7f7f7"
|
||||
UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true")
|
||||
|
||||
SHOW_PERSON_PORTRAIT()
|
||||
|
||||
' default header Property, Value
|
||||
AddProperty("Name", "Flash")
|
||||
AddProperty("Organization", "Zootopia")
|
||||
AddProperty("Tool", "Internet Explorer 7.0")
|
||||
Person(personAlias, "Label", "Optional Description (with default property header)")
|
||||
Person(personAlias1, "Simple")
|
||||
Person(personAlias2, "Simple with sprite", $sprite="person2")
|
||||
AddProperty("Name", "Flash")
|
||||
AddProperty("Organization", "Zootopia")
|
||||
AddProperty("Tool", "Internet Explorer 7.0")
|
||||
Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)")
|
||||
Person_Ext(personAliasExt1, "Simple Ext")
|
||||
Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2")
|
||||
|
||||
SHOW_LEGEND()
|
||||
@enduml
|
||||
Reference in New Issue
Block a user