diff --git a/.commitlintrc.json b/.commitlintrc.json deleted file mode 100644 index c30e5a970..000000000 --- a/.commitlintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["@commitlint/config-conventional"] -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ceff724bb..dceb314c8 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -14,7 +14,7 @@ module.exports = { }, tsconfigRootDir: __dirname, sourceType: 'module', - ecmaVersion: 2020, + ecmaVersion: 2022, allowAutomaticSingleRunInference: true, project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], parser: '@typescript-eslint/parser', @@ -23,7 +23,7 @@ module.exports = { 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:json/recommended', - 'plugin:markdown/recommended', + 'plugin:markdown/recommended-legacy', 'plugin:@cspell/recommended', 'prettier', ], diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 81e58f6aa..4d3152d53 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -17,9 +17,19 @@ permissions: contents: read env: - # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used. - targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before) }} - + # For PRs and MergeQueues, the target commit is used, and for push events to non-develop branches, github.event.previous is used if available. Otherwise, 'develop' is used. + targetHash: >- + ${{ + github.event.pull_request.base.sha || + github.event.merge_group.base_sha || + ( + ( + (github.event_name == 'push' && github.ref == 'refs/heads/develop') || + github.event.before == '0000000000000000000000000000000000000000' + ) && 'develop' + ) || + github.event.before + }} jobs: cache: runs-on: ubuntu-latest diff --git a/.husky/commit-msg b/.husky/commit-msg deleted file mode 100755 index 59f6536e2..000000000 --- a/.husky/commit-msg +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -# . "$(dirname "$0")/_/husky.sh" - -# npx --no-install commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit index a9e30b9be..ad85fc42c 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -pnpm run pre-commit +NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit diff --git a/.prettierrc.json b/.prettierrc.json index 4f0588f9c..28aa6e766 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,5 +3,6 @@ "printWidth": 100, "singleQuote": true, "useTabs": false, - "tabWidth": 2 + "tabWidth": 2, + "trailingComma": "es5" } diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 23338271f..544eab40f 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -118,11 +118,53 @@ describe('Configuration', () => { it('should not taint the initial configuration when using multiple directives', () => { const url = 'http://localhost:9000/regression/issue-1874.html'; cy.visit(url); - - cy.get('svg'); + cy.window().should('have.property', 'rendered', true); + cy.get('svg').should('be.visible'); cy.matchImageSnapshot( 'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives' ); }); }); + + describe('suppressErrorRendering', () => { + beforeEach(() => { + cy.on('uncaught:exception', (err, runnable) => { + return !err.message.includes('Parse error on line'); + }); + }); + + it('should not render error diagram if suppressErrorRendering is set', () => { + const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true'; + cy.visit(url); + cy.window().should('have.property', 'rendered', true); + cy.get('#test') + .find('svg') + .should(($svg) => { + // 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' + ); + }); + + it('should render error diagram if suppressErrorRendering is not set', () => { + const url = 'http://localhost:9000/suppressError.html'; + cy.visit(url); + cy.window().should('have.property', 'rendered', true); + 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/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 221806b07..e931025e9 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -844,3 +844,42 @@ 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 + A-->C`, + { 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', () => { + 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'); + console.log(edges); + 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/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 857d395be..3eb2a0432 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -760,6 +760,51 @@ A ~~~ B ); }); + it('3258: Should render subgraphs with main graph nodeSpacing and rankSpacing', () => { + imgSnapshotTest( + `--- + title: Subgraph nodeSpacing and rankSpacing example + --- + flowchart LR + X --> Y + subgraph X + direction LR + A + C + end + subgraph Y + B + D + end + `, + { flowchart: { nodeSpacing: 1, rankSpacing: 1 } } + ); + }); + + 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', () => { @@ -904,6 +949,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)', () => { diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 756611008..a0c2dbcb9 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -101,12 +101,12 @@ describe('Gantt diagram', () => { title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 todayMarker off - + section team's critical event deadline A :milestone, crit, deadlineA, 2024-02-01, 0 deadline B :milestone, crit, deadlineB, 2024-02-15, 0 boss on leave :bossaway, 2024-01-28, 2024-02-11 - + section new intern onboarding :onboarding, 2024-01-02, 1w literature review :litreview, 2024-01-02, 10d @@ -573,7 +573,28 @@ describe('Gantt diagram', () => { ` ); }); - + it('should render a gantt diagram exculding friday and saturday', () => { + imgSnapshotTest( + `gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + excludes weekends + weekend friday + section Section1 + A task :a1, 2024-02-28, 10d` + ); + }); + it('should render a gantt diagram exculding saturday and sunday', () => { + imgSnapshotTest( + `gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + excludes weekends + weekend saturday + section Section1 + A task :a1, 2024-02-28, 10d` + ); + }); it('should render when compact is true', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 306b6c79f..1285a0832 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -375,7 +375,7 @@ context('Sequence diagram', () => { {} ); }); - it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => { + it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => { imgSnapshotTest( ` sequenceDiagram @@ -394,6 +394,9 @@ context('Sequence diagram', () => { cy.get('.actor-man').should('have.class', 'actor-bottom'); cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top'); cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top'); + + cy.get('text.actor-box').should('include.text', 'Alice'); + cy.get('text.actor-man').should('include.text', 'Bob'); }); it('should render long notes left of actor', () => { imgSnapshotTest( @@ -807,7 +810,10 @@ context('Sequence diagram', () => { note left of Alice: config: mirrorActors=true
directive: mirrorActors=false Bob->>Alice: Short as well `, - { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } } + { + logLevel: 0, + sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' }, + } ); }); }); @@ -858,7 +864,10 @@ context('Sequence diagram', () => { a->>j: Hello John, how are you? j-->>a: Great! `, - { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } } + { + logLevel: 0, + sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' }, + } ); }); it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => { diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html index 76fbd36f7..34091d33d 100644 --- a/cypress/platform/ashish2.html +++ b/cypress/platform/ashish2.html @@ -33,7 +33,9 @@ background-image: radial-gradient(#fff 1%, transparent 11%), radial-gradient(#fff 1%, transparent 11%); background-size: 20px 20px; - background-position: 0 0, 10px 10px; + background-position: + 0 0, + 10px 10px; background-repeat: repeat; } .malware { diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html index 4cba4251d..a581eb403 100644 --- a/cypress/platform/click_security_loose.html +++ b/cypress/platform/click_security_loose.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html index 7dc75ea88..11fd806ec 100644 --- a/cypress/platform/click_security_other.html +++ b/cypress/platform/click_security_other.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_sandbox.html b/cypress/platform/click_security_sandbox.html index 2e03bceeb..50e3dfb3e 100644 --- a/cypress/platform/click_security_sandbox.html +++ b/cypress/platform/click_security_sandbox.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html index c4ac4bd68..c2a3f84cd 100644 --- a/cypress/platform/click_security_strict.html +++ b/cypress/platform/click_security_strict.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/css1.html b/cypress/platform/css1.html index 9e070da25..2853a9358 100644 --- a/cypress/platform/css1.html +++ b/cypress/platform/css1.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/empty.html b/cypress/platform/empty.html index 2961644d6..9713b4e55 100644 --- a/cypress/platform/empty.html +++ b/cypress/platform/empty.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html index a9fe7266b..c04be34a1 100644 --- a/cypress/platform/interaction.html +++ b/cypress/platform/interaction.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/regression/issue-1874.html b/cypress/platform/regression/issue-1874.html index 78ace47f1..ee068fc9f 100644 --- a/cypress/platform/regression/issue-1874.html +++ b/cypress/platform/regression/issue-1874.html @@ -21,7 +21,11 @@ sequenceDiagram mermaid.initialize({ theme: 'base', themeVariables: {}, - startOnLoad: true, + startOnLoad: false, }); + await mermaid.run(); + if (window.Cypress) { + window.rendered = true; + } diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html index 2334158c2..4347df3c1 100644 --- a/cypress/platform/render-after-error.html +++ b/cypress/platform/render-after-error.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html index d9dbc4a5e..0cd5aeaac 100644 --- a/cypress/platform/rerender.html +++ b/cypress/platform/rerender.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/subgraph.html b/cypress/platform/subgraph.html index 6213fff9a..07870b327 100644 --- a/cypress/platform/subgraph.html +++ b/cypress/platform/subgraph.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/suppressError.html b/cypress/platform/suppressError.html new file mode 100644 index 000000000..f20f97b59 --- /dev/null +++ b/cypress/platform/suppressError.html @@ -0,0 +1,59 @@ + + + + + + Mermaid Quick Test Page + + + +
+ 
+  flowchart
+      a[This should be visible]
+
+ 
+  flowchart
+    a --< b
+
+ 
+  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/cypress/platform/vertices.html b/cypress/platform/vertices.html index f4c045b55..ca0e9e8d3 100644 --- a/cypress/platform/vertices.html +++ b/cypress/platform/vertices.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 39f456c23..482a90646 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,4 +1,5 @@ import mermaid from './mermaid.esm.mjs'; +import flowchartELK from './mermaid-flowchart-elk.esm.mjs'; import externalExample from './mermaid-example-diagram.esm.mjs'; import zenUml from './mermaid-zenuml.esm.mjs'; @@ -45,7 +46,7 @@ const contentLoaded = async function () { document.getElementsByTagName('body')[0].appendChild(div); } - await mermaid.registerExternalDiagrams([externalExample, zenUml]); + await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]); mermaid.initialize(graphObj.mermaid); await mermaid.run(); } diff --git a/cypress/platform/xss22.html b/cypress/platform/xss22.html index 50ff3b732..09d205d05 100644 --- a/cypress/platform/xss22.html +++ b/cypress/platform/xss22.html @@ -1,4 +1,4 @@ - + diff --git a/demos/block.html b/demos/block.html index 03db61fad..f0957b670 100644 --- a/demos/block.html +++ b/demos/block.html @@ -1,4 +1,4 @@ - + diff --git a/demos/c4context.html b/demos/c4context.html index f674054a2..64ca768e1 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -1,4 +1,4 @@ - + diff --git a/demos/classchart.html b/demos/classchart.html index 3ad8fb100..f04fa5b5f 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html index 5fbfa29cc..dd8bca658 100644 --- a/demos/dataflowchart.html +++ b/demos/dataflowchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/dev/example.html b/demos/dev/example.html index 4ece7efa8..27d31e177 100644 --- a/demos/dev/example.html +++ b/demos/dev/example.html @@ -39,6 +39,8 @@ graph TB