GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into bug/5555_xychart_incorrect_spacing

Browse Source
This commit is contained in:
Sidharth Vinod 2024-06-20 22:31:03 +05:30 committed by GitHub
commit 6f61a71dda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 1748 additions and 1050 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.github/lychee.toml vendored
View File

@ -41,7 +41,10 @@ exclude = [
"https://bundlephobia.com",
# Chrome webstore migration issue. Temporary
"https://chromewebstore.google.com"
"https://chromewebstore.google.com",
# Drupal 403
"https://www.drupal.org"
]
# Exclude all private IPs from checking.

72
.github/workflows/e2e.yml vendored
View File

@ -1,9 +1,3 @@
# We use github cache to save snapshots between runs.
# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
# These are then downloaded before running the E2E, providing the reference snapshots.
# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
name: E2E
on:
@ -72,16 +66,6 @@ jobs:
mkdir -p cypress/snapshots/stats/base
mv stats cypress/snapshots/stats/base
- name: Cypress run
uses: cypress-io/github-action@v6
id: cypress-snapshot-gen
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
with:
install: false
start: pnpm run dev
wait-on: 'http://localhost:9000'
browser: chrome
e2e:
runs-on: ubuntu-latest
container:
@ -146,6 +130,10 @@ jobs:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
VITEST_COVERAGE: true
CYPRESS_COMMIT: ${{ github.sha }}
ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
ARGOS_PARALLEL_TOTAL: 4
ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
- name: Upload Coverage to Codecov
uses: codecov/codecov-action@v4
@ -158,55 +146,3 @@ jobs:
fail_ci_if_error: false
verbose: true
token: 6845cc80-77ee-4e17-85a1-026cd95e0766
# We upload the artifacts into numbered archives to prevent overwriting
- name: Upload Artifacts
uses: actions/upload-artifact@v4
if: ${{ always() }}
with:
name: snapshots-${{ matrix.containers }}
retention-days: 1
path: ./cypress/snapshots
combineArtifacts:
needs: e2e
runs-on: ubuntu-latest
if: ${{ always() }}
steps:
# Download all snapshot artifacts and merge them into a single folder
- name: Download All Artifacts
uses: actions/download-artifact@v4
with:
path: snapshots
pattern: snapshots-*
merge-multiple: true
# For successful push events, we save the snapshots cache
- name: Save snapshots cache
id: cache-upload
if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
uses: actions/cache/save@v4
with:
path: ./snapshots
key: ${{ runner.os }}-snapshots-${{ github.event.after }}
- name: Flatten images to a folder
if: ${{ needs.e2e.result == 'failure' }}
run: |
mkdir errors
cd snapshots
find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
- name: Upload Error snapshots
if: ${{ needs.e2e.result == 'failure' }}
uses: actions/upload-artifact@v4
id: upload-artifacts
with:
name: error-snapshots
retention-days: 10
path: errors/
- name: Notify Users
if: ${{ needs.e2e.result == 'failure' }}
run: |
echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

1
README.md
View File

@ -35,6 +35,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
<img src="./img/header.png" alt="" />

11
cypress.config.ts
View File

@ -2,6 +2,8 @@ import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
import coverage from '@cypress/code-coverage/task';
import eyesPlugin from '@applitools/eyes-cypress';
import { registerArgosTask } from '@argos-ci/cypress/task';
export default eyesPlugin(
defineConfig({
projectId: 'n2sma2',
@ -17,10 +19,17 @@ export default eyesPlugin(
}
return launchOptions;
});
addMatchImageSnapshotPlugin(on, config);
// copy any needed variables from process.env to config.env
config.env.useAppli = process.env.USE_APPLI ? true : false;
config.env.useArgos = !!process.env.CI;
if (config.env.useArgos) {
registerArgosTask(on, config, {
token: 'fc3a35cf5200db928d65b2047861582d9444032b',
});
} else {
addMatchImageSnapshotPlugin(on, config);
}
// do not forget to return the changed config object!
return config;
},

27
cypress/helpers/util.ts
View File

