Themes for C4-PlantUML #245

manonmichel · 2022-10-20T09:55:00Z

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

skinparam rectangle<<boundary>> {
  BackgroundColor #FEFECE
  BorderStyle solid
}

skinparam rectangle<<BOUNDARY_TAG>> {
  backgroundcolor #ABC

  border {
    color green
    style dotted
    thickness 2.5
  }

  Roundcorner 10

  Font {
    Color red
    Name SansSerif
    Size 14
    Style plain
  }

}

However this doesn't seem to work for me.
In diagram.puml I set !theme mytheme from path/to/mytheme and I set the background colour in puml-theme-mytheme.puml to check that the theme is well connected to the diagram and it indeed changes the background colour. However I have the following boundary:

Boundary(ui, "User Interface", $tags='BOUNDARY_TAG') {
        Container(dummy, "Dummy Container", "", "desc")
}

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 be skinparam database<<containerdb>> ?

I'm quite new to UML so maybe I'm missing something obvious.

The text was updated successfully, but these errors were encountered:

Potherca · 2022-10-20T12:12:38Z

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

We get this image:

But if we look at what is actually created¹, we get this:

Click to Expand

@startuml
skinparam defaultTextAlignment center

skinparam wrapWidth 200
skinparam maxMessageSize 150

skinparam LegendBorderColor transparent
skinparam LegendBackgroundColor transparent
skinparam LegendFontColor #FFFFFF

skinparam shadowing<<legendArea>> false
skinparam rectangle<<legendArea>> {
    backgroundcolor #00000000
    bordercolor #00000000
}

skinparam rectangle {
    StereotypeFontSize 12
    shadowing false
}

skinparam database {
    StereotypeFontSize 12
    shadowing false
}

skinparam queue {
    StereotypeFontSize 12
    shadowing false
}

skinparam arrow {
    Color #666666
    FontColor #666666
    FontSize 12
}

skinparam actor {
    StereotypeFontSize 12
    shadowing false
    style awesome
}

skinparam person {
    StereotypeFontSize 12
    shadowing false
}

skinparam rectangle<<boundary>> {
    Shadowing false
    StereotypeFontSize 6
    StereotypeFontColor transparent
    BorderStyle dashed
}

skinparam package {
    StereotypeFontSize 6
    StereotypeFontColor transparent
    FontStyle plain
    BackgroundColor transparent
}

skinparam rectangle<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<boundary>>StereotypeFontColor transparent
skinparam rectangle<<boundary>>StereotypeFontColor transparent

skinparam rectangle<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<enterprise_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<enterprise_boundary>>StereotypeFontColor transparent
skinparam rectangle<<enterprise_boundary>>StereotypeFontColor transparent

skinparam rectangle<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<system_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<system_boundary>>StereotypeFontColor transparent
skinparam rectangle<<system_boundary>>StereotypeFontColor transparent

skinparam rectangle<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<container_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<container_boundary>>StereotypeFontColor transparent
skinparam rectangle<<container_boundary>>StereotypeFontColor transparent

skinparam rectangle<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam database<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam queue<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam actor<<person>> {
    StereotypeFontColor #08427B
    FontColor #08427B
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam person<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}

skinparam rectangle<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam database<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam queue<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam actor<<external_person>> {
    StereotypeFontColor #686868
    FontColor #686868
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam person<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}

skinparam rectangle<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam database<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam queue<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam actor<<system>> {
    StereotypeFontColor #1168BD
    FontColor #1168BD
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam person<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}

skinparam rectangle<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam database<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam queue<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam actor<<external_system>> {
    StereotypeFontColor #999999
    FontColor #999999
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam person<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}



skinparam rectangle<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<enterprise_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<enterprise_boundary>>StereotypeFontColor transparent
skinparam rectangle<<enterprise_boundary>>StereotypeFontColor transparent



skinparam rectangle<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<system_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<system_boundary>>StereotypeFontColor transparent
skinparam rectangle<<system_boundary>>StereotypeFontColor transparent

sprite $person [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000025788300000000005886410000000000000
000000000007DFFFFFFD9643347BFFFFFFFB400000000000
0000000004EFFFFFFFFFFFFFFFFFFFFFFFFFFB1000000000
000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD200000000
00000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE10000000
0000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB0000000
000000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5000000
000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000
000009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000
00000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF600000
00000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF800000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF700000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
0000008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD3000000
000000014555555555555555555555555555555300000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}

