diff --git a/.commitlintrc.json b/.commitlintrc.json deleted file mode 100644 index c30e5a970b..0000000000 --- a/.commitlintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["@commitlint/config-conventional"] -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ceff724bb4..dceb314c8e 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 81e58f6aad..4d3152d533 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 59f6536e22..0000000000 --- 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 a9e30b9bec..e8191928d4 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 4f0588f9cf..28aa6e7660 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 23338271f5..544eab40fb 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 221806b073..e931025e91 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/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 306b6c79f0..1285a0832d 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 76fbd36f7e..34091d33d3 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 4cba4251d6..a581eb4036 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 7dc75ea884..11fd806ec5 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 2e03bceeb6..50e3dfb3e4 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 c4ac4bd684..c2a3f84cd0 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 9e070da254..2853a93581 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 2961644d60..9713b4e552 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 a9fe7266b0..c04be34a13 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 78ace47f1c..ee068fc9f9 100644 --- a/cypress/platform/regression/issue-1874.html +++ b/cypress/platform/regression/issue-1874.html @@ -21,7 +21,11 @@

Example

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 2334158c2b..4347df3c16 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 d9dbc4a5e7..0cd5aeaacc 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 6213fff9aa..07870b3271 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 0000000000..f20f97b598 --- /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 f4c045b555..ca0e9e8d3e 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 39f456c230..482a90646d 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 50ff3b7327..09d205d05d 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 03db61fad0..f0957b6700 100644 --- a/demos/block.html +++ b/demos/block.html @@ -1,4 +1,4 @@ - + diff --git a/demos/c4context.html b/demos/c4context.html index f674054a2f..64ca768e13 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -1,4 +1,4 @@ - + diff --git a/demos/classchart.html b/demos/classchart.html index 3ad8fb100b..f04fa5b5f9 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -1,4 +1,4 @@ - + diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html index 5fbfa29cc5..dd8bca658d 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 4ece7efa8b..27d31e177a 100644 --- a/demos/dev/example.html +++ b/demos/dev/example.html @@ -39,6 +39,8 @@