Add C4Context diagram. Compatible with C4-PlantUML syntax.

```
    C4Context
      title System Context diagram for Internet Banking System

      Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
      Person(customerB, "Banking Customer B")
      Person_Ext(customerC, "Banking Customer C")
      System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

      Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

      Enterprise_Boundary(b1, "BankBoundary") {

        SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

        System_Boundary(b2, "BankBoundary2") {
          System(SystemA, "Banking System A")
          System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
        }

        System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
        SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

        Boundary(b3, "BankBoundary3", "boundary") {
          SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
          SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")
```

src/themes/c4.scss

@@ -0,0 +1,4 @@
+.person {
+  stroke: $personBorder;
+  fill: $personBkg;
+}

src/themes/default/index.scss

@@ -56,6 +56,11 @@ $critBorderColor: #ff8888;
 $critBkgColor: red;
 $todayLineColor: red;
 
+/* C4 Context Diagram variables */
+
+$personBorder: $border1;
+$personBkg: $mainBkg;
+
 /* state colors */
 $labelColor: black;
 

src/themes/theme-base.js

@@ -113,6 +113,11 @@ class Theme {
     this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
     this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
 
+    /* Sequence Diagram variables */
+
+    this.personBorder = this.personBorder || this.primaryBorderColor;
+    this.personBkg = this.personBkg || this.mainBkg;
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;

src/themes/theme-dark.js

@@ -78,6 +78,11 @@ class Theme {
     this.taskTextDarkColor = 'calculated';
     this.todayLineColor = '#DB5757';
 
+    /* C4 Context Diagram variables */
+
+    this.personBorder = 'calculated';
+    this.personBkg = 'calculated';
+
     /* state colors */
     this.labelColor = 'calculated';
 

src/themes/theme-default.js

@@ -103,6 +103,11 @@ class Theme {
     this.critBkgColor = 'red';
     this.todayLineColor = 'red';
 
+    /* C4 Context Diagram variables */
+
+    this.personBorder = 'calculated';
+    this.personBkg = 'calculated';
+
     /* state colors */
     this.labelColor = 'black';
     this.errorBkgColor = '#552222';

src/themes/theme-forest.js

@@ -76,6 +76,11 @@ class Theme {
     this.critBkgColor = 'red';
     this.todayLineColor = 'red';
 
+    /* C4 Context Diagram variables */
+
+    this.personBorder = 'calculated';
+    this.personBkg = 'calculated';
+
     /* state colors */
     this.labelColor = 'black';
 

src/themes/theme-neutral.js

@@ -89,6 +89,11 @@ class Theme {
     this.critBorderColor = 'calculated';
     this.todayLineColor = 'calculated';
 
+    /* C4 Context Diagram variables */
+
+    this.personBorder = 'calculated';
+    this.personBkg = 'calculated';
+
     /* state colors */
     this.labelColor = 'black';