diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index f443ed2c1..7ed5f5cac 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -8,8 +8,8 @@
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
-        /* background: rgb(221, 208, 208); */
-        background:#333;
+        background: rgb(221, 208, 208);
+        /*background:#333;*/
         font-family: 'Arial';
         }
       h1 { color: white;}
@@ -30,6 +30,10 @@
         classK ..> classL : Dependency
         classM ..|> classN : Realization
         classO .. classP : Link(Dashed)
+        classA : +attr1
+        classA : attr2
+        classA : method1()
+        classB : method2() int
       </div>
       <script src="./mermaid.js"></script>
     <script>
@@ -37,7 +41,7 @@
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'dark',
+        theme: 'default',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index 85f7d2849..d6fd31cae 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -288,35 +288,60 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
     url = url.replace(/\(/g, '\\(');
     url = url.replace(/\)/g, '\\)');
   }
-  logger.info('arrowType', edge.arrowType);
-  switch (edge.arrowType) {
+  logger.info('arrowTypeStart', edge.arrowTypeStart);
+  logger.info('arrowTypeEnd', edge.arrowTypeEnd);
+
+  switch (edge.arrowTypeStart) {
+    case 'arrow_cross':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
+      break;
+    case 'arrow_point':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
+      break;
+    case 'arrow_barb':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
+      break;
+    case 'arrow_circle':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
+      break;
+    case 'aggregation':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');
+      break;
+    case 'extension':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');
+      break;
+    case 'composition':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');
+      break;
+    case 'dependency':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');
+      break;
+    default:
+  }
+  switch (edge.arrowTypeEnd) {
     case 'arrow_cross':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
       break;
-    case 'double_arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
-      break;
     case 'arrow_point':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
       break;
-    case 'double_arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
-      break;
     case 'arrow_barb':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
       break;
-    case 'double_arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barnEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
-      break;
     case 'arrow_circle':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
       break;
-    case 'double_arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
+    case 'aggregation':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');
+      break;
+    case 'extension':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');
+      break;
+    case 'composition':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');
+      break;
+    case 'dependency':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');
       break;
     default:
   }
diff --git a/src/dagre-wrapper/markers.js b/src/dagre-wrapper/markers.js
index 84a65dd68..9d879c08b 100644
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', type + '-extensionEnd ' + type)
+    .attr('id', type + '-extensionEnd')
     .attr('class', 'marker extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -45,7 +45,7 @@ const composition = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-compositionStart')
-    .attr('class', 'marker extension ' + type)
+    .attr('class', 'marker composition ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -58,7 +58,7 @@ const composition = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-compositionEnd')
-    .attr('class', 'marker extension ' + type)
+    .attr('class', 'marker composition ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -72,7 +72,7 @@ const aggregation = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-aggregationStart')
-    .attr('class', 'marker extension ' + type)
+    .attr('class', 'marker aggregation ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -85,7 +85,7 @@ const aggregation = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-aggregationEnd')
-    .attr('class', 'marker ' + type)
+    .attr('class', 'marker aggregation ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -99,7 +99,7 @@ const dependency = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-dependencyStart')
-    .attr('class', 'marker extension ' + type)
+    .attr('class', 'marker dependency ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -112,7 +112,7 @@ const dependency = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-dependencyEnd')
-    .attr('class', 'marker ' + type)
+    .attr('class', 'marker dependency ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)