From 636ff1c868ffb7ced95b8339060cbe4314b94aec Mon Sep 17 00:00:00 2001 From: weedySeaDragon Date: Mon, 19 Sep 2022 07:19:25 +0000 Subject: [PATCH 01/25] chore: update browsers list --- yarn.lock | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/yarn.lock b/yarn.lock index d09bf07ad..0d2aeda30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4087,15 +4087,10 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== -caniuse-lite@^1.0.30001359: - version "1.0.30001397" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001397.tgz" - integrity sha512-SW9N2TbCdLf0eiNDRrrQXx2sOkaakNZbCjgNpPyMJJbiOrU5QzMIrXOVMRM1myBXTD5iTkdrtU/EguCrBocHlA== - -caniuse-lite@^1.0.30001400: - version "1.0.30001402" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz#aa29e1f47f5055b0d0c07696a67b8b08023d14c8" - integrity sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew== +caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001400: + version "1.0.30001406" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001406.tgz" + integrity sha512-bWTlaXUy/rq0BBtYShc/jArYfBPjEV95euvZ8JVtO43oQExEN/WquoqpufFjNu4kSpi5cy5kMbNvzztWDfv1Jg== capture-exit@^2.0.0: version "2.0.0" From 43954b950038aba34cc6f418587a0c6a45d41715 Mon Sep 17 00:00:00 2001 From: ashishj Date: Tue, 13 Sep 2022 18:23:24 +0200 Subject: [PATCH 02/25] #3409 Fixed the truncated tags issue --- cypress/platform/gitgraph.html | 25 +++++++++++++++++++++++++ src/diagrams/git/gitGraphRenderer.js | 17 +++-------------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html index da81427f8..d8d16f6c9 100644 --- a/cypress/platform/gitgraph.html +++ b/cypress/platform/gitgraph.html @@ -30,7 +30,31 @@

info below

+ 
+  %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false","rotateCommitLabel":"true"},"themeVariables": {
+              "gitBranchLabel0": "#ff0000",
+              "gitBranchLabel1": "#00ff00",
+              "gitBranchLabel2": "#0000ff",
+              "git0": "#550055"
+       } } }%%
+    gitGraph
+      commit
+       branch develop
+       commit
+       commit
+       branch release/1.0.0
+       checkout release/1.0.0
+       commit tag:"1.0.0-beta1"
+       checkout develop
+       commit
+       commit
+       commit
+       commit
+       checkout release/1.0.0
+       merge develop tag: "1.0.0-beta2"
+
+ 
     %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
               "gitBranchLabel0": "#ff0000",
               "gitBranchLabel1": "#00ff00",
@@ -131,6 +155,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,
+        gitGraph: {rotateCommitLabel: false},
         flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 68905c0d2..2eb723762 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -1,7 +1,6 @@
 import { select } from 'd3';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import { getConfig,setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
-import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let allCommitsDict = {};
@@ -523,18 +522,8 @@ export const draw = function (txt, id, ver, diagObj) {
   drawArrows(diagram, allCommitsDict);
   drawCommits(diagram, allCommitsDict, true);
 
-  const padding = gitGraphConfig.diagramPadding;
-  const svgBounds = diagram.node().getBBox();
-  const width = svgBounds.width + padding * 2;
-  const height = svgBounds.height + padding * 2;
-
-  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-  const vBox = `${
-    svgBounds.x -
-    padding -
-    (gitGraphConfig.showBranches && gitGraphConfig.rotateCommitLabel === true ? 30 : 0)
-  } ${svgBounds.y - padding} ${width} ${height}`;
-  diagram.attr('viewBox', vBox);
+   // Setup the view box and size of the svg element
+    setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth);
 };
 
 export default {

From 51a94e69042ffd0f7751f74dce5f63e34e0995a7 Mon Sep 17 00:00:00 2001
From: ashishj 
Date: Fri, 16 Sep 2022 09:25:22 +0200
Subject: [PATCH 03/25] Fixed Linting issues

---
 cypress/platform/gitgraph.html       | 2 +-
 src/diagrams/git/gitGraphRenderer.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
index d8d16f6c9..0186d6209 100644
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -155,7 +155,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,
-        gitGraph: {rotateCommitLabel: false},
+        gitGraph: { rotateCommitLabel: false },
         flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 2eb723762..e15e43ac3 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { getConfig,setupGraphViewbox } from '../../diagram-api/diagramAPI';
+import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
 import addSVGAccessibilityFields from '../../accessibility';
 
@@ -522,8 +522,8 @@ export const draw = function (txt, id, ver, diagObj) {
   drawArrows(diagram, allCommitsDict);
   drawCommits(diagram, allCommitsDict, true);
 
-   // Setup the view box and size of the svg element
-    setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth);
+  // Setup the view box and size of the svg element
+  setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth);
 };
 
 export default {

From 95d92999bb55a1e62570496771de8919ec6e2fee Mon Sep 17 00:00:00 2001
From: Alois Klink 
Date: Sun, 18 Sep 2022 06:59:44 +0100
Subject: [PATCH 04/25] test(git): add basic parsing test for cherry-pick

Currently, cherry-pick in gitGraphs only has e2e tests,
no parsing unit tests.
---
 src/diagrams/git/gitGraphParserV2.spec.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/diagrams/git/gitGraphParserV2.spec.js b/src/diagrams/git/gitGraphParserV2.spec.js
index b6c9c2459..8db1d6074 100644
--- a/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/src/diagrams/git/gitGraphParserV2.spec.js
@@ -611,6 +611,22 @@ describe('when parsing a gitGraph', function () {
     ]);
   });
 
