Add C4Context diagram. Compatible with C4-PlantUML syntax.

For an example, see the source code demos/index.html

 - System Context
 - Container diagram
 - Component diagram
 - Dynamic diagram
 - Deployment diagram

src/defaultConfig.js

@@ -1098,7 +1098,7 @@ const config = {
      * | --------- | --------------------- | ------- | -------- | ------------------ |
      * | width     | Width of person boxes | Integer | Required | Any Positive Value |
      *
-     * **Notes:** Default value: 215
+     * **Notes:** Default value: 216
      */
     width: 216,
 
@@ -1107,7 +1107,7 @@ const config = {
      * | --------- | ---------------------- | ------- | -------- | ------------------ |
      * | height    | Height of person boxes | Integer | Required | Any Positive Value |
      *
-     * **Notes:** Default value: 65
+     * **Notes:** Default value: 60
      */
     height: 60,
 
@@ -1141,10 +1141,34 @@ const config = {
     personFontFamily: '"Open Sans", sans-serif',
     personFontWeight: 'normal',
 
+    external_personFontSize: 14,
+    external_personFontFamily: '"Open Sans", sans-serif',
+    external_personFontWeight: 'normal',
+
     systemFontSize: 14,
     systemFontFamily: '"Open Sans", sans-serif',
     systemFontWeight: 'normal',
 
+    external_systemFontSize: 14,
+    external_systemFontFamily: '"Open Sans", sans-serif',
+    external_systemFontWeight: 'normal',
+
+    system_dbFontSize: 14,
+    system_dbFontFamily: '"Open Sans", sans-serif',
+    system_dbFontWeight: 'normal',
+
+    external_system_dbFontSize: 14,
+    external_system_dbFontFamily: '"Open Sans", sans-serif',
+    external_system_dbFontWeight: 'normal',
+
+    system_queueFontSize: 14,
+    system_queueFontFamily: '"Open Sans", sans-serif',
+    system_queueFontWeight: 'normal',
+
+    external_system_queueFontSize: 14,
+    external_system_queueFontFamily: '"Open Sans", sans-serif',
+    external_system_queueFontWeight: 'normal',
+
     boundaryFontSize: 14,
     boundaryFontFamily: '"Open Sans", sans-serif',
     boundaryFontWeight: 'normal',
@@ -1153,6 +1177,54 @@ const config = {
     messageFontFamily: '"Open Sans", sans-serif',
     messageFontWeight: 'normal',
 
+    containerFontSize: 14,
+    containerFontFamily: '"Open Sans", sans-serif',
+    containerFontWeight: 'normal',
+
+    external_containerFontSize: 14,
+    external_containerFontFamily: '"Open Sans", sans-serif',
+    external_containerFontWeight: 'normal',
+
+    container_dbFontSize: 14,
+    container_dbFontFamily: '"Open Sans", sans-serif',
+    container_dbFontWeight: 'normal',
+
+    external_container_dbFontSize: 14,
+    external_container_dbFontFamily: '"Open Sans", sans-serif',
+    external_container_dbFontWeight: 'normal',
+
+    container_queueFontSize: 14,
+    container_queueFontFamily: '"Open Sans", sans-serif',
+    container_queueFontWeight: 'normal',
+
+    external_container_queueFontSize: 14,
+    external_container_queueFontFamily: '"Open Sans", sans-serif',
+    external_container_queueFontWeight: 'normal',
+
+    componentFontSize: 14,
+    componentFontFamily: '"Open Sans", sans-serif',
+    componentFontWeight: 'normal',
+
+    external_componentFontSize: 14,
+    external_componentFontFamily: '"Open Sans", sans-serif',
+    external_componentFontWeight: 'normal',
+
+    component_dbFontSize: 14,
+    component_dbFontFamily: '"Open Sans", sans-serif',
+    component_dbFontWeight: 'normal',
+
+    external_component_dbFontSize: 14,
+    external_component_dbFontFamily: '"Open Sans", sans-serif',
+    external_component_dbFontWeight: 'normal',
+
+    component_queueFontSize: 14,
+    component_queueFontFamily: '"Open Sans", sans-serif',
+    component_queueFontWeight: 'normal',
+
+    external_component_queueFontSize: 14,
+    external_component_queueFontFamily: '"Open Sans", sans-serif',
+    external_component_queueFontWeight: 'normal',
+
     /**
      * This sets the auto-wrap state for the diagram
      *
@@ -1175,6 +1247,14 @@ const config = {
       };
     },
 
+    external_personFont: function () {
+      return {
+        fontFamily: this.external_personFontFamily,
+        fontSize: this.external_personFontSize,
+        fontWeight: this.external_personFontWeight,
+      };
+    },
+
     systemFont: function () {
       return {
         fontFamily: this.systemFontFamily,
@@ -1183,6 +1263,142 @@ const config = {
       };
     },
 
+    external_systemFont: function () {
+      return {
+        fontFamily: this.external_systemFontFamily,
+        fontSize: this.external_systemFontSize,
+        fontWeight: this.external_systemFontWeight,
+      };
+    },
+
+    system_dbFont: function () {
+      return {
+        fontFamily: this.system_dbFontFamily,
+        fontSize: this.system_dbFontSize,
+        fontWeight: this.system_dbFontWeight,
+      };
+    },
+
+    external_system_dbFont: function () {
+      return {
+        fontFamily: this.external_system_dbFontFamily,
+        fontSize: this.external_system_dbFontSize,
+        fontWeight: this.external_system_dbFontWeight,
+      };
+    },
+
+    system_queueFont: function () {
+      return {
+        fontFamily: this.system_queueFontFamily,
+        fontSize: this.system_queueFontSize,
+        fontWeight: this.system_queueFontWeight,
+      };
+    },
+
+    external_system_queueFont: function () {
+      return {
+        fontFamily: this.external_system_queueFontFamily,
+        fontSize: this.external_system_queueFontSize,
+        fontWeight: this.external_system_queueFontWeight,
+      };
+    },
+
+    containerFont: function () {
+      return {
+        fontFamily: this.containerFontFamily,
+        fontSize: this.containerFontSize,
+        fontWeight: this.containerFontWeight,
+      };
+    },
+
+    external_containerFont: function () {
+      return {
+        fontFamily: this.external_containerFontFamily,
+        fontSize: this.external_containerFontSize,
+        fontWeight: this.external_containerFontWeight,
+      };
+    },
+
+    container_dbFont: function () {
+      return {
+        fontFamily: this.container_dbFontFamily,
+        fontSize: this.container_dbFontSize,
+        fontWeight: this.container_dbFontWeight,
+      };
+    },
+
+    external_container_dbFont: function () {
+      return {
+        fontFamily: this.external_container_dbFontFamily,
+        fontSize: this.external_container_dbFontSize,
+        fontWeight: this.external_container_dbFontWeight,
+      };
+    },
+
+    container_queueFont: function () {
+      return {
+        fontFamily: this.container_queueFontFamily,
+        fontSize: this.container_queueFontSize,
+        fontWeight: this.container_queueFontWeight,
+      };
+    },
+
+    external_container_queueFont: function () {
+      return {
+        fontFamily: this.external_container_queueFontFamily,
+        fontSize: this.external_container_queueFontSize,
+        fontWeight: this.external_container_queueFontWeight,
+      };
+    },
+
+    componentFont: function () {
+      return {
+        fontFamily: this.componentFontFamily,
+        fontSize: this.componentFontSize,
+        fontWeight: this.componentFontWeight,
+      };
+    },
+
+    external_componentFont: function () {
+      return {
+        fontFamily: this.external_componentFontFamily,
+        fontSize: this.external_componentFontSize,
+        fontWeight: this.external_componentFontWeight,
+      };
+    },
+
+    component_dbFont: function () {
+      return {
+        fontFamily: this.component_dbFontFamily,
+        fontSize: this.component_dbFontSize,
+        fontWeight: this.component_dbFontWeight,
+      };
+    },
+
+    external_component_dbFont: function () {
+      return {
+        fontFamily: this.external_component_dbFontFamily,
+        fontSize: this.external_component_dbFontSize,
+        fontWeight: this.external_component_dbFontWeight,
+      };
+    },
+
+    component_queueFont: function () {
+      return {
+        fontFamily: this.component_queueFontFamily,
+        fontSize: this.component_queueFontSize,
+        fontWeight: this.component_queueFontWeight,
+      };
+    },
+
+    external_component_queueFont: function () {
+      return {
+        fontFamily: this.external_component_queueFontFamily,
+        fontSize: this.external_component_queueFontSize,
+        fontWeight: this.external_component_queueFontWeight,
+      };
+    },
+
     boundaryFont: function () {
       return {
         fontFamily: this.boundaryFontFamily,
@@ -1217,6 +1433,30 @@ const config = {
     external_system_db_border_color: '#8A8A8A',
     external_system_queue_bg_color: '#999999',
     external_system_queue_border_color: '#8A8A8A',
+    container_bg_color: '#438DD5',
+    container_border_color: '#3C7FC0',
+    container_db_bg_color: '#438DD5',
+    container_db_border_color: '#3C7FC0',
+    container_queue_bg_color: '#438DD5',
+    container_queue_border_color: '#3C7FC0',
+    external_container_bg_color: '#B3B3B3',
+    external_container_border_color: '#A6A6A6',
+    external_container_db_bg_color: '#B3B3B3',
+    external_container_db_border_color: '#A6A6A6',
+    external_container_queue_bg_color: '#B3B3B3',
+    external_container_queue_border_color: '#A6A6A6',
+    component_bg_color: '#85BBF0',
+    component_border_color: '#78A8D8',
+    component_db_bg_color: '#85BBF0',
+    component_db_border_color: '#78A8D8',
+    component_queue_bg_color: '#85BBF0',
+    component_queue_border_color: '#78A8D8',
+    external_component_bg_color: '#CCCCCC',
+    external_component_border_color: '#BFBFBF',
+    external_component_db_bg_color: '#CCCCCC',
+    external_component_db_border_color: '#BFBFBF',
+    external_component_queue_bg_color: '#CCCCCC',
+    external_component_queue_border_color: '#BFBFBF',
   },
 };