diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 1b6fe88a6..4cd58cda8 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -20,7 +20,7 @@
   </head>
   <body>
     <h1>info below</h1>
-      <div class="mermaid" style="width: 100%; height: 20%;">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
         %%{init: {'theme': 'base',  'fontFamily': 'arial', 'themeVariables': {  'primaryColor': '#ff0000'}}}%%
         classDiagram-v2
 
@@ -52,7 +52,7 @@
         classB : method2() int
       </div>
 
-      <div class="mermaid2" style="width: 100%; height: 20%;">
+      <div class="mermaid" style="width: 100%; height: 20%;">
         classDiagram-v2
 
         classA -- classB : Inheritance
@@ -65,6 +65,24 @@
     Galaxy --> "many" Star : Contains
     &lt;&lt;interface&gt;&gt; Customer
     &lt;&lt;Service&gt;&gt; Galaxy
+
+    class BankAccount{
+      +String owner
+      +BigDecimal balance
+      +deposit(amount) bool
+      +withdrawl(amount) int
+  }
+
+  class Square~Shape~{
+    int id
+    List~int~ position
+    setPoints(List~int~ points)
+    getPoints() List~int~
+}
+
+Square : -List~string~ messages
+Square : +setMessages(List~string~ messages)
+Square : +getMessages() List~string~
       </div>
       <script src="./mermaid.js"></script>
     <script>
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 3d3d5e6e0..2131f76ee 100644
--- 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);
@@ -569,7 +570,7 @@ const class_box = (parent, node) => {
 
   // 1. Create the labels
   const interfaceLabelText = node.classData.annotations[0]
-    ? '<<' + node.classData.annotations[0] + '>>'
+    ? '«' + node.classData.annotations[0] + '»'
     : '';
   const interfaceLabel = labelContainer
     .node()
@@ -590,7 +591,10 @@ const class_box = (parent, node) => {
   }
   const classAttributes = [];
   node.classData.members.forEach(str => {
-    const lbl = labelContainer.node().appendChild(createLabel(str, node.labelStyle, true, true));
+    const parsedText = parseMember(str).displayText;
+    const lbl = labelContainer
+      .node()
+      .appendChild(createLabel(parsedText, node.labelStyle, true, true));
     const bbox = lbl.getBBox();
     if (bbox.width > maxWidth) {
       maxWidth = bbox.width;
@@ -599,9 +603,14 @@ 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 parsedText = parseMember(str).displayText;
+    const lbl = labelContainer
+      .node()
+      .appendChild(createLabel(parsedText, node.labelStyle, true, true));
     const bbox = lbl.getBBox();
     if (bbox.width > maxWidth) {
       maxWidth = bbox.width;
@@ -657,6 +666,7 @@ const class_box = (parent, node) => {
     verticalPos += classTitleBBox.height + rowPadding;
   });
 
+  verticalPos += lineHeight;
   bottomLine
     .attr('class', 'divider')
     .attr('x1', -maxWidth / 2 - halfPadding)