@ -95,19 +95,8 @@ export const openURLAndVerifyRendering = (
options: CypressMermaidConfig,
validation?: any
): void => {
const useAppli: boolean = Cypress.env('useAppli');
const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
if (useAppli) {
cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
cy.eyesOpen({
appName: 'Mermaid',
testName: name,
batchName: Cypress.spec.name,
batchId: batchId + Cypress.spec.name,
});
}
cy.visit(url);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
@ -116,11 +105,27 @@ export const openURLAndVerifyRendering = (
cy.get('svg').should(validation);
}
verifyScreenshot(name);
};
export const verifyScreenshot = (name: string): void => {
const useAppli: boolean = Cypress.env('useAppli');
const useArgos: boolean = Cypress.env('useArgos');
if (useAppli) {
cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
cy.eyesOpen({
appName: 'Mermaid',
testName: name,
batchName: Cypress.spec.name,
batchId: batchId + Cypress.spec.name,
});
cy.log(`Check eyes ${Cypress.spec.name}`);
cy.eyesCheckWindow('Click!');
cy.log(`Closing eyes ${Cypress.spec.name}`);
cy.eyesClose();
} else if (useArgos) {
cy.argosScreenshot(name);
} else {
cy.matchImageSnapshot(name);
}

9
cypress/integration/other/configuration.spec.js
View File

@ -1,4 +1,4 @@
import { renderGraph } from '../../helpers/util.ts';
import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
describe('Configuration', () => {
describe('arrowMarkerAbsolute', () => {
it('should handle default value false of arrowMarkerAbsolute', () => {
@ -119,8 +119,7 @@ describe('Configuration', () => {
const url = 'http://localhost:9000/regression/issue-1874.html';
cy.visit(url);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
cy.matchImageSnapshot(
verifyScreenshot(
'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
);
});
@ -145,7 +144,7 @@ describe('Configuration', () => {
// none of the diagrams should be error diagrams
expect($svg).to.not.contain('Syntax error');
});
cy.matchImageSnapshot(
verifyScreenshot(
'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
);
});
@ -162,7 +161,7 @@ describe('Configuration', () => {
// some of the diagrams should be error diagrams
expect($svg).to.contain('Syntax error');
});
cy.matchImageSnapshot(
verifyScreenshot(
'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
);
});

1
cypress/integration/other/xss.spec.js
View File

@ -10,7 +10,6 @@ describe('XSS', () => {
cy.wait(1000).then(() => {
cy.get('.mermaid').should('exist');
});
cy.get('svg');
});
it('should not allow tags in the css', () => {

5
cypress/integration/rendering/c4.spec.js
View File

@ -30,7 +30,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Container diagram', () => {
imgSnapshotTest(
@ -50,7 +49,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Component diagram', () => {
imgSnapshotTest(
@ -69,7 +67,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Dynamic diagram', () => {
imgSnapshotTest(
@ -93,7 +90,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Deployment diagram', () => {
imgSnapshotTest(
@ -117,6 +113,5 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
});

18
cypress/integration/rendering/classDiagram.spec.js
View File

@ -32,7 +32,6 @@ describe('Class diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('2: should render a simple class diagrams with cardinality', () => {
@ -61,7 +60,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('3: should render a simple class diagram with different visibilities', () => {
@ -79,7 +77,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
@ -109,7 +106,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('5: should render a simple class diagram with abstract method', () => {
@ -121,7 +117,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('6: should render a simple class diagram with static method', () => {
@ -133,7 +128,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('7: should render a simple class diagram with Generic class', () => {
@ -153,7 +147,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('8: should render a simple class diagram with Generic class and relations', () => {
@ -174,7 +167,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('9: should render a simple class diagram with clickable link', () => {
@ -196,7 +188,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('10: should render a simple class diagram with clickable callback', () => {
@ -218,7 +209,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('11: should render a simple class diagram with return type on method', () => {
@ -233,7 +223,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('12: should render a simple class diagram with generic types', () => {
@ -249,7 +238,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('13: should render a simple class diagram with css classes applied', () => {
@ -267,7 +255,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('14: should render a simple class diagram with css classes applied directly', () => {
@ -283,7 +270,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
@ -298,7 +284,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('16: should render multiple class diagrams', () => {
@ -351,7 +336,6 @@ describe('Class diagram', () => {
],
{}
);
cy.get('svg');
});
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
@ -421,7 +405,6 @@ describe('Class diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render class diagram with newlines in title', () => {
@ -439,7 +422,6 @@ describe('Class diagram', () => {
+quack()
}
`);
cy.get('svg');
});
it('should render class diagram with many newlines in title', () => {

1
cypress/integration/rendering/erDiagram.spec.js
View File

@ -218,7 +218,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ loglevel: 1 }
);
cy.get('svg');
});
it('should render entities with keys', () => {

13
cypress/integration/rendering/quadrantChart.spec.js
View File

@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render a complete quadrant chart', () => {
imgSnapshotTest(
@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render without points', () => {
imgSnapshotTest(
@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render y-axix on right side', () => {
imgSnapshotTest(
@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom', () => {
imgSnapshotTest(
@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom and y-axis on right', () => {
imgSnapshotTest(
@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render without title', () => {
imgSnapshotTest(
@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should use all the config', () => {
imgSnapshotTest(
@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should use all the theme variable', () => {
imgSnapshotTest(
@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render x-axis labels in the center, if x-axis has two labels', () => {
imgSnapshotTest(
@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render y-axis labels in the center, if y-axis has two labels', () => {
imgSnapshotTest(
@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
imgSnapshotTest(
@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('it should render data points with styles', () => {
@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('it should render data points with styles + classes', () => {

1
cypress/integration/rendering/requirement.spec.js
View File

@ -44,6 +44,5 @@ describe('Requirement diagram', () => {
`,
{}
);
cy.get('svg');
});
});

12
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -464,6 +464,18 @@ context('Sequence diagram', () => {
{}
);
});
it('should render notes over actors and participant', () => {
imgSnapshotTest(
`
sequenceDiagram
actor Alice
participant Charlie
note over Alice: some note
note over Charlie: other note
`,
{}
);
});
it('should render long messages from an actor to the left to one to the right', () => {
imgSnapshotTest(
`

16
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@ -8,7 +8,6 @@ describe('State diagram', () => {
`,
{ logLevel: 1, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams', () => {
imgSnapshotTest(
@ -20,7 +19,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a long descriptions instead of id when available', () => {
imgSnapshotTest(
@ -32,7 +30,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a long descriptions with additional descriptions', () => {
imgSnapshotTest(
@ -44,7 +41,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a single state with short descriptions', () => {
imgSnapshotTest(
@ -55,7 +51,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a transition descriptions with new lines', () => {
imgSnapshotTest(
@ -69,7 +64,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with a note', () => {
imgSnapshotTest(
@ -83,7 +77,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with on the left side when so specified', () => {
imgSnapshotTest(
@ -97,7 +90,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with a note together with another state', () => {
imgSnapshotTest(
@ -113,7 +105,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a note with multiple lines in it', () => {
imgSnapshotTest(
@ -156,7 +147,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams 2', () => {
imgSnapshotTest(
@ -169,7 +159,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams with labels', () => {
imgSnapshotTest(
@ -185,7 +174,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render state descriptions', () => {
imgSnapshotTest(
@ -198,7 +186,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render composite states', () => {
imgSnapshotTest(
@ -217,7 +204,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render multiple composite states', () => {
imgSnapshotTest(
@ -287,7 +273,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render concurrency states', () => {
imgSnapshotTest(
@ -311,7 +296,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with states in it', () => {
imgSnapshotTest(

15
cypress/integration/rendering/stateDiagram.spec.js
View File

@ -10,7 +10,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a long descriptions instead of id when available', () => {
imgSnapshotTest(
@ -22,7 +21,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a long descriptions with additional descriptions', () => {
imgSnapshotTest(
@ -34,7 +32,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a single state with short descriptions', () => {
imgSnapshotTest(
@ -45,7 +42,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a transition descriptions with new lines', () => {
imgSnapshotTest(
@ -59,7 +55,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with a note', () => {
imgSnapshotTest(
@ -73,7 +68,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with on the left side when so specified', () => {
imgSnapshotTest(
@ -87,7 +81,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with a note together with another state', () => {
imgSnapshotTest(
@ -103,7 +96,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a note with multiple lines in it', () => {
imgSnapshotTest(
@ -146,7 +138,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a simple state diagrams 2', () => {
imgSnapshotTest(
@ -159,7 +150,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a simple state diagrams with labels', () => {
imgSnapshotTest(
@ -175,7 +165,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render state descriptions', () => {
imgSnapshotTest(
@ -188,7 +177,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render composite states', () => {
imgSnapshotTest(
@ -207,7 +195,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render multiple composit states', () => {
imgSnapshotTest(
@ -277,7 +264,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render concurrency states', () => {
imgSnapshotTest(
@ -301,7 +287,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with states in it', () => {
imgSnapshotTest(

12
cypress/integration/rendering/theme.spec.js
View File

@ -10,7 +10,6 @@ describe('themeCSS balancing, it', () => {
`,
{}
);
cy.get('svg');
});
it('should not allow unbalanced CSS definitions 2', () => {
imgSnapshotTest(
@ -21,7 +20,6 @@ describe('themeCSS balancing, it', () => {
`,
{}
);
cy.get('svg');
});
});
@ -45,7 +43,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a flowchart diagram', () => {
imgSnapshotTest(
@ -70,7 +67,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a new flowchart diagram', () => {
imgSnapshotTest(
@ -96,7 +92,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a sequence diagram', () => {
imgSnapshotTest(
@ -125,7 +120,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a class diagram', () => {
@ -175,7 +169,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a state diagram', () => {
imgSnapshotTest(
@ -210,7 +203,6 @@ stateDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a state diagram (v2)', () => {
imgSnapshotTest(
@ -245,7 +237,6 @@ stateDiagram-v2
`,
{ theme }
);
cy.get('svg');
});
it('should render a er diagram', () => {
imgSnapshotTest(
@ -266,7 +257,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a user journey diagram', () => {
imgSnapshotTest(
@ -287,7 +277,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a gantt diagram', () => {
cy.clock(new Date('2014-01-06').getTime());
@ -326,7 +315,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
});
});

16
cypress/integration/rendering/xyChart.spec.js
View File

@ -9,7 +9,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should render a complete chart', () => {
imgSnapshotTest(
@ -35,7 +34,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('y-axis title not required', () => {
imgSnapshotTest(
@ -48,7 +46,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest(
@ -60,7 +57,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('x axis title not required', () => {
imgSnapshotTest(
@ -72,7 +68,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Multiple plots can be rendered', () => {
imgSnapshotTest(
@ -87,7 +82,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Decimals and negative numbers are supported', () => {
imgSnapshotTest(
@ -98,7 +92,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest(
@ -116,7 +109,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render spark bar without displaying other property', () => {
imgSnapshotTest(
@ -143,7 +135,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should use all the config from directive', () => {
imgSnapshotTest(
@ -158,7 +149,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should use all the config from yaml', () => {
imgSnapshotTest(
@ -199,7 +189,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis title false', () => {
imgSnapshotTest(
@ -221,7 +210,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis label false', () => {
imgSnapshotTest(
@ -243,7 +231,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis tick false', () => {
imgSnapshotTest(
@ -265,7 +252,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis line false', () => {
imgSnapshotTest(
@ -287,7 +273,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render all the theme color', () => {
imgSnapshotTest(
@ -317,7 +302,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should use the correct distances between data points', () => {
imgSnapshotTest(

1
cypress/support/e2e.js
View File

@ -15,6 +15,7 @@
import '@cypress/code-coverage/support';
import '@applitools/eyes-cypress/commands';
import '@argos-ci/cypress/support';
// Import commands.js using ES2015 syntax:
import './commands';

2
cypress/tsconfig.json
View File

@ -2,7 +2,7 @@
"compilerOptions": {
"target": "es2020",
"lib": ["es2020", "dom"],
"types": ["cypress", "node"],
"types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
"allowImportingTsExtensions": true,
"noEmit": true
},

4
docker-compose.yml
View File

@ -1,4 +1,3 @@
version: '3.9'
services:
mermaid:
build:
@ -8,7 +7,7 @@ services:
tty: true
working_dir: /mermaid
mem_limit: '8G'
entrypoint: docker-entrypoint.sh
entrypoint: ./docker-entrypoint.sh
environment:
- NODE_OPTIONS=--max_old_space_size=8192
volumes:
@ -16,6 +15,7 @@ services:
- root_cache:/root/.cache
- root_local:/root/.local
- root_npm:/root/.npm
- /tmp:/tmp
ports:
- 9000:9000
- 3333:3333

2
docs/community/contributing.md
View File

@ -56,7 +56,7 @@ The following commands must be sufficient enough to start with:
```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm env use --global 18
pnpm env use --global 20
```
You may also need to reload `.shrc` or `.bashrc` afterwards.

24
docs/syntax/sequenceDiagram.md
View File

@ -304,17 +304,35 @@ sequenceDiagram
Note over Alice,John: A typical interaction
```
It is also possible to add a line break (applies to text input in general):
## Line breaks
Line break can be added to Note and Message:
```mermaid-example
sequenceDiagram
Alice->John: Hello John, how are you?
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
Line breaks in Actor names requires aliases:
```mermaid-example
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
```mermaid
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```

6
package.json
View File

@ -62,6 +62,7 @@
},
"devDependencies": {
"@applitools/eyes-cypress": "^3.42.3",
"@argos-ci/cypress": "^2.0.5",
"@cspell/eslint-plugin": "^8.6.0",
"@cypress/code-coverage": "^3.12.30",
"@rollup/plugin-typescript": "^11.1.6",
@ -126,10 +127,5 @@
},
"nyc": {
"report-dir": "coverage/cypress"
},
"pnpm": {
"patchedDependencies": {
"cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
}
}
}

20
packages/mermaid-flowchart-elk/src/detector.spec.ts
View File

@ -39,6 +39,26 @@ describe('flowchart-elk detector', () => {
).toBe(true);
});
// The error from the issue was reproduced with mindmap, so this is just an example
// what matters is the keyword somewhere inside graph definition
it('should check only the beginning of the line in search of keywords', () => {
expect(
detector('mindmap ["Descendant node in flowchart"]', {
flowchart: {
defaultRenderer: 'elk',
},
})
).toBe(false);
expect(
detector('mindmap ["Descendant node in graph"]', {
flowchart: {
defaultRenderer: 'elk',
},
})
).toBe(false);
});
it('should detect flowchart-elk', () => {
expect(detector('flowchart-elk')).toBe(true);
});

2
packages/mermaid-flowchart-elk/src/detector.ts
View File

@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config): boolean => {
// If diagram explicitly states flowchart-elk
/^\s*flowchart-elk/.test(txt) ||
// If a flowchart/graph diagram has their default renderer set to elk
(/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
(/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
) {
return true;
}

4
packages/mermaid/package.json
View File

@ -70,7 +70,7 @@
"dependencies": {
"@braintree/sanitize-url": "^7.0.1",
"@mermaid-js/parser": "workspace:^",
"cytoscape": "^3.28.1",
"cytoscape": "^3.29.2",
"cytoscape-cose-bilkent": "^4.1.0",
"d3": "^7.9.0",
"d3-sankey": "^0.12.3",
@ -88,7 +88,7 @@
},
"devDependencies": {
"@adobe/jsonschema2md": "^8.0.0",
"@types/cytoscape": "^3.19.16",
"@types/cytoscape": "^3.21.4",
"@types/d3": "^7.4.3",
"@types/d3-sankey": "^0.12.4",
"@types/d3-scale": "^4.0.8",

2
packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
View File

@ -256,7 +256,7 @@ boundaryStartStatement
boundaryStart
: ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
| SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
| SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'SYSTEM'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
| BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
| CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
| NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}

4
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@ -415,11 +415,11 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actorY + 80;
elem.lower();
const line = elem.append('g').lower();
if (!isFooter) {
actorCnt++;
elem
line
.append('line')
.attr('id', 'actor' + actorCnt)
.attr('x1', center)

2
packages/mermaid/src/docs/community/contributing.md
View File

@ -52,7 +52,7 @@ The following commands must be sufficient enough to start with:
```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm env use --global 18
pnpm env use --global 20
```
You may also need to reload `.shrc` or `.bashrc` afterwards.

15
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@ -205,11 +205,22 @@ sequenceDiagram
Note over Alice,John: A typical interaction
```
It is also possible to add a line break (applies to text input in general):
## Line breaks
Line break can be added to Note and Message:
```mermaid-example
sequenceDiagram
Alice->John: Hello John, how are you?
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
Line breaks in Actor names requires aliases:
```mermaid-example
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```

20
patches/cytoscape@3.28.1.patch
View File

@ -1,20 +0,0 @@
diff --git a/package.json b/package.json
index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,15 @@
"engines": {
"node": ">=0.10"
},
+ "exports": {
+ ".": {
+ "import": "./dist/cytoscape.umd.js",
+ "default": "./dist/cytoscape.cjs.js"
+ },
+ "./*": "./*"
+ },
"main": "dist/cytoscape.cjs.js",
+ "module": "dist/cytoscape.umd.js",
"unpkg": "dist/cytoscape.min.js",
"jsdelivr": "dist/cytoscape.min.js",
"scripts": {

2455
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff