From b3a12237c0782be59c2467869dd90d1eec119b93 Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Wed, 9 Jul 2025 20:55:34 +0000 Subject: [PATCH 1/8] Added per link styling Edited flowDB.ts which already had interpolate for styling links individually. Added the ability to modify this parameter using the newer @ syntax using the curve property. --- packages/mermaid/src/diagrams/flowchart/flowDb.ts | 3 +++ packages/mermaid/src/types.ts | 13 +++++++++++++ 2 files changed, 16 insertions(+) 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/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'; From d7a55b422bb75f097416d301b0bafcc10cfb0ff0 Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Sat, 12 Jul 2025 19:08:42 +0000 Subject: [PATCH 2/8] Added tests for Per Link Curve Styling --- .../src/diagrams/flowchart/flowDb.spec.ts | 39 ++++++++++++++ .../flowchart/parser/flow-lines.spec.js | 53 +++++++++++++++++++ 2 files changed, 92 insertions(+) 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/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' From daf8d8d3befcd600618a629977b76463b38d0ad9 Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Sat, 12 Jul 2025 19:41:01 +0000 Subject: [PATCH 3/8] Added Changeset for Per Link Styling of edges --- .changeset/lemon-masks-unite.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lemon-masks-unite.md 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 From 003d1c7a70ee82aa44afc01c1b29d632106a570d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 12 Jul 2025 20:03:58 +0000 Subject: [PATCH 4/8] [autofix.ci] apply automated fixes --- docs/config/setup/mermaid/interfaces/ParseOptions.md | 4 ++-- docs/config/setup/mermaid/interfaces/ParseResult.md | 6 +++--- docs/config/setup/mermaid/interfaces/RenderResult.md | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) 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. From af585bdcc7c068e09ec23413c8224845c400674e Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Thu, 17 Jul 2025 21:09:22 +0000 Subject: [PATCH 5/8] Added a functioning visual test for per link curve styling --- .../rendering/flowchart-v2.spec.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) 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 } + ` + ); + }); }); From 04612e078a5db5aa0e169a92b58b01b3e20b2aa3 Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Thu, 17 Jul 2025 21:12:51 +0000 Subject: [PATCH 6/8] Removed directive syntax from the documentation --- .../mermaid/classes/UnknownDiagramError.md | 138 ++++++++++++------ .../setup/mermaid/interfaces/ParseOptions.md | 4 +- .../setup/mermaid/interfaces/ParseResult.md | 6 +- .../setup/mermaid/interfaces/RenderResult.md | 8 +- docs/syntax/flowchart.md | 6 +- packages/mermaid/src/docs/syntax/flowchart.md | 6 +- 6 files changed, 113 insertions(+), 55 deletions(-) diff --git a/docs/config/setup/mermaid/classes/UnknownDiagramError.md b/docs/config/setup/mermaid/classes/UnknownDiagramError.md index c077f0e34..d2956dd5e 100644 --- a/docs/config/setup/mermaid/classes/UnknownDiagramError.md +++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md @@ -88,13 +88,103 @@ Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib --- -### prepareStackTrace()? +### stackTraceLimit -> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any` +> `static` **stackTraceLimit**: `number` -Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143 +Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:161 -Optional override for formatting stack traces +The `Error.stackTraceLimit` property specifies the number of stack frames +collected by a stack trace (whether generated by `new Error().stack` or +`Error.captureStackTrace(obj)`). + +The default value is `10` but may be set to any valid JavaScript number. Changes +will affect any stack trace captured _after_ the value has been changed. + +If set to a non-number value, or set to a negative number, stack traces will +not capture any frames. + +#### Inherited from + +`Error.stackTraceLimit` + +## Methods + +### captureStackTrace() + +> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` + +Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:145 + +Creates a `.stack` property on `targetObject`, which when accessed returns +a string representing the location in the code at which +`Error.captureStackTrace()` was called. + +```js +const myObject = {}; +Error.captureStackTrace(myObject); +myObject.stack; // Similar to `new Error().stack` +``` + +The first line of the trace will be prefixed with +`${myObject.name}: ${myObject.message}`. + +The optional `constructorOpt` argument accepts a function. If given, all frames +above `constructorOpt`, including `constructorOpt`, will be omitted from the +generated stack trace. + +The `constructorOpt` argument is useful for hiding implementation +details of error generation from the user. For instance: + +```js +function a() { + b(); +} + +function b() { + c(); +} + +function c() { + // Create an error without stack trace to avoid calculating the stack trace twice. + const { stackTraceLimit } = Error; + Error.stackTraceLimit = 0; + const error = new Error(); + Error.stackTraceLimit = stackTraceLimit; + + // Capture the stack trace above function b + Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace + throw error; +} + +a(); +``` + +#### Parameters + +##### targetObject + +`object` + +##### constructorOpt? + +`Function` + +#### Returns + +`void` + +#### Inherited from + +`Error.captureStackTrace` + +--- + +### prepareStackTrace() + +> `static` **prepareStackTrace**(`err`, `stackTraces`): `any` + +Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:149 #### Parameters @@ -117,43 +207,3 @@ Optional override for formatting stack traces #### Inherited from `Error.prepareStackTrace` - ---- - -### stackTraceLimit - -> `static` **stackTraceLimit**: `number` - -Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145 - -#### Inherited from - -`Error.stackTraceLimit` - -## Methods - -### captureStackTrace() - -> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` - -Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136 - -Create .stack property on a target object - -#### Parameters - -##### targetObject - -`object` - -##### constructorOpt? - -`Function` - -#### Returns - -`void` - -#### Inherited from - -`Error.captureStackTrace` 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..ee6d2c639 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1798,7 +1798,11 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo In this example, a left-to-right graph uses the `stepBefore` curve style: ``` -%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +--- +config: + flowchart: + curve: stepBefore +--- graph LR ``` diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 909162abb..1737f83fb 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1138,7 +1138,11 @@ Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRo In this example, a left-to-right graph uses the `stepBefore` curve style: ``` -%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +--- +config: + flowchart: + curve: stepBefore +--- graph LR ``` From cd282f2245a1df571bd778f5ed4155b575981434 Mon Sep 17 00:00:00 2001 From: SpecularAura Date: Fri, 18 Jul 2025 21:19:06 +0000 Subject: [PATCH 7/8] Added Documentation for the per link styling in syntax/flowchat --- docs/community/contributing.md | 3 +- docs/community/intro.md | 6 ++- docs/config/directives.md | 1 - .../mermaid/classes/UnknownDiagramError.md | 6 +-- docs/ecosystem/mermaid-chart.md | 1 - docs/news/announcements.md | 2 - docs/syntax/c4.md | 6 --- docs/syntax/flowchart.md | 39 ++++++++++++++++++- docs/syntax/gantt.md | 3 +- packages/mermaid/src/docs/syntax/flowchart.md | 31 ++++++++++++++- 10 files changed, 77 insertions(+), 21 deletions(-) diff --git a/docs/community/contributing.md b/docs/community/contributing.md index 596b26430..5f7290693 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -29,7 +29,8 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid- Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). +> **💡 Tip** +> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). ```bash git clone git@github.com/your-fork/mermaid diff --git a/docs/community/intro.md b/docs/community/intro.md index 6b1430572..a549d031e 100644 --- a/docs/community/intro.md +++ b/docs/community/intro.md @@ -33,7 +33,8 @@ mindmap ## Join the Development -> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md). +> **💡 Tip** +> **Check out our** [**detailed contribution guide**](./contributing.md). Where to start: @@ -47,7 +48,8 @@ Where to start: ## A Question Or a Suggestion? -> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). +> **💡 Tip** +> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). If you have faced a vulnerability [report it to us](./security.md). diff --git a/docs/config/directives.md b/docs/config/directives.md index 13a663133..40ebd81a4 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -22,7 +22,6 @@ While directives allow you to change most of the default configuration settings, Mermaid basically supports two types of configuration options to be overridden by directives. 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: - - theme - fontFamily - logLevel diff --git a/docs/config/setup/mermaid/classes/UnknownDiagramError.md b/docs/config/setup/mermaid/classes/UnknownDiagramError.md index d2956dd5e..5d8d47461 100644 --- a/docs/config/setup/mermaid/classes/UnknownDiagramError.md +++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md @@ -92,7 +92,7 @@ Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib > `static` **stackTraceLimit**: `number` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:161 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:161 The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or @@ -114,7 +114,7 @@ not capture any frames. > `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:145 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:145 Creates a `.stack` property on `targetObject`, which when accessed returns a string representing the location in the code at which @@ -184,7 +184,7 @@ a(); > `static` **prepareStackTrace**(`err`, `stackTraces`): `any` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:149 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:149 #### Parameters diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 8100a1846..fd1e70aca 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -29,7 +29,6 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun - **Plugins** - A plugin system for extending the functionality of Mermaid. Official Mermaid Chart plugins: - - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index a8a67343d..e054d2da0 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -35,13 +35,11 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart Learn more: - Visual Editor For Flowcharts - - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0) - Visual Editor For Sequence diagrams - - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams) - [Demo video](https://youtu.be/imc2u5_N6Dc) diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index c1d2e1597..ae610d152 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -139,7 +139,6 @@ The following unfinished features are not supported in the short term. - [ ] Legend - [x] System Context - - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - [x] Person_Ext - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) @@ -153,7 +152,6 @@ The following unfinished features are not supported in the short term. - [x] System_Boundary - [x] Container diagram - - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ContainerDb - [x] ContainerQueue @@ -163,7 +161,6 @@ The following unfinished features are not supported in the short term. - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram - - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ComponentDb - [x] ComponentQueue @@ -172,18 +169,15 @@ The following unfinished features are not supported in the short term. - [x] ComponentQueue_Ext - [x] Dynamic diagram - - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram - - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types - - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] BiRel (bidirectional relationship) - [x] Rel_U, Rel_Up diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ee6d2c639..5f827e52a 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1795,6 +1795,16 @@ 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: ``` @@ -1806,8 +1816,33 @@ config: 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/docs/syntax/gantt.md b/docs/syntax/gantt.md index 552c1658a..3a42f04e1 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -360,7 +360,8 @@ gantt weekday monday ``` -> **Warning** > `millisecond` and `second` support was added in v10.3.0 +> **Warning** +> `millisecond` and `second` support was added in v10.3.0 ## Output in compact mode diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 1737f83fb..31c2a949f 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1135,6 +1135,16 @@ 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: ``` @@ -1146,8 +1156,25 @@ config: 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 From 000308c8f52f641fd0cb58b1b2a6b5496c3f6889 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 18 Jul 2025 21:44:56 +0000 Subject: [PATCH 8/8] [autofix.ci] apply automated fixes --- docs/community/contributing.md | 3 +- docs/community/intro.md | 6 +- docs/config/directives.md | 1 + .../mermaid/classes/UnknownDiagramError.md | 138 ++++++------------ docs/ecosystem/mermaid-chart.md | 1 + docs/news/announcements.md | 2 + docs/syntax/c4.md | 6 + docs/syntax/gantt.md | 3 +- 8 files changed, 58 insertions(+), 102 deletions(-) diff --git a/docs/community/contributing.md b/docs/community/contributing.md index 5f7290693..596b26430 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid- Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -> **💡 Tip** -> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). +> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). ```bash git clone git@github.com/your-fork/mermaid diff --git a/docs/community/intro.md b/docs/community/intro.md index a549d031e..6b1430572 100644 --- a/docs/community/intro.md +++ b/docs/community/intro.md @@ -33,8 +33,7 @@ mindmap ## Join the Development -> **💡 Tip** -> **Check out our** [**detailed contribution guide**](./contributing.md). +> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md). Where to start: @@ -48,8 +47,7 @@ Where to start: ## A Question Or a Suggestion? -> **💡 Tip** -> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). +> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). If you have faced a vulnerability [report it to us](./security.md). diff --git a/docs/config/directives.md b/docs/config/directives.md index 40ebd81a4..13a663133 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings, Mermaid basically supports two types of configuration options to be overridden by directives. 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: + - theme - fontFamily - logLevel diff --git a/docs/config/setup/mermaid/classes/UnknownDiagramError.md b/docs/config/setup/mermaid/classes/UnknownDiagramError.md index 5d8d47461..c077f0e34 100644 --- a/docs/config/setup/mermaid/classes/UnknownDiagramError.md +++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md @@ -88,103 +88,13 @@ Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib --- -### stackTraceLimit +### prepareStackTrace()? -> `static` **stackTraceLimit**: `number` +> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any` -Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:161 +Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143 -The `Error.stackTraceLimit` property specifies the number of stack frames -collected by a stack trace (whether generated by `new Error().stack` or -`Error.captureStackTrace(obj)`). - -The default value is `10` but may be set to any valid JavaScript number. Changes -will affect any stack trace captured _after_ the value has been changed. - -If set to a non-number value, or set to a negative number, stack traces will -not capture any frames. - -#### Inherited from - -`Error.stackTraceLimit` - -## Methods - -### captureStackTrace() - -> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` - -Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:145 - -Creates a `.stack` property on `targetObject`, which when accessed returns -a string representing the location in the code at which -`Error.captureStackTrace()` was called. - -```js -const myObject = {}; -Error.captureStackTrace(myObject); -myObject.stack; // Similar to `new Error().stack` -``` - -The first line of the trace will be prefixed with -`${myObject.name}: ${myObject.message}`. - -The optional `constructorOpt` argument accepts a function. If given, all frames -above `constructorOpt`, including `constructorOpt`, will be omitted from the -generated stack trace. - -The `constructorOpt` argument is useful for hiding implementation -details of error generation from the user. For instance: - -```js -function a() { - b(); -} - -function b() { - c(); -} - -function c() { - // Create an error without stack trace to avoid calculating the stack trace twice. - const { stackTraceLimit } = Error; - Error.stackTraceLimit = 0; - const error = new Error(); - Error.stackTraceLimit = stackTraceLimit; - - // Capture the stack trace above function b - Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace - throw error; -} - -a(); -``` - -#### Parameters - -##### targetObject - -`object` - -##### constructorOpt? - -`Function` - -#### Returns - -`void` - -#### Inherited from - -`Error.captureStackTrace` - ---- - -### prepareStackTrace() - -> `static` **prepareStackTrace**(`err`, `stackTraces`): `any` - -Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:149 +Optional override for formatting stack traces #### Parameters @@ -207,3 +117,43 @@ Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/glo #### Inherited from `Error.prepareStackTrace` + +--- + +### stackTraceLimit + +> `static` **stackTraceLimit**: `number` + +Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145 + +#### Inherited from + +`Error.stackTraceLimit` + +## Methods + +### captureStackTrace() + +> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` + +Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136 + +Create .stack property on a target object + +#### Parameters + +##### targetObject + +`object` + +##### constructorOpt? + +`Function` + +#### Returns + +`void` + +#### Inherited from + +`Error.captureStackTrace` diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index fd1e70aca..8100a1846 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun - **Plugins** - A plugin system for extending the functionality of Mermaid. Official Mermaid Chart plugins: + - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index e054d2da0..a8a67343d 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart Learn more: - Visual Editor For Flowcharts + - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0) - Visual Editor For Sequence diagrams + - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams) - [Demo video](https://youtu.be/imc2u5_N6Dc) diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index ae610d152..c1d2e1597 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term. - [ ] Legend - [x] System Context + - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - [x] Person_Ext - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) @@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term. - [x] System_Boundary - [x] Container diagram + - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ContainerDb - [x] ContainerQueue @@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term. - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram + - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ComponentDb - [x] ComponentQueue @@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term. - [x] ComponentQueue_Ext - [x] Dynamic diagram + - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram + - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types + - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] BiRel (bidirectional relationship) - [x] Rel_U, Rel_Up diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 3a42f04e1..552c1658a 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -360,8 +360,7 @@ gantt weekday monday ``` -> **Warning** -> `millisecond` and `second` support was added in v10.3.0 +> **Warning** > `millisecond` and `second` support was added in v10.3.0 ## Output in compact mode