marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-12 11:59:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-09 18:28:31 +02:00
parent 59130ca107 7fbe1661ec
commit edd4457154
10 changed files with 188 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
cypress/platform/knsv2.html
View File

@@ -75,15 +75,28 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
stateDiagram-v2 stateDiagram
state if_state <<choice>> direction LR
[*] --> IsPositive state Gorilla0 {
IsPositive --> if_state state Apa0 {
if_state --> False: if n < 0 A0 --> B0
if_state --> True : if n >= 0 }
}
Apa0 --> C0
A0 --> C0
</pre </pre
> >
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Gorilla
subgraph Apa
A[A] --- B
end
end
Apa --- C
A --x C
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram stateDiagram
@@ -93,8 +106,16 @@ stateDiagram
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
stateDiagram %%{init: {"layout": "dagre", "mergeEdges": false} }%%
state "This is a state description" as S 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
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
@@ -113,7 +134,7 @@ flowchart
if_state --> True : if n >= 0 if_state --> True : if n >= 0
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid3">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%% %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram stateDiagram
state if_state &lt;&lt;choice&gt;&gt; state if_state &lt;&lt;choice&gt;&gt;
@@ -128,8 +149,10 @@ flowchart
stateDiagram stateDiagram
direction TB direction TB
State T1 { State T1 {
T11 T11 --> T12
} }
T1 --> T2
T11 --> T2
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
@@ -212,12 +235,13 @@ stateDiagram-v2
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'handdrawn', look: 'handdrawn',
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
layout: 'dagre', // layout: 'dagre',
// layout: 'elk', layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
fontFamily: 'Kalam', fontFamily: 'Kalam',

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

@@ -60,7 +60,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
graph.children.push(child); graph.children.push(child);
nodeDb[node.id] = child; nodeDb[node.id] = child;
// // Add the element to the DOM // Add the element to the DOM
if (!node.isGroup) { if (!node.isGroup) {
const childNodeEl = await insertNode(nodeEl, node, node.dir); const childNodeEl = await insertNode(nodeEl, node, node.dir);
boundingBox = childNodeEl.node().getBBox(); boundingBox = childNodeEl.node().getBBox();
@@ -93,7 +93,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
export const addVertices = async function (nodeEl, nodeArr, graph, parentId) { export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
const siblings = nodeArr.filter((node) => node.parentId === parentId); const siblings = nodeArr.filter((node) => node.parentId === parentId);
log.info('addVertices DAGA', siblings, parentId); log.info('addVertices APA12', siblings, parentId);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
await Promise.all( await Promise.all(
siblings.map(async (node) => { siblings.map(async (node) => {
@@ -512,9 +512,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
const node = nodeDb[n.id]; const node = nodeDb[n.id];
// Subgraph // Subgraph
console.log('Subgraph XCX before');
if (parentLookupDb.childrenById[node.id] !== undefined) { if (parentLookupDb.childrenById[node.id] !== undefined) {
console.log('Subgraph XCX', node.id, node, node.labelData);
node.labels = [ node.labels = [
{ {
text: node.labelText, text: node.labelText,
@@ -553,9 +551,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
} }
}); });
console.log('before layout', JSON.stringify(elkGraph, null, 2)); // log.info('before layout', JSON.stringify(elkGraph, null, 2));
const g = await elk.layout(elkGraph); const g = await elk.layout(elkGraph);
log.info('after layout', JSON.stringify(g)); // log.info('after layout', JSON.stringify(g));
// debugger; // debugger;
drawNodes(0, 0, g.children, svg, subGraphsEl, 0); drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -563,11 +561,11 @@ export const render = async (data4Layout, svg, element, algorithm) => {
// (elem, edge, clusterDb, diagramType, graph, id) // (elem, edge, clusterDb, diagramType, graph, id)
const startNode = nodeDb[edge.sources[0]]; const startNode = nodeDb[edge.sources[0]];
const endNode = nodeDb[edge.targets[0]]; const endNode = nodeDb[edge.targets[0]];
const sourceId = edge.start.id; const sourceId = edge.start;
const targetId = edge.end.id; const targetId = edge.end;
const offset = calcOffset(sourceId, targetId, parentLookupDb); const offset = calcOffset(sourceId, targetId, parentLookupDb);
log.info('APA12 offset', offset, sourceId, targetId, edge);
if (edge.sections) { if (edge.sections) {
const src = edge.sections[0].startPoint; const src = edge.sections[0].startPoint;
const dest = edge.sections[0].endPoint; const dest = edge.sections[0].endPoint;
@@ -590,6 +588,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
endNode, endNode,
data4Layout.diagramId data4Layout.diagramId
); );
log.info('APA12 edge points after insert', JSON.stringify(edge.points));
edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;

2
packages/mermaid/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@mermaid-chart/mermaid", "name": "@mermaid-chart/mermaid",
"version": "11.0.0-beta.9", "version": "11.0.0-beta.12",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "module": "./dist/mermaid.core.mjs",

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

@@ -767,6 +767,39 @@ const getTypeFromVertex = (vertex: FlowVertex) => {
return vertex.type || 'squareRect'; return vertex.type || 'squareRect';
}; };
const findNode = (nodes: Node[], id: string) => nodes.find((node) => node.id === id);
const addNodeFromVertex = (
vertex: FlowVertex,
nodes: Node[],
parentDB: Map<string, string>,
subGraphDB: Map<string, boolean>,
config: any,
useRough: boolean
): Node => {
let parentId = parentDB.get(vertex.id);
let isGroup = subGraphDB.get(vertex.id) || false;
let node = findNode(nodes, vertex.id);
if (!node) {
nodes.push({
id: vertex.id,
label: vertex.text,
labelStyle: '',
parentId,
padding: config.flowchart?.padding || 8,
cssStyles: vertex.styles.join(' '),
cssClasses: vertex.classes.join(' '),
shape: getTypeFromVertex(vertex),
dir: vertex.dir,
domId: vertex.domId,
type: isGroup ? 'group' : undefined,
isGroup,
useRough,
});
}
};
export const getData = () => { export const getData = () => {
const config = getConfig(); const config = getConfig();
const nodes: Node[] = []; const nodes: Node[] = [];
@@ -775,25 +808,47 @@ export const getData = () => {
// extract(getRootDocV2()); // extract(getRootDocV2());
// const diagramStates = getStates(); // const diagramStates = getStates();
const useRough = config.look === 'handdrawn'; const useRough = config.look === 'handdrawn';
const subGraphs = getSubGraphs();
log.info('Subgraphs - APA12', subGraphs);
const parentDB = new Map<string, string>();
const subGraphDB = new Map<string, boolean>();
for (let i = subGraphs.length - 1; i >= 0; i--) {
const subGraph = subGraphs[i];
if (subGraph.nodes.length > 0) {
subGraphDB.set(subGraph.id, true);
}
subGraph.nodes.forEach((id) => {
parentDB.set(id, subGraph.id);
});
nodes.push({
id: subGraph.id,
label: subGraph.title,
labelStyle: '',
parentId: parentDB.get(subGraph.id),
padding: config.flowchart?.padding || 8,
cssStyles: '',
cssClasses: '',
shape: 'rect',
dir: subGraph.dir,
domId: subGraph.domId,
type: 'group',
isGroup: true,
useRough,
});
}
console.log('APA12 nodes - 1', nodes.length);
const n = getVertices(); const n = getVertices();
n.forEach((vertex) => { n.forEach((vertex) => {
const node: Node = { const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
id: vertex.id, if (node) {
label: vertex.text, nodes.push(node);
labelStyle: '', }
padding: config.flowchart?.padding || 8,
cssStyles: vertex.styles.join(' '),
cssClasses: vertex.classes.join(' '),
shape: getTypeFromVertex(vertex),
dir: vertex.dir,
domId: vertex.domId,
type: undefined,
isGroup: false,
useRough,
};
nodes.push(node);
}); });
console.log('APA12 nodes', nodes.length);
const e = getEdges(); const e = getEdges();
e.forEach((rawEdge, index) => { e.forEach((rawEdge, index) => {
const edge: Edge = { const edge: Edge = {
@@ -810,6 +865,7 @@ export const getData = () => {
classes: 'edge-thickness-normal edge-pattern-solid flowchart-link', classes: 'edge-thickness-normal edge-pattern-solid flowchart-link',
arrowhead: 'none', arrowhead: 'none',
arrowTypeEnd: 'arrow_point', arrowTypeEnd: 'arrow_point',
// arrowTypeEnd: 'arrow_barb',
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
// stroke: rawEdge.pattern, // stroke: rawEdge.pattern,
pattern: rawEdge.stroke, pattern: rawEdge.stroke,
@@ -823,7 +879,6 @@ export const getData = () => {
// console.log('rawEdge SPLIT', rawEdge, index); // console.log('rawEdge SPLIT', rawEdge, index);
edges.push(edge); edges.push(edge);
}); });
console.log('edges SPLIT', edges);
//const useRough = config.look === 'handdrawn'; //const useRough = config.look === 'handdrawn';

4
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
View File

@@ -159,10 +159,8 @@ export const validate = (graph) => {
* @param {any} graph * @param {any} graph
*/ */
export const findNonClusterChild = (id, graph) => { export const findNonClusterChild = (id, graph) => {
// const node = graph.node(id);
log.trace('Searching', id); log.trace('Searching', id);
// const children = graph.children(id).reverse(); const children = graph.children(id).reverse();
const children = graph.children(id); //.reverse();
log.trace('Searching children of id ', id, children); log.trace('Searching children of id ', id, children);
if (children.length < 1) { if (children.length < 1) {
log.trace('This is a valid node', id); log.trace('This is a valid node', id);

4
packages/mermaid/src/rendering-util/render.ts
View File

@@ -28,6 +28,10 @@ const registerDefaultLayoutLoaders = () => {
name: 'fixed', name: 'fixed',
loader: async () => await import('./layout-algorithms/fixed/index.js'), loader: async () => await import('./layout-algorithms/fixed/index.js'),
}, },
// {
// name: 'elk',
// loader: async () => await import('../../../mermaid-layout-elk/src/render.js'),
// },
]); ]);
}; };

60
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -8,17 +8,18 @@ import { createText } from '../createText.ts';
import intersectRect from '../rendering-elements/intersect/intersect-rect.js'; import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
import createLabel from './createLabel.js'; import createLabel from './createLabel.js';
import { createRoundedRectPathD } from './shapes/roundedRectPath.ts'; import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
const rect = (parent, node) => { const rect = (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node); log.info('Creating subgraph rect for ', node.id, node);
const siteConfig = getConfig(); const siteConfig = getConfig();
const { themeVariables, handdrawnSeed } = siteConfig;
const { clusterBkg, clusterBorder } = themeVariables;
let { useRough } = node;
// Add outer g element // Add outer g element
const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id); const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels); const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
// Create the label and insert it after the rect // Create the label and insert it after the rect
@@ -44,7 +45,6 @@ const rect = (parent, node) => {
} }
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2;
const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width; const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
if (node.width <= bbox.width + padding) { if (node.width <= bbox.width + padding) {
@@ -53,17 +53,45 @@ const rect = (parent, node) => {
node.diff = -node.padding / 2; node.diff = -node.padding / 2;
} }
log.trace('Data ', node, JSON.stringify(node)); const totalWidth = width + padding;
// center the rect around its coordinate const totalHeight = node.height + padding;
rect const x = node.x - totalWidth / 2;
.attr('style', node.cssStyles) const y = node.y - totalHeight / 2;
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', node.x - width / 2)
.attr('y', node.y - node.height / 2 - halfPadding)
.attr('width', width)
.attr('height', node.height + padding);
log.trace('Data ', node, JSON.stringify(node));
let rect;
if (useRough) {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {
roughness: 0.7,
fill: clusterBkg,
// fill: 'red',
stroke: clusterBorder,
fillWeight: 3,
seed: handdrawnSeed,
stroke: clusterBorder,
});
const roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 0), options);
// console.log('Rough node insert CXC', roughNode);
rect = shapeSvg.insert(() => {
console.log('Rough node insert CXC', roughNode);
return roughNode;
}, ':first-child');
} else {
// add the rect
rect = shapeSvg.insert('rect', ':first-child');
// center the rect around its coordinate
rect
.attr('style', node.cssStyles)
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
.attr('height', totalHeight);
}
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig); const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
if (useHtmlLabels) { if (useHtmlLabels) {
labelEl.attr( labelEl.attr(
@@ -303,8 +331,8 @@ const divider = (parent, node) => {
return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } }; return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };
}; };
const squareRect = rect;
const shapes = { rect, roundedWithTitle, noteGroup, divider }; const shapes = { rect, squareRect, roundedWithTitle, noteGroup, divider };
let clusterElems = {}; let clusterElems = {};

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

@@ -534,14 +534,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
let lineData = points.filter((p) => !Number.isNaN(p.y)); let lineData = points.filter((p) => !Number.isNaN(p.y));
const { cornerPoints, cornerPointPositions } = extractCornerPoints(lineData); const { cornerPoints, cornerPointPositions } = extractCornerPoints(lineData);
lineData = fixCorners(lineData); lineData = fixCorners(lineData);
let lastPoint = lineData[0]; let lastPoint = lineData[lineData.length - 1];
if (lineData.length > 1) { if (lineData.length > 1) {
lastPoint = lineData[lineData.length - 1]; lastPoint = lineData[lineData.length - 1];
const secondLastPoint = lineData[lineData.length - 2]; const secondLastPoint = lineData[lineData.length - 2];
// Calculate the mid point of the last two points // Calculate the mid point of the last two points
const diffX = (lastPoint.x - secondLastPoint.x) / 4; const diffX = (lastPoint.x - secondLastPoint.x) / 2;
const diffY = (lastPoint.y - secondLastPoint.y) / 4; const diffY = (lastPoint.y - secondLastPoint.y) / 2;
const midPoint = { x: secondLastPoint.x + 3 * diffX, y: secondLastPoint.y + 3 * diffY }; const midPoint = { x: secondLastPoint.x + diffX, y: secondLastPoint.y + diffY };
lineData.splice(-1, 0, midPoint); lineData.splice(-1, 0, midPoint);
} }
// This is the accessor function we talked about above // This is the accessor function we talked about above
@@ -597,11 +597,16 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
let useRough = edge.useRough; let useRough = edge.useRough;
let svgPath; let svgPath;
let path = ''; let path = '';
let linePath = lineFunction(lineData);
if (useRough) { if (useRough) {
const rc = rough.svg(elem); const rc = rough.svg(elem);
const ld = Object.assign([], lineData); const ld = Object.assign([], lineData);
const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length - 1)), { // const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {
// const svgPathNode = rc.path(lineFunction(ld), {
// roughness: 0.3,
// seed: handdrawnSeed,
// });
const svgPathNode = rc.path(linePath, {
roughness: 0.3, roughness: 0.3,
seed: handdrawnSeed, seed: handdrawnSeed,
}); });
@@ -615,13 +620,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style); .attr('style', edge.style);
let d = svgPath.attr('d'); let d = svgPath.attr('d');
d = d + ' L ' + lastPoint.x + ' ' + lastPoint.y;
svgPath.attr('d', d); svgPath.attr('d', d);
elem.node().appendChild(svgPath.node()); elem.node().appendChild(svgPath.node());
} else { } else {
svgPath = elem svgPath = elem
.append('path') .append('path')
.attr('d', lineFunction(lineData)) .attr('d', linePath)
.attr('id', edge.id) .attr('id', edge.id)
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style); .attr('style', edge.style);

12
packages/mermaid/src/rendering-util/rendering-elements/markers.js
View File

@@ -159,11 +159,11 @@ const point = (elem, type, id) => {
.attr('id', id + '_' + type + '-pointEnd') .attr('id', id + '_' + type + '-pointEnd')
.attr('class', 'marker ' + type) .attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 6) .attr('refX', 5)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'userSpaceOnUse') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12) .attr('markerWidth', 8)
.attr('markerHeight', 12) .attr('markerHeight', 8)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z') .attr('d', 'M 0 0 L 10 5 L 0 10 z')
@@ -178,8 +178,8 @@ const point = (elem, type, id) => {
.attr('refX', 4.5) .attr('refX', 4.5)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'userSpaceOnUse') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12) .attr('markerWidth', 11)
.attr('markerHeight', 12) .attr('markerHeight', 11)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 5 L 10 10 L 10 0 z') .attr('d', 'M 0 5 L 10 10 L 10 0 z')
@@ -272,7 +272,7 @@ const barb = (elem, type, id) => {
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
.attr('markerHeight', 14) .attr('markerHeight', 14)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z'); .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');

2
packages/mermaid/src/utils/lineWithOffset.ts
View File

@@ -9,7 +9,7 @@ const markerOffsets = {
composition: 18, composition: 18,
dependency: 6, dependency: 6,
lollipop: 13.5, lollipop: 13.5,
arrow_point: 5.3, arrow_point: 4,
} as const; } as const;
/** /**