Merge pull request #1672 from mermaid-js/1542_take_two

1542 take two
2025-01-28 07:03:17 +08:00 · 2020-09-09 19:11:42 +02:00 · 2020-09-09 19:11:42 +02:00 · 571b8bbd88
commit 571b8bbd88
parent b795950892 28c01f6476
8 changed files with 678 additions and 38 deletions
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@ -0,0 +1,373 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+describe('Class diagram V2', () => {
+
+    it('0: should render a simple class diagram', () => {
+      imgSnapshotTest(
+        `
+        classDiagram-v2
+
+        classA -- classB : Inheritance
+        classA -- classC : link
+        classC -- classD : link
+        classB -- classD
+
+        `,
+        {logLevel : 1, flowchart: { "htmlLabels": false },}
+      );
+      cy.get('svg');
+    });
+
+  it('1: should render a simple class diagram', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      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;
+        int id
+        test()
+      }
+      `,
+      {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('2: should render a simple class diagrams with cardinality', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      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()
+      }
+      `,
+      {logLevel : 1, flowchart: { "htmlLabels": false },}
+
+    );
+    cy.get('svg');
+  });
+
+  it('should render a simple class diagram with different visibilities', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class01 : -privateMethod()
+      Class01 : +publicMethod()
+      Class01 : #protectedMethod()
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+      `
+    classDiagram-v2
+      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-v2
+      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()
+      }
+      `,
+      ],
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('4: should render a simple class diagram with comments', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      %% this is a comment
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('5: should render a simple class diagram with abstract method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()*
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('6: should render a simple class diagram with static method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()$
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('7: should render a simple class diagram with Generic class', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+    class Class01~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('8: should render a simple class diagram with Generic class and relations', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('9: should render a simple class diagram with clickable link', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      link class01 "google.com" "A Tooltip"
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('10: should render a simple class diagram with clickable callback', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      callback class01 "functionCall" "A Tooltip"
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('11: should render a simple class diagram with return type on method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      class Class10~T~ {
+        int[] id
+        test(int[] ids) bool
+        testArray() bool[]
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('12: should render a simple class diagram with generic types', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      class Class10~T~ {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('13: should render a simple class diagram with css classes applied', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      class Class10 {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+
+      cssClass "Class10" exClass
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('14: should render a simple class diagram with css classes applied directly', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      class Class10:::exClass {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram-v2
+      class Class10
+      class Class20
+
+      cssClass "Class10, class20" exClass
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+});
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@ -21,7 +21,7 @@
  <body>
    <h1>info below</h1>
      <div class="mermaid" style="width: 100%; height: 20%;">
-        %%{init: {'theme': 'base',  'fontFamily': 'arial', 'themeVariables': {  'primaryColor': '#ff0000'}}}%%
+        %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
        classDiagram-v2
         class BankAccount{
          +String owner
@ -29,6 +29,24 @@
          +deposit(amount) bool
          +withdrawl(amount) int
      }
+      </div>
+      <div class="mermaid" style="width: 100%; height: 20%;">
+      flowchart TB
+      a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+      a_a --> c --> d_d --> c_c
+      classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+      class a_a apa;
+      click a_a "http://www.aftonbladet.se" "apa"
+        
+      </div>
+
+      <div class="mermaid2" style="width: 100%; height: 20%;">
+        classDiagram-v2
+
+        classA -- classB : Inheritance
+        classA -- classC : link
+        classC -- classD : link
+        classB -- classD
        classA --|> classB : Inheritance
        classC --* classD : Composition
        classE --o classF : Aggregation
@ -42,15 +60,15 @@
        classA : method1()
        &lt;&lt;interface&gt;&gt; classB
        classB : method2() int
-      </div>

-      <div class="mermaid" style="width: 100%; height: 20%;">
-        classDiagram-v2
+        Customer "1" --> "*" Ticket
+        Student "1" --> "1..*" Course
+        Galaxy --> "many" Star : Contains
+        &lt;&lt;interface&gt;&gt; Customer

-        classA -- classB : Inheritance
-        classA -- classC : link
-        classC -- classD : link
-        classB -- classD
+        class Shape
+        callback Shape "callbackFunction" "This is a tooltip for a callback"
+        
      </div>
      <script src="./mermaid.js"></script>
    <script>
@ -62,7 +80,7 @@
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', "htmlLabels": true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@ -6,9 +6,11 @@ import utils from '../utils';
 // import { calcLabelPosition } from '../utils';

 let edgeLabels = {};
+let terminalLabels = {};

 export const clear = () => {
  edgeLabels = {};
+  terminalLabels = {};
 };

 export const insertEdgeLabel = (elem, edge) => {
@ -39,17 +41,129 @@ export const insertEdgeLabel = (elem, edge) => {
  // Update the abstract data of the edge with the new information about its width and height
  edge.width = bbox.width;
  edge.height = bbox.height;
+
+  if (edge.startLabelLeft) {
+    // Create the actual text element
+    const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);
+    const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
+    const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');
+    inner.node().appendChild(startLabelElement);
+    const slBox = startLabelElement.getBBox();
+    inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
+    if (!terminalLabels[edge.id]) {
+      terminalLabels[edge.id] = {};
+    }
+    terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
+  }
+  if (edge.startLabelRight) {
+    // Create the actual text element
+    const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);
+    const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
+    const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');
+    startEdgeLabelRight.node().appendChild(startLabelElement);
+    inner.node().appendChild(startLabelElement);
+    const slBox = startLabelElement.getBBox();
+    inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
+
+    if (!terminalLabels[edge.id]) {
+      terminalLabels[edge.id] = {};
+    }
+    terminalLabels[edge.id].startRight = startEdgeLabelRight;
+  }
+  if (edge.endLabelLeft) {
+    // Create the actual text element
+    const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);
+    const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
+    const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');
+    inner.node().appendChild(endLabelElement);
+    const slBox = endLabelElement.getBBox();
+    inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
+
+    endEdgeLabelLeft.node().appendChild(endLabelElement);
+    if (!terminalLabels[edge.id]) {
+      terminalLabels[edge.id] = {};
+    }
+    terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
+  }
+  if (edge.endLabelRight) {
+    // Create the actual text element
+    const endLabelElement = createLabel(edge.endLabelRight, edge.labelStyle);
+    const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
+    const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');
+
+    inner.node().appendChild(endLabelElement);
+    const slBox = endLabelElement.getBBox();
+    inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
+
+    endEdgeLabelRight.node().appendChild(endLabelElement);
+    if (!terminalLabels[edge.id]) {
+      terminalLabels[edge.id] = {};
+    }
+    terminalLabels[edge.id].endRight = endEdgeLabelRight;
+  }
 };

-export const positionEdgeLabel = (edge, points) => {
+export const positionEdgeLabel = (edge, paths) => {
  logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
+  let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
  if (edge.label) {
    const el = edgeLabels[edge.id];
    let x = edge.x;
    let y = edge.y;
-    if (points) {
+    if (path) {
+      //   // debugger;
+      const pos = utils.calcLabelPosition(path);
+      logger.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ')');
+      // x = pos.x;
+      // y = pos.y;
+    }
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+  }
+
+  //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
+  if (edge.startLabelLeft) {
+    const el = terminalLabels[edge.id].startLeft;
+    let x = edge.x;
+    let y = edge.y;
+    if (path) {
      // debugger;
-      const pos = utils.calcLabelPosition(points);
+      const pos = utils.calcTerminalLabelPosition(0, 'start_left', path);
+      x = pos.x;
+      y = pos.y;
+    }
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+  }
+  if (edge.startLabelRight) {
+    const el = terminalLabels[edge.id].startRight;
+    let x = edge.x;
+    let y = edge.y;
+    if (path) {
+      // debugger;
+      const pos = utils.calcTerminalLabelPosition(0, 'start_right', path);
+      x = pos.x;
+      y = pos.y;
+    }
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+  }
+  if (edge.endLabelLeft) {
+    const el = terminalLabels[edge.id].endLeft;
+    let x = edge.x;
+    let y = edge.y;
+    if (path) {
+      // debugger;
+      const pos = utils.calcTerminalLabelPosition(0, 'end_left', path);
+      x = pos.x;
+      y = pos.y;
+    }
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+  }
+  if (edge.endLabelRight) {
+    const el = terminalLabels[edge.id].endRight;
+    let x = edge.x;
+    let y = edge.y;
+    if (path) {
+      // debugger;
+      const pos = utils.calcTerminalLabelPosition(0, 'end_right', path);
      x = pos.x;
      y = pos.y;
    }
@ -354,8 +468,10 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
      break;
    default:
  }
-
+  let paths = {};
  if (pointsHasChanged) {
-    return points;
+    paths.updatedPath = points;
  }
+  paths.originalPath = edge.points;
+  return paths;
 };
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@ -128,8 +128,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
    const edge = graph.edge(e);
    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);

-    const updatedPath = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
-    positionEdgeLabel(edge, updatedPath);
+    const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
+    positionEdgeLabel(edge, paths);
  });

  return elem;
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@ -5,6 +5,7 @@ import { getConfig } from '../config';
 import intersect from './intersect/index.js';
 import createLabel from './createLabel';
 import note from './shapes/note';
+import { parseMember } from '../diagrams/class/svgDraw';

 const question = (parent, node) => {
  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@ -568,27 +569,60 @@ const class_box = (parent, node) => {
  const hasInterface = node.classData.annotations && node.classData.annotations[0];

  // 1. Create the labels
+  const interfaceLabelText = node.classData.annotations[0]
+    ? '«' + node.classData.annotations[0] + '»'
+    : '';
  const interfaceLabel = labelContainer
    .node()
-    .appendChild(createLabel(node.classData.annotations[0], node.labelStyle, true, true));
-  const interfaceBBox = interfaceLabel.getBBox();
+    .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));
+  let interfaceBBox = interfaceLabel.getBBox();
+  if (getConfig().flowchart.htmlLabels) {
+    const div = interfaceLabel.children[0];
+    const dv = select(interfaceLabel);
+    interfaceBBox = div.getBoundingClientRect();
+    dv.attr('width', interfaceBBox.width);
+    dv.attr('height', interfaceBBox.height);
+  }
  if (node.classData.annotations[0]) {
    maxHeight += interfaceBBox.height + rowPadding;
    maxWidth += interfaceBBox.width;
  }

+  let classTitleString = node.classData.id;
+
+  if (node.classData.type !== undefined && node.classData.type !== '') {
+    classTitleString += '<' + node.classData.type + '>';
+  }
  const classTitleLabel = labelContainer
    .node()
-    .appendChild(createLabel(node.labelText, node.labelStyle, true, true));
-  const classTitleBBox = classTitleLabel.getBBox();
+    .appendChild(createLabel(classTitleString, node.labelStyle, true, true));
+  select(classTitleLabel).attr('class', 'classTitle');
+  let classTitleBBox = classTitleLabel.getBBox();
+  if (getConfig().flowchart.htmlLabels) {
+    const div = classTitleLabel.children[0];
+    const dv = select(classTitleLabel);
+    classTitleBBox = div.getBoundingClientRect();
+    dv.attr('width', classTitleBBox.width);
+    dv.attr('height', classTitleBBox.height);
+  }
  maxHeight += classTitleBBox.height + rowPadding;
  if (classTitleBBox.width > maxWidth) {
    maxWidth = classTitleBBox.width;
  }
  const classAttributes = [];
  node.classData.members.forEach(str => {
-    const lbl = labelContainer.node().appendChild(createLabel(str, node.labelStyle, true, true));
-    const bbox = lbl.getBBox();
+    const parsedText = parseMember(str).displayText;
+    const lbl = labelContainer
+      .node()
+      .appendChild(createLabel(parsedText, node.labelStyle, true, true));
+    let bbox = lbl.getBBox();
+    if (getConfig().flowchart.htmlLabels) {
+      const div = lbl.children[0];
+      const dv = select(lbl);
+      bbox = div.getBoundingClientRect();
+      dv.attr('width', bbox.width);
+      dv.attr('height', bbox.height);
+    }
    if (bbox.width > maxWidth) {
      maxWidth = bbox.width;
    }
@ -596,10 +630,22 @@ const class_box = (parent, node) => {
    classAttributes.push(lbl);
  });

+  maxHeight += lineHeight;
+
  const classMethods = [];
  node.classData.methods.forEach(str => {
-    const lbl = labelContainer.node().appendChild(createLabel(str, node.labelStyle, true, true));
-    const bbox = lbl.getBBox();
+    const parsedText = parseMember(str).displayText;
+    const lbl = labelContainer
+      .node()
+      .appendChild(createLabel(parsedText, node.labelStyle, true, true));
+    let bbox = lbl.getBBox();
+    if (getConfig().flowchart.htmlLabels) {
+      const div = lbl.children[0];
+      const dv = select(lbl);
+      bbox = div.getBoundingClientRect();
+      dv.attr('width', bbox.width);
+      dv.attr('height', bbox.height);
+    }
    if (bbox.width > maxWidth) {
      maxWidth = bbox.width;
    }
@ -614,13 +660,10 @@ const class_box = (parent, node) => {

  // position the interface label
  if (hasInterface) {
+    let diffX = (maxWidth - interfaceBBox.width) / 2;
    select(interfaceLabel).attr(
      'transform',
-      'translate( ' +
-        -(maxWidth + node.padding - interfaceBBox.width / 2) / 2 +
-        ', ' +
-        (-1 * maxHeight) / 2 +
-        ')'
+      'translate( ' + ((-1 * maxWidth) / 2 + diffX) + ', ' + (-1 * maxHeight) / 2 + ')'
    );
    verticalPos = interfaceBBox.height + rowPadding;
  }
@ -657,6 +700,7 @@ const class_box = (parent, node) => {
    verticalPos += classTitleBBox.height + rowPadding;
  });

+  verticalPos += lineHeight;
  bottomLine
    .attr('class', 'divider')
    .attr('x1', -maxWidth / 2 - halfPadding)
@ -674,14 +718,14 @@ const class_box = (parent, node) => {
    verticalPos += classTitleBBox.height + rowPadding;
  });
  //
-  let bbox;
-  if (getConfig().flowchart.htmlLabels) {
-    const div = interfaceLabel.children[0];
-    const dv = select(interfaceLabel);
-    bbox = div.getBoundingClientRect();
-    dv.attr('width', bbox.width);
-    dv.attr('height', bbox.height);
-  }
+  // let bbox;
+  // if (getConfig().flowchart.htmlLabels) {
+  //   const div = interfaceLabel.children[0];
+  //   const dv = select(interfaceLabel);
+  //   bbox = div.getBoundingClientRect();
+  //   dv.attr('width', bbox.width);
+  //   dv.attr('height', bbox.height);
+  // }
  // bbox = labelContainer.getBBox();

  // logger.info('Text 2', text2);
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@ -155,6 +155,12 @@ export const addRelations = function(relations, g) {
    }

    logger.info(edgeData, edge);
+    //Set edge extra labels
+    //edgeData.startLabelLeft = edge.relationTitle1;
+    edgeData.startLabelRight = edge.relationTitle1 === 'none' ? '' : edge.relationTitle1;
+    edgeData.endLabelLeft = edge.relationTitle2 === 'none' ? '' : edge.relationTitle2;
+    //edgeData.endLabelRight = edge.relationTitle2;
+
    //Set relation arrow types
    edgeData.arrowTypeStart = getArrowMarker(edge.relation.type1);
    edgeData.arrowTypeEnd = getArrowMarker(edge.relation.type2);
--- a/src/diagrams/class/styles.js
+++ b/src/diagrams/class/styles.js
@ -5,10 +5,15 @@ const getStyles = options =>
  stroke: none;
  font-family: ${options.fontFamily};
  font-size: 10px;
-
+  
  .title {
    font-weight: bolder;
  }
+  
+}
+
+.classTitle {
+  font-weight: bolder;
 }
 .node rect,
  .node circle,
@ -109,6 +114,11 @@ g.classGroup line {
  stroke: ${options.lineColor} !important;
  stroke-width: 1;
 }
+
+.edgeTerminals {
+  font-size: 11px;
+}
+
 `;

 export default getStyles;
--- a/src/utils.js
+++ b/src/utils.js
@ -334,6 +334,7 @@ const calcLabelPosition = points => {
 const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {
  let prevPoint;
  let totalDistance = 0; // eslint-disable-line
+  logger.info('our points', points);
  if (points[0] !== initialPosition) {
    points = points.reverse();
  }
@ -380,6 +381,77 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
  return cardinalityPosition;
 };

+/**
+ * position ['start_left', 'start_right', 'end_left', 'end_right']
+ */
+const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
+  // Todo looking to faster cloning method
+  let points = JSON.parse(JSON.stringify(_points));
+  let prevPoint;
+  let totalDistance = 0; // eslint-disable-line
+  logger.info('our points', points);
+  if (position !== 'start_left' && position !== 'start_right') {
+    points = points.reverse();
+  }
+
+  points.forEach(point => {
+    totalDistance += distance(point, prevPoint);
+    prevPoint = point;
+  });
+
+  // Traverse only 25 total distance along points to find cardinality point
+  const distanceToCardinalityPoint = 25;
+
+  let remainingDistance = distanceToCardinalityPoint;
+  let center;
+  prevPoint = undefined;
+  points.forEach(point => {
+    if (prevPoint && !center) {
+      const vectorDistance = distance(point, prevPoint);
+      if (vectorDistance < remainingDistance) {
+        remainingDistance -= vectorDistance;
+      } else {
+        // The point is remainingDistance from prevPoint in the vector between prevPoint and point
+        // Calculate the coordinates
+        const distanceRatio = remainingDistance / vectorDistance;
+        if (distanceRatio <= 0) center = prevPoint;
+        if (distanceRatio >= 1) center = { x: point.x, y: point.y };
+        if (distanceRatio > 0 && distanceRatio < 1) {
+          center = {
+            x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,
+            y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y
+          };
+        }
+      }
+    }
+    prevPoint = point;
+  });
+  // if relation is present (Arrows will be added), change cardinality point off-set distance (d)
+  let d = 10;
+  //Calculate Angle for x and y axis
+  let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
+
+  let cardinalityPosition = { x: 0, y: 0 };
+
+  //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance
+
+  cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;
+  cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;
+  if (position === 'start_left') {
+    cardinalityPosition.x = Math.sin(angle + Math.PI) * d + (points[0].x + center.x) / 2;
+    cardinalityPosition.y = -Math.cos(angle + Math.PI) * d + (points[0].y + center.y) / 2;
+  }
+  if (position === 'end_right') {
+    cardinalityPosition.x = Math.sin(angle - Math.PI) * d + (points[0].x + center.x) / 2 - 5;
+    cardinalityPosition.y = -Math.cos(angle - Math.PI) * d + (points[0].y + center.y) / 2 - 5;
+  }
+  if (position === 'end_left') {
+    cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2 - 5;
+    cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2 - 5;
+  }
+  return cardinalityPosition;
+};
+
 export const getStylesFromArray = arr => {
  let style = '';
  let labelStyle = '';
@ -734,6 +806,7 @@ export default {
  interpolateToCurve,
  calcLabelPosition,
  calcCardinalityPosition,
+  calcTerminalLabelPosition,
  formatUrl,
  getStylesFromArray,
  generateId,