diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 0e0744404..1b9a76405 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -12,7 +12,7 @@ jobs: test: runs-on: ubuntu-latest name: check tests - if: github.repository_owner == 'mermaid' + if: github.repository_owner == 'mermaid-js' steps: - uses: actions/checkout@v2 with: diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index dd3fdd2c9..0a52a335b 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -42,7 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => if (!options.fontSize) { options.fontSize = '16px'; } - const useAppli = Cypress.env('useAppli'); + // const useAppli = Cypress.env('useAppli'); + const useAppli = false; const branch = Cypress.env('codeBranch'); cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); diff --git a/cypress/e2e/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js similarity index 100% rename from cypress/e2e/other/configuration.spec.js rename to cypress/integration/other/configuration.spec.js diff --git a/cypress/e2e/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js similarity index 100% rename from cypress/e2e/other/ghsa.spec.js rename to cypress/integration/other/ghsa.spec.js diff --git a/cypress/e2e/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js similarity index 91% rename from cypress/e2e/other/interaction.spec.js rename to cypress/integration/other/interaction.spec.js index 692a07880..b253d0389 100644 --- a/cypress/e2e/other/interaction.spec.js +++ b/cypress/integration/other/interaction.spec.js @@ -4,7 +4,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-Function-2').click(); + cy.get('body').find('g#flowchart-Function-4').click(); cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); }); @@ -12,7 +12,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-FunctionArg-18').click(); + cy.get('body').find('g#flowchart-FunctionArg-28').click(); cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT'); }); @@ -20,7 +20,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click(); + cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click(); cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT'); }); @@ -28,7 +28,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('#flowchart-URL-3').click(); + cy.get('body').find('#flowchart-URL-5').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -38,7 +38,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-2URL-7"]').click(); + cy.get('body').find('g[id="flowchart-2URL-11"]').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -49,7 +49,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-Function-10').click(); + cy.get('body').find('g#flowchart-Function-16').click(); cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); }); @@ -57,7 +57,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-1Function-14"]').click(); + cy.get('body').find('g[id="flowchart-1Function-22"]').click(); cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); }); @@ -65,7 +65,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('#flowchart-URL-11').click(); + cy.get('body').find('#flowchart-URL-17').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -75,7 +75,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_loose.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-2URL-15"]').click(); + cy.get('body').find('g[id="flowchart-2URL-23"]').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -142,7 +142,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_strict.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-Function-2').click(); + cy.get('body').find('g#flowchart-Function-4').click(); cy.get('.created-by-click').should('not.exist'); // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow'); @@ -151,7 +151,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_strict.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-1Function-6"]').click(); + cy.get('body').find('g[id="flowchart-1Function-10"]').click(); // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow'); cy.get('.created-by-click').should('not.exist'); @@ -160,7 +160,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_strict.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-URL-3').click(); + cy.get('body').find('g#flowchart-URL-5').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -170,7 +170,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_strict.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-2URL-7"]').click(); + cy.get('body').find('g[id="flowchart-2URL-11"]').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); @@ -222,7 +222,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_other.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-Function-2').click(); + cy.get('body').find('g#flowchart-Function-4').click(); // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow'); cy.get('.created-by-click').should('not.exist'); @@ -231,7 +231,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_other.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g[id="flowchart-1Function-6"]').click(); + cy.get('body').find('g[id="flowchart-1Function-10"]').click(); cy.get('.created-by-click').should('not.exist'); cy.get('.created-by-click').should('not.exist'); @@ -240,7 +240,7 @@ describe('Interaction', () => { const url = 'http://localhost:9000/click_security_other.html'; cy.viewport(1440, 1024); cy.visit(url); - cy.get('body').find('g#flowchart-URL-3').click(); + cy.get('body').find('g#flowchart-URL-5').click(); cy.location().should((location) => { expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); diff --git a/cypress/e2e/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js similarity index 100% rename from cypress/e2e/other/rerender.spec.js rename to cypress/integration/other/rerender.spec.js diff --git a/cypress/e2e/other/webpackUsage.spec.js b/cypress/integration/other/webpackUsage.spec.js similarity index 100% rename from cypress/e2e/other/webpackUsage.spec.js rename to cypress/integration/other/webpackUsage.spec.js diff --git a/cypress/e2e/other/xss.spec.js b/cypress/integration/other/xss.spec.js similarity index 100% rename from cypress/e2e/other/xss.spec.js rename to cypress/integration/other/xss.spec.js diff --git a/cypress/e2e/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js similarity index 100% rename from cypress/e2e/rendering/appli.spec.js rename to cypress/integration/rendering/appli.spec.js diff --git a/cypress/e2e/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js similarity index 100% rename from cypress/e2e/rendering/classDiagram-v2.spec.js rename to cypress/integration/rendering/classDiagram-v2.spec.js diff --git a/cypress/e2e/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js similarity index 100% rename from cypress/e2e/rendering/classDiagram.spec.js rename to cypress/integration/rendering/classDiagram.spec.js diff --git a/cypress/e2e/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js similarity index 100% rename from cypress/e2e/rendering/conf-and-directives.spec.js rename to cypress/integration/rendering/conf-and-directives.spec.js diff --git a/cypress/e2e/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js similarity index 100% rename from cypress/e2e/rendering/current.spec.js rename to cypress/integration/rendering/current.spec.js diff --git a/cypress/e2e/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js similarity index 100% rename from cypress/e2e/rendering/debug.spec.js rename to cypress/integration/rendering/debug.spec.js diff --git a/cypress/e2e/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js similarity index 100% rename from cypress/e2e/rendering/erDiagram.spec.js rename to cypress/integration/rendering/erDiagram.spec.js diff --git a/cypress/e2e/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js similarity index 100% rename from cypress/e2e/rendering/flowchart-v2.spec.js rename to cypress/integration/rendering/flowchart-v2.spec.js diff --git a/cypress/e2e/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js similarity index 100% rename from cypress/e2e/rendering/flowchart.spec.js rename to cypress/integration/rendering/flowchart.spec.js diff --git a/cypress/e2e/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js similarity index 100% rename from cypress/e2e/rendering/gantt.spec.js rename to cypress/integration/rendering/gantt.spec.js diff --git a/cypress/e2e/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js similarity index 86% rename from cypress/e2e/rendering/gitGraph.spec.js rename to cypress/integration/rendering/gitGraph.spec.js index 4dda2c16e..283a52c67 100644 --- a/cypress/e2e/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -207,4 +207,50 @@ describe('Git Graph diagram', () => { {} ); }); + + it('12: should render commits for more than 8 branches', () => { + imgSnapshotTest( + ` + gitGraph + checkout main + commit + checkout main + branch branch1 + commit + checkout main + merge branch1 + branch branch2 + commit + checkout main + merge branch2 + branch branch3 + commit + checkout main + merge branch3 + branch branch4 + commit + checkout main + merge branch4 + branch branch5 + commit + checkout main + merge branch5 + branch branch6 + commit + checkout main + merge branch6 + branch branch7 + commit + checkout main + merge branch7 + branch branch8 + commit + checkout main + merge branch8 + branch branch9 + commit + `, + {} + ); + }); }); diff --git a/cypress/e2e/rendering/info.spec.js b/cypress/integration/rendering/info.spec.js similarity index 100% rename from cypress/e2e/rendering/info.spec.js rename to cypress/integration/rendering/info.spec.js diff --git a/cypress/e2e/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js similarity index 100% rename from cypress/e2e/rendering/journey.spec.js rename to cypress/integration/rendering/journey.spec.js diff --git a/cypress/e2e/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js similarity index 100% rename from cypress/e2e/rendering/pie.spec.js rename to cypress/integration/rendering/pie.spec.js diff --git a/cypress/e2e/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js similarity index 100% rename from cypress/e2e/rendering/requirement.spec.js rename to cypress/integration/rendering/requirement.spec.js diff --git a/cypress/e2e/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js similarity index 94% rename from cypress/e2e/rendering/sequencediagram.spec.js rename to cypress/integration/rendering/sequencediagram.spec.js index c110f05ad..f1def3391 100644 --- a/cypress/e2e/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -80,7 +80,7 @@ context('Sequence diagram', () => { loop Loopy Bob->>Alice: Pasten end `, - {} + { wrap: true } ); }); context('font settings', () => { @@ -126,6 +126,17 @@ context('Sequence diagram', () => { { sequence: { noteAlign: 'left' } } ); }); + it('should render multi-line notes aligned to the left when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short + note left of Alice: I am left aligned
but also
multiline + Bob->>Alice: Short as well + `, + { sequence: { noteAlign: 'left' } } + ); + }); it('should render notes aligned to the right when configured', () => { imgSnapshotTest( ` @@ -137,6 +148,37 @@ context('Sequence diagram', () => { { sequence: { noteAlign: 'right' } } ); }); + it('should render multi-line notes aligned to the right when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short + note left of Alice: I am right aligned
but also
multiline + Bob->>Alice: Short as well + `, + { sequence: { noteAlign: 'right' } } + ); + }); + it('should render multi-line messages aligned to the left when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short
but also
multiline + Bob->>Alice: Short as well
and also
multiline + `, + { sequence: { messageAlign: 'left' } } + ); + }); + it('should render multi-line messages aligned to the right when configured', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>Bob: I'm short
but also
multiline + Bob->>Alice: Short as well
and also
multiline + `, + { sequence: { messageAlign: 'right' } } + ); + }); }); context('auth width scaling', () => { it('should render long actor descriptions', () => { diff --git a/cypress/e2e/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js similarity index 97% rename from cypress/e2e/rendering/stateDiagram-v2.spec.js rename to cypress/integration/rendering/stateDiagram-v2.spec.js index b5ab86440..946b5d31e 100644 --- a/cypress/e2e/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -509,4 +509,16 @@ stateDiagram-v2 expect(svg).to.not.have.attr('style'); }); }); + + it('v2 should render a state diagram and set the correct length of the labels', () => { + imgSnapshotTest( + ` + stateDiagram-v2 + [*] --> 1 + 1 --> 2: test({ foo#colon; 'far' }) + 2 --> [*] + `, + { logLevel: 0, fontFamily: 'courier' } + ); + }); }); diff --git a/cypress/e2e/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js similarity index 100% rename from cypress/e2e/rendering/stateDiagram.spec.js rename to cypress/integration/rendering/stateDiagram.spec.js diff --git a/cypress/e2e/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js similarity index 100% rename from cypress/e2e/rendering/theme.spec.js rename to cypress/integration/rendering/theme.spec.js diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 9f8472eb0..0d870e1a3 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -31,14 +31,15 @@
- journey - title Adding journey diagram functionality to mermaid - accTitle: Adding acc journey diagram functionality to mermaid - accDescr { - My multi-line description - of the diagram - } - section Order from website +journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Mee
pie @@ -52,20 +53,16 @@ "Iron" : 5
- gitGraph - accTitle: My Gitgraph Accessibility Title - accDescr: My Gitgraph Accessibility Description - - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit
sequenceDiagram @@ -99,6 +96,9 @@ graph TD Sit down: 5: Me
+ info +
+
requirementDiagram accTitle: My req Diagram accDescr: My req Diagram Description @@ -138,8 +138,41 @@ requirementDiagram test_req - traces -> test_req2 test_req - contains -> test_req3 test_req <- copies - test_entity2 +
-
+
+gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + excludes weekends + %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) + + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + Functionality added :milestone, 2014-01-25, 0d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page :20h + Add another diagram to demo page :48h +
+
stateDiagram state Active { Idle @@ -148,7 +181,7 @@ stateDiagram Active --> Active: LOG
- graph TB + flowchart TB accTitle: My flowchart accDescr: My flowchart Description subgraph One @@ -165,8 +198,7 @@ stateDiagram end end end - B ->> A: Return -
+ B ->> A: Return
classDiagram accTitle: My class diagram @@ -185,14 +217,42 @@ class Class10 { size() }
-
- stateDiagram - accTitle: Apa - accDescr: One that can climb better then any man - [*] --> S1 - state "Some long name" as S1 +
+%%{init: {'config': {'wrap': true }}}%% + sequenceDiagram + participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + A->>Bob: Hola + Bob-->A: Pasten !
+ gitGraph + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + branch featureA + commit id:"FIX" + commit id: "FIX-2" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + cherry-pick id:"FIX" + checkout develop + commit id:"C" + merge featureA +
+
+flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +
classDiagram Animal "1" <|-- Duck Animal <|-- Fish @@ -215,6 +275,21 @@ class Class10 { +run() }
+
+ erDiagram + CAR ||--o{ NAMED-DRIVER : allows + CAR { + string registrationNumber + string make + string model + } + PERSON ||--o{ NAMED-DRIVER : is + PERSON { + string firstName + string lastName + int age + } +