6617: Support Per-Link Curve Styling in Flowcharts

.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

docs/config/setup/mermaid/interfaces/ParseOptions.md

@@ -10,15 +10,15 @@
 
 # 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
 
 ### suppressErrors?
 
 > `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.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,15 +10,15 @@
 
 # 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
 
 ### config
 
 > **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.

docs/config/setup/mermaid/interfaces/RenderResult.md

@@ -10,15 +10,15 @@
 
 # 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
 
 ### bindFunctions()?
 
 > `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.

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');
+  });
 });

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

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'

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