marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Enabling edges using the unified renderer for flowcharts

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-04 16:34:20 +02:00
parent d9d4a677ab
commit a85f36c3be
11 changed files with 89 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
cypress/platform/knsv2.html
View File

@@ -76,47 +76,31 @@
</head>
<body>
<pre id="diagram" class="mermaid2">
%%{
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 <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR
A[Start] --> B{Is it?} --> B1 & B2
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
A: This is A
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
flowchart
A --> B(This is B)
<pre id="diagram" class="mermaid">
%%{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]
</pre
>
<pre id="diagram" class="mermaid2">
@@ -129,7 +113,7 @@ flowchart
if_state --> True : if n >= 0
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state &lt;&lt;choice&gt;&gt;
@@ -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',

7
packages/mermaid-layout-elk/src/render.ts
View File

@@ -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
);

33
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -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 };

2
packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
View File

@@ -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';

3
packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
View File

@@ -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);

2
packages/mermaid/src/diagrams/flowchart/types.ts
View File

@@ -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;

1
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -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';

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

@@ -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)));

32
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -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);

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@@ -65,7 +65,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
updateNodeBounds(node, polygon);
node.intersect = function (point) {
log.warn('Intersect called');
log.info('Intersect called SPLIT');
return intersect.polygon(node, points, point);
};

2
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@@ -90,7 +90,7 @@ interface Edge {
labelStyle?: string;
minlen?: number;
pattern?: string;
thickness?: number;
thickness?: 'normal' | 'thick' | 'invisible';
useRough?: boolean;
}