#2270 Add support for direction statements for classDiagrams

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -370,4 +370,100 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
+  it('16: should handle the direction statemment with TB', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction TB
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('17: should handle the direction statemment with BT', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction BT
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('17: should handle the direction statemment with RL', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction RL
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('18: should handle the direction statemment with LR', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
 });

cypress/platform/knsv.html

@@ -10,7 +10,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background:#333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
         }
@@ -27,17 +27,22 @@
     <div>info below</div>
     <div class="flex">
 
-<div class="mermaid3" style="width: 100%; height: 20%;">
-stateDiagram-v2
-  state S1 {
-    sub1 -->sub2
+<div class="mermaid" style="width: 100%; height: 20%;">
+classDiagram
+  direction TB
+  class Student {
+    -idCard : IdCard
   }
-
-  state S2 {
-    sub4
+  class IdCard{
+    -id : int
+    -name : string
   }
-  S1 --> S2
-  sub1 --> sub4
+  class Bike{
+    -id : int
+    -name : string
+  }
+  Student "1" --o "1" IdCard : carries
+  Student "1" --o "1" Bike : rides
 
 </div>
 <div class="mermaid3" style="width: 100%; height: 20%;">
@@ -56,7 +61,7 @@ subgraph CompositeState
 
 end
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
 %%{init: { "apa":"b", "theme":"forest"}}%%
 sequenceDiagram
 Alice->>Bob: Hi Bob
@@ -110,12 +115,12 @@ YourState
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'base',
+        theme: 'dark',
+        // theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 2,
-        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
-        htmlLabels: true,
+        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

src/diagrams/class/classDb.js

@@ -317,6 +317,12 @@ const setupToolTips = function (element) {
 };
 funs.push(setupToolTips);
 
+let direction = 'TB';
+const getDirection = () => direction;
+const setDirection = (dir) => {
+  direction = dir;
+};
+
 export default {
   parseDirective,
   getConfig: () => configApi.getConfig().class,
@@ -328,6 +334,8 @@ export default {
   addAnnotation,
   getRelations,
   addRelation,
+  getDirection,
+  setDirection,
   addMember,
   addMembers,
   cleanupLabel,

src/diagrams/class/classRenderer-v2.js

@@ -372,7 +372,7 @@ export const draw = function (text, id) {
     compound: true,
   })
     .setGraph({
-      rankdir: dir,
+      rankdir: classDb.getDirection(),
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,

src/diagrams/class/parser/classDiagram.jison

@@ -19,6 +19,10 @@
 
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+.*direction\s+TB[^\n]*                                          return 'direction_tb';
+.*direction\s+BT[^\n]*                                          return 'direction_bt';
+.*direction\s+RL[^\n]*                                          return 'direction_rl';
+.*direction\s+LR[^\n]*                                          return 'direction_lr';
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
@@ -180,9 +184,21 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
+    | direction
     | directive start
     ;
 
+direction
+    : direction_tb
+    { yy.setDirection('TB');}
+    | direction_bt
+    { yy.setDirection('BT');}
+    | direction_rl
+    { yy.setDirection('RL');}
+    | direction_lr
+    { yy.setDirection('LR');}
+    ;
+
 mermaidDoc
     : graphConfig
     ;
@@ -235,6 +251,7 @@ statement
     | clickStatement
     | cssClassStatement
     | directive
+    | direction
     ;
 
 classStatement