sprite $person2 [48x48/16] {
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000002578888300000000005888864100000000000
0000000007DFFFFFFFFD9643347BFFFFFFFFFB4000000000
00000004EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB10000000
0000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD2000000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
00003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
0000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF50000
0003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD0000
0009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF2000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
0009FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF2000
0003FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFD0000
0000BFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFF50000
00003FFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFB00000
000006FFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFE100000
0000007FFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFD2000000
00000004EFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFB10000000
0000000007DF8FFFFFFFFFFFFFFFFFFFFFF8FB4000000000
000000000002578888888888888888888864100000000000
}

skinparam rectangle<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam database<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam queue<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam actor<<container>> {
    StereotypeFontColor #438DD5
    FontColor #438DD5
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam person<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}


skinparam rectangle<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam database<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam queue<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam actor<<external_container>> {
    StereotypeFontColor #B3B3B3
    FontColor #B3B3B3
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam person<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}





skinparam {
  rectangle<<boundary>> {
    BackgroundColor red
  }

  rectangle<<BOUNDARY_TAG>> {
    backgroundcolor blue
  }

  rectangle<<BOUNDARY_TAG>><<boundary>> {
    backgroundcolor lime
  }
}


rectangle "==User Interface" <<BOUNDARY_TAG_boundary>><<boundary>> as ui  {
        rectangle "==Dummy Container\n//<size:12>[]</size>//\n\n desc" <<container>> as dummy 
}
@enduml

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

@enduml

how 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")
@enduml

We 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 db2

So 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 👍

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 · 2022-10-20T19:44:45Z

Hi @manonmichel,

instead of themes you can define the default and tag styles via the UpdateElementStyle(), UpdateRelStyle(), AddElementTag(), AddRelTag() ... calls.
This has the advantage a) that the legend text is updated too and b) you can ignore some PlantUML specific internals.

And if you combine all style/tag related calls in a separate file than you can include it and use it like a theme, meta model, ... .

e.g. create a DummyDomainModel.puml, it contains all your style and tag definitions

@startuml
!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")

@enduml

This can be included in the diagram itsef

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' or you could use a file include,...
!include https://.........../DummyDomainModel.puml

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

Would this be an option?

BR
Helmut

kirchsth · 2022-10-22T20:15:19Z

Hi @manonmichel,

the "Custom schema definition" section in README.md could be the better sample

Instead of a themes file you could define a MyDesign.puml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

!$COLOR_A_5 = "#7f3b08"
!$COLOR_A_4 = "#b35806"
!$COLOR_A_3 = "#e08214"
!$COLOR_A_2 = "#fdb863"
!$COLOR_A_1 = "#fee0b6"
!$COLOR_NEUTRAL = "#f7f7f7"
!$COLOR_B_1 = "#d8daeb"
!$COLOR_B_2 = "#b2abd2"
!$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", $sprite="person2")
UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1, $sprite="person2")
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)
@enduml

and include it in the diagram

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

' or you could use a file include,...
!include https://.........../MyDesign.puml

Person(customer, "Personal Banking Customer")
System(banking_system, "Internet Banking System")

System_Ext(mail_system, "E-mail system")
System_Ext(mainframe, "Mainframe Banking System")

Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails")
Rel(banking_system, mainframe, "Uses")

SHOW_LEGEND()
@enduml

BR Helmut

Potherca · 2022-10-23T10:09:52Z

