diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 52aa9bc6a..99836dd1c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -76,47 +76,31 @@
-%%{
- init: {
- "theme":"base",
- "fontFamily": "Kalam",
- "themeVariables":
- {
- "background": "#FFFFFF",
- "primaryColor": "#7bdfa7",
- "primaryTextColor": "#3c3c3b",
- "secondaryColor": "#642470",
- "secondaryTextColor": "#3c3c3b",
- "tertiaryColor": "#1c736D",
- "tertiaryTextColor": "#3c3c3b",
- "noteBkgColor": "#9fd8ef",
- "loopTextColor": "#636362",
- "labelBoxBkgColor": "#642470",
- "labelBoxBorderColor": "#642470",
- "labelTextColor": "#d4d4d4",
- "signalTextColor": "#636362",
- "signalColor": "#642470"
- }
- }
-}%%
-sequenceDiagram
- Alice->>+John: Hello John, how are you?
- Alice->>+John: John, can you hear me?
- John-->>-Alice: Hi Alice, I can hear you!
- John-->>-Alice: I feel great!
+stateDiagram-v2
+ state if_state <>
+ [*] --> IsPositive
+ IsPositive --> if_state
+ if_state --> False: if n < 0
+ if_state --> True : if n >= 0
+
+flowchart LR
+ A[Start] --> B{Is it?} --> B1 & B2
-
- %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
- A: This is A
-
- %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-flowchart
- A --> B(This is B)
+
+ %%{init: {"layout": "dagre", "mergeEdges": false} }%%
+flowchart LR
+ A ==> B(This is B)
+ A[Start] --> B(Is it?)
+ B -- Yes --> C[OK]
+ C --> D[Rethink]
+ D --> B
+ B -. No ...-> E[End]
+
+
@@ -129,7 +113,7 @@ flowchart
if_state --> True : if n >= 0
-
+
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state <<choice>>
@@ -228,11 +212,13 @@ stateDiagram-v2
};
mermaid.initialize({
// theme: 'base',
- handdrawnSeed: 12,
- look: 'handdrawn',
-
- // layout: 'dagre',
+ // handdrawnSeed: 12,
+ // look: 'handdrawn',
+ 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+ layout: 'dagre',
// layout: 'elk',
+ // layout: 'fixed',
+ htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 61221298c..b5ed9a8d3 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -561,8 +561,8 @@ export const render = async (data4Layout, svg, element, algorithm) => {
drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map((edge) => {
// (elem, edge, clusterDb, diagramType, graph, id)
- edge.start = nodeDb[edge.sources[0]];
- edge.end = nodeDb[edge.targets[0]];
+ const startNode = nodeDb[edge.sources[0]];
+ const endNode = nodeDb[edge.targets[0]];
const sourceId = edge.start.id;
const targetId = edge.end.id;
@@ -586,7 +586,8 @@ export const render = async (data4Layout, svg, element, algorithm) => {
edge,
clusterDb,
data4Layout.type,
- g,
+ startNode,
+ endNode,
data4Layout.diagramId
);
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 605e8d5ea..bb4f4ecf2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -1,5 +1,5 @@
import { select } from 'd3';
-import utils from '../../utils.js';
+import utils, { getEdgeId } from '../../utils.js';
import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js';
import common from '../common/common.js';
import type { LayoutData, LayoutMethod, Node, Edge } from '../../rendering-util/types.js';
@@ -794,6 +794,37 @@ export const getData = () => {
nodes.push(node);
});
+ const e = getEdges();
+ e.forEach((rawEdge, index) => {
+ const edge: Edge = {
+ id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'edge' }),
+ start: rawEdge.start,
+ end: rawEdge.end,
+ type: rawEdge.type || 'normal',
+ label: rawEdge.text,
+ labelpos: 'c',
+ // labelStyle: '',
+ // cssStyles: rawEdge.styles.join(' '),
+ thickness: rawEdge.stroke,
+ minlen: rawEdge.length,
+ classes: 'edge-thickness-normal edge-pattern-solid flowchart-link',
+ arrowhead: 'none',
+ arrowTypeEnd: 'arrow_point',
+ arrowheadStyle: 'fill: #333',
+ // stroke: rawEdge.pattern,
+ pattern: rawEdge.stroke,
+ // shape: getTypeFromVertex(rawEdge),
+ // dir: rawEdge.dir,
+ // domId: verawEdgertex.domId,
+ // rawEdge: undefined,
+ // isGroup: false,
+ useRough,
+ };
+ // console.log('rawEdge SPLIT', rawEdge, index);
+ edges.push(edge);
+ });
+ console.log('edges SPLIT', edges);
+
//const useRough = config.look === 'handdrawn';
return { nodes, edges, other: {}, config };
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index e3db21540..1be74da55 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -1,7 +1,7 @@
// @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison';
import flowDb from './flowDb.js';
-// import flowRendererV2 from './flowRenderer-v2.js';
+import flowRendererV2 from './flowRenderer-v2.js';
import flowRendererV3 from './flowRenderer-v3-unified.js';
import flowStyles from './styles.js';
import type { MermaidConfig } from '../../config.type.js';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
index 01bf79fcb..1d6b353d6 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -60,7 +60,8 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.direction = DIR;
data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
data4Layout.rankSpacing = conf?.rankSpacing || 50;
- data4Layout.markers = ['barb'];
+ data4Layout.markers = ['point', 'circle', 'cross'];
+
data4Layout.diagramId = id;
console.log('REF1:', data4Layout);
await render(data4Layout, svg, element);
diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts
index 954759f39..59ccf6a1d 100644
--- a/packages/mermaid/src/diagrams/flowchart/types.ts
+++ b/packages/mermaid/src/diagrams/flowchart/types.ts
@@ -23,7 +23,7 @@ export interface FlowEdge {
end: string;
interpolate?: string;
type?: string;
- stroke?: string;
+ stroke?: 'normal' | 'thick' | 'invisible';
style?: string[];
length?: number;
text: string;
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index 1b7f542fb..f6bddf0ea 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -579,7 +579,6 @@ export const getData = () => {
// nodes.push({...currentDocument.states[key]});
// }
// }
- extract(getRootDocV2());
const diagramStates = getStates();
const config = getConfig();
const useRough = config.look === 'handdrawn';
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 3ba76ff9f..0237e20b8 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -230,7 +230,9 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
- const paths = insertEdge(edgePaths, edge, clusterDb, diagramType, graph, id);
+ const startNode = graph.node(e.v);
+ var endNode = graph.node(e.w);
+ const paths = insertEdge(edgePaths, edge, clusterDb, diagramType, startNode, endNode, id);
positionEdgeLabel(edge, paths);
});
@@ -284,7 +286,7 @@ export const render = async (data4Layout, svg, element) => {
log.debug('Edges:', data4Layout.edges);
data4Layout.edges.forEach((edge) => {
- graph.setEdge(edge.start, edge.end, { ...edge });
+ graph.setEdge(edge.start, edge.end, { ...edge }, edge.id);
});
log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 8c07173a8..8b9e03fc7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -493,28 +493,28 @@ function roundedCornersLine(lineData) {
}
return path;
}
-export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) {
+export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
const { handdrawnSeed } = getConfig();
let points = edge.points;
let pointsHasChanged = false;
- const tail = edge.start;
- var head = edge.end;
+ const tail = startNode;
+ var head = endNode;
- log.info('abc88 InsertEdge: ', points);
+ // log.info('abc88 InsertEdge SPLIT: ', points, edge.start, id);
if (head.intersect && tail.intersect) {
- log.info('abc88 InsertEdge: 0.5', points);
- // points = points.slice(1, edge.points.length - 1);
- log.info('abc88 InsertEdge: 0.7', points);
- // points.unshift(tail.intersect(points[0]));
- // log.info(
- // 'Last point abc88',
- // points[points.length - 1],
- // head,
- // head.intersect(points[points.length - 1])
- // );
- // points.push(head.intersect(points[points.length - 1]));
+ // log.info('abc88 InsertEdge SPLIT: 0.5', points);
+ points = points.slice(1, edge.points.length - 1);
+ // log.info('abc88 InsertEdge SPLIT: 0.7', points);
+ points.unshift(tail.intersect(points[0]));
+ log.info(
+ 'Last point abc88',
+ points[points.length - 1],
+ head,
+ head.intersect(points[points.length - 1])
+ );
+ points.push(head.intersect(points[points.length - 1]));
}
- log.info('abc88 InsertEdge 2: ', points);
+ // log.info('abc88 InsertEdge 2 SPLIT: ', points);
if (edge.toCluster) {
log.info('to cluster abc88', clusterDb[edge.toCluster]);
points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index 98c6d4707..c72e567cf 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -65,7 +65,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise