Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage

cypress/integration/rendering/architecture.spec.ts

@@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => {
             `
     );
   });
+  it('should render a simple architecture diagram with titleAndAccessabilities', () => {
+    imgSnapshotTest(
+      `architecture-beta
+          title Simple Architecture Diagram
+          accTitle: Accessibility Title
+          accDescr: Accessibility Description
+          group api(cloud)[API]
+
+          service db(database)[Database] in api
+          service disk1(disk)[Storage] in api
+          service disk2(disk)[Storage] in api
+          service server(server)[Server] in api
+
+          db:L -- R:server
+          disk1:T -- B:server
+          disk2:T -- B:db
+      `
+    );
+  });
   it('should render an architecture diagram with groups within groups', () => {
     imgSnapshotTest(
       `architecture-beta
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
     );
   });
 
-  it('should render an architecture diagram with a resonable height', () => {
+  it('should render an architecture diagram with a reasonable height', () => {
     imgSnapshotTest(
       `architecture-beta
               group federated(cloud)[Federated Environment]

cypress/integration/rendering/erDiagram-unified.spec.js

@@ -0,0 +1,652 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+const testOptions = [
+  { description: '', options: { logLevel: 1 } },
+  { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
+  { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
+];
+
+describe('Entity Relationship Diagram Unified', () => {
+  testOptions.forEach(({ description, options }) => {
+    it(`${description}should render a simple ER diagram`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER ||--o{ ORDER : places
+          ORDER ||--|{ LINE-ITEM : contains
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a simple ER diagram without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER ||--o{ ORDER : places
+          ORDER ||--|{ LINE-ITEM : contains
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render an ER diagram with a recursive relationship`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER ||..o{ CUSTOMER : refers
+          CUSTOMER ||--o{ ORDER : places
+          ORDER ||--|{ LINE-ITEM : contains
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with multiple relationships between the same two entities`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER ||--|{ ADDRESS : "invoiced at"
+          CUSTOMER ||--|{ ADDRESS : "receives goods at"
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a cyclical ER diagram`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          A ||--|{ B : likes
+          B ||--|{ C : likes
+          C ||--|{ A : likes
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a not-so-simple ER diagram`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a not-so-simple ER diagram without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render multiple ER diagrams`, () => {
+      imgSnapshotTest(
+        [
+          `
+      erDiagram
+          CUSTOMER ||--o{ ORDER : places
+          ORDER ||--|{ LINE-ITEM : contains
+        `,
+          `
+      erDiagram
+          CUSTOMER ||--o{ ORDER : places
+          ORDER ||--|{ LINE-ITEM : contains
+        `,
+        ],
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with blank or empty labels`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          BOOK }|..|{ AUTHOR : ""
+          BOOK }|..|{ GENRE : " "
+          AUTHOR }|..|{ GENRE : "  "
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities that have no relationships`, () => {
+      renderGraph(
+        `
+      erDiagram
+          DEAD_PARROT
+          HERMIT
+          RECLUSE
+          SOCIALITE }o--o{ SOCIALITE : "interacts with"
+          RECLUSE }o--o{ SOCIALITE : avoids
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with and without attributes`, () => {
+      renderGraph(
+        `
+      erDiagram
+          BOOK { string title }
+          AUTHOR }|..|{ BOOK : writes
+          BOOK { float price }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with generic and array attributes`, () => {
+      renderGraph(
+        `
+      erDiagram
+          BOOK {
+            string title
+            string[] authors
+            type~T~ type
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with generic and array attributes without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+          BOOK {
+            string title
+            string[] authors
+            type~T~ type
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with length in attributes type`, () => {
+      renderGraph(
+        `
+      erDiagram
+          CLUSTER {
+            varchar(99) name
+            string(255) description
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with length in attributes type without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+          CLUSTER {
+            varchar(99) name
+            string(255) description
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities and attributes with big and small entity names`, () => {
+      renderGraph(
+        `
+      erDiagram
+          PRIVATE_FINANCIAL_INSTITUTION {
+            string name
+            int    turnover
+          }
+          PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+          EMPLOYEE { bool officer_of_firm }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities and attributes with big and small entity names without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+          PRIVATE_FINANCIAL_INSTITUTION {
+            string name
+            int    turnover
+          }
+          PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+          EMPLOYEE { bool officer_of_firm }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with attributes that begin with asterisk`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          BOOK {
+            int         *id
+            string      name
+            varchar(99) summary
+          }
+          BOOK }o..o{ STORE : soldBy
+          STORE {
+            int         *id
+            string      name
+            varchar(50) address
+          }
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with attributes that begin with asterisk without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          BOOK {
+            int         *id
+            string      name
+            varchar(99) summary
+          }
+          BOOK }o..o{ STORE : soldBy
+          STORE {
+            int         *id
+            string      name
+            varchar(50) address
+          }
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with keys`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name PK
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            float price
+            string author FK
+            string title PK
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with keys without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name PK
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            float price
+            string author FK
+            string title PK
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with comments`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name "comment"
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            string author
+            string title "author comment"
+            float price "price comment"
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with comments without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name "comment"
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            string author
+            string title "author comment"
+            float price "price comment"
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with keys and comments`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name PK "comment"
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            string description
+            float price "price comment"
+            string title PK "title comment"
+            string author FK
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with keys and comments without htmlLabels`, () => {
+      renderGraph(
+        `
+      erDiagram
+        AUTHOR_WITH_LONG_ENTITY_NAME {
+          string name PK "comment"
+        }
+        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+        BOOK {
+            string description
+            float price "price comment"
+            string title PK "title comment"
+            string author FK
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with aliases`, () => {
+      renderGraph(
+        `
+      erDiagram
+        T1 one or zero to one or more T2 : test
+        T2 one or many optionally to zero or one T3 : test
+        T3 zero or more to zero or many T4 : test
+        T4 many(0) to many(1) T5 : test
+        T5 many optionally to one T6 : test
+        T6 only one optionally to only one T1 : test
+        T4 0+ to 1+ T6 : test
+        T1 1 to 1 T3 : test
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a simple ER diagram with a title`, () => {
+      imgSnapshotTest(
+        `---
+  title: simple ER diagram
+  ---
+  erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE-ITEM : contains
+  `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with entity name aliases`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+        p[Person] {
+          varchar(64) firstName
+          varchar(64) lastName
+        }
+        c["Customer Account"] {
+          varchar(128) email
+        }
+        p ||--o| c : has
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render relationship labels with line breaks`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+        p[Person] {
+            string firstName
+            string lastName
+        }
+        a["Customer Account"] {
+            string email
+        }
+  
+        b["Customer Account Secondary"] {
+          string email
+        }
+        
+        c["Customer Account Tertiary"] {
+          string email
+        }
+        
+        d["Customer Account Nth"] {
+          string email
+        }
+  
+        p ||--o| a : "has<br />one"
+        p ||--o| b : "has<br />one<br />two"
+        p ||--o| c : "has<br />one<br/>two<br />three"
+        p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with unicode text`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          _**testẽζ➕Ø😀㌕ぼ**_ {
+              *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+              *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
+              string last*Name*
+              string __phone__ UK
+              int _age_
+          }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with unicode text without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+      erDiagram
+          _**testẽζ➕Ø😀㌕ぼ**_ {
+              *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+              *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
+              string last*Name*
+              string __phone__ UK
+              int _age_
+          }
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render an ER diagram with relationships with unicode text`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+            person[😀] {
+                string *first*Name
+                string _**last**Name_
+            }
+            a["*Customer Account*"] {
+                **string** ema*i*l
+            }
+            person ||--o| a : __hẽ😀__
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with relationships with unicode text without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+            person[😀] {
+                string *first*Name
+                string _**last**Name_
+            }
+            a["*Customer Account*"] {
+                **string** ema*i*l
+            }
+            person ||--o| a : __hẽ😀__
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render an ER diagram with TB direction`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+          direction TB
+          CAR ||--|{ NAMED-DRIVER : allows
+          PERSON ||..o{ NAMED-DRIVER : is
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with BT direction`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+          direction BT
+          CAR ||--|{ NAMED-DRIVER : allows
+          PERSON ||..o{ NAMED-DRIVER : is
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with LR direction`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+          direction LR
+          CAR ||--|{ NAMED-DRIVER : allows
+          PERSON ||..o{ NAMED-DRIVER : is
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render an ER diagram with RL direction`, () => {
+      imgSnapshotTest(
+        `
+          erDiagram
+          direction RL
+          CAR ||--|{ NAMED-DRIVER : allows
+          PERSON ||..o{ NAMED-DRIVER : is
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with styles applied from style statement`, () => {
+      imgSnapshotTest(
+        `
+            erDiagram
+              c[CUSTOMER]
+              p[PERSON]
+              style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with styles applied from style statement without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+            erDiagram
+              c[CUSTOMER]
+              p[PERSON]
+              style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with styles applied from class statement`, () => {
+      imgSnapshotTest(
+        `
+            erDiagram
+              c[CUSTOMER]
+              p[PERSON]:::blue
+              classDef bold font-size:24px, font-weight: bold
+              classDef blue stroke:lightblue, color: #0000FF
+              class c,p bold
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render entities with styles applied from class statement without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+            erDiagram
+              c[CUSTOMER]
+              p[PERSON]:::blue
+              classDef bold font-size:24px, font-weight: bold
+              classDef blue stroke:lightblue, color: #0000FF
+              class c,p bold
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render entities with styles applied from the default class and other styles`, () => {
+      imgSnapshotTest(
+        `
+            erDiagram
+              c[CUSTOMER]
+              p[PERSON]:::blue
+              classDef blue stroke:lightblue, color: #0000FF
+              classDef default fill:pink
+              style c color:green
+        `,
+        { ...options }
+      );
+    });
+  });
+});

cypress/integration/rendering/erDiagram.spec.js

@@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
+      // use within because the absolute value can be slightly different depending on the environment ±6%
+      expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06);
     });
   });
 
@@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(width).to.be.within(140 * 0.95, 140 * 1.05);
+      // use within because the absolute value can be slightly different depending on the environment ±6%
+      expect(width).to.be.within(140 * 0.96, 140 * 1.06);
       // expect(svg).to.have.attr('height', '465');
       expect(svg).to.not.have.attr('style');
     });

cypress/integration/rendering/flowchart.spec.js

@@ -895,7 +895,7 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
         hello --> default
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -917,4 +917,21 @@ graph TD
       }
     );
   });
+  it('#6369: edge color should affect arrow head', () => {
+    imgSnapshotTest(
+      `
+    flowchart LR
+        A --> B
+        A --> C
+        C --> D
+
+        linkStyle 0 stroke:#D50000
+        linkStyle 2 stroke:#D50000
+    `,
+      {
+        flowchart: { htmlLabels: true },
+        securityLevel: 'loose',
+      }
+    );
+  });
 });

cypress/integration/rendering/journey.spec.js

@@ -63,4 +63,165 @@ section Checkout from website
       { journey: { useMaxWidth: false } }
     );
   });
+
+  it('should initialize with a left margin of 150px for user journeys', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 320
+      ---
+      journey
+        title User Journey Example
+        section Onboarding
+            Sign Up: 5:
+            Browse Features: 3:
+            Use Core Functionality: 4:
+        section Engagement
+            Browse Features: 3
+            Use Core Functionality: 4
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let diagramStartX;
+
+    cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
+      diagramStartX = parseFloat($diagram.attr('x'));
+      expect(diagramStartX).to.be.closeTo(150, 2);
+    });
+  });
+
+  it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
+    renderGraph(
+      `journey
+      title  Web hook life cycle
+      section Darkoob
+        Make preBuilt:5: Darkoob user
+        register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is  maintained
+        Map slug to a Prebuilt Job:5: Darkoob user
+      section External Service
+        set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
+        listen to the events : 5 :  External Service
+        call darkoob endpoint : 5 : External Service
+      section Darkoob
+        check for inputs : 5 : DarkoobAPI
+        run the prebuilt job : 5 : DarkoobAPI
+        `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let LabelEndX, diagramStartX;
+
+    // Get right edge of the legend
+    cy.contains('tspan', 'Darkoob userf').then((textBox) => {
+      const bbox = textBox[0].getBBox();
+      LabelEndX = bbox.x + bbox.width;
+    });
+
+    // Get left edge of the diagram
+    cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
+      diagramStartX = parseFloat(rect.attr('x'));
+    });
+
+    // Assert right edge of the diagram is greater than or equal to the right edge of the label
+    cy.then(() => {
+      expect(diagramStartX).to.be.gte(LabelEndX);
+    });
+  });
+
+  it('should wrap a single long word with hyphenation', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 100
+      ---
+      journey
+        title Long Word Test
+        section Test
+          VeryLongWord: 5: Supercalifragilisticexpialidocious
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
+    cy.get('tspan').then((tspans) => {
+      const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
+      return expect(hasHyphen).to.be.true;
+    });
+  });
+
+  it('should wrap text on whitespace without adding hyphens', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 200
+      ---
+      journey
+        title Whitespace Test
+        section Test
+          TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    // Verify that none of the text spans end with a hyphen.
+    cy.get('tspan').each(($el) => {
+      const text = $el.text();
+      expect(text.trim()).not.to.match(/-$/);
+    });
+  });
+
+  it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 320
+      ---
+      journey
+        title User Journey Example
+        section Onboarding
+            Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
+            Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
+            Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
+        section Engagement
+            Browse Features: 3
+            Use Core Functionality: 4
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let diagramStartX, maxLineWidth;
+
+    // Get the diagram's left edge x-coordinate
+    cy.contains('foreignobject', 'Sign Up')
+      .then(($diagram) => {
+        diagramStartX = parseFloat($diagram.attr('x'));
+      })
+      .then(() => {
+        cy.get('text.legend').then(($lines) => {
+          // Check that there are multiple lines
+          expect($lines.length).to.be.equal(9);
+
+          // Check that all lines are under the maxLabelWidth
+          $lines.each((index, el) => {
+            const bbox = el.getBBox();
+            expect(bbox.width).to.be.lte(320);
+            maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
+          });
+
+          /** The expected margin between the diagram and the legend is 150px, as defined by
+           *  conf.leftMargin in user-journey-config.js
+           */
+          expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
+        });
+      });
+  });
 });

cypress/integration/rendering/radar.spec.js

@@ -0,0 +1,79 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('radar structure', () => {
+  it('should render a simple radar diagram', () => {
+    imgSnapshotTest(
+      `radar-beta
+                title Best Radar Ever
+                axis A, B, C
+                curve c1{1, 2, 3}
+            `
+    );
+  });
+
+  it('should render a radar diagram with multiple curves', () => {
+    imgSnapshotTest(
+      `radar-beta
+                title Best Radar Ever
+                axis A, B, C
+                curve c1{1, 2, 3}
+                curve c2{2, 3, 1}
+            `
+    );
+  });
+
+  it('should render a complex radar diagram', () => {
+    imgSnapshotTest(
+      `radar-beta 
+                title My favorite ninjas
+                axis Agility, Speed, Strength
+                axis Stam["Stamina"] , Intel["Intelligence"]
+
+                curve Ninja1["Naruto Uzumaki"]{
+                    Agility 2, Speed 2,
+                    Strength 3, Stam 5,
+                    Intel 0
+                }
+                curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
+                curve Ninja3 {3, 2, 1, 5, 4}
+
+                showLegend true
+                ticks 3
+                max 8
+                min 0
+                graticule polygon
+            `
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.length(1);
+    });
+  });
+
+  it('should render radar diagram with config override', () => {
+    imgSnapshotTest(
+      `radar-beta
+                title Best Radar Ever
+                axis A,B,C
+                curve mycurve{1,2,3}`,
+      { radar: { marginTop: 100, axisScaleFactor: 0.5 } }
+    );
+  });
+
+  it('should parse radar diagram with theme override', () => {
+    imgSnapshotTest(
+      `radar-beta
+                axis A,B,C
+                curve mycurve{1,2,3}`,
+      { theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } }
+    );
+  });
+
+  it('should handle radar diagram with radar style override', () => {
+    imgSnapshotTest(
+      `radar-beta
+                axis A,B,C
+                curve mycurve{1,2,3}`,
+      { theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } }
+    );
+  });
+});

cypress/integration/rendering/requirementDiagram-unified.spec.js

@@ -0,0 +1,703 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+const testOptions = [
+  { description: '', options: { logLevel: 1 } },
+  { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
+  { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
+];
+
+describe('Requirement Diagram Unified', () => {
+  testOptions.forEach(({ description, options }) => {
+    it(`${description}should render a simple Requirement diagram`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        test_entity - satisfies -> test_req
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a simple Requirement diagram without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        test_entity - satisfies -> test_req
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render a not-so-simple Requirement diagram`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        functionalRequirement test_req2 {
+        id: 1.1
+        text: the second test text.
+        risk: low
+        verifymethod: inspection
+        }
+
+        performanceRequirement test_req3 {
+        id: 1.2
+        text: the third test text.
+        risk: medium
+        verifymethod: demonstration
+        }
+
+        interfaceRequirement test_req4 {
+        id: 1.2.1
+        text: the fourth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        physicalRequirement test_req5 {
+        id: 1.2.2
+        text: the fifth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        designConstraint test_req6 {
+        id: 1.2.3
+        text: the sixth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        element test_entity2 {
+        type: word doc
+        docRef: reqs/test_entity
+        }
+
+        element test_entity3 {
+        type: "test suite"
+        docRef: github.com/all_the_tests
+        }
+
+
+        test_entity - satisfies -> test_req2
+        test_req - traces -> test_req2
+        test_req - contains -> test_req3
+        test_req3 - contains -> test_req4
+        test_req4 - derives -> test_req5
+        test_req5 - refines -> test_req6
+        test_entity3 - verifies -> test_req5
+        test_req <- copies - test_entity2
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a not-so-simple Requirement diagram without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        functionalRequirement test_req2 {
+        id: 1.1
+        text: the second test text.
+        risk: low
+        verifymethod: inspection
+        }
+
+        performanceRequirement test_req3 {
+        id: 1.2
+        text: the third test text.
+        risk: medium
+        verifymethod: demonstration
+        }
+
+        interfaceRequirement test_req4 {
+        id: 1.2.1
+        text: the fourth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        physicalRequirement test_req5 {
+        id: 1.2.2
+        text: the fifth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        designConstraint test_req6 {
+        id: 1.2.3
+        text: the sixth test text.
+        risk: medium
+        verifymethod: analysis
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        element test_entity2 {
+        type: word doc
+        docRef: reqs/test_entity
+        }
+
+        element test_entity3 {
+        type: "test suite"
+        docRef: github.com/all_the_tests
+        }
+
+
+        test_entity - satisfies -> test_req2
+        test_req - traces -> test_req2
+        test_req - contains -> test_req3
+        test_req3 - contains -> test_req4
+        test_req4 - derives -> test_req5
+        test_req5 - refines -> test_req6
+        test_entity3 - verifies -> test_req5
+        test_req <- copies - test_entity2
+        `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render multiple Requirement diagrams`, () => {
+      imgSnapshotTest(
+        [
+          `
+    requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+    `,
+          `
+    requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+    `,
+        ],
+        options
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with empty information`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+        requirement test_req {
+        }
+        element test_entity {
+        }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with and without information`, () => {
+      renderGraph(
+        `
+    requirementDiagram
+        requirement test_req {
+            id: 1
+            text: the test text.
+            risk: high
+            verifymethod: test
+        }
+        element test_entity {
+        }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with long and short text`, () => {
+      renderGraph(
+        `
+    requirementDiagram
+        requirement test_req {
+            id: 1
+            text: the test text that is long and takes up a lot of space.
+            risk: high
+            verifymethod: test
+        }
+        element test_entity_name_that_is_extra_long {
+        }
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with long and short text without htmlLabels`, () => {
+      renderGraph(
+        `
+      requirementDiagram
+          requirement test_req {
+              id: 1
+              text: the test text that is long and takes up a lot of space.
+              risk: high
+              verifymethod: test
+          }
+          element test_entity_name_that_is_extra_long {
+          }
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render requirements and elements with quoted text for spaces`, () => {
+      renderGraph(
+        `
+      requirementDiagram
+          requirement "test req name with spaces" {
+              id: 1
+              text: the test text that is long and takes up a lot of space.
+              risk: high
+              verifymethod: test
+          }
+          element "test entity name that is extra long with spaces" {
+          }
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with markdown text`, () => {
+      renderGraph(
+        `
+      requirementDiagram
+          requirement "__my bolded name__" {
+              id: 1
+              text: "**Bolded text** _italicized text_"
+              risk: high
+              verifymethod: test
+          }
+          element "*my italicized name*" {
+            type: "**Bolded type** _italicized type_"
+            docref: "*Italicized* __Bolded__"
+          }
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with markdown text without htmlLabels`, () => {
+      renderGraph(
+        `
+      requirementDiagram
+          requirement "__my bolded name__" {
+              id: 1
+              text: "**Bolded text** _italicized text_"
+              risk: high
+              verifymethod: test
+          }
+          element "*my italicized name*" {
+            type: "**Bolded type** _italicized type_"
+            docref: "*Italicized* __Bolded__"
+          }
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render a simple Requirement diagram with a title`, () => {
+      imgSnapshotTest(
+        `---
+  title: simple Requirement diagram
+  ---
+    requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+  `,
+        options
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with TB direction`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+    direction TB
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with BT direction`, () => {
+      imgSnapshotTest(
+        `
+      requirementDiagram
+      direction BT
+  
+      requirement test_req {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with LR direction`, () => {
+      imgSnapshotTest(
+        `
+      requirementDiagram
+      direction LR
+  
+      requirement test_req {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with RL direction`, () => {
+      imgSnapshotTest(
+        `
+      requirementDiagram
+      direction RL
+  
+      requirement test_req {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from style statement`, () => {
+      imgSnapshotTest(
+        `
+    requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+
+    style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from style statement without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+      requirementDiagram
+  
+      requirement test_req {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+  
+      style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from class statement`, () => {
+      imgSnapshotTest(
+        `
+requirementDiagram
+  
+      requirement test_req {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+      classDef bold font-weight: bold
+      classDef blue stroke:lightblue, color: #0000FF
+      class test_entity bold
+      class test_req blue, bold
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from class statement without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+  requirementDiagram
+    
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+    
+        element test_entity {
+        type: simulation
+        }
+    
+        test_entity - satisfies -> test_req
+        classDef bold font-weight: bold
+        classDef blue stroke:lightblue, color: #0000FF
+        class test_entity bold
+        class test_req blue, bold
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax`, () => {
+      imgSnapshotTest(
+        `
+  requirementDiagram
+    
+        requirement test_req:::blue {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+    
+        element test_entity {
+        type: simulation
+        }
+    
+        test_entity - satisfies -> test_req
+        classDef bold font-weight: bold
+        classDef blue stroke:lightblue, color: #0000FF
+        test_entity:::bold
+          `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+  requirementDiagram
+    
+        requirement test_req:::blue {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+    
+        element test_entity {
+        type: simulation
+        }
+    
+        test_entity - satisfies -> test_req
+        classDef bold font-weight: bold
+        classDef blue stroke:lightblue, color: #0000FF
+        test_entity:::bold
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from the default class and other styles`, () => {
+      imgSnapshotTest(
+        `
+requirementDiagram
+  
+      requirement test_req:::blue {
+      id: 1
+      text: the test text.
+      risk: high
+      verifymethod: test
+      }
+  
+      element test_entity {
+      type: simulation
+      }
+  
+      test_entity - satisfies -> test_req
+      classDef blue stroke:lightblue, color:blue
+      classDef default fill:pink
+      style test_entity color:green
+        `,
+        options
+      );
+    });
+
+    it(`${description}should render requirements and elements with styles applied from the default class and other styles without htmlLabels`, () => {
+      imgSnapshotTest(
+        `
+  requirementDiagram
+    
+        requirement test_req:::blue {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+    
+        element test_entity {
+        type: simulation
+        }
+    
+        test_entity - satisfies -> test_req
+        classDef blue stroke:lightblue, color:blue
+        classDef default fill:pink
+        style test_entity color:green
+          `,
+        { ...options, htmlLabels: false }
+      );
+    });
+
+    it(`${description}should render a Requirement diagram with a theme`, () => {
+      imgSnapshotTest(
+        `
+---
+  theme: forest
+---
+  requirementDiagram
+    
+        requirement test_req:::blue {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+    
+        element test_entity {
+        type: simulation
+        }
+    
+        test_entity - satisfies -> test_req
+          `,
+        options
+      );
+    });
+  });
+});