English
@@ -34,7 +34,7 @@ Mermaid
[](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
diff --git a/applitools.config.js b/applitools.config.js
deleted file mode 100644
index 4cf02220a..000000000
--- a/applitools.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
- testConcurrency: 1,
- browser: [
- // Add browsers with different viewports
- // { width: 800, height: 600, name: 'chrome' },
- // { width: 700, height: 500, name: 'firefox' },
- // { width: 1600, height: 1200, name: 'ie11' },
- // { width: 1024, height: 768, name: 'edgechromium' },
- // { width: 800, height: 600, name: 'safari' },
- // // Add mobile emulation devices in Portrait mode
- // { deviceName: 'iPhone X', screenOrientation: 'portrait' },
- // { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
- ],
- // set batch name to the configuration
- // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
diff --git a/cypress.config.cjs b/cypress.config.cjs
deleted file mode 100644
index 33633920a..000000000
--- a/cypress.config.cjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
- projectId: 'n2sma2',
- viewportWidth: 1440,
- viewportHeight: 1024,
- e2e: {
- specPattern: 'cypress/integration/**/*.{js,ts}',
- setupNodeEvents(on, config) {
- coverage(on, config);
- on('before:browser:launch', (browser = {}, launchOptions) => {
- if (browser.name === 'chrome' && browser.isHeadless) {
- launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
- }
- return launchOptions;
- });
- addMatchImageSnapshotPlugin(on, config);
- // copy any needed variables from process.env to config.env
- config.env.useAppli = process.env.USE_APPLI ? true : false;
-
- // do not forget to return the changed config object!
- return config;
- },
- },
- video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 000000000..4182d92a8
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+ defineConfig({
+ projectId: 'n2sma2',
+ viewportWidth: 1440,
+ viewportHeight: 1024,
+ e2e: {
+ specPattern: 'cypress/integration/**/*.{js,ts}',
+ setupNodeEvents(on, config) {
+ coverage(on, config);
+ on('before:browser:launch', (browser, launchOptions) => {
+ if (browser.name === 'chrome' && browser.isHeadless) {
+ launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+ }
+ return launchOptions;
+ });
+ addMatchImageSnapshotPlugin(on, config);
+ // copy any needed variables from process.env to config.env
+ config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+ // do not forget to return the changed config object!
+ return config;
+ },
+ },
+ video: false,
+ })
+);
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index e23820ffa..857d395be 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -741,6 +741,25 @@ A ~~~ B
);
});
+ it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
+ imgSnapshotTest(
+ `flowchart
+
+ subgraph Main
+ subgraph Child1
+ Node1
+ Node2
+ end
+ subgraph Child2
+ Node3
+ Node4
+ end
+ end
+ Main --> Out1
+ Child2 --> Out2`
+ );
+ });
+
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index e045691ef..73ebc325f 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -585,4 +585,106 @@ describe('Gantt diagram', () => {
{}
);
});
+
+ it("should render when there's a semicolon in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title ;Gantt With a Semicolon in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section ;Section With a Semicolon
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ ;A task with a semiclon :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title #Gantt With a Hashtag in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section #Section With a Hashtag
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ #A task with a hashtag :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index d3e4dd9dd..19ddde31d 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -826,4 +826,121 @@ gitGraph TB:
cherry-pick id: "M" parent:"B"`
);
});
+ it('41: should render default GitGraph with parallelCommits set to false', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: false } }
+ );
+ });
+ it('42: should render GitGraph with parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
+ imgSnapshotTest(
+ `gitGraph TB:
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: false } }
+ );
+ });
+ it('45: should render GitGraph with unconnected branches and parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
+ imgSnapshotTest(
+ `gitGraph TB:
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c..10432f057 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -792,6 +792,34 @@ context('Sequence diagram', () => {
});
});
context('links', () => {
+ it('should support actor links', () => {
+ renderGraph(
+ `
+ sequenceDiagram
+ link Alice: Dashboard @ https://dashboard.contoso.com/alice
+ link Alice: Wiki @ https://wiki.contoso.com/alice
+ link John: Dashboard @ https://dashboard.contoso.com/john
+ link John: Wiki @ https://wiki.contoso.com/john
+ Alice->>John: Hello John
+ John-->>Alice: Great
day!
+ `,
+ { securityLevel: 'loose' }
+ );
+ cy.get('#actor0_popup').should((popupMenu) => {
+ const style = popupMenu.attr('style');
+ expect(style).to.undefined;
+ });
+ cy.get('#root-0').click();
+ cy.get('#actor0_popup').should((popupMenu) => {
+ const style = popupMenu.attr('style');
+ expect(style).to.match(/^display: block;$/);
+ });
+ cy.get('#root-0').click();
+ cy.get('#actor0_popup').should((popupMenu) => {
+ const style = popupMenu.attr('style');
+ expect(style).to.match(/^display: none;$/);
+ });
+ });
it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
//Be aware that the syntax for "properties" is likely to be changed.
imgSnapshotTest(
diff --git a/demos/gantt.html b/demos/gantt.html
index 88f52ef5c..9c82371ab 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -30,6 +30,21 @@
+
+ gantt
+ title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
+ accTitle: A simple sample gantt diagram
+ accDescr: 2 sections with 2 tasks each, from 2014
+ dateFormat YYYY-MM-DD
+ section #;Section
+ #;A task :a1, 2014-01-01, 30d
+ #;Another task :after a1 , 20d
+ section #;Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+
+
+
gantt
title Airworks roadmap
diff --git a/demos/sequence.html b/demos/sequence.html
index b2733a384..8eecae610 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -23,6 +23,10 @@
participant Alice
participant Bob
participant John as John Second Line
+ link Alice: Dashboard @ https://dashboard.contoso.com/alice
+ link Alice: Wiki @ https://wiki.contoso.com/alice
+ link John: Dashboard @ https://dashboard.contoso.com/john
+ link John: Wiki @ https://wiki.contoso.com/john
autonumber 10 10
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
@@ -62,6 +66,26 @@
+ ---
+ title: With forced menus
+ config:
+ sequence:
+ forceMenus: true
+ ---
+ sequenceDiagram
+ participant Alice
+ participant John
+ link Alice: Dashboard @ https://dashboard.contoso.com/alice
+ link Alice: Wiki @ https://wiki.contoso.com/alice
+ link John: Dashboard @ https://dashboard.contoso.com/john
+ link John: Wiki @ https://wiki.contoso.com/john
+ Alice->>John: Hello John, how are you?
+ John-->>Alice: Great!
+ Alice-)John: See you later!
+
+
+
sequenceDiagram
accTitle: Sequence diagram title is here
accDescr: Hello friends
diff --git a/docs/community/security.md b/docs/community/security.md
index 07adbfbf8..e456adcd7 100644
--- a/docs/community/security.md
+++ b/docs/community/security.md
@@ -16,7 +16,7 @@ We aim to reply within three working days, probably much sooner.
You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to again if you do not receive prompt attention and regular updates.
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
## Best practices
diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index a9174d8aa..6ad02f6b6 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -60,7 +60,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) โ
- [Mermerd](https://github.com/KarnerTh/mermerd)
- [Slab](https://slab.com) โ
-- [Swimm](https://docs.swimm.io/Features/diagrams-and-charts#mermaid--swimm--up-to-date-diagrams-) โ
+- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) โ
- [NotesHub](https://noteshub.app) โ
- [Notion](https://notion.so) โ
- [Observable](https://observablehq.com/@observablehq/mermaid) โ
diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md
index 3dba1dafb..7643c8898 100644
--- a/docs/ecosystem/integrations-create.md
+++ b/docs/ecosystem/integrations-create.md
@@ -22,9 +22,9 @@ Currently pending [IANA](https://www.iana.org/) recognition.
## Showcase
-### Mermaid Slack workspace
+### Mermaid Discord workspace
-We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
### Add to Mermaid Ecosystem
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 79ef53b4b..1013975c4 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
[](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 23fa7c8e3..2f4a9aeb9 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1134,7 +1134,19 @@ flowchart TD
B-->E(A fa:fa-camera-retro perhaps?)
```
-Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
+
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
+
+Adding this snippet in the `` would add support for Font Awesome v6.5.1
+
+```html
+
+```
## Graph declarations with spaces between vertices and link and without semicolon
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 08d24c036..78ddaccce 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -114,10 +114,38 @@ gantt
Add another diagram to demo page :48h
```
+Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
+
+A colon, `:`, separates the task title from its metadata.
+Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
+After processing the tags, the remaining metadata items are interpreted as follows:
+
+1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+
+| Metadata syntax | Start date | End date | ID |
+| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |
+| `, , ` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, , ` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
+| `, , until ` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | `taskID` |
+| `, after , until ` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` |
+| `, ` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
+| `, ` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
+| `after , ` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
+| `after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
+| `, until ` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | n/a |
+| `after , until ` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a |
+| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
+| `` | End date of preceding task | Start date + `length` | n/a |
+| `until ` | End date of preceding task | Start date of previously specified task `otherTaskID` | n/a |
+
> **Note**
> Support for keyword `until` was added in (v\+). This can be used to define a task which is running until some other specific task or milestone starts.
-It is possible to set multiple dependencies separated by space:
+For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
```mermaid-example
gantt
diff --git a/package.json b/package.json
index a60f6f67f..441484218 100644
--- a/package.json
+++ b/package.json
@@ -61,11 +61,11 @@
]
},
"devDependencies": {
- "@applitools/eyes-cypress": "^3.33.1",
+ "@applitools/eyes-cypress": "^3.40.6",
"@commitlint/cli": "^17.6.1",
"@commitlint/config-conventional": "^17.6.1",
"@cspell/eslint-plugin": "^6.31.1",
- "@cypress/code-coverage": "^3.10.7",
+ "@cypress/code-coverage": "^3.12.18",
"@rollup/plugin-typescript": "^11.1.1",
"@types/cors": "^2.8.13",
"@types/eslint": "^8.37.0",
@@ -85,7 +85,7 @@
"ajv": "^8.12.0",
"concurrently": "^8.0.1",
"cors": "^2.8.5",
- "cypress": "^12.10.0",
+ "cypress": "^12.17.4",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.19.0",
"eslint": "^8.47.0",
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index a5bc22f6f..575f428dd 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -576,6 +576,7 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
showCommitLabel?: boolean;
showBranches?: boolean;
rotateCommitLabel?: boolean;
+ parallelCommits?: boolean;
/**
* Controls whether or arrow markers in html code are absolute paths or anchors.
* This matters if you are using base tag settings.
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
index f42cc3463..81081e1b6 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -254,6 +254,16 @@ export const adjustClustersAndEdges = (graph, depth) => {
}
});
+ for (let id of Object.keys(clusterDb)) {
+ const nonClusterChild = clusterDb[id].id;
+ const parent = graph.parent(nonClusterChild);
+
+ // Change replacement node of id to parent of current replacement node if valid
+ if (parent !== id && clusterDb[parent] && !clusterDb[parent].externalConnections) {
+ clusterDb[id].id = parent;
+ }
+ }
+
// For clusters with incoming and/or outgoing edges translate those edges to a real node
// in the cluster in order to fake the edge
graph.edges().forEach(function (e) {
@@ -307,9 +317,13 @@ export const adjustClustersAndEdges = (graph, depth) => {
w = getAnchorId(e.w);
graph.removeEdge(e.v, e.w, e.name);
if (v !== e.v) {
+ const parent = graph.parent(v);
+ clusterDb[parent].externalConnections = true;
edge.fromCluster = e.v;
}
if (w !== e.w) {
+ const parent = graph.parent(w);
+ clusterDb[parent].externalConnections = true;
edge.toCluster = e.w;
}
log.warn('Fix Replacing with XXX', v, w, e.name);
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index b4daab5dc..d6027fee9 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -27,11 +27,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
\%\%(?!\{)*[^\n]* /* skip comments */
[^\}]\%\%*[^\n]* /* skip comments */
-\%\%*[^\n]*[\n]* /* do nothing */
+\%\%*[^\n]*[\n]* /* do nothing */
[\n]+ return 'NL';
\s+ /* skip whitespace */
-\#[^\n]* /* skip comments */
\%%[^\n]* /* skip comments */
/*
@@ -86,10 +85,10 @@ weekday\s+friday return 'weekday_friday'
weekday\s+saturday return 'weekday_saturday'
weekday\s+sunday return 'weekday_sunday'
\d\d\d\d"-"\d\d"-"\d\d return 'date';
-"title"\s[^#\n;]+ return 'title';
+"title"\s[^\n]+ return 'title';
"accDescription"\s[^#\n;]+ return 'accDescription'
-"section"\s[^#:\n;]+ return 'section';
-[^#:\n;]+ return 'taskTxt';
+"section"\s[^\n]+ return 'section';
+[^:\n]+ return 'taskTxt';
":"[^#\n;]+ return 'taskData';
":" return ':';
<> return 'EOF';
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 8146affac..dc5ee4de9 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -28,8 +28,12 @@ describe('when parsing a gantt diagram it', function () {
});
it('should handle a title definition', function () {
const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';
+ const semi = 'gantt\ndateFormat yyyy-mm-dd\ntitle ;Gantt diagram titles support semicolons';
+ const hash = 'gantt\ndateFormat yyyy-mm-dd\ntitle #Gantt diagram titles support hashtags';
expect(parserFnConstructor(str)).not.toThrow();
+ expect(parserFnConstructor(semi)).not.toThrow();
+ expect(parserFnConstructor(hash)).not.toThrow();
});
it('should handle an excludes definition', function () {
const str =
@@ -53,7 +57,23 @@ describe('when parsing a gantt diagram it', function () {
'excludes weekdays 2019-02-01\n' +
'section Documentation';
+ const semi =
+ 'gantt\n' +
+ 'dateFormat yyyy-mm-dd\n' +
+ 'title Adding gantt diagram functionality to mermaid\n' +
+ 'excludes weekdays 2019-02-01\n' +
+ 'section ;Documentation';
+
+ const hash =
+ 'gantt\n' +
+ 'dateFormat yyyy-mm-dd\n' +
+ 'title Adding gantt diagram functionality to mermaid\n' +
+ 'excludes weekdays 2019-02-01\n' +
+ 'section #Documentation';
+
expect(parserFnConstructor(str)).not.toThrow();
+ expect(parserFnConstructor(semi)).not.toThrow();
+ expect(parserFnConstructor(hash)).not.toThrow();
});
it('should handle multiline section titles with different line breaks', function () {
const str =
@@ -73,7 +93,23 @@ describe('when parsing a gantt diagram it', function () {
'section Documentation\n' +
'Design jison grammar:des1, 2014-01-01, 2014-01-04';
+ const semi =
+ 'gantt\n' +
+ 'dateFormat YYYY-MM-DD\n' +
+ 'title Adding gantt diagram functionality to mermaid\n' +
+ 'section Documentation\n' +
+ ';Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
+ const hash =
+ 'gantt\n' +
+ 'dateFormat YYYY-MM-DD\n' +
+ 'title Adding gantt diagram functionality to mermaid\n' +
+ 'section Documentation\n' +
+ '#Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
expect(parserFnConstructor(str)).not.toThrow();
+ expect(parserFnConstructor(semi)).not.toThrow();
+ expect(parserFnConstructor(hash)).not.toThrow();
const tasks = parser.yy.getTasks();
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 66e2277de..84b8f41a1 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -64,6 +64,29 @@ const drawText = (txt) => {
return svgLabel;
};
+/**
+ * Searches for the closest parent from the parents list passed as argument.
+ * The parents list comes from an individual commit. The closest parent is actually
+ * the one farther down the graph, since that means it is closer to its child.
+ *
+ * @param {string[]} parents
+ * @returns {string | undefined}
+ */
+const findClosestParent = (parents) => {
+ let closestParent = '';
+ let maxPosition = 0;
+
+ parents.forEach((parent) => {
+ const parentPosition = dir === 'TB' ? commitPos[parent].y : commitPos[parent].x;
+ if (parentPosition >= maxPosition) {
+ closestParent = parent;
+ maxPosition = parentPosition;
+ }
+ });
+
+ return closestParent || undefined;
+};
+
/**
* Draws the commits with its symbol and labels. The function has two modes, one which only
* calculates the positions and one that does the actual drawing. This for a simple way getting the
@@ -87,11 +110,31 @@ const drawCommits = (svg, commits, modifyGraph) => {
const sortedKeys = keys.sort((a, b) => {
return commits[a].seq - commits[b].seq;
});
+
+ const isParallelCommits = gitGraphConfig.parallelCommits;
+ const layoutOffset = 10;
+ const commitStep = 40;
sortedKeys.forEach((key) => {
const commit = commits[key];
- const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
- const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+ if (isParallelCommits) {
+ if (commit.parents.length) {
+ const closestParent = findClosestParent(commit.parents);
+ pos =
+ dir === 'TB'
+ ? commitPos[closestParent].y + commitStep
+ : commitPos[closestParent].x + commitStep;
+ } else {
+ pos = 0;
+ if (dir === 'TB') {
+ pos = 30;
+ }
+ }
+ }
+
+ const posWithOffset = pos + layoutOffset;
+ const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
+ const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
// Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
if (modifyGraph) {
@@ -216,9 +259,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
}
if (dir === 'TB') {
- commitPos[commit.id] = { x: x, y: pos + 10 };
+ commitPos[commit.id] = { x: x, y: posWithOffset };
} else {
- commitPos[commit.id] = { x: pos + 10, y: y };
+ commitPos[commit.id] = { x: posWithOffset, y: y };
}
// The first iteration over the commits are for positioning purposes, this
@@ -247,7 +290,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
// Now we have the label, lets position the background
labelBkg
- .attr('x', pos + 10 - bbox.width / 2 - py)
+ .attr('x', posWithOffset - bbox.width / 2 - py)
.attr('y', y + 13.5)
.attr('width', bbox.width + 2 * py)
.attr('height', bbox.height + 2 * py);
@@ -258,7 +301,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
if (dir !== 'TB') {
- text.attr('x', pos + 10 - bbox.width / 2);
+ text.attr('x', posWithOffset - bbox.width / 2);
}
if (gitGraphConfig.rotateCommitLabel) {
if (dir === 'TB') {
@@ -284,7 +327,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('class', 'tag-label')
.text(commit.tag);
let tagBbox = tag.node().getBBox();
- tag.attr('x', pos + 10 - tagBbox.width / 2);
+ tag.attr('x', posWithOffset - tagBbox.width / 2);
const h2 = tagBbox.height / 2;
const ly = y - 19.2;
@@ -293,10 +336,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
`
${pos - tagBbox.width / 2 - px / 2},${ly + py}
${pos - tagBbox.width / 2 - px / 2},${ly - py}
- ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
- ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
- ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
- ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
+ ${posWithOffset - tagBbox.width / 2 - px},${ly - h2 - py}
+ ${posWithOffset + tagBbox.width / 2 + px},${ly - h2 - py}
+ ${posWithOffset + tagBbox.width / 2 + px},${ly + h2 + py}
+ ${posWithOffset - tagBbox.width / 2 - px},${ly + h2 + py}`
);
hole
@@ -313,10 +356,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
`
${x},${pos + py}
${x},${pos - py}
- ${x + 10},${pos - h2 - py}
- ${x + 10 + tagBbox.width + px},${pos - h2 - py}
- ${x + 10 + tagBbox.width + px},${pos + h2 + py}
- ${x + 10},${pos + h2 + py}`
+ ${x + layoutOffset},${pos - h2 - py}
+ ${x + layoutOffset + tagBbox.width + px},${pos - h2 - py}
+ ${x + layoutOffset + tagBbox.width + px},${pos + h2 + py}
+ ${x + layoutOffset},${pos + h2 + py}`
)
.attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
hole
@@ -330,7 +373,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
}
}
- pos += 50;
+ pos += commitStep + layoutOffset;
if (pos > maxPos) {
maxPos = pos;
}
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index f81147c10..ef8ed6f00 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -10,22 +10,6 @@ export const drawRect = function (elem, rectData) {
return svgDrawCommon.drawRect(elem, rectData);
};
-const addPopupInteraction = (id, actorCnt) => {
- addFunction(() => {
- const arr = document.querySelectorAll(id);
- // This will be the case when running in sandboxed mode
- if (arr.length === 0) {
- return;
- }
- arr[0].addEventListener('mouseover', function () {
- popupMenuUpFunc('actor' + actorCnt + '_popup');
- });
- arr[0].addEventListener('mouseout', function () {
- popupMenuDownFunc('actor' + actorCnt + '_popup');
- });
- });
-};
-
export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMenus) {
if (actor.links === undefined || actor.links === null || Object.keys(actor.links).length === 0) {
return { height: 0, width: 0 };
@@ -44,7 +28,6 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
g.attr('id', 'actor' + actorCnt + '_popup');
g.attr('class', 'actorPopupMenu');
g.attr('display', displayValue);
- addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
var actorClass = '';
if (rectData.class !== undefined) {
actorClass = ' ' + rectData.class;
@@ -90,36 +73,14 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
return { height: rectData.height + linkY, width: menuWidth };
};
-export const popupMenu = function (popid) {
+const popupMenuToggle = function (popid) {
return (
"var pu = document.getElementById('" +
popid +
- "'); if (pu != null) { pu.style.display = 'block'; }"
+ "'); if (pu != null) { pu.style.display = pu.style.display == 'block' ? 'none' : 'block'; }"
);
};
-export const popdownMenu = function (popid) {
- return (
- "var pu = document.getElementById('" +
- popid +
- "'); if (pu != null) { pu.style.display = 'none'; }"
- );
-};
-
-const popupMenuUpFunc = function (popupId) {
- var pu = document.getElementById(popupId);
- if (pu != null) {
- pu.style.display = 'block';
- }
-};
-
-const popupMenuDownFunc = function (popupId) {
- var pu = document.getElementById(popupId);
- if (pu != null) {
- pu.style.display = 'none';
- }
-};
-
export const drawText = function (elem, textData) {
let prevTextHeight = 0;
let textHeight = 0;
@@ -329,6 +290,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
if (!isFooter) {
actorCnt++;
+ if (Object.keys(actor.links || {}).length && !conf.forceMenus) {
+ g.attr('onclick', popupMenuToggle(`actor${actorCnt}_popup`)).attr('cursor', 'pointer');
+ }
g.append('line')
.attr('id', 'actor' + actorCnt)
.attr('x1', center)
@@ -345,7 +309,6 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
if (actor.links != null) {
g.attr('id', 'root-' + actorCnt);
- addPopupInteraction('#root-' + actorCnt, actorCnt);
}
}
@@ -1053,8 +1016,6 @@ export default {
insertClockIcon,
getTextObj,
getNoteRect,
- popupMenu,
- popdownMenu,
fixLifeLineHeights,
sanitizeUrl,
};
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index b6998f249..c493ee30a 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,11 +16,7 @@ import { teamMembers } from '../contributors';
](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
<img src=){kind=link}
diff --git a/applitools.config.js b/applitools.config.js
deleted file mode 100644
index 4cf02220a..000000000
--- a/applitools.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
- testConcurrency: 1,
- browser: [
- // Add browsers with different viewports
- // { width: 800, height: 600, name: 'chrome' },
- // { width: 700, height: 500, name: 'firefox' },
- // { width: 1600, height: 1200, name: 'ie11' },
- // { width: 1024, height: 768, name: 'edgechromium' },
- // { width: 800, height: 600, name: 'safari' },
- // // Add mobile emulation devices in Portrait mode
- // { deviceName: 'iPhone X', screenOrientation: 'portrait' },
- // { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
- ],
- // set batch name to the configuration
- // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
diff --git a/cypress.config.cjs b/cypress.config.cjs
deleted file mode 100644
index 33633920a..000000000
--- a/cypress.config.cjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
- projectId: 'n2sma2',
- viewportWidth: 1440,
- viewportHeight: 1024,
- e2e: {
- specPattern: 'cypress/integration/**/*.{js,ts}',
- setupNodeEvents(on, config) {
- coverage(on, config);
- on('before:browser:launch', (browser = {}, launchOptions) => {
- if (browser.name === 'chrome' && browser.isHeadless) {
- launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
- }
- return launchOptions;
- });
- addMatchImageSnapshotPlugin(on, config);
- // copy any needed variables from process.env to config.env
- config.env.useAppli = process.env.USE_APPLI ? true : false;
-
- // do not forget to return the changed config object!
- return config;
- },
- },
- video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 000000000..4182d92a8
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+ defineConfig({
+ projectId: 'n2sma2',
+ viewportWidth: 1440,
+ viewportHeight: 1024,
+ e2e: {
+ specPattern: 'cypress/integration/**/*.{js,ts}',
+ setupNodeEvents(on, config) {
+ coverage(on, config);
+ on('before:browser:launch', (browser, launchOptions) => {
+ if (browser.name === 'chrome' && browser.isHeadless) {
+ launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+ }
+ return launchOptions;
+ });
+ addMatchImageSnapshotPlugin(on, config);
+ // copy any needed variables from process.env to config.env
+ config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+ // do not forget to return the changed config object!
+ return config;
+ },
+ },
+ video: false,
+ })
+);
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index e23820ffa..857d395be 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -741,6 +741,25 @@ A ~~~ B
);
});
+ it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
+ imgSnapshotTest(
+ `flowchart
+
+ subgraph Main
+ subgraph Child1
+ Node1
+ Node2
+ end
+ subgraph Child2
+ Node3
+ Node4
+ end
+ end
+ Main --> Out1
+ Child2 --> Out2`
+ );
+ });
+
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index e045691ef..73ebc325f 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -585,4 +585,106 @@ describe('Gantt diagram', () => {
{}
);
});
+
+ it("should render when there's a semicolon in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title ;Gantt With a Semicolon in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section ;Section With a Semicolon
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ ;A task with a semiclon :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title #Gantt With a Hashtag in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section #Section With a Hashtag
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ #A task with a hashtag :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index d3e4dd9dd..19ddde31d 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -826,4 +826,121 @@ gitGraph TB:
cherry-pick id: "M" parent:"B"`
);
});
+ it('41: should render default GitGraph with parallelCommits set to false', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: false } }
+ );
+ });
+ it('42: should render GitGraph with parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
+ imgSnapshotTest(
+ `gitGraph TB:
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ branch develop
+ commit id:"3-abcdefg"
+ commit id:"4-abcdefg"
+ checkout main
+ branch feature
+ commit id:"5-abcdefg"
+ commit id:"6-abcdefg"
+ checkout main
+ commit id:"7-abcdefg"
+ commit id:"8-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: false } }
+ );
+ });
+ it('45: should render GitGraph with unconnected branches and parallel commits', () => {
+ imgSnapshotTest(
+ `gitGraph
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
+ it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
+ imgSnapshotTest(
+ `gitGraph TB:
+ branch dev
+ branch v2
+ branch feat
+ commit id:"1-abcdefg"
+ commit id:"2-abcdefg"
+ checkout main
+ commit id:"3-abcdefg"
+ checkout dev
+ commit id:"4-abcdefg"
+ checkout v2
+ commit id:"5-abcdefg"
+ checkout main
+ commit id:"6-abcdefg"
+ `,
+ { gitGraph: { parallelCommits: true } }
+ );
+ });
});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c..10432f057 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -792,6 +792,34 @@ context('Sequence diagram', () => {
});
});
context('links', () => {
+ it('should support actor links', () => {
+ renderGraph(
+ `
+ sequenceDiagram
+ link Alice: Dashboard @ https://dashboard.contoso.com/alice
+ link Alice: Wiki @ https://wiki.contoso.com/alice
+ link John: Dashboard @ https://dashboard.contoso.com/john
+ link John: Wiki @ https://wiki.contoso.com/john
+ Alice->>John: Hello John