+  it('should support cherry-picking commits', function () {
+    const str = `gitGraph
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    cherry-pick id:"A"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    const cherryPickCommitID = Object.keys(commits)[2];
+    expect(commits[cherryPickCommitID].tag).toBe('cherry-pick:A');
+    expect(commits[cherryPickCommitID].branch).toBe('main');
+  });
+
   it('should throw error when try to branch existing branch: main', function () {
     const str = `gitGraph
     commit

From 48d94568ce20c9ff4fd894a5d5566729e377eaf3 Mon Sep 17 00:00:00 2001
From: Alois Klink 
Date: Sun, 18 Sep 2022 07:00:55 +0100
Subject: [PATCH 05/25] fix(git): fix cherry-pick regex parsing error

I forgot to escape the `-` character in a regex statement.

Fixes: 152795666932cf92af33635d2f98dcbe93e911ba
---
 src/diagrams/git/parser/gitGraph.jison | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/git/parser/gitGraph.jison b/src/diagrams/git/parser/gitGraph.jison
index f35dbcde3..a7a10912b 100644
--- a/src/diagrams/git/parser/gitGraph.jison
+++ b/src/diagrams/git/parser/gitGraph.jison
@@ -47,7 +47,7 @@ commit(?=\s|$)                          return 'COMMIT';
 branch(?=\s|$)                          return 'BRANCH';
 "order:"                                return 'ORDER';
 merge(?=\s|$)                           return 'MERGE';
-cherry-pick(?=\s|$)                     return 'CHERRY_PICK';
+cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 // "reset"                                 return 'RESET';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';

From 9cb7054ff978e6c88027214b6b3c0fc6cc47748f Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" 
Date: Thu, 22 Sep 2022 11:48:11 -0700
Subject: [PATCH 06/25] add attributes to demo ER diagram so attribute styles
 can be evaluated

---
 demos/er.html | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/demos/er.html b/demos/er.html
index 1e5d4062d..8bd2768f4 100644
--- a/demos/er.html
+++ b/demos/er.html
@@ -15,18 +15,49 @@
 
   
     
-erDiagram
-title This is a title
-accDescription Test a description
-CUSTOMER ||--o{ ORDER : places
-ORDER ||--|{ LINE-ITEM : contains
-CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+      erDiagram
+
+      CUSTOMER ||--o{ ORDER : places
+      ORDER ||--|{ LINE-ITEM : contains
+      ORDER }|..|{ DELIVERY-ADDRESS : uses
+      DELIVERY-ADDRESS }|--|| CUSTOMER : has
+
+      CUSTOMER ||--o{ ORDER : places
+      CUSTOMER {
+          string name
+          string region
+          string custNumber
+          string sector
+      }
+      ORDER ||--|{ LINE-ITEM : contains
+      ORDER {
+          int orderNumber
+          string deliveryAddress
+      }
+      LINE-ITEM {
+          string productCode
+          int quantity
+          float pricePerUnit
+      }
+
+      DELIVERY-ADDRESS {
+      int customerId
+      string addressLine1
+      string addressLine2
+      string city
+      string county
+      string state
+      string region
+      string country
+      string postalCode
+      }
+
     

 
     
+    
+  
+

From d0e9de27445cacb2a241dca1b628a07cc523c355 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" 
Date: Mon, 26 Sep 2022 18:15:29 -0700
Subject: [PATCH 21/25] new page for context charts

---
 demos/c4context.html | 299 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 demos/c4context.html

diff --git a/demos/c4context.html b/demos/c4context.html
new file mode 100644
index 000000000..1485d42d8
--- /dev/null
+++ b/demos/c4context.html
@@ -0,0 +1,299 @@
+
+
+  
+    
+    
+    C4 Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
+    C4Context
+      accTitle: C4 context demo
+      accDescr: Many large C4 diagrams
+
+      title System Context diagram for Internet Banking System
+
+      Enterprise_Boundary(b0, "BankBoundary0") {
+          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", "desc")
+
+          Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          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. next line.")
+            }
+
+            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.")
+              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")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+    

+
+    
+    C4Container
+    title Container diagram for Internet Banking System
+
+    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+    Container_Boundary(c1, "Internet Banking") {
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+
+    }
+
+    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Rel(customer, web_app, "Uses", "HTTPS")
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    Rel(customer, spa, "Uses", "HTTPS")
+    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    Rel(customer, mobile_app, "Uses")
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+
+    Rel(web_app, spa, "Delivers")
+    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+    Rel(email_system, customer, "Sends e-mails to")
+    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
+    

+
+    
+    C4Component
+    title Component diagram for Internet Banking System - API Application
+
+    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
+        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
+        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
+
+        Rel(sign, security, "Uses")
+        Rel(accounts, mbsfacade, "Uses")
+        Rel(security, db, "Read & write to", "JDBC")
+        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
+    }
+
+    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+    Rel(spa, accounts, "Uses", "JSON/HTTPS")
+
+    Rel(ma, sign, "Uses", "JSON/HTTPS")
+    Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+    UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+        UpdateRelStyle(security, db, $offsetY="-40")
+        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+    

+
+    
+    C4Dynamic
+    title Dynamic diagram for Internet Banking System - API Application
+
+    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+    Container_Boundary(b, "API Application") {
+      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+    }
+    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+    Rel(c2, c3, "Calls isAuthenticated() on")
+    Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+    

+
+    
+    C4Deployment
+    title Deployment Diagram for Internet Banking System - Live
+
+    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+    }
+
+    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
 Apple Safari or Microsoft Edge"){
+            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+        }
+    }
+
+    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+            }
+        }
+        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+            }
+        }
+        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+    }
+
+    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+    Rel(spa, api, "Makes API calls to", "json/HTTPS")
+    Rel_U(web, spa, "Delivers to the customer's web browser")
+    Rel(api, db, "Reads from and writes to", "JDBC")
+    Rel(api, db2, "Reads from and writes to", "JDBC")
+    Rel_R(db, db2, "Replicates data to")
+
+    UpdateRelStyle(spa, api, $offsetY="-40")
+    UpdateRelStyle(web, spa, $offsetY="-40")
+    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+    UpdateRelStyle(db, db2, $offsetY="-10")
+     

