Potherca
commented
2 years ago Hi! To answer your questions (somewhat out of order):
is there documentation on styling for C4-models using skinparam?
Not really. There is some information scattered here and there in various tickets, but it has not been consolidated into a single source yet.
However I can't wrap my head around how styling works for C4-PlantUML.
I think the main thing to realize is that there is a difference between plain skinparam entries and using a theme.
Skinparams can be placed in the main diagram or a separate file which is then !include'd into the main diagram.
Themes are different in how they are build up (for an example, see puml-theme-aws-orange.puml). They should always live in a separate file and are included using and included using: !theme my-theme from /path/or-url/to/my-path
Thus, !includeing a theme or !themeing a skinparams file will not work.
and no styling is applied to it
This can have several causes. First of all, it can be helpful to see what the exact output is, rather than our input.
Using this simplified version:
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.4.0/C4_Container.puml
skinparam {
rectangle<<boundary>> {
BackgroundColor red
}
rectangle<<BOUNDARY_TAG>> {
backgroundcolor blue
}
rectangle<<BOUNDARY_TAG>><<boundary>> {
backgroundcolor lime
}
}
Boundary(ui, "User Interface", $tags='BOUNDARY_TAG') {
Container(dummy, "Dummy Container", "", "desc")
}
@endumlWe get this image:
But if we look at what is actually created[^1], we get this:
Click to Expand
```plantuml @startuml skinparam defaultTextAlignment center skinparam wrapWidth 200 skinparam maxMessageSize 150 skinparam LegendBorderColor transparent skinparam LegendBackgroundColor transparent skinparam LegendFontColor #FFFFFF skinparam shadowing<This both shows how elements are named (so you can target the correct <<stereotpye>>) and where styles come from.
As you can see, there is no <<BOUNDARY_TAG>> (as you might expect) but an <<BOUNDARY_TAG_boundary>>.
Which leads to my second point: things are not always styled as expected...
As you might ask "If there is no <<BOUNDARY_TAG>>, then why is the background lime?
This is because PlantUML just sees the rectangle<<boundary>> and as it is declared last, it wins.
If the existing BOUNDARY_TAG_boundary were used and the rectangle<<BOUNDARY_TAG_boundary>><<boundary>> skinparam was placed first it would loose, even though it is more specific / heavily weighed than either rectangle<<BOUNDARY_TAG_boundary>> or rectangle<<boundary>> individually.
Also, if there are multiple stereotypes set on an element, the first stereotype declared on the element wins. Not the last declared skinparam!
@startuml
skinparam {
rectangle<<A>> {
backgroundcolor blue
}
rectangle<<B>> {
BackgroundColor red
}
}
rectangle " " <<A>><<B>> as dummy1
rectangle " " <<B>><<A>> as dummy2
@endumlhow would I style a database container?
If we use this:
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.4.0/C4_Container.puml
ContainerDb(db1, "Database")
ContainerDb(db2, "Database", $tags="db-tag")
@endumlWe can see that what is output is:
database "==Database\n//<size:12>[]</size>//" <<container>> as db1
database "==Database\n//<size:12>[]</size>//" <<db-tag>><<container>> as db2So to style things, you could use either databse<<container>> (for all database entries), or database<<db-tag>> (for specific DB types). Obviously, taking the previously mentioned weirdness of order/weight into account.
I'm quite new to UML so maybe I'm missing something obvious.
I don't think any of this can be classified as "obvious". I just hope gives you more understanding of how things work :+1:
[^1]: This information is saved to the meta-data of a generated PNG or as a comment to a generated SVG. The easiest way to see what it is, is by viewing the source of an SVG
kirchsth
stale[bot]
I would like to create a PlantUML theme for my C4 model in order to have a seperate file for my design choices and for my diagrams (and also avoid repeating the styling at the beginning of each file). However I can't wrap my head around how styling works for C4-PlantUML.
From this comment I gather that we can also use skinparam (as with regular .puml files) such as
However this doesn't seem to work for me. In
diagram.pumlI set!theme mytheme from path/to/mythemeand I set the background colour inpuml-theme-mytheme.pumlto check that the theme is well connected to the diagram and it indeed changes the background colour. However I have the following boundary:and no styling is applied to it (I included the above styling in
mytheme).Furthermore, is there documentation on styling for C4-models using
skinparam? For example how would I style a database container? Would it beskinparam database<<containerdb>>?I'm quite new to UML so maybe I'm missing something obvious.