Skip to content

Commit 89ff32e

Browse files
fknierimfknierim
authored
Merge pull request #5 from doubleSlashde/c4-level-styling
Added styling for C4 levels
2 parents 606afdd + bbde39d commit 89ff32e

File tree

3 files changed

+94
-13
lines changed

3 files changed

+94
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99

1010
<!-- changelog -->
1111

12-
## [Unreleased]
12+
## [1.4.0] - 2025-07-01
1313

1414
### Added
1515

1616
- C4 level definitions and styling
1717

1818
### Changed
1919

20-
- Default font changed to "Arial"
2120
- Refactored skin parameters across multiple theme files for consistency
2221
- Updated border color settings for C4 levels to 'none'
2322
- Improved example files with local input files and consistent include paths
@@ -93,7 +92,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
9392
- Consistent styling across all diagram types established
9493
- Theme parameter conflicts resolved
9594

96-
[Unreleased]: https://github.com/doubleSlashde/umltheme/compare/v1.3.0...HEAD
95+
[Unreleased]: https://github.com/doubleSlashde/umltheme/compare/v1.4.0...HEAD
96+
[1.4.0]: https://github.com/doubleSlashde/umltheme/compare/v1.3.0...v1.4.0
9797
[1.3.0]: https://github.com/doubleSlashde/umltheme/compare/v1.2.0...v1.3.0
9898
[1.2.0]: https://github.com/doubleSlashde/umltheme/compare/v1.1.0...v1.2.0
9999
[1.1.0]: https://github.com/doubleSlashde/umltheme/compare/v1.0.0...v1.1.0

‎examples/systemmodel with levels.puml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@startuml
2+
!include https://raw.githubusercontent.com/doubleSlashde/umltheme/main/puml-theme-doubleslash-system.puml
3+
title "C5 Example: Online Shop System"
4+
5+
' Context Level
6+
rectangle "Online Shop System" <<context>> {
7+
8+
' Container Level
9+
rectangle "Web Application" <<container>> {
10+
' Component Level
11+
rectangle "Order Management" <<component>> {
12+
' Module Level
13+
rectangle "Order Service" <<module>> {
14+
' Code Level
15+
rectangle "OrderController.java" <<code>>
16+
rectangle "OrderRepository.java" <<code>>
17+
}
18+
rectangle "Payment Service" <<module>> {
19+
rectangle "PaymentController.java" <<code>>
20+
rectangle "PaymentGatewayAdapter.java" <<code>>
21+
}
22+
}
23+
rectangle "User Management" <<component>> {
24+
rectangle "User Service" <<module>> {
25+
rectangle "UserController.java" <<code>>
26+
rectangle "UserRepository.java" <<code>>
27+
}
28+
}
29+
}
30+
package "DWH" <<container>> {
31+
database "PostgreSQL" <<component>>
32+
}
33+
}
34+
35+
agent "Payment Provider" as PaymentProvider <<external>>
36+
agent "Shipping Service" as ShippingService <<external>>
37+
38+
' Example relationships
39+
[Order Service] --> [PostgreSQL] : stores data
40+
[User Service] --> [PostgreSQL] : stores data
41+
[Order Service] --> ShippingService : requests shipping
42+
43+
' Legend
44+
rectangle "Legend" <<context>> {
45+
rectangle "Context" <<context>>
46+
rectangle "Container" <<container>>
47+
rectangle "Component" <<component>>
48+
rectangle "Module" <<module>>
49+
rectangle "Code" <<code>>
50+
agent "External Service" as ExtService <<external>>
51+
database "External DB" as ExtDB <<external>>
52+
}
53+
54+
@enduml

‎puml-theme-doubleslash-system.puml‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,47 @@ skinparam RectangleBorderColor DS_BLUE
1717
skinparam RectangleBorderThickness 1
1818
skinparam RectangleBorderStyle solid
1919
skinparam RectangleFontColor black
20+
skinparam RectangleFontStyle normal
2021

21-
skinparam RectangleBackgroundcolor<<container>> ALICEBLUE
22-
skinparam RectangleBorderColor<<container>> DS_BLUE
23-
skinparam RectangleBorderThickness<<container>> 0
24-
skinparam RectangleBorderStyle<<container>> solid
25-
skinparam RectangleFontColor<<container>> black
26-
skinparam RectangleFontsize<<container>> 14
22+
' Summary Table
23+
' *C5 Level* *Stereotype* *Description*
24+
' Context <<context>> System in its environment
25+
' Container <<container>> Applications/services/databases
26+
' Component <<component>> Major logical parts inside a container
27+
' Module <<module>> Groupings of code/packages/namespaces/subsystems
28+
' Code <<code>> Classes, files, functions, methods
29+
30+
' Define colors for each C4+M level
31+
!define CONTEXT_BG #FFFFFF
32+
!define CONTAINER_BG #EEF8FE
33+
!define COMPONENT_BG #D7E9F4
34+
!define MODULE_BG #AFC1C7
35+
!define CODE_BG #84999F
2736

28-
skinparam RectangleBackgroundcolor<<context>> transparent
37+
' Context Level
38+
skinparam RectangleBackgroundColor<<context>> CONTEXT_BG
2939
skinparam RectangleBorderColor<<context>> DS_BLUE
30-
skinparam RectangleBorderThickness<<context>> 1.5
31-
skinparam RectangleBorderStyle<<context>> solid
3240
skinparam RectangleFontColor<<context>> black
33-
skinparam RectangleFontsize<<context>> 14
41+
42+
' Container Level
43+
skinparam RectangleBackgroundColor<<container>> CONTAINER_BG
44+
skinparam RectangleBorderColor<<container>> none
45+
skinparam RectangleFontColor<<container>> black
46+
47+
' Component Level
48+
skinparam RectangleBackgroundColor<<component>> COMPONENT_BG
49+
skinparam RectangleBorderColor<<component>> none
50+
skinparam RectangleFontColor<<component>> black
51+
52+
' Module Level
53+
skinparam RectangleBackgroundColor<<module>> MODULE_BG
54+
skinparam RectangleBorderColor<<module>> none
55+
skinparam RectangleFontColor<<module>> black
56+
57+
' Code Level
58+
skinparam RectangleBackgroundColor<<code>> CODE_BG
59+
skinparam RectangleBorderColor<<code>> none
60+
skinparam RectangleFontColor<<code>> white
3461

3562
skinparam PackageBackgroundColor ALICEBLUE
3663
skinparam PackageBorderColor DS_BLUE

0 commit comments

Comments
 (0)