@kirchsth We really need to get this into a single documentation section somewhere. (Probably together with #221)

kirchsth · 2022-10-23T10:44:18Z

With the TOC level 3 PR, we could extend the header Custom schema definition
to something like Custom schema definition - themes "support" in C4-PlantUML
and add the my last issue comment to the readme section (until we have #221)

kirchsth · 2022-11-12T19:07:24Z

If the new documentation is written we could also add "how to define a new Element" (maybe in context of a more generic tags based T4-Model)
(the topic was discussed in #244 (comment) but there is a simpler solution for it)

eg. if a new robot system should be defined then it can be done like this. I think it should support all scenarios.
(the sample is not useful but I is based on the #127 (comment) and I didn't want to define something new)

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

' ========================
' define a new tag for the new element
' unchanged font color has to defined too that the internal used System base implementation is not displayed in legend 
AddElementTag("robot_external", $bgColor=darkred,  $fontColor=$ELEMENT_FONT_COLOR, $borderColor=red, $sprite="robot")

' define a new procedure for the new element (new defined tag has to be additional merged)
!unquoted procedure ExternalRobotSystem($alias, $label, $descr="", $sprite="", $tags="", $link="")
!if (%strlen($tags) > 0)
  !$combinedTags=$tags+"+robot_external"
!else
  !$combinedTags="robot_external"
!endif
System($alias=$alias, $label=$label, $descr=$descr, $sprite=$sprite, $tags=$combinedTags, $link=$link)
!endprocedure
' ========================

' another tag which should be combined
AddElementTag("anotherTag", $bgColor=darkblue)

Person(customer, "Personal Banking Customer")
System(banking_system, "Internet Banking System")

ExternalRobotSystem(mail_system, "E-mail system", $link="https://github.com./plantuml-stdlib/C4-PlantUML/issues/221")
ExternalRobotSystem(mainframe, "Mainframe Banking System", $tags="anotherTag")

Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails")
Rel(banking_system, mainframe, "Uses")

SHOW_LEGEND()
@enduml

stale · 2023-02-18T03:19:46Z

This issue has been automatically marked as stale because it has not had activity in the past 60 days. It will be closed in seven days if no further activity occurs. Thank you for your contributions.

kirchsth · 2023-03-16T21:45:41Z

HI @manonmichel

I created a PR #295 that you can define themes and change a lot of display related settings (like in the https://github.com./kirchsth/C4-PlantUML/blob/extended/themes/puml-theme-C4_FirstTest.puml).

Can you please see/check there if it works for you.

Thank you and best regards
Helmut

… - add themes, fix PR findings)

…a - update themes, fix PR findings)

… - update themes/add overview, fix PR findings)

… - extract all constant values)

kirchsth · 2023-04-03T19:38:53Z

HI @manonmichel

PR #295 is merged into master. I added a Themes page.

Can you please see/check there if it works for you or if some (documentation) is missing.

Thank you and best regards
Helmut

Potherca self-assigned this Oct 20, 2022

Potherca added this to the v2.6.0 milestone Dec 15, 2022

Potherca moved this to Todo in All Projects Dec 15, 2022

Potherca added this to All Projects Dec 15, 2022

stale bot added the stale Issue has not been active for 60 days label Feb 18, 2023

stale bot closed this as completed Mar 11, 2023

github-project-automation bot moved this from Todo to Done in All Projects Mar 11, 2023

kirchsth added not-stale Stop issue from being marked stale by bot and removed stale Issue has not been active for 60 days labels Mar 11, 2023

kirchsth reopened this Mar 11, 2023

github-project-automation bot moved this from Done to In Progress in All Projects Mar 11, 2023

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Mar 14, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used

607a3a5

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Mar 14, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used (2)

075332f

kirchsth mentioned this issue Mar 14, 2023

Enables theme support #295

Merged

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Mar 25, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used (3…

a40c8b3

… - add themes, fix PR findings)

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Mar 26, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used (3…

933c679

…a - update themes, fix PR findings)

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Apr 1, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used (4…

ce8217d

… - update themes/add overview, fix PR findings)

kirchsth added a commit to kirchsth/C4-PlantUML that referenced this issue Apr 2, 2023

plantuml-stdlib#245,plantuml-stdlib#291 Themes can be defined/used (5…

c811921

… - extract all constant values)

kirchsth closed this as completed in #295 Apr 3, 2023

github-project-automation bot moved this from In Progress to Done in All Projects Apr 3, 2023

kirchsth added a commit that referenced this issue Apr 3, 2023

#245,#291 Enables theme support (#295)

5c4db8a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Themes for C4-PlantUML #245

Themes for C4-PlantUML #245

manonmichel commented Oct 20, 2022

Potherca commented Oct 20, 2022 •

edited

Loading

kirchsth commented Oct 20, 2022

kirchsth commented Oct 22, 2022

Potherca commented Oct 23, 2022

kirchsth commented Oct 23, 2022

kirchsth commented Nov 12, 2022

stale bot commented Feb 18, 2023

kirchsth commented Mar 16, 2023

kirchsth commented Apr 3, 2023

Themes for C4-PlantUML #245

Themes for C4-PlantUML #245

Comments

manonmichel commented Oct 20, 2022

Potherca commented Oct 20, 2022 • edited Loading

Footnotes

kirchsth commented Oct 20, 2022

kirchsth commented Oct 22, 2022

Potherca commented Oct 23, 2022

kirchsth commented Oct 23, 2022

kirchsth commented Nov 12, 2022

stale bot commented Feb 18, 2023

kirchsth commented Mar 16, 2023

kirchsth commented Apr 3, 2023

Potherca commented Oct 20, 2022 •

edited

Loading