Merge pull request #3210 from mermaid-js/3061_refactoring_and_modular…

…isation

3061 refactoring and modularisation

cypress/platform/knsv.html

@@ -31,14 +31,15 @@
 
 
 <div class="mermaid2" style="width: 50%;">
-      journey
-      title Adding journey diagram functionality to mermaid
-      accTitle: Adding acc journey diagram functionality to mermaid
-      accDescr {
-        My multi-line description
-        of the diagram
-      }
-      section Order from website
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Mee
 </div>
 <div class="mermaid2" style="width: 50%;">
    pie
@@ -52,20 +53,16 @@
     "Iron" :  5
 </div>
 <div class="mermaid2" style="width: 50%;">
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
-
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
+ gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
 </div>
 <div class="mermaid2" style="width: 50%;">
    sequenceDiagram
@@ -99,6 +96,9 @@
         Sit down: 5: Me
       </div>
       <div class="mermaid2" style="width: 100%;">
+        info
+      </div>
+      <div class="mermaid2" style="width: 100%;">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -138,8 +138,41 @@
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
+
       </div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" style="width: 100%;">
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
+      </div>
+      <div class="mermaid2" style="width: 100%;">
 stateDiagram
   state Active {
     Idle
@@ -148,7 +181,7 @@
   Active --> Active: LOG
       </div>
       <div class="mermaid2" style="width: 100%;">
-      graph TB
+      flowchart TB
         accTitle: My flowchart
         accDescr: My flowchart Description
         subgraph One
@@ -165,8 +198,7 @@
               end
             end
           end
-          B ->> A: Return
-  </div>
+          B ->> A: Return</div>
       <div class="mermaid2" style="width: 100%;">
 classDiagram
 accTitle: My class diagram
@@ -185,7 +217,7 @@
   size()
 }
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
         stateDiagram
         accTitle: Apa
         accDescr: One that can climb better then any man
@@ -215,6 +247,21 @@
             +run()
           }
     </div>
+          <div class="mermaid2" style="width: 100%;">
+        erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+        </div>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -251,6 +298,7 @@
         state: {
           nodeSpacing: 50,
           rankSpacing: 50,
+          defaultRenderer: 'dagre-d3',
         },
         logLevel: 0,
         fontSize: 18,

src/Diagram.js

@@ -57,62 +57,91 @@ class Diagram {
         this.parser.parser.yy = c4Db;
         this.db = c4Db;
         this.renderer = c4Renderer;
+        this.renderer.setConf(cnf.c4);
         break;
       case 'gitGraph':
         this.parser = gitGraphParser;
         this.parser.parser.yy = gitGraphAst;
         this.db = gitGraphAst;
         this.renderer = gitGraphRenderer;
+        this.txt = this.txt + '\n';
         break;
       case 'flowchart':
+        flowRenderer.setConf(cnf.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         flowDb.clear();
+        flowDb.setGen('gen-1');
         this.parser = flowParser;
         this.parser.parser.yy = flowDb;
         this.db = flowDb;
         this.renderer = flowRenderer;
         break;
       case 'flowchart-v2':
+        flowRendererV2.setConf(cnf.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         flowDb.clear();
+        flowDb.setGen('gen-2');
         this.parser = flowParser;
         this.parser.parser.yy = flowDb;
         this.db = flowDb;
         this.renderer = flowRendererV2;
         break;
       case 'sequenceDiagram':
       case 'sequence':
+        cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        if (cnf.sequenceDiagram) {
+          // backwards compatibility
+          sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
+          console.error(
+            '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
+          );
+        }
         this.parser = sequenceParser;
         this.parser.parser.yy = sequenceDb;
         this.db = sequenceDb;
+        this.db.setWrap(cnf.wrap);
         this.renderer = sequenceRenderer;
+        this.renderer.setConf(cnf.sequence);
+        this.txt = this.txt + '\n';
         break;
       case 'gantt':
+        cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = ganttParser;
         this.parser.parser.yy = ganttDb;
         this.db = ganttDb;
         this.renderer = ganttRenderer;
+        ganttRenderer.setConf(cnf.gantt);
         break;
       case 'class':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = classParser;
         this.parser.parser.yy = classDb;
         this.db = classDb;
+        this.db.clear();
         this.renderer = classRenderer;
         break;
       case 'classDiagram':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = classParser;
         this.parser.parser.yy = classDb;
         this.db = classDb;
+        this.db.clear();
         this.renderer = classRendererV2;
         break;
       case 'state':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = stateParser;
         this.parser.parser.yy = stateDb;
         this.db = stateDb;
+        this.db.clear();
         this.renderer = stateRenderer;
         break;
       case 'stateDiagram':
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         this.parser = stateParser;
         this.parser.parser.yy = stateDb;
         this.db = stateDb;
+        this.db.clear();
         this.renderer = stateRendererV2;
         break;
       case 'info':
@@ -138,9 +167,11 @@ class Diagram {
         break;
       case 'journey':
         log.debug('Journey');
+        journeyRenderer.setConf(cnf.journey);
         this.parser = journeyParser;
         this.parser.parser.yy = journeyDb;
         this.db = journeyDb;
+        this.db.clear();
         this.renderer = journeyRenderer;
         break;
       case 'requirement':
@@ -160,7 +191,7 @@ class Diagram {
       const error = { str, hash };
       throw error;
     };
-    this.parser.parse(txt);
+    this.parser.parse(this.txt);
   }
   getParser() {
     return this.parser;

src/defaultConfig.js

@@ -817,6 +817,9 @@ const config = {
   },
   class: {
     arrowMarkerAbsolute: false,
+    dividerMargin: 10,
+    padding: 5,
+    textHeight: 10,
 
     /**
      * | Parameter   | Description | Type    | Required | Values      |

src/diagram-api/diagramAPI.js

@@ -0,0 +1,9 @@
+const diagrams = {};
+
+export const registerDiagram = (id, parser, identifier, renderer) => {
+  diagrams[id] = { parser, identifier, renderer };
+};
+
+export const getDiagrams = () => {
+  return diagrams;
+};