+
+    

+
+    
+    
+    
+    
+  
+

From 3d0214d45385aea078d053e4729cb33266087d5d Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" 
Date: Mon, 26 Sep 2022 18:16:00 -0700
Subject: [PATCH 22/25] new page for pie charts

---
 demos/pie.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 demos/pie.html

diff --git a/demos/pie.html b/demos/pie.html
new file mode 100644
index 000000000..3232d2534
--- /dev/null
+++ b/demos/pie.html
@@ -0,0 +1,51 @@
+
+
+  
+    
+    
+    Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
+      pie title Pets adopted by volunteers
+      accTitle: simple pie char demo
+      accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+    

+
+    
+    pie
+      title Key elements in Product X
+        accTitle: Key elements in Product X
+      accDescr: This is a pie chart showing the key elements in Product X.
+      "Calcium" : 42.96
+      "Potassium" : 50.05
+      "Magnesium" : 10.01
+      "Iron" :  5
+    

+
+    
+  
+

From 7ed3c21a6d385a07dac35e591d899dd6bf7e5aaa Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" 
Date: Mon, 26 Sep 2022 18:16:36 -0700
Subject: [PATCH 23/25] move charts to their pages; index page just a list to
 them

---
 demos/classchart.html    |  139 ++++-
 demos/dataflowchart.html |    2 +
 demos/er.html            |   15 +-
 demos/flowchart.html     |  409 ++++++++++++++-
 demos/gantt.html         |  163 +++++-
 demos/index.html         | 1030 ++------------------------------------
 demos/journey.html       |   22 +-
 demos/requirements.html  |   79 ++-
 demos/sequence.html      |  143 ++++--
 demos/state.html         |   60 ++-
 10 files changed, 952 insertions(+), 1110 deletions(-)

