From 2c5d83fab3c7e0472ac9f6e51c4ece21a445af4d Mon Sep 17 00:00:00 2001 From: rhysd Date: Sun, 30 Apr 2023 00:32:40 +0900 Subject: [PATCH 01/73] Add `suppressErrorRendering` option to avoid inserting 'Syntax error' message in diagram --- packages/mermaid/src/config.type.ts | 1 + packages/mermaid/src/defaultConfig.ts | 8 ++++++++ packages/mermaid/src/mermaidAPI.ts | 5 ++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 545fdbbfb5..207ca60d80 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -34,6 +34,7 @@ export interface MermaidConfig { dompurifyConfig?: DOMPurify.Config; wrap?: boolean; fontSize?: number; + suppressErrorRendering?: boolean; } // TODO: More configs needs to be moved in here diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 9c6d6f46e3..00c054358e 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -152,6 +152,14 @@ const config: Partial = { */ deterministicIDSeed: undefined, + /** + * This option suppresses inserting 'Syntax error' message in diagram. This option is useful when + * you want to control how to handle syntax error in your application. + * + * Default value: false + */ + suppressErrorRendering: false, + /** The object containing configurations specific for flowcharts */ flowchart: { /** diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 5e9d0ead6d..b31378ce6d 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -511,7 +511,9 @@ const render = async function ( try { await diag.renderer.draw(text, id, version, diag); } catch (e) { - errorRenderer.draw(text, id, version); + if (!config.suppressErrorRendering) { + errorRenderer.draw(text, id, version); + } throw e; } @@ -617,6 +619,7 @@ function addA11yInfo( * securityLevel: 'strict', * startOnLoad: true, * arrowMarkerAbsolute: false, + * suppressErrorRendering: false, * * er: { * diagramPadding: 20, From b4618f9ba1442d077caa7d99ae46466b40d65887 Mon Sep 17 00:00:00 2001 From: rhysd Date: Sun, 30 Apr 2023 22:29:53 +0900 Subject: [PATCH 02/73] Throw error when detecting diagram type failed and `suppressErrorRendering` is set --- packages/mermaid/src/mermaidAPI.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index b31378ce6d..16421ba9b0 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -476,6 +476,9 @@ const render = async function ( try { diag = await getDiagramFromText(text); } catch (error) { + if (config.suppressErrorRendering) { + throw error; + } diag = new Diagram('error'); parseEncounteredException = error; } From b09cdc0a180bc2e948bc046b9d1be793a1656eab Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 6 Sep 2023 12:59:02 +0530 Subject: [PATCH 03/73] chore: Add suppressErrorRendering to config --- packages/mermaid/src/config.type.ts | 5 +++++ packages/mermaid/src/schemas/config.schema.yaml | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 9ae4079b98..81dca5a00b 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -158,6 +158,11 @@ export interface MermaidConfig { dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; + /** + * Suppresses inserting 'Syntax error' diagram in the DOM. + * This is useful when you want to control how to handle syntax errors in your application. + * + */ suppressErrorRendering?: boolean; } /** diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index c0d239fb60..04aec01efd 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -217,6 +217,12 @@ properties: fontSize: type: number default: 16 + suppressErrorRendering: + type: boolean + default: false + description: | + Suppresses inserting 'Syntax error' diagram in the DOM. + This is useful when you want to control how to handle syntax errors in your application. $defs: # JSON Schema definition (maybe we should move these to a seperate file) BaseDiagramConfig: From 0480339272a21a397e3b16aff9b84aef38b3f4c3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 6 Sep 2023 13:09:06 +0530 Subject: [PATCH 04/73] Add test --- .../integration/other/configuration.spec.js | 10 ++++++ cypress/platform/suppressError.html | 32 +++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 cypress/platform/suppressError.html diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 7cbc5d1059..5d5711459f 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -126,4 +126,14 @@ describe('Configuration', () => { ); }); }); + + it('should not render error diagram if suppressErrorRendering is set', () => { + const url = 'http://localhost:9000/regression/issue-1874.html'; + cy.viewport(1440, 1024); + cy.visit(url); + cy.get('#test'); + cy.matchImageSnapshot( + 'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set' + ); + }); }); diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html new file mode 100644 index 0000000000..ab6cc323c2 --- /dev/null +++ b/cypress/platform/suppressError.html @@ -0,0 +1,32 @@ + + + + + + Mermaid Quick Test Page + + + +
+ 
+  flowchart
+      a[This should be visible]
+
+ 
+  flowchart
+    a --< b
+
+ 
+  flowchart
+      a[This should be visible, error diagram should not be visible above this]
+
+
+ + + From 65dabeaf159508c5b40a445962b3069ff14b7f56 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 6 Sep 2023 13:15:04 +0530 Subject: [PATCH 05/73] Add test --- .../integration/other/configuration.spec.js | 28 +++++++++++++------ cypress/platform/suppressError.html | 6 ++-- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 5d5711459f..51cbb0da5d 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -127,13 +127,25 @@ describe('Configuration', () => { }); }); - it('should not render error diagram if suppressErrorRendering is set', () => { - const url = 'http://localhost:9000/regression/issue-1874.html'; - cy.viewport(1440, 1024); - cy.visit(url); - cy.get('#test'); - cy.matchImageSnapshot( - 'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set' - ); + describe('suppressErrorRendering', () => { + it('should not render error diagram if suppressErrorRendering is set', () => { + const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true'; + cy.viewport(1440, 1024); + cy.visit(url); + cy.get('#test'); + cy.matchImageSnapshot( + 'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set' + ); + }); + + it('should render error diagram if suppressErrorRendering is not set', () => { + const url = 'http://localhost:9000/suppressError.html'; + cy.viewport(1440, 1024); + cy.visit(url); + cy.get('#test'); + cy.matchImageSnapshot( + 'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set' + ); + }); }); }); diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html index ab6cc323c2..bfaf76ed28 100644 --- a/cypress/platform/suppressError.html +++ b/cypress/platform/suppressError.html @@ -20,13 +20,15 @@ > 
   flowchart
-      a[This should be visible, error diagram should not be visible above this]
+      a[This should be visible]
From 8b8b828cd1504adf80db8da0afefa0e71e037f3a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 6 Sep 2023 13:19:08 +0530 Subject: [PATCH 06/73] docs: Rebuild --- docs/config/setup/modules/mermaidAPI.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index d5d4a1cbc1..ae5a7dd367 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -42,6 +42,7 @@ const config = { securityLevel: 'strict', startOnLoad: true, arrowMarkerAbsolute: false, + suppressErrorRendering: false, er: { diagramPadding: 20, @@ -96,7 +97,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:673](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L673) +[mermaidAPI.ts:679](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L679) ## Functions From 16c12a42c7892eb268e4afdc9e9cf589ce9138a4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:32:35 +0530 Subject: [PATCH 07/73] fix: Remove blank SVG --- docs/config/setup/modules/mermaidAPI.md | 2 +- packages/mermaid/src/mermaidAPI.ts | 26 +++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index ae5a7dd367..25d2d63331 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -97,7 +97,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:679](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L679) +[mermaidAPI.ts:685](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L685) ## Functions diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index e9ec3eca14..6a6b97735d 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -420,6 +420,16 @@ const render = async function ( const enclosingDivID = 'd' + id; const enclosingDivID_selector = '#' + enclosingDivID; + const removeTempElements = () => { + // ------------------------------------------------------------------------------- + // Remove the temporary HTML element if appropriate + const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector; + const node = select(tmpElementSelector).node(); + if (node && 'remove' in node) { + node.remove(); + } + }; + let root: any = select('body'); const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX; @@ -479,6 +489,7 @@ const render = async function ( diag = await getDiagramFromText(text); } catch (error) { if (config.suppressErrorRendering) { + removeTempElements(); throw error; } diag = new Diagram('error'); @@ -510,10 +521,11 @@ const render = async function ( try { await diag.renderer.draw(text, id, version, diag); } catch (e) { - if (!config.suppressErrorRendering) { - errorRenderer.draw(text, id, version); + if (config.suppressErrorRendering) { + removeTempElements(); + throw e; } - throw e; + errorRenderer.draw(text, id, version); } // This is the d3 node for the svg element @@ -549,13 +561,7 @@ const render = async function ( throw parseEncounteredException; } - // ------------------------------------------------------------------------------- - // Remove the temporary HTML element if appropriate - const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector; - const node = select(tmpElementSelector).node(); - if (node && 'remove' in node) { - node.remove(); - } + removeTempElements(); return { svg: svgCode, From 5f41b65af1bcc3f25645e32c3f722b914b425158 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 15 Sep 2023 08:41:12 +0530 Subject: [PATCH 08/73] chore: Add suppressErrorRendering to secure flags. Co-authored-by: Alois Klink --- cypress/platform/suppressError.html | 18 ++++++++++++++++++ .../mermaid/src/schemas/config.schema.yaml | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html index bfaf76ed28..19e8da22dd 100644 --- a/cypress/platform/suppressError.html +++ b/cypress/platform/suppressError.html @@ -21,6 +21,24 @@ 
   flowchart
       a[This should be visible]
+
+ 
+  ---
+  config:
+    suppressErrorRendering: true # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
+
+ 
+  ---
+  config:
+    suppressErrorRendering: false # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 9f396e2b68..edda2feb16 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -155,7 +155,7 @@ properties: in the current `currentConfig`. This prevents malicious graph directives from overriding a site's default security. - default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] + default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'suppressErrorRendering'] type: array items: type: string From bd1e7a7c1322abaf1f74b3c40ab55dedb2e4d084 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 15 Sep 2023 08:42:12 +0530 Subject: [PATCH 09/73] fix: Retain default behavior when rendering errors cases Co-authored-by: Alois Klink --- docs/config/setup/modules/mermaidAPI.md | 2 +- packages/mermaid/src/mermaidAPI.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 8cb03980d7..e823273715 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -97,7 +97,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:653](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L653) +[mermaidAPI.ts:654](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L654) ## Functions diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 8eea34d881..a765abd521 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -491,9 +491,10 @@ const render = async function ( } catch (e) { if (config.suppressErrorRendering) { removeTempElements(); - throw e; + } else { + errorRenderer.draw(text, id, version); } - errorRenderer.draw(text, id, version); + throw e; } // This is the d3 node for the svg element From 56d339b8f0eadd77a7c951dcbbb132d02252985d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 16 Sep 2023 13:33:28 +0530 Subject: [PATCH 10/73] fix: Race condition when running suppressError test. Co-authored-by: Alois Klink --- cypress/integration/other/configuration.spec.js | 13 ++++++++++++- cypress/platform/suppressError.html | 6 +++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 51cbb0da5d..3b6e12cf20 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -132,7 +132,17 @@ describe('Configuration', () => { const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('#test'); + cy.window().should('have.property', 'rendered', true); + cy.get('#test') + .find('svg') + .should(($svg) => { + expect($svg).to.have.length(2); // all failing diagrams should not appear! + $svg.each((_index, svg) => { + expect(cy.$$(svg)).to.be.visible(); + // none of the diagrams should be error diagrams + expect($svg).to.not.contain('Syntax error'); + }); + }); cy.matchImageSnapshot( 'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set' ); @@ -142,6 +152,7 @@ describe('Configuration', () => { const url = 'http://localhost:9000/suppressError.html'; cy.viewport(1440, 1024); cy.visit(url); + cy.window().should('have.property', 'rendered', true); cy.get('#test'); cy.matchImageSnapshot( 'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set' diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html index 19e8da22dd..02591ce705 100644 --- a/cypress/platform/suppressError.html +++ b/cypress/platform/suppressError.html @@ -46,7 +46,11 @@ import mermaid from './mermaid.esm.mjs'; const shouldSuppress = new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true'; - mermaid.initialize({ startOnLoad: true, suppressErrorRendering: shouldSuppress }); + mermaid.initialize({ startOnLoad: false, suppressErrorRendering: shouldSuppress }); + await mermaid.run(); + if (window.Cypress) { + window.rendered = true; + } From 577f0ca5629af574712944d68be49ae5d901f970 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 16 Sep 2023 13:54:43 +0530 Subject: [PATCH 11/73] fix: Cypress test for Suppress Error --- .../integration/other/configuration.spec.js | 28 +++++++++++++------ cypress/platform/suppressError.html | 9 ++++-- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 3b6e12cf20..7f47b57e8b 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -128,20 +128,24 @@ describe('Configuration', () => { }); describe('suppressErrorRendering', () => { + beforeEach(() => { + cy.on('uncaught:exception', (err, runnable) => { + return !err.message.includes('Parse error on line'); + }); + cy.viewport(1440, 1024); + }); + it('should not render error diagram if suppressErrorRendering is set', () => { const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true'; - cy.viewport(1440, 1024); cy.visit(url); cy.window().should('have.property', 'rendered', true); cy.get('#test') .find('svg') .should(($svg) => { - expect($svg).to.have.length(2); // all failing diagrams should not appear! - $svg.each((_index, svg) => { - expect(cy.$$(svg)).to.be.visible(); - // none of the diagrams should be error diagrams - expect($svg).to.not.contain('Syntax error'); - }); + // all failing diagrams should not appear! + expect($svg).to.have.length(2); + // none of the diagrams should be error diagrams + expect($svg).to.not.contain('Syntax error'); }); cy.matchImageSnapshot( 'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set' @@ -150,10 +154,16 @@ describe('Configuration', () => { it('should render error diagram if suppressErrorRendering is not set', () => { const url = 'http://localhost:9000/suppressError.html'; - cy.viewport(1440, 1024); cy.visit(url); cy.window().should('have.property', 'rendered', true); - cy.get('#test'); + cy.get('#test') + .find('svg') + .should(($svg) => { + // all five diagrams should be rendered + expect($svg).to.have.length(5); + // some of the diagrams should be error diagrams + expect($svg).to.contain('Syntax error'); + }); cy.matchImageSnapshot( 'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set' ); diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html index 02591ce705..347a82c79c 100644 --- a/cypress/platform/suppressError.html +++ b/cypress/platform/suppressError.html @@ -47,9 +47,12 @@ const shouldSuppress = new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true'; mermaid.initialize({ startOnLoad: false, suppressErrorRendering: shouldSuppress }); - await mermaid.run(); - if (window.Cypress) { - window.rendered = true; + try { + await mermaid.run(); + } catch { + if (window.Cypress) { + window.rendered = true; + } } From 43885e6d0bdc0717c7f3a05e9d49ef06941cc177 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Mon, 18 Sep 2023 15:58:57 +0200 Subject: [PATCH 12/73] make auto wrapping in markdown optional --- packages/mermaid/src/config.type.ts | 1 + .../mermaid/src/rendering-util/handle-markdown-text.ts | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index ca55d9af47..017410dce7 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -139,6 +139,7 @@ export interface MermaidConfig { * You can set this attribute to base the seed on a static string. * */ + markdownAutoWrap?: boolean; deterministicIDSeed?: string; flowchart?: FlowchartDiagramConfig; sequence?: SequenceDiagramConfig; diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index ce694edcda..e5e1712851 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -2,6 +2,7 @@ import type { Content } from 'mdast'; import { fromMarkdown } from 'mdast-util-from-markdown'; import { dedent } from 'ts-dedent'; import type { MarkdownLine, MarkdownWordType } from './types.js'; +import { getConfig } from '../config.js'; /** * @param markdown - markdown to process @@ -58,10 +59,15 @@ export function markdownToLines(markdown: string): MarkdownLine[] { export function markdownToHTML(markdown: string) { const { children } = fromMarkdown(markdown); + const markdownAutoWrap = getConfig().markdownAutoWrap; function output(node: Content): string { if (node.type === 'text') { - return node.value.replace(/\n/g, '
'); + if (!markdownAutoWrap) { + return node.value.replace(/\n/g, '
').replace(/ /g, ' '); + } else { + return node.value.replace(/\n/g, '
'); + } } else if (node.type === 'strong') { return `${node.children.map(output).join('')}`; } else if (node.type === 'emphasis') { From bca39e8081b51a05674c5a76e9759cdbb00104dc Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 15:38:17 +0200 Subject: [PATCH 13/73] optional wrap and test --- .../src/rendering-util/handle-markdown-text.spec.ts | 9 +++++++++ .../mermaid/src/rendering-util/handle-markdown-text.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts index 3ca7a3d7a6..55c40127f4 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts @@ -1,5 +1,6 @@ import { markdownToLines, markdownToHTML } from './handle-markdown-text.js'; import { test, expect } from 'vitest'; +import { setConfig } from '../config.js'; test('markdownToLines - Basic test', () => { const input = `This is regular text @@ -262,3 +263,11 @@ test('markdownToHTML - Unsupported formatting', () => { - l3`) ).toMatchInlineSnapshot('"

Hello

Unsupported markdown: list"'); }); + +test('markdownToHTML - no auto wrapping', () => { + setConfig({ markdownAutoWrap: false }); + expect( + markdownToHTML(`Hello, how do + you do?`) + ).toMatchInlineSnapshot('"

Hello, how do
you do?

"'); +}); diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index e5e1712851..160be86da4 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -63,7 +63,7 @@ export function markdownToHTML(markdown: string) { function output(node: Content): string { if (node.type === 'text') { - if (!markdownAutoWrap) { + if (markdownAutoWrap === false) { return node.value.replace(/\n/g, '
').replace(/ /g, ' '); } else { return node.value.replace(/\n/g, '
'); From a75d14f5d0ebb2f026080dfe5f73e2fc7a431c1e Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 17:03:47 +0200 Subject: [PATCH 14/73] removed commented out code --- packages/mermaid/src/rendering-util/createText.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index a0aaa66bad..a55f097235 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -169,9 +169,9 @@ export const createText = ( log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode, addSvgBackground); if (useHtmlLabels) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? - // text = text.replace(/\\n|\n/g, '
'); + const htmlText = markdownToHTML(text); - // log.info('markdo wnToHTML' + text, markdownToHTML(text)); + const node = { isNode, label: decodeEntities(htmlText).replace( From 0af77a3c2caedd54da9540abd3006b80a81a2f3d Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 17:57:59 +0200 Subject: [PATCH 15/73] optional auto wrapping for markdownToLines --- packages/mermaid/src/rendering-util/handle-markdown-text.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index 160be86da4..572b28c996 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -9,10 +9,16 @@ import { getConfig } from '../config.js'; * @returns processed markdown */ function preprocessMarkdown(markdown: string): string { + const markdownAutoWrap = getConfig().markdownAutoWrap; // Replace multiple newlines with a single newline const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n'); // Remove extra spaces at the beginning of each line const withoutExtraSpaces = dedent(withoutMultipleNewlines); + /* + if (markdownAutoWrap === false) { + return withoutExtraSpaces.replace(/ /g, ' '); + } + */ return withoutExtraSpaces; } From a5cb58ca96df639da35ad5646579ff83c9f34fdf Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 17:59:35 +0200 Subject: [PATCH 16/73] add flowchart documentation --- docs/syntax/flowchart.md | 10 ++++++++++ packages/mermaid/src/docs/syntax/flowchart.md | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 23b05af7f4..ca10589896 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -828,6 +828,16 @@ Formatting: This feature is applicable to node labels, edge labels, and subgraph labels. +The auto wrapping can be disabled by using + +```mermaid-example +%%{init: {"markdownAutoWrap": false} }%% +``` + +```mermaid +%%{init: {"markdownAutoWrap": false} }%% +``` + ## Interaction It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 7946d57251..fbfdd9fada 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -519,6 +519,12 @@ Formatting: This feature is applicable to node labels, edge labels, and subgraph labels. +The auto wrapping can be disabled by using + +```mermaid-example +%%{init: {"markdownAutoWrap": false} }%% +``` + ## Interaction It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. From b561d5ad9a5d925bf2a4578cec5bdfd7f14f2dee Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 18:00:48 +0200 Subject: [PATCH 17/73] removed commented out code --- packages/mermaid/src/rendering-util/handle-markdown-text.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts index 572b28c996..cde16bc11b 100644 --- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts +++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts @@ -14,11 +14,9 @@ function preprocessMarkdown(markdown: string): string { const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n'); // Remove extra spaces at the beginning of each line const withoutExtraSpaces = dedent(withoutMultipleNewlines); - /* if (markdownAutoWrap === false) { return withoutExtraSpaces.replace(/ /g, ' '); } - */ return withoutExtraSpaces; } From 1102bf271db11f924fa8e1b167369a796d3b2b9a Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 18:12:57 +0200 Subject: [PATCH 18/73] corrected documentation --- docs/syntax/flowchart.md | 2 ++ packages/mermaid/src/docs/syntax/flowchart.md | 1 + 2 files changed, 3 insertions(+) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ca10589896..c06819519d 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -832,10 +832,12 @@ The auto wrapping can be disabled by using ```mermaid-example %%{init: {"markdownAutoWrap": false} }%% +graph LR ``` ```mermaid %%{init: {"markdownAutoWrap": false} }%% +graph LR ``` ## Interaction diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index fbfdd9fada..5680266b79 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -523,6 +523,7 @@ The auto wrapping can be disabled by using ```mermaid-example %%{init: {"markdownAutoWrap": false} }%% +graph LR ``` ## Interaction From f256a57f273b9b74b99b6a191ef74fb3ca02d15d Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 18:16:23 +0200 Subject: [PATCH 19/73] again correction to documentation --- docs/syntax/flowchart.md | 11 ++--------- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index c06819519d..fbf751e746 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -830,15 +830,8 @@ This feature is applicable to node labels, edge labels, and subgraph labels. The auto wrapping can be disabled by using -```mermaid-example -%%{init: {"markdownAutoWrap": false} }%% -graph LR -``` - -```mermaid -%%{init: {"markdownAutoWrap": false} }%% -graph LR -``` + %%{init: {"markdownAutoWrap": false} }%% + graph LR ## Interaction diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 5680266b79..dfafac9b92 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -521,7 +521,7 @@ This feature is applicable to node labels, edge labels, and subgraph labels. The auto wrapping can be disabled by using -```mermaid-example +``` %%{init: {"markdownAutoWrap": false} }%% graph LR ``` From 589f90762a2969a28c3f25083e4eef15ed093850 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Tue, 19 Sep 2023 19:24:16 +0200 Subject: [PATCH 20/73] change congig.schema.yaml for consistency --- packages/mermaid/src/config.type.ts | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 017410dce7..b72364c29d 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -139,7 +139,6 @@ export interface MermaidConfig { * You can set this attribute to base the seed on a static string. * */ - markdownAutoWrap?: boolean; deterministicIDSeed?: string; flowchart?: FlowchartDiagramConfig; sequence?: SequenceDiagramConfig; @@ -159,6 +158,7 @@ export interface MermaidConfig { dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; + markdownAutoWrap?: boolean; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 6f01d57154..eea5d295d0 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -217,6 +217,8 @@ properties: fontSize: type: number default: 16 + markdownAutoWrap: + type: boolean $defs: # JSON Schema definition (maybe we should move these to a seperate file) BaseDiagramConfig: From c08f927d603139f2619e71df47eda2801cf7164d Mon Sep 17 00:00:00 2001 From: itsalam Date: Fri, 15 Sep 2023 13:17:13 -0700 Subject: [PATCH 21/73] Fixed styling for lines for ELK flowchart --- .../rendering/flowchart-elk.spec.js | 40 +++++++++++++++++++ .../flowchart/elk/flowRenderer-elk.js | 13 ++++-- .../flowchart/elk/flowchart-elk-definition.ts | 2 +- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 221806b073..be60735d45 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -844,3 +844,43 @@ end }); }); }); + +describe('Title and arrow styling #4813', () => { + + it('should render a flowchart with title', () => { + const titleString = 'Test Title'; + renderGraph( + `--- + title: ${titleString} + --- + flowchart LR + A-->B`, + { flowchart: { defaultRenderer: "elk" } } + ); + cy.get('svg').should((svg) => { + + const title = svg[0].querySelector('text'); + expect(title.textContent).to.contain(titleString); + }); + }); + + it('Render with stylized arrows', () => { + const titleString = 'Test Title'; + renderGraph( + ` + flowchart LR + A-->B + B-.-oC + C==xD + D ~~~ A`, + { flowchart: { defaultRenderer: "elk" } } + ); + cy.get('svg').should((svg) => { + const edges = svg[0].querySelectorAll('.edges path'); + expect(edges[0]).to.have.attr('pattern', 'solid'); + expect(edges[1]).to.have.attr('pattern', 'dotted'); + expect(edges[2]).to.have.css('stroke-width', '3.5px'); + expect(edges[3]).to.have.css('stroke-width', '1.5px'); + }); + }); +}) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index e45739524e..10cf860722 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -4,6 +4,7 @@ import insertMarkers from '../../../dagre-wrapper/markers.js'; import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js'; import { findCommonAncestor } from './render-utils.js'; import { labelHelper } from '../../../dagre-wrapper/shapes/util.js'; +import utils from '../../../utils.js'; import { getConfig } from '../../../config.js'; import { log } from '../../../logger.js'; import { setupGraphViewbox } from '../../../setupGraphViewbox.js'; @@ -756,6 +757,12 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i .attr('d', curve(points)) .attr('class', 'path ' + edgeData.classes) .attr('fill', 'none'); + Object.entries(edgeData).forEach(([key, value]) => { + if (key !== 'classes'){ + edgePath.attr(key, value); + } + }); + log.info(edgePath); const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel'); const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl)); const box = edgeWithLabel.node().firstChild.getBoundingClientRect(); @@ -805,6 +812,7 @@ const insertChildren = (nodeArray, parentLookupDb) => { export const draw = async function (text, id, _version, diagObj) { // Add temporary render element diagObj.db.clear(); + const { securityLevel, flowchart: conf } = getConfig(); nodeDb = {}; portPos = {}; diagObj.db.setGen('gen-2'); @@ -816,8 +824,7 @@ export const draw = async function (text, id, _version, diagObj) { id: 'root', layoutOptions: { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', - 'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]', - 'elk.layered.spacing.edgeNodeBetweenLayers': '30', + 'elk.layered.spacing.edgeNodeBetweenLayers': conf?.nodeSpacing ? `${conf.nodeSpacing}` : '30', // 'elk.layered.mergeEdges': 'true', 'elk.direction': 'DOWN', // 'elk.ports.sameLayerEdges': true, @@ -845,7 +852,6 @@ export const draw = async function (text, id, _version, diagObj) { graph.layoutOptions['elk.direction'] = 'LEFT'; break; } - const { securityLevel, flowchart: conf } = getConfig(); // Find the root dom node to ne used in rendering // Handle root and document for when rendering in sandbox mode @@ -861,6 +867,7 @@ export const draw = async function (text, id, _version, diagObj) { const svg = root.select(`[id="${id}"]`); + utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); // Define the supported markers for the diagram const markers = ['point', 'circle', 'cross']; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts index 9855c73899..4e907c18af 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts @@ -1,7 +1,7 @@ // @ts-ignore: JISON typing missing import parser from '../parser/flow.jison'; -import * as db from '../flowDb.js'; +import db from '../flowDb.js'; import renderer from './flowRenderer-elk.js'; import styles from './styles.js'; From 5e966d60b07fc01a59b4d104b3e8aa16815d8092 Mon Sep 17 00:00:00 2001 From: itsalam Date: Tue, 19 Sep 2023 10:10:27 -0700 Subject: [PATCH 22/73] Centered Title function and changed rendering order for Elk flowchart to find Boundingbox --- packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 1 + packages/mermaid/src/utils.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 10cf860722..ec9ae6af0b 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -949,6 +949,7 @@ export const draw = async function (text, id, _version, diagObj) { log.info('after layout', JSON.stringify(graph, null, 2)); const g = await elk.layout(graph); drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0); + utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); log.info('after layout', g); g.edges?.map((edge) => { insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id); diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index e706ef1227..d6f16a08aa 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -829,7 +829,7 @@ export const insertTitle = ( parent .append('text') .text(title) - .attr('x', bounds.x + bounds.width / 2) + .attr('x', '50%') .attr('y', -titleTopMargin) .attr('class', cssClass); }; From 55fac29b3e2eb5bdccedee4a79510a4a875c30f5 Mon Sep 17 00:00:00 2001 From: itsalam Date: Tue, 19 Sep 2023 10:40:14 -0700 Subject: [PATCH 23/73] fixed title bounds calculation, removed extra title from merging issues --- packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 -- packages/mermaid/src/utils.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index ec9ae6af0b..c049786958 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -866,8 +866,6 @@ export const draw = async function (text, id, _version, diagObj) { const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const svg = root.select(`[id="${id}"]`); - - utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); // Define the supported markers for the diagram const markers = ['point', 'circle', 'cross']; diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index d6f16a08aa..e706ef1227 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -829,7 +829,7 @@ export const insertTitle = ( parent .append('text') .text(title) - .attr('x', '50%') + .attr('x', bounds.x + bounds.width / 2) .attr('y', -titleTopMargin) .attr('class', cssClass); }; From 6d2904cff16adff66bd1a995a7ff43a01b671dcc Mon Sep 17 00:00:00 2001 From: Vincent Lam Date: Tue, 24 Oct 2023 16:52:44 -0700 Subject: [PATCH 24/73] Added linting --- cypress/integration/rendering/flowchart-elk.spec.js | 8 +++----- .../src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index be60735d45..b18690441b 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -846,7 +846,6 @@ end }); describe('Title and arrow styling #4813', () => { - it('should render a flowchart with title', () => { const titleString = 'Test Title'; renderGraph( @@ -855,10 +854,9 @@ describe('Title and arrow styling #4813', () => { --- flowchart LR A-->B`, - { flowchart: { defaultRenderer: "elk" } } + { flowchart: { defaultRenderer: 'elk' } } ); cy.get('svg').should((svg) => { - const title = svg[0].querySelector('text'); expect(title.textContent).to.contain(titleString); }); @@ -873,7 +871,7 @@ describe('Title and arrow styling #4813', () => { B-.-oC C==xD D ~~~ A`, - { flowchart: { defaultRenderer: "elk" } } + { flowchart: { defaultRenderer: 'elk' } } ); cy.get('svg').should((svg) => { const edges = svg[0].querySelectorAll('.edges path'); @@ -883,4 +881,4 @@ describe('Title and arrow styling #4813', () => { expect(edges[3]).to.have.css('stroke-width', '1.5px'); }); }); -}) +}); diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index c049786958..45eaadcb00 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -758,7 +758,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i .attr('class', 'path ' + edgeData.classes) .attr('fill', 'none'); Object.entries(edgeData).forEach(([key, value]) => { - if (key !== 'classes'){ + if (key !== 'classes') { edgePath.attr(key, value); } }); From beb308c5b30b1fedc308bc86bea8b339ad60496c Mon Sep 17 00:00:00 2001 From: rowanfr Date: Sun, 7 Jan 2024 05:56:53 -0600 Subject: [PATCH 25/73] Resolved issue with subgraph configuration This commit resolves the issues with subgraph configuration, specifically for nodeSpacing and rankSpacing. This commit additionally adds an example graph to the `flowchart.html` to demonstrate this resolution. This commit resolves #3258 --- demos/flowchart.html | 24 +++++++++++++++++++++ packages/mermaid/src/dagre-wrapper/index.js | 4 ++++ 2 files changed, 28 insertions(+) diff --git a/demos/flowchart.html b/demos/flowchart.html index d7032a663c..c2e1276fc5 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1540,6 +1540,30 @@

flowchart

+ 
+      ---
+      title: Subgraph nodeSpacing and rankSpacing example
+      ---
+      %%{init:{'flowchart':{'nodeSpacing': 1, 'rankSpacing':'1'}}}%%
+
+      flowchart LR
+      
+      X --> Y
+      
+      subgraph X
+        direction LR
+        A
+        C
+      end
+      
+      subgraph Y
+        direction LR
+        B
+        D
+      end
+
+
+

Anchor for "link-clicked" test

From 94874ddbbe8d0c7099d0d0faa5feca360b3924e6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 23 Mar 2024 16:35:47 +0530 Subject: [PATCH 72/73] Add visual test --- cypress/integration/rendering/flowchart-v2.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 857d395be7..5b358e051f 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -904,6 +904,18 @@ end ); }); }); + + it('should not auto wrap when markdownAutoWrap is false', () => { + imgSnapshotTest( + `flowchart TD + angular_velocity["\`**angular_velocity** + *angular_displacement / duration* + [rad/s, 1/s] + {vector}\`"] + frequency["frequency\n(1 / period_duration)\n[Hz, 1/s]"]`, + { markdownAutoWrap: false } + ); + }); }); describe('Subgraph title margins', () => { it('Should render subgraphs with title margins set (LR)', () => { From dbb69ad7cd0d14c9b2f1d97caf7ce535286ffd63 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 23 Mar 2024 17:37:45 +0530 Subject: [PATCH 73/73] Add extra test --- .../rendering/flowchart-v2.spec.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 1318e59649..3eb2a0432a 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -773,7 +773,6 @@ A ~~~ B C end subgraph Y - direction LR B D end @@ -782,6 +781,30 @@ A ~~~ B ); }); + it('3258: Should render subgraphs with large nodeSpacing and rankSpacing', () => { + imgSnapshotTest( + `--- + title: Subgraph nodeSpacing and rankSpacing example + config: + flowchart: + nodeSpacing: 250 + rankSpacing: 250 + --- + flowchart LR + X --> Y + subgraph X + direction LR + A + C + end + subgraph Y + B + D + end + ` + ); + }); + describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => {