GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

#3358 Another set of review changes

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-01-30 16:26:10 +01:00
parent 907006ff3d
commit b99b1bfd0c
9 changed files with 38 additions and 674 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/block.spec.ts
View File

@ -304,7 +304,7 @@ describe('Block diagram', () => {
it('BL22: sizing - it should be possible to make a block wider', () => { it('BL22: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block-beta
A("rounded):2 A("rounded"):2
B:2 B:2
C C
`, `,

2
cypress/platform/knsv2.html
View File

@ -65,7 +65,7 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta
blockArrowId<["`Label`"]>(right) blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left) blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up) blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down) blockArrowId4<["Label"]>(down)

6
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@ -79,7 +79,7 @@ accDescr\s*":"\s* { this.pushState
accDescr\s*"{"\s* { this.pushState("acc_descr_multiline");} accDescr\s*"{"\s* { this.pushState("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; <acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
"end"\b\s* return 'end';
// Node end of shape // Node end of shape
<NODE>"(((" { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; } <NODE>"(((" { this.popState();yy.getLogger().debug('Lex: (('); return "NODE_DEND"; }
@ -229,8 +229,8 @@ nodeStatement
{id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions} {id: $3.id, label: $3.label, type: yy.typeStr2Type($3.typeStr), directions: $3.directions}
]; ];
} }
| node SIZE { yy.getLogger().debug('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w: parseInt($2,10)}; } | node SIZE { yy.getLogger().debug('Rule: nodeStatement (abc88 node size) ', $1, $2); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, widthInColumns: parseInt($2,10)}; }
| node { yy.getLogger().debug('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, w:1}; } | node { yy.getLogger().debug('Rule: nodeStatement (node) ', $1); $$ = {id: $1.id, label: $1.label, type: yy.typeStr2Type($1.typeStr), directions: $1.directions, widthInColumns:1}; }
; ;

65
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@ -21,85 +21,80 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
classStr = classStr + ' flowchart-label'; classStr = classStr + ' flowchart-label';
// We create a SVG label, either by delegating to addHtmlLabel or manually // We create a SVG label, either by delegating to addHtmlLabel or manually
let radious = 0; let radius = 0;
let _shape = ''; let shape = '';
let layoutOptions = {}; let layoutOptions = {};
let padding; let padding;
// Set the shape based parameters // Set the shape based parameters
switch (vertex.type) { switch (vertex.type) {
case 'round': case 'round':
radious = 5; radius = 5;
_shape = 'rect'; shape = 'rect';
break; break;
// case 'composite-subgraph':
// radious = 0;
// _shape = 'composite';
// break;
case 'composite': case 'composite':
radious = 0; radius = 0;
_shape = 'composite'; shape = 'composite';
padding = 0; padding = 0;
break; break;
case 'square': case 'square':
_shape = 'rect'; shape = 'rect';
break; break;
case 'diamond': case 'diamond':
_shape = 'question'; shape = 'question';
layoutOptions = { layoutOptions = {
portConstraints: 'FIXED_SIDE', portConstraints: 'FIXED_SIDE',
}; };
break; break;
case 'hexagon': case 'hexagon':
_shape = 'hexagon'; shape = 'hexagon';
break; break;
case 'block_arrow': case 'block_arrow':
_shape = 'block_arrow'; shape = 'block_arrow';
break; break;
case 'odd': case 'odd':
_shape = 'rect_left_inv_arrow'; shape = 'rect_left_inv_arrow';
break; break;
case 'lean_right': case 'lean_right':
_shape = 'lean_right'; shape = 'lean_right';
break; break;
case 'lean_left': case 'lean_left':
_shape = 'lean_left'; shape = 'lean_left';
break; break;
case 'trapezoid': case 'trapezoid':
_shape = 'trapezoid'; shape = 'trapezoid';
break; break;
case 'inv_trapezoid': case 'inv_trapezoid':
_shape = 'inv_trapezoid'; shape = 'inv_trapezoid';
break; break;
case 'rect_left_inv_arrow': case 'rect_left_inv_arrow':
_shape = 'rect_left_inv_arrow'; shape = 'rect_left_inv_arrow';
break; break;
case 'circle': case 'circle':
_shape = 'circle'; shape = 'circle';
break; break;
case 'ellipse': case 'ellipse':
_shape = 'ellipse'; shape = 'ellipse';
break; break;
case 'stadium': case 'stadium':
_shape = 'stadium'; shape = 'stadium';
break; break;
case 'subroutine': case 'subroutine':
_shape = 'subroutine'; shape = 'subroutine';
break; break;
case 'cylinder': case 'cylinder':
_shape = 'cylinder'; shape = 'cylinder';
break; break;
case 'group': case 'group':
_shape = 'rect'; shape = 'rect';
break; break;
case 'doublecircle': case 'doublecircle':
_shape = 'doublecircle'; shape = 'doublecircle';
break; break;
default: default:
_shape = 'rect'; shape = 'rect';
} }
const styles = getStylesFromArray(vertex?.styles || []); const styles = getStylesFromArray(vertex?.styles || []);
// const styles = getStylesFromArray([]);
// Use vertex id as text in the box if no text is provided by the graph definition // Use vertex id as text in the box if no text is provided by the graph definition
const vertexText = vertex.label; const vertexText = vertex.label;
@ -108,13 +103,12 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
// Add the node // Add the node
const node = { const node = {
labelStyle: styles.labelStyle, labelStyle: styles.labelStyle,
shape: _shape, shape: shape,
labelText: vertexText, labelText: vertexText,
// labelType: vertex.labelType, rx: radius,
rx: radious, ry: radius,
ry: radious,
class: classStr, class: classStr,
style: styles.style, // + 'fill:#9f9;stroke:#333;stroke-width:4px;', style: styles.style,
id: vertex.id, id: vertex.id,
directions: vertex.directions, directions: vertex.directions,
width: bounds.width, width: bounds.width,
@ -124,8 +118,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
positioned, positioned,
intersect: undefined, intersect: undefined,
type: vertex.type, type: vertex.type,
// props: vertex.props, padding: padding ?? (getConfig()?.block?.padding || 0),
padding: padding ?? (getConfig()?.flowchart?.padding || 0),
}; };
return node; return node;
} }

5
packages/mermaid/src/diagrams/block/styles.ts
View File

@ -1,8 +1,7 @@
// import khroma from 'khroma';
import * as khroma from 'khroma'; import * as khroma from 'khroma';
/** Returns the styles given options */ /** Returns the styles given options */
export interface FlowChartStyleOptions { export interface BlockChartStyleOptions {
arrowheadColor: string; arrowheadColor: string;
border2: string; border2: string;
clusterBkg: string; clusterBkg: string;
@ -30,7 +29,7 @@ const fade = (color: string, opacity: number) => {
return khroma.rgba(r, g, b, opacity); return khroma.rgba(r, g, b, opacity);
}; };
const getStyles = (options: FlowChartStyleOptions) => const getStyles = (options: BlockChartStyleOptions) =>
`.label { `.label {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily};
color: ${options.nodeTextColor || options.textColor}; color: ${options.nodeTextColor || options.textColor};

396
packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
View File

@ -1,396 +0,0 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
import { swimlaneLayout } from './swimlane-layout.js';
import { insertNode } from '../../../dagre-wrapper/nodes.js';
import flowDb from '../flowDb.js';
import { getConfig } from '../../../config.js';
import { getStylesFromArray } from '../../../utils.js';
import setupGraph, { addEdges, addVertices } from './setup-graph.js';
import { render } from '../../../dagre-wrapper/index.js';
import { log } from '../../../logger.js';
import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
import common, { evaluate } from '../../common/common.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
import { insertEdge, positionEdgeLabel } from '../../../dagre-wrapper/edges.js';
import { clear as clearGraphlib, clusterDb } from '../../../dagre-wrapper/mermaid-graphlib.js';
const conf = {};
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (const key of keys) {
conf[key] = cnf[key];
}
};
/**
*
* @param element
* @param graph
* @param layout
* @param vert
* @param elem
* @param g
* @param id
* @param conf
*/
async function swimlaneRender(layout, vert, elem, g, id, conf) {
let max;
// draw nodes from layout.graph to element
const nodes = layout.graph.nodes();
// lanes are the swimlanes
const lanes = layout.lanes;
const nodesElements = elem.insert('g').attr('class', 'nodes');
// for each node, draw a rect, with a child text inside as label
for (const node of nodes) {
const nodeFromLayout = layout.graph.node(node);
const vertex = vert[node];
//Initialize the node
/**
* Variable for storing the classes for the vertex
*
* @type {string}
*/
let classStr = 'default';
if (vertex.classes.length > 0) {
classStr = vertex.classes.join(' ');
}
classStr = classStr + ' swimlane-label';
const styles = getStylesFromArray(vertex.styles);
// Use vertex id as text in the box if no text is provided by the graph definition
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
// We create a SVG label, either by delegating to addHtmlLabel or manually
let vertexNode;
log.info('vertex', vertex, vertex.labelType);
if (vertex.labelType === 'markdown') {
log.info('vertex', vertex, vertex.labelType);
} else {
if (evaluate(getConfig().flowchart.htmlLabels)) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const node = {
label: vertexText.replace(
/fa[blrs]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
),
};
vertexNode = addHtmlLabel(elem, node).node();
vertexNode.parentNode.removeChild(vertexNode);
} else {
// doc is undefined ???
// const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
// const rows = vertexText.split(common.lineBreakRegex);
// for (const row of rows) {
// const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
// tspan.setAttribute('dy', '1em');
// tspan.setAttribute('x', '1');
// tspan.textContent = row;
// svgLabel.appendChild(tspan);
// }
// vertexNode = svgLabel;
}
}
let radious = 0;
let _shape = '';
// Set the shape based parameters
switch (vertex.type) {
case 'round':
radious = 5;
_shape = 'rect';
break;
case 'square':
_shape = 'rect';
break;
case 'diamond':
_shape = 'question';
break;
case 'hexagon':
_shape = 'hexagon';
break;
case 'odd':
_shape = 'rect_left_inv_arrow';
break;
case 'lean_right':
_shape = 'lean_right';
break;
case 'lean_left':
_shape = 'lean_left';
break;
case 'trapezoid':
_shape = 'trapezoid';
break;
case 'inv_trapezoid':
_shape = 'inv_trapezoid';
break;
case 'odd_right':
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
case 'ellipse':
_shape = 'ellipse';
break;
case 'stadium':
_shape = 'stadium';
break;
case 'subroutine':
_shape = 'subroutine';
break;
case 'cylinder':
_shape = 'cylinder';
break;
case 'group':
_shape = 'rect';
break;
case 'doublecircle':
_shape = 'doublecircle';
break;
default:
_shape = 'rect';
}
// Add the node
let nodeObj = {
labelStyle: styles.labelStyle,
shape: _shape,
labelText: vertexText,
labelType: vertex.labelType,
rx: radious,
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id,
link: vertex.link,
linkTarget: vertex.linkTarget,
// tooltip: diagObj.db.getTooltip(vertex.id) || '',
// domId: diagObj.db.lookUpDomId(vertex.id),
haveCallback: vertex.haveCallback,
width: vertex.type === 'group' ? 500 : undefined,
dir: vertex.dir,
type: vertex.type,
props: vertex.props,
padding: getConfig().flowchart.padding,
x: nodeFromLayout.x,
y: nodeFromLayout.y,
};
let boundingBox;
let nodeEl;
// Add the element to the DOM
nodeEl = await insertNode(nodesElements, nodeObj, vertex.dir);
boundingBox = nodeEl.node().getBBox();
nodeEl.attr('transform', `translate(${nodeObj.x}, ${nodeObj.y / 2})`);
}
return elem;
}
/**
* Returns the all the styles from classDef statements in the graph definition.
*
* @param text
* @param diagObj
* @returns {object} ClassDef styles
*/
export const getClasses = function (text, diagObj) {
log.info('Extracting classes');
diagObj.db.clear();
try {
// Parse the graph definition
diagObj.parse(text);
return diagObj.db.getClasses();
} catch (e) {
return;
}
};
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
*
* @param text
* @param id
*/
export const draw = async function (text, id, _version, diagObj) {
log.info('Drawing flowchart');
diagObj.db.clear();
flowDb.setGen('gen-2');
// Parse the graph definition
diagObj.parser.parse(text);
const { securityLevel, flowchart: conf } = getConfig();
// Handle root and document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// create g as a graphlib graph using setupGraph from setup-graph.js
const g = setupGraph(diagObj, id, root, doc);
let subG;
const subGraphs = diagObj.db.getSubGraphs();
log.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
log.info('Subgraph - ', subG);
diagObj.db.addVertex(
subG.id,
{ text: subG.title, type: subG.labelType },
'group',
undefined,
subG.classes,
subG.dir
);
}
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
const edges = diagObj.db.getEdges();
log.info('Edges', edges);
const svg = root.select('#' + id);
svg.append('g');
// Run the renderer. This is what draws the final graph.
// const element = root.select('#' + id + ' g');
// console.log('diagObj', diagObj);
// console.log('subGraphs', diagObj.db.getSubGraphs());
const layout = swimlaneLayout(g, diagObj);
// console.log('custom layout', layout);
// draw lanes as vertical lines
const lanesElements = svg.insert('g').attr('class', 'lanes');
let laneCount = 0;
for (const lane of layout.lanes) {
laneCount++;
//draw lane header as rectangle with lane title centered in it
const laneHeader = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
// Set attributes for the rectangle
laneHeader.setAttribute('x', lane.x); // x-coordinate of the top-left corner
laneHeader.setAttribute('y', -50); // y-coordinate of the top-left corner
laneHeader.setAttribute('width', lane.width); // width of the rectangle
laneHeader.setAttribute('height', '50'); // height of the rectangle
if (laneCount % 2 == 0) {
//set light blue color for even lanes
laneHeader.setAttribute('fill', 'blue'); // fill color of the rectangle
} else {
//set white color odd lanes
laneHeader.setAttribute('fill', 'grey'); // fill color of the rectangle
}
laneHeader.setAttribute('stroke', 'black'); // color of the stroke/border
laneHeader.setAttribute('stroke-width', '2'); // width of the stroke/border
// Append the rectangle to the SVG element
lanesElements.node().appendChild(laneHeader);
//draw lane title
const laneTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
// Set attributes for the rectangle
laneTitle.setAttribute('x', lane.x + lane.width / 2); // x-coordinate of the top-left corner
laneTitle.setAttribute('y', -50 + 50 / 2); // y-coordinate of the top-left corner
laneTitle.setAttribute('width', lane.width); // width of the rectangle
laneTitle.setAttribute('height', '50'); // height of the rectangle
laneTitle.setAttribute('fill', 'white'); // fill color of the rectangle
laneTitle.setAttribute('stroke-width', '1'); // width of the stroke/border
laneTitle.setAttribute('text-anchor', 'middle'); // width of the stroke/border
laneTitle.setAttribute('alignment-baseline', 'middle'); // width of the stroke/border
laneTitle.setAttribute('font-size', '20'); // width of the stroke/border
laneTitle.textContent = lane.title;
// Append the rectangle to the SVG element
lanesElements.node().appendChild(laneTitle);
//draw lane
// Create a <rect> element
const rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
// Set attributes for the rectangle
rectangle.setAttribute('x', lane.x); // x-coordinate of the top-left corner
rectangle.setAttribute('y', 0); // y-coordinate of the top-left corner
rectangle.setAttribute('width', lane.width); // width of the rectangle
rectangle.setAttribute('height', '500'); // height of the rectangle
if (laneCount % 2 == 0) {
//set light blue color for even lanes
rectangle.setAttribute('fill', 'lightblue'); // fill color of the rectangle
} else {
//set white color odd lanes
rectangle.setAttribute('fill', '#ffffff'); // fill color of the rectangle
}
rectangle.setAttribute('stroke', 'black'); // color of the stroke/border
rectangle.setAttribute('stroke-width', '2'); // width of the stroke/border
// Append the rectangle to the SVG element
lanesElements.node().appendChild(rectangle);
}
// append lanesElements to elem
svg.node().appendChild(lanesElements.node());
// add lane headers
const laneHeaders = svg.insert('g').attr('class', 'laneHeaders');
addEdges(edges, g, diagObj);
g.edges().forEach(function (e) {
const edge = g.edge(e);
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
const edgePaths = svg.insert('g').attr('class', 'edgePaths');
//create edge points based on start and end node
//get start node x, y coordinates
const sourceNode = layout.graph.node(e.v);
//get end node x, y coordinates
// sourceNode.x = sourceNode.x;
// sourceNode.y = sourceNode.y;
const targetNode = layout.graph.node(e.w);
// targetNode.x = targetNode.x;
// targetNode.y = targetNode.y;
// edge.points = [];
// edge.points.push({ x: sourceNode.x, y: sourceNode.y / 2 });
// edge.points.push({ x: targetNode.x, y: targetNode.y / 2 });
const paths = insertEdge(edgePaths, e, edge, clusterDb, 'flowchart', g);
//positionEdgeLabel(edge, paths);
});
await swimlaneRender(layout, vert, svg, g, id, conf);
// utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
};
export default {
setConf,
addVertices,
addEdges,
getClasses,
draw,
};

33
packages/mermaid/src/docs/.vitepress/block.mmd
View File

@ -1,33 +0,0 @@
block
columns 3
Block1
Block2["Block 2"]
block
columns 2
Block2.1
Block2.2
end
Block3
----
block
columns 2
Block[Frontend]:vertical
block "Document management System"
columns 3
MO[Manager Operation]:vertical
block
columns 2
block "Security and User Manager"
end
----
block frontend:vertical
move right
block "Document Management System"
move down

2
packages/mermaid/src/styles.spec.ts
View File

@ -28,6 +28,7 @@ import state from './diagrams/state/styles.js';
import journey from './diagrams/user-journey/styles.js'; import journey from './diagrams/user-journey/styles.js';
import timeline from './diagrams/timeline/styles.js'; import timeline from './diagrams/timeline/styles.js';
import mindmap from './diagrams/mindmap/styles.js'; import mindmap from './diagrams/mindmap/styles.js';
import block from './diagrams/block/styles.js';
import themes from './themes/index.js'; import themes from './themes/index.js';
async function checkValidStylisCSSStyleSheet(stylisString: string) { async function checkValidStylisCSSStyleSheet(stylisString: string) {
@ -95,6 +96,7 @@ describe('styles', () => {
requirement, requirement,
sequence, sequence,
state, state,
block,
timeline, timeline,
})) { })) {
test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => { test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {

201
vite.config.ts.timestamp-1696335530501-05072b5e79635.mjs
View File

File diff suppressed because one or more lines are too long