diff --git a/.changeset/lemon-masks-unite.md b/.changeset/lemon-masks-unite.md new file mode 100644 index 000000000..306ff1cce --- /dev/null +++ b/.changeset/lemon-masks-unite.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Added support for per link curve styling in flowchart diagram using edge ids diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 97fc1ecbd..9ad2b5604 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1113,4 +1113,24 @@ end ); }); }); + + it('6617: Per Link Curve Styling using edge Ids', () => { + imgSnapshotTest( + `flowchart TD + A e1@-->B e5@--> E + E e7@--> D + B e3@-->D + A e2@-->C e4@-->D + C e6@--> F + F e8@--> D + e1@{ curve: natural } + e2@{ curve: stepAfter } + e3@{ curve: monotoneY } + e4@{ curve: bumpY } + e5@{ curve: linear } + e6@{ curve: catmullRom } + e7@{ curve: cardinal } + ` + ); + }); }); diff --git a/docs/config/setup/mermaid/interfaces/ParseOptions.md b/docs/config/setup/mermaid/interfaces/ParseOptions.md index e3a968378..ea96f2706 100644 --- a/docs/config/setup/mermaid/interfaces/ParseOptions.md +++ b/docs/config/setup/mermaid/interfaces/ParseOptions.md @@ -10,7 +10,7 @@ # Interface: ParseOptions -Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) +Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mer > `optional` **suppressErrors**: `boolean` -Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64) +Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77) If `true`, parse will return `false` instead of throwing error when the diagram is invalid. The `parseError` function will not be called. diff --git a/docs/config/setup/mermaid/interfaces/ParseResult.md b/docs/config/setup/mermaid/interfaces/ParseResult.md index 95d662b42..7a5990610 100644 --- a/docs/config/setup/mermaid/interfaces/ParseResult.md +++ b/docs/config/setup/mermaid/interfaces/ParseResult.md @@ -10,7 +10,7 @@ # Interface: ParseResult -Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67) +Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mer > **config**: [`MermaidConfig`](MermaidConfig.md) -Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75) +Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88) The config passed as YAML frontmatter or directives @@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives > **diagramType**: `string` -Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71) +Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84) The diagram type, e.g. 'flowchart', 'sequence', etc. diff --git a/docs/config/setup/mermaid/interfaces/RenderResult.md b/docs/config/setup/mermaid/interfaces/RenderResult.md index c6dc3cf08..fc5fac4f5 100644 --- a/docs/config/setup/mermaid/interfaces/RenderResult.md +++ b/docs/config/setup/mermaid/interfaces/RenderResult.md @@ -10,7 +10,7 @@ # Interface: RenderResult -Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85) +Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mer > `optional` **bindFunctions**: (`element`) => `void` -Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103) +Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116) Bind function to be called after the svg has been inserted into the DOM. This is necessary for adding event listeners to the elements in the svg. @@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. > **diagramType**: `string` -Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93) +Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106) The diagram type, e.g. 'flowchart', 'sequence', etc. @@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. > **svg**: `string` -Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89) +Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102) The svg code for the rendered graph. diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 243592515..5f827e52a 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1795,15 +1795,54 @@ It is possible to style the type of curve used for lines between items, if the d Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`. +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + In this example, a left-to-right graph uses the `stepBefore` curve style: ``` -%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +--- +config: + flowchart: + curve: stepBefore +--- graph LR ``` -For a full list of available curves, including an explanation of custom curves, refer to -the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. +#### Edge level curve style using Edge IDs (v\+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid-example +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` ### Styling a node diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts index 8d12de00b..44a6ed052 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts @@ -125,4 +125,43 @@ describe('flow db getData', () => { const { edges } = flowDb.getData(); expect(edges[0].curve).toBe('basis'); }); + + it('should support modifying interpolate using edge id syntax', () => { + flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('C', { text: 'C', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('D', { text: 'D', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addLink(['A'], ['B'], {}); + flowDb.addLink(['A'], ['C'], { id: 'e2' }); + flowDb.addLink(['B'], ['D'], { id: 'e3' }); + flowDb.addLink(['C'], ['D'], {}); + flowDb.updateLinkInterpolate(['default'], 'stepBefore'); + flowDb.updateLinkInterpolate([0], 'basis'); + flowDb.addVertex( + 'e2', + { text: 'Shouldnt be used', type: 'text' }, + undefined, + [], + [], + '', + {}, + ' curve: monotoneX ' + ); + flowDb.addVertex( + 'e3', + { text: 'Shouldnt be used', type: 'text' }, + undefined, + [], + [], + '', + {}, + ' curve: catmullRom ' + ); + + const { edges } = flowDb.getData(); + expect(edges[0].curve).toBe('basis'); + expect(edges[1].curve).toBe('monotoneX'); + expect(edges[2].curve).toBe('catmullRom'); + expect(edges[3].curve).toBe('stepBefore'); + }); }); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 65f8c4a05..b729a85e0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -139,6 +139,9 @@ export class FlowDB implements DiagramDB { if (edgeDoc?.animation !== undefined) { edge.animation = edgeDoc.animation; } + if (edgeDoc?.curve !== undefined) { + edge.interpolate = edgeDoc.curve; + } return; } diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js index 6b1bc7fbb..5dfd648ca 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js @@ -37,6 +37,59 @@ describe('[Lines] when parsing', () => { expect(edges[1].interpolate).toBe('cardinal'); }); + it('should handle edge curve properties using edge ID', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B\n' + + 'A uniqueName@-->C\n' + + 'e1@{curve: basis}\n' + + 'uniqueName@{curve: cardinal}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('basis'); + expect(edges[1].interpolate).toBe('cardinal'); + }); + + it('should handle edge curve properties using edge ID but without overriding default', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B\n' + + 'A-->C\n' + + 'linkStyle default interpolate linear\n' + + 'e1@{curve: stepAfter}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('stepAfter'); + expect(edges.defaultInterpolate).toBe('linear'); + }); + + it('should handle edge curve properties using edge ID mixed with line interpolation', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B-->D\n' + + 'A-->C e4@-->D-->E\n' + + 'linkStyle default interpolate linear\n' + + 'linkStyle 1 interpolate basis\n' + + 'e1@{curve: monotoneX}\n' + + 'e4@{curve: stepBefore}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('monotoneX'); + expect(edges[1].interpolate).toBe('basis'); + expect(edges.defaultInterpolate).toBe('linear'); + expect(edges[3].interpolate).toBe('stepBefore'); + expect(edges.defaultInterpolate).toBe('linear'); + }); + it('should handle line interpolation multi-numbered definitions', function () { const res = flow.parser.parse( 'graph TD\n' + 'A-->B\n' + 'A-->C\n' + 'linkStyle 0,1 interpolate basis' diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 909162abb..31c2a949f 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1135,15 +1135,46 @@ It is possible to style the type of curve used for lines between items, if the d Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`. +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + In this example, a left-to-right graph uses the `stepBefore` curve style: ``` -%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +--- +config: + flowchart: + curve: stepBefore +--- graph LR ``` -For a full list of available curves, including an explanation of custom curves, refer to -the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. +#### Edge level curve style using Edge IDs (v+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` ### Styling a node diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index fdccae677..d1394e71b 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -16,6 +16,19 @@ export interface NodeMetaData { export interface EdgeMetaData { animation?: 'fast' | 'slow'; animate?: boolean; + curve?: + | 'basis' + | 'bumpX' + | 'bumpY' + | 'cardinal' + | 'catmullRom' + | 'linear' + | 'monotoneX' + | 'monotoneY' + | 'natural' + | 'step' + | 'stepAfter' + | 'stepBefore'; } import type { MermaidConfig } from './config.type.js';