From 33c18e28b0925ef7c2dbf88b1e23696d06189288 Mon Sep 17 00:00:00 2001
From: Kamil Duda <kamil.duda@ing.com>
Date: Mon, 29 Jun 2020 15:18:54 +0200
Subject: [PATCH] Add definitions and snippets for external components and
 containers

---
 .vscode/C4.code-snippets | 48 ++++++++++++++++++++++++++++++++++++++++
 C4_Component.puml        | 23 +++++++++++++++++++
 C4_Container.puml        | 22 ++++++++++++++++++
 3 files changed, 93 insertions(+)

diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets
index 7320c4a..7155001 100644
--- a/.vscode/C4.code-snippets
+++ b/.vscode/C4.code-snippets
@@ -59,6 +59,30 @@
 		],
 		"description": "Add Container with Description to C4 diagram"
 	},
+	"C4_Container_Ext": {
+		"scope": "diagram",
+		"prefix": [
+			"External Container",
+			"Container (External)"
+		],
+		"body": [
+			"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")",
+			"$0"
+		],
+		"description": "Add External Container to C4 diagram"
+	},
+	"C4_Container_Ext_Descr": {
+		"scope": "diagram",
+		"prefix": [
+			"External Container with Description",
+			"Container (External) with Description"
+		],
+		"body": [
+			"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")",
+			"$0"
+		],
+		"description": "Add External Container with Description to C4 diagram"
+	},
 	"C4_Container_Boundary": {
 		"scope": "diagram",
 		"prefix": [
@@ -90,6 +114,30 @@
 		],
 		"description": "Add Component with Description to C4 diagram"
 	},
+	"C4_Component_Ext": {
+		"scope": "diagram",
+		"prefix": [
+			"External Component",
+			"Component (External)"
+		],
+		"body": [
+			"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")",
+			"$0"
+		],
+		"description": "Add External Component to C4 diagram"
+	},
+	"C4_Component_Ext_Descr": {
+		"scope": "diagram",
+		"prefix": [
+			"External Component with Description",
+			"Component (External) with Description"
+		],
+		"body": [
+			"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")",
+			"$0"
+		],
+		"description": "Add External Component with Description to C4 diagram"
+	},
 	"C4_System": {
 		"scope": "diagram",
 		"prefix": "System",
diff --git a/C4_Component.puml b/C4_Component.puml
index 542954b..12d14ab 100644
--- a/C4_Component.puml
+++ b/C4_Component.puml
@@ -11,6 +11,7 @@
 ' ##################################
 
 !define COMPONENT_BG_COLOR #85BBF0
+!define EXTERNAL_COMPONENT_BG_COLOR #BBBBBB
 
 ' Styling
 ' ##################################
@@ -29,6 +30,20 @@ skinparam database<<component>> {
     BorderColor #78A8D8
 }
 
+skinparam rectangle<<external_component>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor #000000
+    BackgroundColor EXTERNAL_COMPONENT_BG_COLOR
+    BorderColor #8A8A8A
+}
+
+skinparam database<<external_component>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor #000000
+    BackgroundColor EXTERNAL_COMPONENT_BG_COLOR
+    BorderColor #8A8A8A
+}
+
 ' Layout
 ' ##################################
 
@@ -42,6 +57,8 @@ legend right
 |<EXTERNAL_SYSTEM_BG_COLOR>      | external system |
 |<CONTAINER_BG_COLOR>   | container |
 |<COMPONENT_BG_COLOR>   | component |
+|<EXTERNAL_CONTAINER_BG_COLOR>   | external container |
+|<EXTERNAL_COMPONENT_BG_COLOR>   | external component |
 endlegend
 !enddefinelong
 
@@ -53,3 +70,9 @@ endlegend
 
 !define ComponentDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
 !define ComponentDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
+
+!define Component_Ext(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<external_component>> as e_alias
+!define Component_Ext(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<external_component>> as e_alias
+
+!define ComponentDb_Ext(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<external_component>> as e_alias
+!define ComponentDb_Ext(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<external_component>> as e_alias
diff --git a/C4_Container.puml b/C4_Container.puml
index 2fecf93..906550f 100644
--- a/C4_Container.puml
+++ b/C4_Container.puml
@@ -11,6 +11,7 @@
 ' ##################################
 
 !define CONTAINER_BG_COLOR #438DD5
+!define EXTERNAL_CONTAINER_BG_COLOR #AAAAAA
 
 ' Styling
 ' ##################################
@@ -29,6 +30,20 @@ skinparam database<<container>> {
     BorderColor #3C7FC0
 }
 
+skinparam rectangle<<external_container>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor ELEMENT_FONT_COLOR
+    BackgroundColor EXTERNAL_CONTAINER_BG_COLOR
+    BorderColor #8A8A8A
+}
+
+skinparam database<<external_container>> {
+    StereotypeFontColor ELEMENT_FONT_COLOR
+    FontColor ELEMENT_FONT_COLOR
+    BackgroundColor EXTERNAL_CONTAINER_BG_COLOR
+    BorderColor #8A8A8A
+}
+
 ' Layout
 ' ##################################
 
@@ -41,6 +56,7 @@ legend right
 |<SYSTEM_BG_COLOR>   | system |
 |<EXTERNAL_SYSTEM_BG_COLOR>      | external system |
 |<CONTAINER_BG_COLOR>   | container |
+|<EXTERNAL_CONTAINER_BG_COLOR>   | external container |
 endlegend
 !enddefinelong
 
@@ -53,6 +69,12 @@ endlegend
 !define ContainerDb(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
 !define ContainerDb(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
 
+!define Container_Ext(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<external_container>> as e_alias
+!define Container_Ext(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<external_container>> as e_alias
+
+!define ContainerDb_Ext(e_alias, e_label, e_techn) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<external_container>> as e_alias
+!define ContainerDb_Ext(e_alias, e_label, e_techn, e_descr) database "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<external_container>> as e_alias
+
 ' Boundaries
 ' ##################################