Merge remote-tracking branch 'MERMAID/develop' into chore/3922_doc-diagram-only

.github/workflows/link-checker.yml

@@ -13,11 +13,10 @@ on:
       - master
   pull_request:
     branches:
-      - develop
       - master
   schedule:
     # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * 5'
+    - cron: '30 8 * * *'
 
 jobs:
   linkChecker:

cypress/integration/rendering/c4.spec.js

@@ -0,0 +1,122 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('C4 diagram', () => {
+  it('should render a simple C4Context diagram', () => {
+    imgSnapshotTest(
+      `
+      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.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          Enterprise_Boundary(b1, "BankBoundary") {
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          }
+        }
+
+      BiRel(customerA, SystemAA, "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(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Container diagram', () => {
+    imgSnapshotTest(
+      `
+      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")
+      }
+
+      Rel(customer, spa, "Uses", "HTTPS")
+      Rel(email_system, customer, "Sends e-mails to")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Component diagram', () => {
+    imgSnapshotTest(
+      `
+      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_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+      }
+
+      Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+      UpdateRelStyle(spa, sign, $offsetY="-40")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Dynamic diagram', () => {
+    imgSnapshotTest(
+      `
+      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")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Deployment diagram', () => {
+    imgSnapshotTest(
+      `
+      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(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.")
+              }
+          }
+      }
+
+      Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

packages/mermaid/src/diagrams/c4/svgDraw.js

@@ -371,12 +371,12 @@ export const drawC4Shape = function (elem, c4Shape, conf) {
   textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
   textFontConf.fontColor = fontColor;
 
-  if (c4Shape.thchn && c4Shape.thchn.text !== '') {
+  if (c4Shape.techn && c4Shape.techn?.text !== '') {
     _drawTextCandidateFunc(conf)(
-      c4Shape.thchn.text,
+      c4Shape.techn.text,
       c4ShapeElem,
       c4Shape.x,
-      c4Shape.y + c4Shape.thchn.Y,
+      c4Shape.y + c4Shape.techn.Y,
       c4Shape.width,
       c4Shape.height,
       { fill: fontColor, 'font-style': 'italic' },

packages/mermaid/src/docs/index.md

@@ -21,13 +21,17 @@ hero:
 
 features:
   - title: ➕ Easy to use!
-    details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
+    details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
+    link: https://mermaid.live/
   - title: 🎥 Video Tutorials!
-    details: Has video tutorials for beginners and advanced users.
+    details: Curated list of video tutorials and examples created by the community.
-  - title: 🏆 Award winner!
+    link: ../../config/Tutorials.html
-    details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
   - title: 🧩 Integrations available!
-    details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
+    details: Use Mermaid with your favorite applications, check out the integrations list.
+    link: ../../misc/integrations.md
+  - title: 🏆 Award winning!
+    details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
+    link: https://osawards.com/javascript/2019
 ---
 
 <script setup>
@@ -159,7 +163,7 @@ const members = [
     margin: 1rem auto;
     max-width: 100%;
     width: 100%;
-  }
+}
 
   .dark .image-src{
     filter: invert(1) hue-rotate(217deg)  contrast(0.72);
@@ -170,7 +174,7 @@ const members = [
     align-items: center;
     flex-direction: column;
     display: flex;
-    margin-top: 2.5rem;
+    margin: 1.5rem;
   }
 
   .vp-doc h2 {