From 36fe04bd46535c586b6aa5c117674ec3a2b8995a Mon Sep 17 00:00:00 2001 From: nour kouider Date: Wed, 9 Apr 2025 10:56:30 +0100 Subject: [PATCH 1/2] feat(flowchart): add inheritDir option for subgraph direction --- .../integration/rendering/flowchart.spec.js | 39 +++++++++++++++++++ .../defaultConfig/variables/configKeys.md | 2 +- packages/mermaid/src/config.type.ts | 7 ++++ packages/mermaid/src/defaultConfig.ts | 4 ++ .../mermaid/src/diagrams/flowchart/flowDb.ts | 15 ++++++- 5 files changed, 64 insertions(+), 3 deletions(-) diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 7b986cd2f..40713ac4e 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -934,4 +934,43 @@ graph TD } ); }); + it('68: should honor subgraph direction when inheritDir is false', () => { + imgSnapshotTest( + ` + %%{init: {"flowchart": { "inheritDir": false }}}%% + flowchart TB + direction LR + subgraph A + direction TB + a --> b + end + subgraph B + c --> d + end + `, + { + fontFamily: 'courier', + } + ); + }); + + it('69: should inherit global direction when inheritDir is true', () => { + imgSnapshotTest( + ` + %%{init: {"flowchart": { "inheritDir": true }}}%% + flowchart TB + direction LR + subgraph A + direction TB + a --> b + end + subgraph B + c --> d + end + `, + { + fontFamily: 'courier', + } + ); + }); }); diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md index 4687ad8bc..ea65e33d6 100644 --- a/docs/config/setup/defaultConfig/variables/configKeys.md +++ b/docs/config/setup/defaultConfig/variables/configKeys.md @@ -12,4 +12,4 @@ > `const` **configKeys**: `Set`<`string`> -Defined in: [packages/mermaid/src/defaultConfig.ts:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274) +Defined in: [packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 5c34ff462..4e38152c7 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -226,6 +226,12 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines a top/bottom margin for subgraph titles * */ + /** + * If true, subgraphs without explicit direction will inherit the global graph direction (e.g., LR, TB, RL, BT). + * Defaults to `false` to preserve legacy layout behavior. + */ + inheritDir?: boolean; + subGraphTitleMargin?: { top?: number; bottom?: number; @@ -300,6 +306,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "BaseDiagramConfig". */ + export interface BaseDiagramConfig { useWidth?: number; /** diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 2e4e20f50..11ff581c1 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -71,6 +71,10 @@ const config: RequiredDeep = { fontWeight: this.personFontWeight, }; }, + flowchart: { + ...defaultConfigJson.flowchart, + inheritDir: false, // default to legacy behavior + }, external_personFont: function () { return { diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index de926f294..d4ddf006b 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -651,7 +651,8 @@ You have to call mermaid.initialize.` const prims: any = { boolean: {}, number: {}, string: {} }; const objs: any[] = []; - let dir; // = undefined; direction.trim(); + let dir: string | undefined; + const nodeList = a.filter(function (item) { const type = typeof item; if (item.stmt && item.stmt === 'dir') { @@ -670,7 +671,16 @@ You have to call mermaid.initialize.` return { nodeList, dir }; }; - const { nodeList, dir } = uniq(list.flat()); + const result = uniq(list.flat()); + const nodeList = result.nodeList; + let dir = result.dir; + const flowchartConfig = getConfig().flowchart ?? {}; + dir = + dir ?? + (flowchartConfig.inheritDir + ? (this.getDirection() ?? (getConfig() as any).direction ?? undefined) + : undefined); + if (this.version === 'gen-1') { for (let i = 0; i < nodeList.length; i++) { nodeList[i] = this.lookUpDomId(nodeList[i]); @@ -681,6 +691,7 @@ You have to call mermaid.initialize.` title = title || ''; title = this.sanitizeText(title); this.subCount = this.subCount + 1; + const subGraph = { id: id, nodes: nodeList, From 463eb07979cc959f31ca0a22f444c11970664c18 Mon Sep 17 00:00:00 2001 From: nour kouider Date: Wed, 9 Apr 2025 11:31:40 +0100 Subject: [PATCH 2/2] fix(config.schema): add inheritDir to Flowchart config and regenerate types/docs --- .../setup/defaultConfig/variables/configKeys.md | 2 +- packages/mermaid/src/config.type.ts | 13 ++++++------- packages/mermaid/src/schemas/config.schema.yaml | 7 +++++++ 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md index ea65e33d6..4aa7405e1 100644 --- a/docs/config/setup/defaultConfig/variables/configKeys.md +++ b/docs/config/setup/defaultConfig/variables/configKeys.md @@ -12,4 +12,4 @@ > `const` **configKeys**: `Set`<`string`> -Defined in: [packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279) +Defined in: [packages/mermaid/src/defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4e38152c7..7ef4a71a4 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -226,12 +226,6 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines a top/bottom margin for subgraph titles * */ - /** - * If true, subgraphs without explicit direction will inherit the global graph direction (e.g., LR, TB, RL, BT). - * Defaults to `false` to preserve legacy layout behavior. - */ - inheritDir?: boolean; - subGraphTitleMargin?: { top?: number; bottom?: number; @@ -301,12 +295,17 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * */ wrappingWidth?: number; + /** + * If true, subgraphs without explicit direction will inherit the global graph direction + * (e.g., LR, TB, RL, BT). Defaults to false to preserve legacy layout behavior. + * + */ + inheritDir?: boolean; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "BaseDiagramConfig". */ - export interface BaseDiagramConfig { useWidth?: number; /** diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 48e113a94..128ae8f3e 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -2105,6 +2105,13 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: number default: 200 + inheritDir: + type: boolean + default: false + description: | + If true, subgraphs without explicit direction will inherit the global graph direction + (e.g., LR, TB, RL, BT). Defaults to false to preserve legacy layout behavior. + SankeyLinkColor: description: | Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.