marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6744 from SpecularAura/feature/6617_per-link-style

Browse Source 
6617: Support Per-Link Curve Styling in Flowcharts
This commit is contained in:
shubham-mermaid
2025-07-23 09:00:42 +00:00
committed by GitHub
parent cfc2551bdc 000308c8f5
commit 020c6d66e0
11 changed files with 218 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/lemon-masks-unite.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Added support for per link curve styling in flowchart diagram using edge ids

20
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -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 }
`
);
});
});

4
docs/config/setup/mermaid/interfaces/ParseOptions.md
View File

@@ -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.

6
docs/config/setup/mermaid/interfaces/ParseResult.md
View File

@@ -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.

8
docs/config/setup/mermaid/interfaces/RenderResult.md
View File

@@ -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.

45
docs/syntax/flowchart.md
View File

@@ -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\<MERMAID_RELEASE_VERSION>+)
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

39
packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
View File

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

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

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

53
packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
View File

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

37
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -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<MERMAID_RELEASE_VERSION>+)
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

13
packages/mermaid/src/types.ts
View File

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