#5237 WIP

packages/mermaid/src/diagrams/state/stateCommon.ts

@@ -20,6 +20,15 @@ export const STMT_APPLYCLASS = 'applyClass';
 export const DEFAULT_STATE_TYPE = 'default';
 export const DIVIDER_TYPE = 'divider';
 
+// Graph edge settings
+export const G_EDGE_STYLE = 'fill:none';
+export const G_EDGE_ARROWHEADSTYLE = 'fill: #333';
+export const G_EDGE_LABELPOS = 'c';
+export const G_EDGE_LABELTYPE = 'text';
+export const G_EDGE_THICKNESS = 'normal';
+
+export const CSS_EDGE = 'transition';
+
 export default {
   DEFAULT_DIAGRAM_DIRECTION,
   DEFAULT_NESTED_DOC_DIR,
@@ -29,4 +38,10 @@ export default {
   STMT_APPLYCLASS,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
+  G_EDGE_STYLE,
+  G_EDGE_ARROWHEADSTYLE,
+  G_EDGE_LABELPOS,
+  G_EDGE_LABELTYPE,
+  G_EDGE_THICKNESS,
+  CSS_EDGE,
 };

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

@@ -20,8 +20,13 @@ import {
   STMT_APPLYCLASS,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
+  G_EDGE_STYLE,
+  G_EDGE_ARROWHEADSTYLE,
+  G_EDGE_LABELPOS,
+  G_EDGE_LABELTYPE,
+  G_EDGE_THICKNESS,
+  CSS_EDGE,
 } from './stateCommon.js';
-import { node } from 'stylis';
 
 const START_NODE = '[*]';
 const START_TYPE = 'start';
@@ -570,10 +575,19 @@ const dataFetcher = (parentId, doc, nodes, edges) => {
   //edges
   currentDocument.relations.forEach((item) => {
     edges.push({
-      id: item.id1 + item.id2,
-      from: item.id1,
-      to: item.id2,
-      label: item.relationTitle,
+      id: item.id1 + '-' + item.id2,
+      start: item.id1,
+      end: item.id2,
+      arrowhead: 'normal',
+      arrowTypeEnd: 'arrow_barb',
+      style: G_EDGE_STYLE,
+      labelStyle: '',
+      label: common.sanitizeText(item.description, getConfig()),
+      arrowheadStyle: G_EDGE_ARROWHEADSTYLE,
+      labelpos: G_EDGE_LABELPOS,
+      labelType: G_EDGE_LABELTYPE,
+      thickness: G_EDGE_THICKNESS,
+      classes: CSS_EDGE,
     });
   });
 

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -39,7 +39,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
     log.info('Recursive render XXX', graph.nodes());
   }
   if (graph.edges().length > 0) {
-    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
+    log.info('Recursive edges', graph.edge(graph.edges()[0]));
   }
   const clusters = elem.insert('g').attr('class', 'clusters');
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
@@ -205,7 +205,7 @@ export const render = async (data4Layout, svg, element) => {
 
   console.log('Edges:', data4Layout.edges);
   data4Layout.edges.forEach((edge) => {
-    graph.setEdge(edge.from, edge.to, { ...edge });
+    graph.setEdge(edge.start, edge.end, { ...edge });
   });
 
   log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));

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

@@ -63,7 +63,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
         /fa[blrs]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),
-      labelStyle: style.replace('fill:', 'color:'),
+      labelStyle: style ? style.replace('fill:', 'color:') : style,
     };
     let vertexNode = addHtmlLabel(node);
     // vertexNode.parentNode.removeChild(vertexNode);

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

@@ -8,6 +8,7 @@ import { evaluate } from '$root/diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
+//import type { Edge } from '$root/rendering-util/types.d.ts';
 
 let edgeLabels = {};
 let terminalLabels = {};