From 86b3a4f09e7ec590d0880343a83c302259c36ade Mon Sep 17 00:00:00 2001 From: Amy Qualls <1157888+amyq@users.noreply.github.com> Date: Thu, 25 Aug 2022 12:01:55 -0700 Subject: [PATCH 1/7] Document line curve options An extremely basic MVC explaining that it is possible to adjust how lines in a flowchart are curved, while listing (some of?) the available options. I doubt I've captured all of the curve options, but capturing the existence of curve options is a start. Sources: - https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046 where a user references adding the feature to Mermaid - Which references https://github.com/d3/d3-shape/blob/master/README.md#curves and I think is worth including here --- docs/flowchart.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/flowchart.md b/docs/flowchart.md index 7631a7f46..433bd8fa0 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -522,6 +522,22 @@ In the example below the style defined in the linkStyle statement will belong to linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; ``` +### Styling line curves + +It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. +Available curve styles include `basis`, `bump`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, +and `stepBefore`. + +In this example, a left-to-right graph uses the `stepBefore` curve style: + +``` +%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +graph LR +``` + +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the +[d3-shape](https://github.com/d3/d3-shape/) project. ### Styling a node From 2968b400c49f66983e6d206959504e72aa6ae0ef Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Aug 2022 15:03:29 +0200 Subject: [PATCH 2/7] Updated viewBox settings --- .../rendering/flowchart-v2.spec.js | 15 +++++- cypress/platform/knsv.html | 48 ++++++++++++------- src/diagrams/flowchart/flowRenderer-v2.js | 4 +- src/utils.js | 21 +++++--- 4 files changed, 60 insertions(+), 28 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 10731de05..cc0362dd0 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -42,7 +42,7 @@ describe('Flowchart v2', () => { P3 --> P6 P1.5 --> P5 `, - { flowchart: { diagramPadding: 0 } } + {} ); }); @@ -60,7 +60,7 @@ describe('Flowchart v2', () => { C <-...-> E4 C ======> E5 `, - { flowchart: { diagramPadding: 0 } } + {} ); }); it('5: should render escaped without html labels', () => { @@ -652,4 +652,15 @@ flowchart RL { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('2824: Clipping of edges', () => { + imgSnapshotTest( + ` + flowchart TD + A --> B + A --> C + B --> C + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); }); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index f1420e93a..29c83ff1a 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -23,10 +23,12 @@ display: none; } .mermaid { - border: 1px solid purple; + } .mermaid svg { + border: 1px solid purple; /* font-size: 18px !important; */ + fontFamily: 'courier' } @@ -35,7 +37,7 @@ -
+
flowchart LR classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; @@ -54,7 +56,7 @@ flowchart LR O0 -- has type -->O2["Bug"] click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
-
+
flowchart TD subgraph test direction TB @@ -68,22 +70,30 @@ flowchart TD end end +
+
+flowchart LR + a["Haiya"]===>b +
+
+flowchart TD A --> B A --> C B --> C -
-
- gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit +
+flowchart TD + A([stadium shape test]) + A -->|Get money| B([Go shopping]) + B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]) + C -->|One| D([Laptop]) + C -->|Two| E([iPhone]) + C -->|Three| F([Car
wroom wroom]) + click A "index.html#link-clicked" "link test" + click B testClick "click test" + classDef someclass fill:#f96; + class A someclass; + class C someclass;
sequenceDiagram @@ -273,7 +283,7 @@ flowchart TD C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] -
+
classDiagram Animal "1" <|-- Duck Animal <|-- Fish @@ -322,10 +332,12 @@ flowchart TD startOnLoad: true, securityLevel: 'loose', logLevel: 0, + fontFamily: 'courier', flowchart: { - curve: 'curveLinear', + // curve: 'curveLinear', useMaxWidth: true, - htmlLabels: true, + htmlLabels: false, + fontFamily: 'courier', }, }); function callback() { diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 9fc28f266..103addbfc 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -388,8 +388,8 @@ export const draw = function (text, id, _version, diagObj) { rankdir: dir, nodesep: nodeSpacing, ranksep: rankSpacing, - marginx: 8, - marginy: 8, + marginx: 0, + marginy: 0, }) .setDefaultEdgeLabel(function () { return {}; diff --git a/src/utils.js b/src/utils.js index db45ab9f6..7e5c9a0da 100644 --- a/src/utils.js +++ b/src/utils.js @@ -742,12 +742,12 @@ const d3Attrs = function (d3Elem, attrs) { */ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) { let attrs = new Map(); - attrs.set('height', height); + // attrs.set('height', height); if (useMaxWidth) { attrs.set('width', '100%'); - attrs.set('style', `max-width: ${width}px;`); + attrs.set('style', `max-width: ${width * 1.2}px;`); } else { - attrs.set('width', width); + attrs.set('width', width * 1.2); } return attrs; }; @@ -769,8 +769,12 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) const sWidth = svgBounds.width; const sHeight = svgBounds.height; + log.info(`SVG bounds: ${sWidth}x${sHeight}`, svgBounds); + let width = graph._label.width; let height = graph._label.height; + log.info(`Graph bounds: ${width}x${height}`, graph); + let tx = 0; let ty = 0; if (sWidth > width) { @@ -785,11 +789,16 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) ty = (sHeight - height) / 2 + padding; height = sHeight + padding * 2; } + + log.info(`Calculated bounds: ${width}x${height}`); configureSvgSize(svgElem, height, width, useMaxWidth); // Ensure the viewBox includes the whole svgBounds area with extra space for padding - const vBox = `0 0 ${width} ${height}`; - log.debug( + // const vBox = `0 0 ${width} ${height}`; + const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${ + svgBounds.width + 2 * padding + } ${svgBounds.height + 2 * padding}`; + log.info( 'Graph.label', graph._label, 'swidth', @@ -808,7 +817,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) vBox ); svgElem.attr('viewBox', vBox); - svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`); + // svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`); }; export const initIdGenerator = class iterator { From 3b93c392499281d87071e657f56fe5ebd71cfc7d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Aug 2022 15:11:43 +0200 Subject: [PATCH 3/7] Adjusting size and test --- src/utils.js | 6 +++--- src/utils.spec.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils.js b/src/utils.js index 7e5c9a0da..561492825 100644 --- a/src/utils.js +++ b/src/utils.js @@ -745,9 +745,9 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) { // attrs.set('height', height); if (useMaxWidth) { attrs.set('width', '100%'); - attrs.set('style', `max-width: ${width * 1.2}px;`); + attrs.set('style', `max-width: ${width}px;`); } else { - attrs.set('width', width * 1.2); + attrs.set('width', width); } return attrs; }; @@ -761,7 +761,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) { * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100% */ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) { - const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth); + const attrs = calculateSvgSizeAttrs(height, 1.1 * width, useMaxWidth); d3Attrs(svgElem, attrs); }; export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) { diff --git a/src/utils.spec.js b/src/utils.spec.js index 7eb3af9ff..82b76194c 100644 --- a/src/utils.spec.js +++ b/src/utils.spec.js @@ -294,13 +294,13 @@ describe('when formatting urls', function () { describe('when calculating SVG size', function () { it('should return width 100% when useMaxWidth is true', function () { const attrs = utils.calculateSvgSizeAttrs(100, 200, true); - expect(attrs.get('height')).toEqual(100); + // expect(attrs.get('height')).toEqual(100); expect(attrs.get('style')).toEqual('max-width: 200px;'); expect(attrs.get('width')).toEqual('100%'); }); it('should return absolute width when useMaxWidth is false', function () { const attrs = utils.calculateSvgSizeAttrs(100, 200, false); - expect(attrs.get('height')).toEqual(100); + // expect(attrs.get('height')).toEqual(100); expect(attrs.get('width')).toEqual(200); }); }); From b7f9495a1434e620ff475d46b6c98834ce34bc77 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sat, 27 Aug 2022 17:32:29 +0100 Subject: [PATCH 4/7] build: add eslint --cache file Currently, doing a `git commit` is a bit low, as eslint runs before the commit. Adding an `eslint --cache` makes it slightly faster. On my PC, `git commit` currently is `Done in 12.24s.` However, after adding this cache file, it is `Done in 7.54s.`, so about 1.6x faster. --- .gitignore | 5 ++++- package.json | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 8ce4bf724..c5c4338e5 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,7 @@ Gemfile.lock /.vs cypress/screenshots/ -cypress/snapshots/ \ No newline at end of file +cypress/snapshots/ + +# eslint --cache file +.eslintcache diff --git a/package.json b/package.json index 065d8d6da..8c05cb17c 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md", "build:watch": "yarn build:development --watch", "release": "yarn build", - "lint": "eslint ./ --ext .js,.json,.html,.md", + "lint": "eslint --cache ./ --ext .js,.json,.html,.md", "lint:fix": "yarn lint --fix", "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js", "cypress": "cypress run", From e6e7bdcb554d5f7151abd59cb97e460798f95775 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 28 Aug 2022 11:25:09 +0200 Subject: [PATCH 5/7] #2824 Size changes and updated regressionstest afters diagram sizing changes --- .../integration/rendering/erDiagram.spec.js | 18 +++++----- .../rendering/flowchart-v2.spec.js | 10 +++--- .../integration/rendering/flowchart.spec.js | 10 +++--- cypress/integration/rendering/gantt.spec.js | 6 ++-- cypress/integration/rendering/journey.spec.js | 4 +-- cypress/integration/rendering/pie.spec.js | 6 ++-- .../rendering/sequencediagram.spec.js | 10 +++--- .../rendering/stateDiagram-v2.spec.js | 6 ++-- .../rendering/stateDiagram.spec.js | 10 +++--- cypress/platform/knsv.html | 12 ++++--- docs/index.html | 4 +-- src/diagrams/state/stateRenderer-v2.js | 2 +- src/utils.js | 36 +++++++++---------- 13 files changed, 68 insertions(+), 66 deletions(-) diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 781a8ca25..0f9084e7c 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -112,7 +112,7 @@ describe('Entity Relationship Diagram', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height', '465'); + // expect(svg).to.have.attr('height', '465'); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); @@ -134,7 +134,7 @@ describe('Entity Relationship Diagram', () => { const width = parseFloat(svg.attr('width')); // use within because the absolute value can be slightly different depending on the environment ±5% expect(width).to.be.within(140 * 0.95, 140 * 1.05); - expect(svg).to.have.attr('height', '465'); + // expect(svg).to.have.attr('height', '465'); expect(svg).to.not.have.attr('style'); }); }); @@ -186,7 +186,7 @@ describe('Entity Relationship Diagram', () => { renderGraph( ` erDiagram - PRIVATE_FINANCIAL_INSTITUTION { + PRIVATE_FINANCIAL_INSTITUTION { string name int turnover } @@ -206,9 +206,9 @@ describe('Entity Relationship Diagram', () => { string name PK } AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes - BOOK { + BOOK { float price - string author FK + string author FK string title PK } `, @@ -225,8 +225,8 @@ describe('Entity Relationship Diagram', () => { string name "comment" } AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes - BOOK { - string author + BOOK { + string author string title "author comment" float price "price comment" } @@ -244,11 +244,11 @@ describe('Entity Relationship Diagram', () => { string name PK "comment" } AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes - BOOK { + BOOK { string description float price "price comment" string title PK "title comment" - string author FK + string author FK } `, { logLevel: 1 } diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index cc0362dd0..61dccfb84 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -92,10 +92,10 @@ describe('Flowchart v2', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); + // expect(svg).to.have.attr('height'); // use within because the absolute value can be slightly different depending on the environment ±5% - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(446 * 0.95, 446 * 1.05); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(446 * 0.95, 446 * 1.05); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); @@ -114,10 +114,10 @@ describe('Flowchart v2', () => { { flowchart: { useMaxWidth: false } } ); cy.get('svg').should((svg) => { - const height = parseFloat(svg.attr('height')); + // const height = parseFloat(svg.attr('height')); const width = parseFloat(svg.attr('width')); // use within because the absolute value can be slightly different depending on the environment ±5% - expect(height).to.be.within(446 * 0.95, 446 * 1.05); + // expect(height).to.be.within(446 * 0.95, 446 * 1.05); expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05); expect(svg).to.not.have.attr('style'); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index cbdcc4ebd..b4e94d1ab 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -744,10 +744,10 @@ describe('Graph', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); + // expect(svg).to.have.attr('height'); // use within because the absolute value can be slightly different depending on the environment ±5% - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(446 * 0.95, 446 * 1.05); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(446 * 0.95, 446 * 1.05); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); @@ -766,10 +766,10 @@ describe('Graph', () => { { flowchart: { useMaxWidth: false } } ); cy.get('svg').should((svg) => { - const height = parseFloat(svg.attr('height')); + // const height = parseFloat(svg.attr('height')); const width = parseFloat(svg.attr('width')); // use within because the absolute value can be slightly different depending on the environment ±5% - expect(height).to.be.within(446 * 0.95, 446 * 1.05); + // expect(height).to.be.within(446 * 0.95, 446 * 1.05); expect(width).to.be.within(300 * 0.95, 300 * 1.05); expect(svg).to.not.have.attr('style'); }); diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 7dc7c6cf5..8b249a100 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -218,10 +218,10 @@ describe('Gantt diagram', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); + // expect(svg).to.have.attr('height'); // use within because the absolute value can be slightly different depending on the environment ±5% - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(484 * 0.95, 484 * 1.05); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(484 * 0.95, 484 * 1.05); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 5f13e5b89..6f9d9bb60 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -42,8 +42,8 @@ section Checkout from website cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('height'); - const height = parseFloat(svg.attr('height')); - expect(height).to.eq(565); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.eq(565); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 233e716ed..ced4aedcf 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -48,9 +48,9 @@ describe('Pie Chart', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); - const height = parseFloat(svg.attr('height')); - expect(height).to.eq(450); + // expect(svg).to.have.attr('height'); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.eq(450); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index f1def3391..b5ff92c8c 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -734,9 +734,9 @@ context('Sequence diagram', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(920, 971); + // expect(svg).to.have.attr('height'); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(920, 971); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); @@ -773,9 +773,9 @@ context('Sequence diagram', () => { { sequence: { useMaxWidth: false } } ); cy.get('svg').should((svg) => { - const height = parseFloat(svg.attr('height')); + // const height = parseFloat(svg.attr('height')); const width = parseFloat(svg.attr('width')); - expect(height).to.be.within(920, 971); + // expect(height).to.be.within(920, 971); // use within because the absolute value can be slightly different depending on the environment ±5% expect(width).to.be.within(820 * 0.95, 820 * 1.05); expect(svg).to.not.have.attr('style'); diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 946b5d31e..d4b43e9c6 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -480,9 +480,9 @@ stateDiagram-v2 ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(177, 178); + // expect(svg).to.have.attr('height'); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(177, 178); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 4e538f219..c2fb7a977 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -357,9 +357,9 @@ describe('State diagram', () => { ); cy.get('svg').should((svg) => { expect(svg).to.have.attr('width', '100%'); - expect(svg).to.have.attr('height'); - const height = parseFloat(svg.attr('height')); - expect(height).to.be.within(176, 178); + // expect(svg).to.have.attr('height'); + // const height = parseFloat(svg.attr('height')); + // expect(height).to.be.within(176, 178); const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); @@ -379,9 +379,9 @@ describe('State diagram', () => { { state: { useMaxWidth: false } } ); cy.get('svg').should((svg) => { - const height = parseFloat(svg.attr('height')); + // const height = parseFloat(svg.attr('height')); const width = parseFloat(svg.attr('width')); - expect(height).to.be.within(176, 178); + // expect(height).to.be.within(176, 178); // use within because the absolute value can be slightly different depending on the environment ±5% // Todo investigate difference // expect(width).to.be.within(112 * .95, 112 * 1.05); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 29c83ff1a..f568c9a5d 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -37,7 +37,7 @@ -
+
flowchart LR classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; @@ -72,16 +72,20 @@ flowchart TD
+flowchart TD +id +
+
flowchart LR a["Haiya"]===>b
-
+
flowchart TD A --> B A --> C B --> C
-
+
flowchart TD A([stadium shape test]) A -->|Get money| B([Go shopping]) @@ -283,7 +287,7 @@ flowchart TD C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] -
+
classDiagram Animal "1" <|-- Duck Animal <|-- Fish diff --git a/docs/index.html b/docs/index.html index 64cc726bc..c48a37562 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,8 +18,8 @@ - - + + + +