added ExtSystem and Component type

new samples using the new types

C4.puml

@@ -3,7 +3,9 @@
 
 !define PERSON_BG_COLOR #08427B
 !define CONTAINER_BG_COLOR #438DD5
-!define SYSTEM_BG_COLOR #999999
+!define EXTERNAL_SYSTEM_BG_COLOR #999999
+!define SYSTEM_BG_COLOR #1168BD
+!define COMPONENT_BG_COLOR #85BBF0
 !define ELEMENT_FONT_COLOR #FFFFFF
 
 ' Styling
@@ -40,10 +42,24 @@ skinparam rectangle<<container>> {
     BorderColor #3C7FC0
 }
 
+skinparam rectangle<<component>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor ELEMENT_FONT_COLOR
+    BackgroundColor COMPONENT_BG_COLOR
+    BorderColor #3C7FC0
+}
+
 skinparam rectangle<<system>> {
     StereotypeFontColor ELEMENT_FONT_COLOR
     FontColor ELEMENT_FONT_COLOR
     BackgroundColor SYSTEM_BG_COLOR
+    BorderColor #3C7FC0
+}
+
+skinparam rectangle<<external_system>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor ELEMENT_FONT_COLOR
+    BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
     BorderColor #8A8A8A
 }
 
@@ -57,20 +73,23 @@ skinparam package<<boundary>> {
 ' ##################################
 
 !definelong LAYOUT_AS_SKETCH
-skinparam backgroundColor #EEEBDC
-skinparam handwritten true
-skinparam defaultFontName "Comic Sans MS"
-center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
+    skinparam backgroundColor #EEEBDC
+    skinparam handwritten true
+    skinparam defaultFontName "Comic Sans MS"
+    center footer
+    <font color=red>Warning:</font> Created for discussion, needs to be validated
 !enddefinelong
 
 !definelong LAYOUT_WITH_LEGEND
-hide stereotype
-legend right
-|=              |= Type |
-|<PERSON_BG_COLOR>      | person |
-|<CONTAINER_BG_COLOR>   | container |
-|<SYSTEM_BG_COLOR>      | external system |
-endlegend
+    hide stereotype
+    legend right
+        |=              |= Type |
+        |<PERSON_BG_COLOR>      | person |
+        |<SYSTEM_BG_COLOR>   | system |
+        |<EXTERNAL_SYSTEM_BG_COLOR>      | external system |
+        |<CONTAINER_BG_COLOR>   | container |
+        |<COMPONENT_BG_COLOR>   | component |
+    endlegend
 !enddefinelong
 
 !define LAYOUT_TOP_DOWN top to bottom direction
@@ -85,9 +104,15 @@ endlegend
 !define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
 !define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
 
+!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
+!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
+
 !define System(e_alias, e_label) rectangle "==e_label" <<system>> as e_alias
 !define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<system>> as e_alias
 
+!define ExtSystem(e_alias, e_label) rectangle "==e_label" <<external_system>> as e_alias
+!define ExtSystem(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_system>> as e_alias
+
 ' Relationship
 ' ##################################
 

samples/C4_Component Diagram Sample.puml

@@ -0,0 +1,24 @@
+@startuml
+!include ../C4.puml
+
+LAYOUT_WITH_LEGEND
+
+title Container Diagram
+
+Person(client, "Client", "A user of a system")
+package "Platform:system" <<boundary>> as platform {
+    Container(api_app, "Mobile App", "Android / IOS", "Uses SDK for direct calls")
+    package "Web App:container" <<boundary>> as api_dash {
+        Component(c1, "User Controller", "MVC REST Controller", "Lorem ipsum")
+        Component(c2, "Product Controller", "MVC REST Controller", "Lorem ipsum")
+    }
+}
+ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic")
+
+Rel(client, platform, "Uses")
+Rel(client, 3rdparty, "Uses")
+Rel(api_dash, 3rdparty, "Uses", "REST API")
+Rel(api_app, 3rdparty, "Uses", "SDK")
+Rel(api_app, c2, "Query", "SDK")
+Rel(api_app, c1, "Query", "SDK")
+@enduml

samples/C4_Container Diagram Sample.puml

@@ -0,0 +1,19 @@
+@startuml
+!include ../C4.puml
+
+LAYOUT_WITH_LEGEND
+
+title Container Diagram
+
+Person(client, "Client", "A user of a system")
+package "Platform" <<boundary>> as platform {
+    Container(api_app, "Mobile App", "Android / IOS", "Uses SDK for direct calls")
+    Container(api_dash, "Web App", "asp.net", "Covers one or more business needs")
+}
+ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic")
+
+Rel(client, platform, "Uses")
+Rel(client, 3rdparty, "Uses")
+Rel(api_dash, 3rdparty, "Uses", "REST API")
+Rel(api_app, 3rdparty, "Uses", "SDK")
+@enduml

samples/C4_Context Diagram Sample.puml

@@ -0,0 +1,15 @@
+@startuml
+!include ../C4.puml
+
+LAYOUT_WITH_LEGEND
+
+title System Context Diagram
+
+Person(client, "Client", "A user of a system")
+System(platform, "Platform", "Distributed system of independent Machines")
+ExtSystem(3rdparty, "3rd Party Platform", "Implements actual business logic")
+
+Rel(client, platform, "Uses")
+Rel(client, 3rdparty, "Uses")
+Rel(3rdparty, platform, "Depends on", "SDK, REST API")
+@enduml