diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index f54b9437d..04bcf852c 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -757,6 +757,11 @@ export interface StateDiagramConfig extends BaseDiagramConfig { edgeLengthFactor?: string; compositTitleSize?: number; radius?: number; + /** + * Defines how mermaid renders curves for flowcharts. + * + */ + curve?: 'basis' | 'linear' | 'cardinal' | 'rounded'; /** * Decides which rendering engine that is to be used for the rendering. * diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 921544ff2..92bb34251 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -54,16 +54,46 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`; } -const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look, classes) => { +const setupDoc = ( + parentParsedItem, + doc, + diagramStates, + nodes, + edges, + altFlag, + look, + classes, + config +) => { // graphItemCount = 0; log.trace('items', doc); doc.forEach((item) => { switch (item.stmt) { case STMT_STATE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look, classes); + dataFetcher( + parentParsedItem, + item, + diagramStates, + nodes, + edges, + altFlag, + look, + classes, + config + ); break; case DEFAULT_STATE_TYPE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look, classes); + dataFetcher( + parentParsedItem, + item, + diagramStates, + nodes, + edges, + altFlag, + look, + classes, + config + ); break; case STMT_RELATION: { @@ -75,7 +105,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l edges, altFlag, look, - classes + classes, + config ); dataFetcher( parentParsedItem, @@ -85,7 +116,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l edges, altFlag, look, - classes + classes, + config ); const edgeData = { id: 'edge' + graphItemCount, @@ -102,6 +134,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l thickness: G_EDGE_THICKNESS, classes: CSS_EDGE, look, + curve: config.state?.curve, }; edges.push(edgeData); graphItemCount++; @@ -181,7 +214,8 @@ export const dataFetcher = ( edges, altFlag, look, - classes + classes, + config ) => { const itemId = parsedItem.id; const dbState = diagramStates.get(itemId); @@ -362,6 +396,7 @@ export const dataFetcher = ( labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, look, + curve: config.state?.curve, }); } else { insertOrUpdateNode(nodes, nodeData, classes); @@ -369,7 +404,17 @@ export const dataFetcher = ( } if (parsedItem.doc) { log.trace('Adding nodes children '); - setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look, classes); + setupDoc( + parsedItem, + parsedItem.doc, + diagramStates, + nodes, + edges, + !altFlag, + look, + classes, + config + ); } }; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 1f12425e6..c66465941 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -221,7 +221,7 @@ const extract = (_doc) => { const config = getConfig(); const look = config.look; resetDataFetching(); - dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes); + dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes, config); nodes.forEach((node) => { if (Array.isArray(node.label)) { // add the rest as description diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 4102db2a1..4be768843 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -478,7 +478,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod } let curve = curveBasis; curve = curveLinear; - // let curve = curveCardinal; switch (edge.curve) { case 'linear': curve = curveLinear; diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index d23aa3f78..cee1918d4 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1375,6 +1375,12 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) radius: type: number default: 5 + curve: + description: | + Defines how mermaid renders curves for flowcharts. + type: string + enum: ['basis', 'linear', 'cardinal', 'rounded'] + default: 'rounded' defaultRenderer: description: | Decides which rendering engine that is to be used for the rendering.