diff --git a/.npmrc b/.npmrc
index 289684302..4c2f52b3b 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,2 @@
auto-install-peers=true
strict-peer-dependencies=false
-use-inline-specifiers-lockfile-format=true
diff --git a/.vite/build.ts b/.vite/build.ts
index 268db3270..183158288 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -3,6 +3,7 @@ import { resolve } from 'path';
import { fileURLToPath } from 'url';
import jisonPlugin from './jisonPlugin.js';
import { readFileSync } from 'fs';
+import typescript from '@rollup/plugin-typescript';
import { visualizer } from 'rollup-plugin-visualizer';
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
@@ -102,9 +103,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
},
},
resolve: {
- extensions: ['.jison', '.js', '.ts', '.json'],
+ extensions: [],
},
- plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+ plugins: [
+ jisonPlugin(),
+ // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+ typescript({ compilerOptions: { declaration: false } }),
+ ...visualizerOptions(packageName, core),
+ ],
};
if (watch && config.build) {
diff --git a/README.md b/README.md
index d8e06b62f..941e1fd18 100644
--- a/README.md
+++ b/README.md
@@ -240,6 +240,44 @@ pie
### Git graph [experimental - live editor]
+### Bar chart (using gantt chart) [docs - live editor]
+
+```
+gantt
+ title Git Issues - days since last update
+ dateFormat X
+ axisFormat %s
+
+ section Issue19062
+ 71 : 0, 71
+ section Issue19401
+ 36 : 0, 36
+ section Issue193
+ 34 : 0, 34
+ section Issue7441
+ 9 : 0, 9
+ section Issue1300
+ 5 : 0, 5
+```
+
+```mermaid
+gantt
+ title Git Issues - days since last update
+ dateFormat X
+ axisFormat %s
+
+ section Issue19062
+ 71 : 0, 71
+ section Issue19401
+ 36 : 0, 36
+ section Issue193
+ 34 : 0, 34
+ section Issue7441
+ 9 : 0, 9
+ section Issue1300
+ 5 : 0, 5
+```
+
### User Journey diagram [docs - live editor]
```
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index af35020c5..b472a3181 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -1,5 +1,5 @@
// @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
export const select = function () {
return new MockedD3();
diff --git a/cSpell.json b/cSpell.json
index d860c5e33..94276b683 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -47,6 +47,7 @@
"graphviz",
"grav",
"greywolf",
+ "huynh",
"inkdrop",
"jaoude",
"jison",
@@ -90,6 +91,7 @@
"sidharthv",
"sphinxcontrib",
"statediagram",
+ "steph",
"stylis",
"substate",
"sveidqvist",
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 513cf0714..6df7edd84 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
describe('Configuration', () => {
describe('arrowMarkerAbsolute', () => {
it('should handle default value false of arrowMarkerAbsolute', () => {
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index c94235162..4ade11e81 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
describe('mermaid', () => {
describe('registerDiagram', () => {
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 4fadc7855..8f28d9f53 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
describe('CSS injections', () => {
it('should not allow CSS injections outside of the diagram', () => {
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 90ad677ea..2e7a1cbd7 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Class diagram V2', () => {
it('0: should render a simple class diagram', () => {
imgSnapshotTest(
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index e21be67ec..cda455f0e 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index 033752c66..e0b36d53a 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Current diagram', () => {
it('should render a state with states in it', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
index 673cadf3e..afde4af3e 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
describe('Flowchart', () => {
it('34: testing the label width in percy', () => {
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index df1fac0cd..0c6eaa838 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Entity Relationship Diagram', () => {
it('should render a simple ER diagram', () => {
@@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render an ER diagram with a recursive relationship', () => {
@@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render an ER diagram with multiple relationships between the same two entities', () => {
@@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render a cyclical ER diagram', () => {
@@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render a not-so-simple ER diagram', () => {
@@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render multiple ER diagrams', () => {
@@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
],
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render an ER diagram with blank or empty labels', () => {
@@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ er: { useMaxWidth: false } }
);
- cy.get('svg');
});
it('should render entities with and without attributes', () => {
@@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with generic and array attributes', () => {
@@ -179,7 +170,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with length in attributes type', () => {
@@ -193,7 +183,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities and attributes with big and small entity names', () => {
@@ -209,7 +198,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with keys', () => {
@@ -228,7 +216,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with comments', () => {
@@ -247,7 +234,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with keys and comments', () => {
@@ -267,7 +253,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('should render entities with aliases', () => {
@@ -285,7 +270,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
- cy.get('svg');
});
it('1433: should render a simple ER diagram with a title', () => {
diff --git a/cypress/integration/rendering/errorDiagram.spec.js b/cypress/integration/rendering/errorDiagram.spec.js
new file mode 100644
index 000000000..e837565d3
--- /dev/null
+++ b/cypress/integration/rendering/errorDiagram.spec.js
@@ -0,0 +1,45 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Error Diagrams', () => {
+ beforeEach(() => {
+ cy.on('uncaught:exception', (err) => {
+ expect(err.message).to.include('Parse error');
+ // return false to prevent the error from
+ // failing this test
+ return false;
+ });
+ });
+
+ it('should render a simple ER diagram', () => {
+ imgSnapshotTest(
+ `
+ error
+ `,
+ { logLevel: 1 }
+ );
+ });
+
+ it('should render error diagram for actual errors', () => {
+ imgSnapshotTest(
+ `
+ flowchart TD
+ A[Christmas] --|Get money| B(Go shopping)
+ `,
+ { logLevel: 1 }
+ );
+ });
+
+ it('should render error for wrong ER diagram', () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+ ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+ ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+ MONGODB-CLUSTERS ||..|{
+ ATLAS-TEAMS ||..|{
+ `,
+ { logLevel: 1 }
+ );
+ });
+});
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 414037651..d0ef42c5d 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe.skip('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => {
@@ -684,4 +684,149 @@ A --> B
{ titleTopMargin: 0 }
);
});
+ describe('Markdown strings flowchart-elk (#4220)', () => {
+ describe('html labels', () => {
+ it('With styling and classes', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+ A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+ classDef someclass fill:#f96
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('With formatting in a node', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+ a{"\`The **cat** in the hat\`"} -- 1o --> b
+ a -- 2o --> c
+ a -- 3o --> d
+ g --2i--> a
+ d --1i--> a
+ h --3i -->a
+ b --> d(The dog in the hog)
+ c --> d
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('New line in node and formatted edge label', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Wrapping long text with a new line', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Sub graphs and markdown strings', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+subgraph "One"
+ a("\`The **cat**
+ in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+ c("\`The **cat**
+ in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ });
+
+ describe('svg text labels', () => {
+ it('With styling and classes', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+ A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+ classDef someclass fill:#f96
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('With formatting in a node', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+ a{"\`The **cat** in the hat\`"} -- 1o --> b
+ a -- 2o --> c
+ a -- 3o --> d
+ g --2i--> a
+ d --1i--> a
+ h --3i -->a
+ b --> d(The dog in the hog)
+ c --> d
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('New line in node and formatted edge label', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Wrapping long text with a new line', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Sub graphs and markdown strings', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+subgraph "One"
+ a("\`The **cat**
+ in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+ c("\`The **cat**
+ in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ });
+ });
});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index abdb22265..eaa14ed50 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Flowchart v2', () => {
it('1: should render a simple flowchart', () => {
@@ -685,4 +685,159 @@ A ~~~ B
{ titleTopMargin: 0 }
);
});
+ it('4023: Should render html labels with images and-or text correctly', () => {
+ imgSnapshotTest(
+ `flowchart TD
+ B[
]
+ B-->C[ more text ]
+ B-->D( some text)
+ B-->E(plain)`,
+ {}
+ );
+ });
+ describe('Markdown strings flowchart (#4220)', () => {
+ describe('html labels', () => {
+ it('With styling and classes', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+ A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+ classDef someclass fill:#f96
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('With formatting in a node', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+ a{"\`The **cat** in the hat\`"} -- 1o --> b
+ a -- 2o --> c
+ a -- 3o --> d
+ g --2i--> a
+ d --1i--> a
+ h --3i -->a
+ b --> d(The dog in the hog)
+ c --> d
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('New line in node and formatted edge label', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Wrapping long text with a new line', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Sub graphs and markdown strings', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+subgraph "One"
+ a("\`The **cat**
+ in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+ c("\`The **cat**
+ in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ });
+
+ describe('svg text labels', () => {
+ it('With styling and classes', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+ A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+ classDef someclass fill:#f96
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('With formatting in a node', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+ a{"\`The **cat** in the hat\`"} -- 1o --> b
+ a -- 2o --> c
+ a -- 3o --> d
+ g --2i--> a
+ d --1i--> a
+ h --3i -->a
+ b --> d(The dog in the hog)
+ c --> d
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('New line in node and formatted edge label', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Wrapping long text with a new line', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ it('Sub graphs and markdown strings', () => {
+ imgSnapshotTest(
+ `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+ a("\`The **cat**
+ in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+ c("\`The **cat**
+ in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ });
+ });
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index c4ef54fcf..d25043d28 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Graph', () => {
it('1: should render a simple flowchart no htmlLabels', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c0156eee3..cb65f73b0 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
);
});
+ it('should default to showing today marker', () => {
+ // This test only works if the environment thinks today is 1010-10-10
+ imgSnapshotTest(
+ `
+ gantt
+ title Show today marker (vertical line should be visible)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ %% Should default to being on
+ %% todayMarker on
+ section Section1
+ Yesterday: 1010-10-09, 1d
+ Today: 1010-10-10, 1d
+ `,
+ {}
+ );
+ });
+
it('should hide today marker', () => {
imgSnapshotTest(
`
@@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
axisFormat %d
todayMarker off
section Section1
- Today: 1, -1h
+ Yesterday: 1010-10-09, 1d
+ Today: 1010-10-10, 1d
`,
{}
);
@@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
- Today: 1, -1h
+ Yesterday: 1010-10-09, 1d
+ Today: 1010-10-10, 1d
`,
{}
);
@@ -435,4 +455,39 @@ describe('Gantt diagram', () => {
{ gantt: { topAxis: true } }
);
});
+
+ it('should render when compact is true', () => {
+ imgSnapshotTest(
+ `
+ ---
+ displayMode: compact
+ ---
+ gantt
+ title GANTT compact
+ dateFormat HH:mm:ss
+ axisFormat %Hh%M
+
+ section DB Clean
+ Clean: 12:00:00, 10m
+ Clean: 12:30:00, 12m
+ Clean: 13:00:00, 8m
+ Clean: 13:30:00, 9m
+ Clean: 14:00:00, 13m
+ Clean: 14:30:00, 10m
+ Clean: 15:00:00, 11m
+
+ section Sessions
+ A: 12:00:00, 63m
+ B: 12:30:00, 12m
+ C: 13:05:00, 12m
+ D: 13:06:00, 33m
+ E: 13:15:00, 55m
+ F: 13:20:00, 12m
+ G: 13:32:00, 18m
+ H: 13:50:00, 20m
+ I: 14:10:00, 10m
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index 4663f6225..94b3f9ca0 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -223,5 +223,18 @@ mindmap
shouldHaveRoot
);
});
+ describe('Markdown strings mindmaps (#4220)', () => {
+ it('Formatted label with linebreak and a wrapping label and emojis', () => {
+ imgSnapshotTest(
+ `mindmap
+ id1[\`**Start** with
+ a second line 😎\`]
+ id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`,
+ { titleTopMargin: 0 }
+ );
+ });
+ });
/* The end */
});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index f8948240a..687fc245b 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,6 +1,6 @@
///
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
context('Sequence diagram', () => {
it('should render a sequence diagram with boxes', () => {
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 047e240fc..700791621 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('State diagram', () => {
it('v2 should render a simple info', () => {
@@ -530,7 +530,7 @@ stateDiagram-v2
[*] --> A
A --> B: test({ foo#colon; 'far' })
B --> [*]
- classDef badBadEvent fill:#f00,color:white,font-weight:bold
+ classDef badBadEvent fill:#f00,color:white,font-weight:bold
class B badBadEvent
`,
{ logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:#f00,color:white,font-weight:bold
-
+
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
-
+
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index cdcc48a07..28c24d398 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('State diagram', () => {
it('should render a simple state diagrams', () => {
diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index bcea4f4cc..76fbd36f7 100644
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -188,7 +188,7 @@ mindmap
//import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/detector';
// import timeline from '../../packages/mermaid-timeline/src/detector';
- import mermaid from '../../packages/mermaid/src/mermaid';
+ import mermaid from './mermaid.esm.mjs';
// await mermaid.registerExternalDiagrams([]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
diff --git a/cypress/platform/bundle-test.js b/cypress/platform/bundle-test.js
index edd3dfbc4..f5bf0ecd6 100644
--- a/cypress/platform/bundle-test.js
+++ b/cypress/platform/bundle-test.js
@@ -1,4 +1,5 @@
-import mermaid from '../../packages/mermaid/src/mermaid';
+// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
+import mermaid from './mermaid.esm.mjs';
let code = `flowchart LR
Power_Supply --> Transmitter_A
diff --git a/cypress/platform/external-diagrams-example-diagram.html b/cypress/platform/external-diagrams-example-diagram.html
index b5b716ff8..495b7e59d 100644
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/cypress/platform/external-diagrams-example-diagram.html
@@ -11,9 +11,9 @@ example-diagram
+
+