Merge branch 'release/8.4.3'

.github/workflows/build.yml

@@ -0,0 +1,58 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+    steps:
+    - uses: actions/checkout@v1
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Cache Node Modules
+      uses: actions/cache@v1
+      with:
+        path: .cache
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+
+    - name: Install Packages
+      run: |
+        yarn config set cache-folder $GITHUB_WORKSPACE/.cache/yarn
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: ../../.cache/Cypress
+
+    - name: Run Build
+      run: yarn build
+
+    - name: Run Unit Tests
+      run: |
+        yarn test --coverage
+        
+    - name: Upload Test Results
+      uses: coverallsapp/github-action@v1.0.1
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel: true
+
+    - name: Run E2E Tests
+      run: yarn e2e
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
+        
+    - name: Post Upload Test Results
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel-finished: true

cypress/helpers/util.js

@@ -26,3 +26,9 @@ export const imgSnapshotTest = (graphStr, options, api) => {
   cy.get('svg');
   cy.percySnapshot();
 };
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+
+  cy.visit(url);
+};

cypress/integration/other/configuration.spec.js

@@ -0,0 +1,100 @@
+import { renderGraph } from '../../helpers/util';
+/* eslint-env jest */
+describe('Configuration', () => {
+  describe('arrowMarkerAbsolute', () => {
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: false
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: "false"
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute set to true', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: true
+        }
+      );
+
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(http://localhost');
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -16,7 +16,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -108,7 +108,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +130,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -200,7 +200,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');

cypress/integration/rendering/classDiagram.spec.js

@@ -19,6 +19,9 @@ describe('Class diagram', () => {
       Class01 : size()
       Class01 : int chimp
       Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
       Class08 <--> C2: Cool label
       class Class10 {
         &lt;&lt;service&gt;&gt;
@@ -58,4 +61,75 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render a simple class diagram with different visibilities', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class01 : -int privateMethod()
+      Class01 : +int publicMethod()
+      Class01 : #int protectedMethod()
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      ],
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/platform/e2e.html

@@ -4,9 +4,8 @@
     <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
     <style>
       body {
-        /* font-family: 'Mansalva', cursive;
+        /* font-family: 'Mansalva', cursive;*/
-        font-family: 'Mansalva', cursive; */
+        font-family: 'Mansalva', cursive;
-        font-family: 'times';
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;

cypress/platform/viewer.js

@@ -14,11 +14,22 @@ const contentLoaded = function() {
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
     console.log(graphObj);
-    const div = document.createElement('div');
+    if (Array.isArray(graphObj.code)) {
-    div.id = 'block';
+      const numCodes = graphObj.code.length;
-    div.className = 'mermaid';
+      for (let i = 0; i < numCodes; i++) {
-    div.innerHTML = graphObj.code;
+        const div = document.createElement('div');
-    document.getElementsByTagName('body')[0].appendChild(div);
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        div.innerHTML = graphObj.code[i];
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      div.innerHTML = graphObj.code;
+      document.getElementsByTagName('body')[0].appendChild(div);
+    }
     global.mermaid.initialize(graphObj.mermaid);
     // console.log('graphObj.mermaid', graphObj.mermaid)
     global.mermaid.init();
@@ -31,23 +42,52 @@ const contentLoadedApi = function() {
     const graphBase64 = document.location.href.substr(pos);
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
-    const div = document.createElement('div');
+    if (Array.isArray(graphObj.code)) {
-    div.id = 'block';
+      const numCodes = graphObj.code.length;
-    div.className = 'mermaid';
+      const divs = [];
-    // div.innerHTML = graphObj.code
+      let div;
-    document.getElementsByTagName('body')[0].appendChild(div);
+      for (let i = 0; i < numCodes; i++) {
-    global.mermaid.initialize(graphObj.mermaid);
+        div = document.createElement('div');
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        // div.innerHTML = graphObj.code
+        document.getElementsByTagName('body')[0].appendChild(div);
+        divs[i] = div;
+      }
 
-    mermaid2.render(
+      global.mermaid.initialize(graphObj.mermaid);
-      'newid',
-      graphObj.code,
-      (svgCode, bindFunctions) => {
-        div.innerHTML = svgCode;
 
-        bindFunctions(div);
+      for (let i = 0; i < numCodes; i++) {
-      },
+        mermaid2.render(
-      div
+          'newid' + i,
-    );
+          graphObj.code[i],
+          (svgCode, bindFunctions) => {
+            div.innerHTML = svgCode;
+
+            bindFunctions(div);
+          },
+          divs[i]
+        );
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      // div.innerHTML = graphObj.code
+      document.getElementsByTagName('body')[0].appendChild(div);
+      global.mermaid.initialize(graphObj.mermaid);
+
+      mermaid2.render(
+        'newid',
+        graphObj.code,
+        (svgCode, bindFunctions) => {
+          div.innerHTML = svgCode;
+
+          if (bindFunctions) bindFunctions(div);
+        },
+        div
+      );
+    }
   }
 };
 

dist/index.html

@@ -408,9 +408,9 @@ Class09 "0" --* "1..n" C3
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData
-Class01 : size()
+Class01 : #size()
-Class01 : int chimp
+Class01 : -int chimp
-Class01 : int gorilla
+Class01 : +int gorilla
 Class08 <--> C2: Cool label
 class Class10 {
   &lt;&lt;service&gt;&gt;

docs/flowchart.md

@@ -123,6 +123,28 @@ graph LR
     id1{{This is the text in the box}}
 ```
 
+### Parallelogram
+
+```
+graph TD
+    id1[/This is the text in the box/]
+```
+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
+### Parallelogram alt
+
+```
+graph TD
+    id1[\This is the text in the box\]
+```
+```mermaid
+graph TD
+    id1[\This is the text in the box\]
+```
+
 ### Trapezoid
 
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.2",
+  "version": "8.4.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -24,7 +24,7 @@
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
     "dev": "webpack-dev-server --config webpack.config.e2e.js",
-    "test": "yarn lint && jest src",
+    "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn release && yarn test && yarn e2e",
     "prepush": "yarn test"
@@ -49,18 +49,18 @@
     "@braintree/sanitize-url": "^3.1.0",
     "crypto-random-string": "^3.0.1",
     "d3": "^5.7.0",
-    "dagre-d3": "dagrejs/dagre-d3",
+    "dagre-d3-unofficial": "0.6.4",
     "dagre": "^0.8.4",
     "graphlib": "^2.1.7",
     "he": "^1.2.0",
     "lodash": "^4.17.11",
     "minify": "^4.1.1",
     "moment-mini": "^2.22.1",
-    "prettier": "^1.18.2",
     "scope-css": "^1.2.1"
   },
   "devDependencies": {
     "documentation": "^12.0.1",
+    "prettier": "^1.18.2",
     "eslint": "^6.3.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.0",
@@ -77,10 +77,7 @@
     "cypress": "3.4.0",
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
+    "jest": "^24.9.0",
-    "jest-environment-puppeteer": "^4.2.0",
-    "jest-image-snapshot": "^2.8.2",
-    "jest-puppeteer": "^4.2.0",
     "jison": "^0.4.18",
     "moment": "^2.23.0",
     "node-sass": "^4.12.0",

src/diagrams/class/classDiagram.spec.js

@@ -40,6 +40,21 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
+    it('should handle visibility for methods and members', function() {
+      const str =
+        'classDiagram\n' +
+        'class TestClass\n' +
+        'TestClass : -int privateMember\n' +
+        'TestClass : +int publicMember\n' +
+        'TestClass : #int protectedMember\n' +
+        'TestClass : -privateMethod()\n' +
+        'TestClass : +publicMethod()\n' +
+        'TestClass : #protectedMethod()\n';
+
+      parser.parse(str);
+    });
+
     it('should handle class definitions', function() {
       const str =
         'classDiagram\n' +

src/diagrams/class/classRenderer.js

@@ -8,7 +8,7 @@ import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
-const idCache = {};
+let idCache = {};
 
 let classCnt = 0;
 const conf = {
@@ -136,7 +136,6 @@ const insertMarkers = function(elem) {
 };
 
 let edgeCount = 0;
-let total = 0;
 const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
     switch (type) {
@@ -291,7 +290,7 @@ const drawClass = function(elem, classDef) {
     }
   };
 
-  const id = 'classId' + (classCnt % total);
+  const id = 'classId' + classCnt;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -411,6 +410,7 @@ export const setConf = function(cnf) {
  * @param id
  */
 export const draw = function(text, id) {
+  idCache = {};
   parser.yy.clear();
   parser.parse(text);
 
@@ -437,7 +437,6 @@ export const draw = function(text, id) {
 
   const classes = classDb.getClasses();
   const keys = Object.keys(classes);
-  total = keys.length;
   for (let i = 0; i < keys.length; i++) {
     const classDef = classes[keys[i]];
     const node = drawClass(diagram, classDef);

src/diagrams/class/parser/classDiagram.jison

@@ -36,7 +36,7 @@
 \s*o                  return 'AGGREGATION';
 \-\-                  return 'LINE';
 \.\.                  return 'DOTTED_LINE';
-":"[^#\n;]+        return 'LABEL';
+":"[^\n;]+        return 'LABEL';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 \+                    return 'PLUS';

src/diagrams/flowchart/flowChartShapes.js

@@ -1,4 +1,4 @@
-import dagreD3 from 'dagre-d3';
+import dagreD3 from 'dagre-d3-unofficial';
 
 function question(parent, bbox, node) {
   const w = bbox.width;

src/diagrams/flowchart/flowDb.js

@@ -4,7 +4,8 @@ import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
 
-const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+const MERMAID_DOM_ID_PREFIX = '';
 
 const config = getConfig();
 let vertices = {};

src/diagrams/flowchart/flowRenderer.js

@@ -6,11 +6,10 @@ import flow from './parser/flow';
 import { getConfig } from '../../config';
 
 const newDagreD3 = true;
-import dagreD3 from 'dagre-d3';
+import dagreD3 from 'dagre-d3-unofficial';
 // const newDagreD3 = false;
-// import dagreD3 from '../../../../dagre-d3-renderer/dist/dagre-d3.core.js';
 
-import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
+import addHtmlLabel from 'dagre-d3-unofficial/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import { interpolateToCurve } from '../../utils';
 import flowChartShapes from './flowChartShapes';
@@ -460,8 +459,8 @@ export const draw = function(text, id) {
     subG = subGraphs[i];
 
     if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
+      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
+      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
 
       const xPos = clusterRects[0].x.baseVal.value;
       const yPos = clusterRects[0].y.baseVal.value;
@@ -475,7 +474,7 @@ export const draw = function(text, id) {
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
-    const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
+    const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];
 

src/diagrams/flowchart/parser/flow-singlenode.spec.js

@@ -168,7 +168,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with a single digit in a subgraph', function() {
@@ -180,7 +180,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with alphanumerics starting on a num', function() {
@@ -191,7 +191,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1id'].styles.length).toBe(0);
+    expect(vert['1id'].styles.length).toBe(0);
   });
 
   it('should handle a single node with alphanumerics containing a minus sign', function() {

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -83,7 +83,7 @@ describe('when parsing subgraphs', function() {
     const subgraph = subgraphs[0];
     expect(subgraph.nodes.length).toBe(1);
     expect(subgraph.nodes[0]).toBe('A');
-    expect(subgraph.id).toBe('mermaid-dom-id-1test');
+    expect(subgraph.id).toBe('1test');
   });
 
   it('should handle subgraphs1', function() {

src/diagrams/state/stateRenderer.js

@@ -92,8 +92,6 @@ export const draw = function(text, id) {
   const padding = conf.padding;
   const bounds = diagram.node().getBBox();
 
-  console.warn(bounds);
-
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 

src/mermaidAPI.js

@@ -585,23 +585,23 @@ const render = function(id, txt, cb, container) {
     .selectAll('foreignobject > *')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
-  let url = '';
+  // if (config.arrowMarkerAbsolute) {
-  if (config.arrowMarkerAbsolute) {
+  //   url =
-    url =
+  //     window.location.protocol +
-      window.location.protocol +
+  //     '//' +
-      '//' +
+  //     window.location.host +
-      window.location.host +
+  //     window.location.pathname +
-      window.location.pathname +
+  //     window.location.search;
-      window.location.search;
+  //   url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\(/g, '\\(');
+  //   url = url.replace(/\)/g, '\\)');
-    url = url.replace(/\)/g, '\\)');
+  // }
-  }
 
   // Fix for when the base tag is used
-  let svgCode = d3
+  let svgCode = d3.select('#d' + id).node().innerHTML;
-    .select('#d' + id)
+
-    .node()
+  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
-    .innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
+    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+  }
 
   svgCode = decodeEntities(svgCode);
 

webpack.config.base.js

@@ -1,10 +1,10 @@
-import path from 'path'
+import path from 'path';
 
 const amdRule = {
   parser: {
     amd: false // https://github.com/lodash/lodash/issues/3052
   }
-}
+};
 
 const jisonRule = {
   test: /\.jison$/,
@@ -14,7 +14,7 @@ const jisonRule = {
       'token-stack': true
     }
   }
-}
+};
 const jsRule = {
   test: /\.js$/,
   include: [
@@ -24,16 +24,13 @@ const jsRule = {
   use: {
     loader: 'babel-loader'
   }
-}
+};
 
-const scssRule = { // load scss to string
+const scssRule = {
+  // load scss to string
   test: /\.scss$/,
-  use: [
+  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
-    { loader: 'css-to-string-loader' },
+};
-    { loader: 'css-loader' },
-    { loader: 'sass-loader' }
-  ]
-}
 
 export const jsConfig = () => {
   return {
@@ -43,7 +40,10 @@ export const jsConfig = () => {
       mermaid: './src/mermaid.js'
     },
     resolve: {
-      extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
+      extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+      alias: {
+        'dagre-d3': 'dagre-d3-unofficial'
+      }
     },
     node: {
       fs: 'empty' // jison generated code requires 'fs'
@@ -59,5 +59,5 @@ export const jsConfig = () => {
       rules: [amdRule, jsRule, scssRule, jisonRule]
     },
     devtool: 'source-map'
-  }
+  };
-}
+};