From 43885e6d0bdc0717c7f3a05e9d49ef06941cc177 Mon Sep 17 00:00:00 2001 From: Hans Blankenhaus Date: Mon, 18 Sep 2023 15:58:57 +0200 Subject: [PATCH 01/33] 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 ca55d9af4..017410dce 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 ce694edcd..e5e171285 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 02/33] 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 3ca7a3d7a..55c40127f 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 e5e171285..160be86da 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 03/33] 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 a0aaa66ba..a55f09723 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 04/33] 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 160be86da..572b28c99 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 05/33] 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 23b05af7f..ca1058989 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 7946d5725..fbfdd9fad 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 06/33] 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 572b28c99..cde16bc11 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 07/33] 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 ca1058989..c06819519 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 fbfdd9fad..5680266b7 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 08/33] 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 c06819519..fbf751e74 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 5680266b7..dfafac9b9 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 09/33] 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 017410dce..b72364c29 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 6f01d5715..eea5d295d 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 10/33] 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 221806b07..be60735d4 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 e45739524..10cf86072 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 9855c7389..4e907c18a 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 11/33] 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 10cf86072..ec9ae6af0 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 e706ef122..d6f16a08a 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 12/33] 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 ec9ae6af0..c04978695 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 d6f16a08a..e706ef122 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 13/33] 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 be60735d4..b18690441 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 c04978695..45eaadcb0 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 14/33] 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 d7032a663..c2e1276fc 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1540,6 +1540,30 @@
+ 
+      ---
+      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 32/33] 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 857d395be..5b358e051 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 33/33] 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 1318e5964..3eb2a0432 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', () => {