WIP:Updated edge-arrow and correct styling pars from figma

cypress/platform/per.html

@@ -123,11 +123,11 @@ stateDiagram-v2
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
-        fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
+          actorFontFamily: 'arial',
+          noteFontFamily: 'arial',
+          messageFontFamily: 'arial',
         },
         fontSize: 12,
         logLevel: 0,

packages/mermaid/src/diagrams/state/styles.js

@@ -127,8 +127,9 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect.outer {
-  rx: 5px;
-  ry: 5px;
+  rx: 2px;
+  ry: 2px;
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};
@@ -143,6 +144,7 @@ g.stateGroup line {
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
   fill: ${options.altBackground ? options.altBackground : '#efefef'};
+
 }
 
 .statediagram-cluster .inner {
@@ -156,7 +158,7 @@ g.stateGroup line {
 }
 
 .state-shadow {
-  filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.7) );
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 
 

packages/mermaid/src/rendering-util/rendering-elements/markers.js

@@ -289,7 +289,7 @@ const barb = (elem, type, id) => {
     .attr('markerUnits', 'strokeWidth')
     .attr('orient', 'auto')
     .append('path')
-    .attr('d', 'M 19,7 L13,13 L15,7 L13,1 Z');
+    .attr('d', 'M 19,7 L11,14 L13,7 L11,0 Z');
 };
 
 // TODO rename the class diagram markers to something shape descriptive and semantic free

packages/mermaid/src/styles.ts

@@ -70,7 +70,7 @@ const getStyles = (
 
   ${diagramStyles}
   .node .neo-node {
-    stroke: red;
+    stroke: ${options.nodeBorder};
   }
   ${userStyles}
 `;