diff --git a/demos/classchart.html b/demos/classchart.html
index ebc3fe0a5..e15495b95 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -3,7 +3,7 @@
   
     
     
-    Mermaid Quick Test Page
+    Class diagrams Mermaid Quick Test Page
     
     
   
   
-    
-flowchart LR
-  a ---
-    

     
 flowchart LR
-  a2 ---
+  subgraph one
+    direction LR
+    A[myClass1] --> B[default]
+    subgraph two
+      direction BT
+      C[myClass2] --> D[default]
+    end
+  end
+
     

     
 flowchart LR
@@ -79,7 +83,7 @@ flowchart TD
     end
     end
     

-    
+    
 flowchart TD
 
   release-branch[Create Release Branch]:::relClass
@@ -131,7 +135,7 @@ flowchart TD
       class A someclass;
       class C someclass;
     

-    
+    
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -141,14 +145,14 @@ flowchart TD
       John-->>Alice: Great!
       Alice-)John: See you later!
     

-    
+    
 graph TD
     A -->|000| B
     B -->|111| C
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
     

-    
+    
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
@@ -162,10 +166,10 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
     

-    
+    
         info
     

-    
+    
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -206,7 +210,7 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
     

-    
+    
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -238,7 +242,7 @@ gantt
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
     

-    
+    
 stateDiagram
   state Active {
     Idle
@@ -266,7 +270,7 @@ stateDiagram
           end
           B ->> A: Return
     

-    
+    
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -291,7 +295,7 @@ class Class10 {
         A->>Bob: Hola
         Bob-->A: Pasten !
     

-    
+    
       gitGraph
        commit id: "ZERO"
        branch develop
@@ -320,7 +324,7 @@ flowchart TD
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
     

-    
+    
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -343,7 +347,7 @@ flowchart TD
             +run()
           }
     

-    
+    
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
diff --git a/docs/flowchart.md b/docs/flowchart.md
index dedb42a27..2a4265c57 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -679,6 +679,8 @@ flowchart LR
   B1 --> B2
 ```
 
+**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
diff --git a/src/docs/flowchart.md b/src/docs/flowchart.md
index 2678bdb93..4bf80a6c0 100644
--- a/src/docs/flowchart.md
+++ b/src/docs/flowchart.md
@@ -424,6 +424,8 @@ flowchart LR
   B1 --> B2
 ```
 
+**A clarification is in order here.** The direction statement affects the layout of a subgraph but only as long as it does not have any links leading in or out of it. The reason for this is that if you have links in or out then the graph of nodes is not longer the set of nodes in the subgraph but actually the set of nodes of the parent including the ones in the subgraph. One can see it as that the direction of the container gets injected in the subgraph with a link.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

From 6292bebcd35227b086671a4bf0c589ca095ad26b Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 28 Sep 2022 14:15:17 +0200
Subject: [PATCH 25/25] Updated version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bbe4045be..ecc9e2ce4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.2.0-rc1",
+  "version": "9.2.0-rc2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.mjs",
   "module": "dist/mermaid.core.mjs",