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")
```

demos/index.html

@@ -20,6 +20,44 @@
  </div>
 
  <hr />
+ <div class="mermaid">
+ 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")
+ </div>
+
+ <hr />
+
  <div class="mermaid">
  pie
  title Key elements in Product X

src/Diagram.js

@@ -1,3 +1,6 @@
+import c4Db from './diagrams/c4/c4Db';
+import c4Renderer from './diagrams/c4/c4Renderer';
+import c4Parser from './diagrams/c4/parser/c4Diagram';
 import classDb from './diagrams/class/classDb';
 import classRenderer from './diagrams/class/classRenderer';
 import classRendererV2 from './diagrams/class/classRenderer-v2';
@@ -48,7 +51,13 @@ class Diagram {
  this.txt = txt;
  this.type = utils.detectType(txt, cnf);
  log.debug('Type ' + this.type);
- switch (this.type) {
+ switch (this.type) { 
+ case 'c4':
+ this.parser = c4Parser;
+ this.parser.parser.yy = c4Db;
+ this.db = c4Db;
+ this.renderer = c4Renderer;
+ break; 
  case 'gitGraph':
  this.parser = gitGraphParser;
  this.parser.parser.yy = gitGraphAst;

src/defaultConfig.js

@@ -1059,6 +1059,166 @@ const config = {
  showCommitLabel: true,
  showBranches: true,
  },
+
+ /** The object containing configurations specific for c4 diagrams */
+ c4: {
+ useWidth: undefined,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
+ * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 50
+ */
+ diagramMarginX: 50,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
+ * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 10
+ */
+ diagramMarginY: 10,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | ----------- | --------------------- | ------- | -------- | ------------------ |
+ * | actorMargin | Margin between persons | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 50
+ */
+ c4ShapeMargin: 50,
+
+ c4ShapePadding: 20,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | --------- | -------------------- | ------- | -------- | ------------------ |
+ * | width | Width of person boxes | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 215
+ */
+ width: 216,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | --------- | --------------------- | ------- | -------- | ------------------ |
+ * | height | Height of person boxes | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 65
+ */
+ height: 60,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | --------- | ------------------------ | ------- | -------- | ------------------ |
+ * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 10
+ */
+ boxMargin: 10,
+
+ /**
+ * | Parameter | Description | Type | Required | Values |
+ * | ----------- | ----------- | ------- | -------- | ----------- |
+ * | useMaxWidth | See Notes | boolean | Required | true, false |
+ *
+ * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
+ * scaling with the available space. If set to false, the absolute space required is used.
+ *
+ * Default value: true
+ */
+ useMaxWidth: true,
+
+ c4ShapeInRow: 4,
+ nextLinePaddingX: 0,
+
+ c4BoundaryInRow: 2,
+
+
+ personFontSize: 14,
+ personFontFamily: '"Open Sans", sans-serif',
+ personFontWeight: "normal",
+
+ systemFontSize: 14,
+ systemFontFamily: '"Open Sans", sans-serif',
+ systemFontWeight: "normal",
+
+ boundaryFontSize: 14,
+ boundaryFontFamily: '"Open Sans", sans-serif',
+ boundaryFontWeight: "normal",
+
+ messageFontSize: 12,
+ messageFontFamily: '"Open Sans", sans-serif',
+ messageFontWeight: "normal",
+
+ /**
+ * This sets the auto-wrap state for the diagram
+ *
+ * **Notes:** Default value: true.
+ */
+ wrap: true,
+
+ /**
+ * This sets the auto-wrap padding for the diagram (sides only)
+ *
+ * **Notes:** Default value: 0.
+ */
+ wrapPadding: 10,
+
+ personFont: function () {
+ return {
+ fontFamily: this.personFontFamily,
+ fontSize: this.personFontSize,
+ fontWeight: this.personFontWeight,
+ };
+ },
+
+ systemFont: function () {
+ return {
+ fontFamily: this.systemFontFamily,
+ fontSize: this.systemFontSize,
+ fontWeight: this.systemFontWeight,
+ };
+ },
+
+ boundaryFont: function () {
+ return {
+ fontFamily: this.boundaryFontFamily,
+ fontSize: this.boundaryFontSize,
+ fontWeight: this.boundaryFontWeight,
+ };
+ },
+
+ messageFont: function () {
+ return {
+ fontFamily: this.messageFontFamily,
+ fontSize: this.messageFontSize,
+ fontWeight: this.messageFontWeight,
+ };
+ },
+
+ // ' Colors
+ // ' ##################################
+ person_bg_color: "#08427B",
+ person_border_color: "#073B6F",
+ external_person_bg_color: "#686868",
+ external_person_border_color: "#8A8A8A",
+ system_bg_color: "#1168BD",
+ system_border_color: "#3C7FC0",
+ system_db_bg_color: "#1168BD",
+ system_db_border_color: "#3C7FC0",
+ system_queue_bg_color: "#1168BD",
+ system_queue_border_color: "#3C7FC0",
+ external_system_bg_color: "#999999",
+ external_system_border_color: "#8A8A8A",
+ external_system_db_bg_color: "#999999",
+ external_system_db_border_color: "#8A8A8A",
+ external_system_queue_bg_color: "#999999",
+ external_system_queue_border_color: "#8A8A8A",
+ }, 
 };
 
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;