From 8bff32adabfdc97022eb22a3bc4b4924d8e503fb Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 8 Dec 2023 13:08:13 -0300
Subject: [PATCH 01/29] Modify algorithm to re-check for external connections
after defining anchor nodes
---
.../mermaid/src/dagre-wrapper/mermaid-graphlib.js | 14 ++++++++++++++
1 file changed, 14 insertions(+)
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);
From c8f0b390751838af8290419c38da2aecb336ba07 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 8 Dec 2023 13:39:53 -0300
Subject: [PATCH 02/29] Add e2e test for edge case
---
.../rendering/flowchart-v2.spec.js | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
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', () => {
From 00ac6ccb373f625669c652b8d74db8e3592acac5 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 22 Dec 2023 20:42:24 -0300
Subject: [PATCH 03/29] Add parallelCommits config option for gitGraphs
---
packages/mermaid/src/schemas/config.schema.yaml | 3 +++
1 file changed, 3 insertions(+)
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 2791c32d4..51e419cd6 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -780,6 +780,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
rotateCommitLabel:
type: boolean
default: true
+ parallelCommits:
+ type: boolean
+ default: false
# YAML anchor reference, don't use $ref since ajv doesn't load defaults
arrowMarkerAbsolute: *arrowMarkerAbsolute
From 222c46e7f002bb1a5b3c7b4ca31d24e51393c4d6 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 22 Dec 2023 21:08:15 -0300
Subject: [PATCH 04/29] Implement support for parallel commits config
---
.../src/diagrams/git/gitGraphRenderer.js | 32 +++++++++++++++++++
1 file changed, 32 insertions(+)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 66e2277de..ce2b6c5f6 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}
+ */
+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;
+};
+
/**
* 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,9 +110,18 @@ const drawCommits = (svg, commits, modifyGraph) => {
const sortedKeys = keys.sort((a, b) => {
return commits[a].seq - commits[b].seq;
});
+
+ const isParallelCommits = getConfig().gitGraph.parallelCommits;
sortedKeys.forEach((key) => {
const commit = commits[key];
+ if (isParallelCommits) {
+ if (commit.parents.length) {
+ const closestParent = findClosestParent(commit.parents, commits);
+ pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
+ }
+ }
+
const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
From eb3e924c440cde93255b42f65f01ec09d7c6c582 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 22 Dec 2023 21:11:50 -0300
Subject: [PATCH 05/29] Add tests for gitGraph with parallel commits
---
.../integration/rendering/gitGraph.spec.js | 57 +++++++++++++++++++
1 file changed, 57 insertions(+)
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 2aab34c34..339a5f028 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -811,4 +811,61 @@ gitGraph TB:
{}
);
});
+ it('40: 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('41: 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('42: 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 } }
+ );
+ });
});
From 41f3f9fb322eca07cf947b2b542f14a6e3ccd487 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 22 Dec 2023 21:48:19 -0300
Subject: [PATCH 06/29] Fix linter issues
---
packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index ce2b6c5f6..1aec8ebd8 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -115,11 +115,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
sortedKeys.forEach((key) => {
const commit = commits[key];
- if (isParallelCommits) {
- if (commit.parents.length) {
- const closestParent = findClosestParent(commit.parents, commits);
- pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
- }
+ if (isParallelCommits && commit.parents.length) {
+ const closestParent = findClosestParent(commit.parents, commits);
+ pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
}
const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
From c50a82a60e11550166a21850b1c53580210d1b15 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Fri, 22 Dec 2023 21:52:19 -0300
Subject: [PATCH 07/29] Build config types
---
packages/mermaid/src/config.type.ts | 1 +
1 file changed, 1 insertion(+)
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.
From 6f09bc7dc7a2082cba861ccfec3f635e3e4d09ba Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Tue, 16 Jan 2024 19:34:16 -0300
Subject: [PATCH 08/29] Use already defined const instead of method call
---
packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 1aec8ebd8..47b8afaad 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -111,7 +111,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
return commits[a].seq - commits[b].seq;
});
- const isParallelCommits = getConfig().gitGraph.parallelCommits;
+ const isParallelCommits = gitGraphConfig.parallelCommits;
sortedKeys.forEach((key) => {
const commit = commits[key];
From bf1edd99f9c2cb68e7ba2e424b66045f2932a988 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Tue, 16 Jan 2024 19:37:52 -0300
Subject: [PATCH 09/29] Remove unnecessary argument on findClosestParent call
---
packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 47b8afaad..d14404db4 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -116,7 +116,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
const commit = commits[key];
if (isParallelCommits && commit.parents.length) {
- const closestParent = findClosestParent(commit.parents, commits);
+ const closestParent = findClosestParent(commit.parents);
pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
}
From 02246f64d2ae39150bba9476ffb3cf2eaf7414cf Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Tue, 16 Jan 2024 20:01:03 -0300
Subject: [PATCH 10/29] Include undefined on findClosestParent return types and
update the function
---
packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index d14404db4..f9df1db34 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -70,7 +70,7 @@ const drawText = (txt) => {
* the one farther down the graph, since that means it is closer to its child.
*
* @param {string[]} parents
- * @returns {string}
+ * @returns {string | undefined}
*/
const findClosestParent = (parents) => {
let closestParent = '';
@@ -84,7 +84,7 @@ const findClosestParent = (parents) => {
}
});
- return closestParent;
+ return closestParent || undefined;
};
/**
From c77a6e156c6fe30c2851019dba74bbad76bd5ef7 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Tue, 16 Jan 2024 20:54:26 -0300
Subject: [PATCH 11/29] Include logic for gitgraph with unconnected branches
---
.../mermaid/src/diagrams/git/gitGraphRenderer.js | 13 ++++++++++---
1 file changed, 10 insertions(+), 3 deletions(-)
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index f9df1db34..4790949b5 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -115,9 +115,16 @@ const drawCommits = (svg, commits, modifyGraph) => {
sortedKeys.forEach((key) => {
const commit = commits[key];
- if (isParallelCommits && commit.parents.length) {
- const closestParent = findClosestParent(commit.parents);
- pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
+ if (isParallelCommits) {
+ if (!commit.parents.length) {
+ pos = 0;
+ if (dir === 'TB') {
+ pos = 30;
+ }
+ } else {
+ const closestParent = findClosestParent(commit.parents);
+ pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
+ }
}
const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
From 9213afbacd0932cc54e229e845909e1b034398b9 Mon Sep 17 00:00:00 2001
From: Matheus B
Date: Tue, 16 Jan 2024 20:55:42 -0300
Subject: [PATCH 12/29] Add tests for gitgraphs with unconnected branches
---
.../integration/rendering/gitGraph.spec.js | 60 +++++++++++++++++++
1 file changed, 60 insertions(+)
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index a2836c51a..19ddde31d 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -883,4 +883,64 @@ gitGraph TB:
{ 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 } }
+ );
+ });
});
From 04ebf0ddc9b607afa97369b2838d538797f7d2eb Mon Sep 17 00:00:00 2001
From: arukiidou
Date: Sun, 14 Jan 2024 13:14:37 +0900
Subject: [PATCH 13/29] Update flowchart.md #5195
---
docs/syntax/flowchart.md | 12 ++++++++++++
packages/mermaid/src/docs/syntax/flowchart.md | 12 ++++++++++++
2 files changed, 24 insertions(+)
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 23fa7c8e3..4fa0f6c4f 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1136,6 +1136,18 @@ flowchart TD
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).
+You can use this method to add mermaid including the fontawesome icon to a web page:
+
+```html
+
+
+```
+
## Graph declarations with spaces between vertices and link and without semicolon
- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index e4be8d81a..6c6b0760b 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -778,6 +778,18 @@ flowchart TD
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).
+You can use this method to add mermaid including the fontawesome icon to a web page:
+
+```html
+
+
+```
+
## Graph declarations with spaces between vertices and link and without semicolon
- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
From be8faae68c043481fd834b59d1c359cdf0965e41 Mon Sep 17 00:00:00 2001
From: arukiidou
Date: Fri, 19 Jan 2024 08:49:12 +0900
Subject: [PATCH 14/29] Update packages/mermaid/src/docs/syntax/flowchart.md
Co-authored-by: Sidharth Vinod
---
packages/mermaid/src/docs/syntax/flowchart.md | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 6c6b0760b..00242b407 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -776,18 +776,17 @@ 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.
-You can use this method to add mermaid including the fontawesome icon to a web page:
+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
From 7918f96f9400232db1f8c02d47b33f2f5abb572e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Fri, 19 Jan 2024 09:19:36 +0530
Subject: [PATCH 15/29] Update docs
---
docs/syntax/flowchart.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 4fa0f6c4f..2f4a9aeb9 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1134,18 +1134,18 @@ 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.
-You can use this method to add mermaid including the fontawesome icon to a web page:
+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
From e0ee9b1bc0470e08a32d0db03ece4dba839b8c07 Mon Sep 17 00:00:00 2001
From: "Soren L. Hansen"
Date: Sat, 13 Jan 2024 14:17:12 +0100
Subject: [PATCH 16/29] Add more detailed docs for Gantt tasks
---
docs/syntax/gantt.html | 179939 +++++++++++++++++++
docs/syntax/gantt.md | 25 +-
packages/mermaid/src/docs/syntax/gantt.md | 25 +-
3 files changed, 179987 insertions(+), 2 deletions(-)
create mode 100644 docs/syntax/gantt.html
diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
new file mode 100644
index 000000000..4a3156ac7
--- /dev/null
+++ b/docs/syntax/gantt.html
@@ -0,0 +1,179939 @@
+
+
+
+
+ Gantt diagrams
+
+
+
+
+
+
+
+
+
+
+
+
+
Gantt diagrams
+
+
+ A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
+ independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
+ amount of time it would take for any one project to finish. Gantt charts illustrate
+ number of days between the start and finish dates of the terminal elements and summary
+ elements of a project.
+
+
+
A note to users
+
+ Gantt Charts will record each scheduled task as one continuous bar that extends from the
+ left to the right. The x axis represents time and the y records the different tasks and
+ the order in which they are to be completed.
+
+
+ It is important to remember that when a date, day, or collection of dates specific to a
+ task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
+ number of days, towards the right, not by creating a gap inside the task. As shown here
+
+
+
+ However, if the excluded dates are between two tasks that are set to start consecutively,
+ the excluded dates will be skipped graphically and left blank, and the following task will
+ begin after the end of the excluded dates. As shown here
+
+
+
+ A Gantt chart is useful for tracking the amount of time it would take before a project is
+ finished, but it can also be used to graphically represent "non-working days", with a few
+ tweaks.
+
+
+ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
+ docs.
+
+
gantt
+ title A Gantt Diagram
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1, 20d
+ section Another
+ Task in Another :2014-01-12, 12d
+ another task :24d
+
Syntax
+
gantt
+ dateFormat YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes weekends
+ %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+ section A section
+ Completed task :done, des1, 2014-01-06,2014-01-08
+ Active task :active, des2, 2014-01-09, 3d
+ Future task : des3, after des2, 5d
+ Future task2 : des4, after des3, 5d
+
+ section Critical tasks
+ Completed task in the critical line :crit, done, 2014-01-06,24h
+ Implement parser and jison :crit, done, after des1, 2d
+ Create tests for parser :crit, active, 3d
+ Future task in critical line :crit, 5d
+ Create tests for renderer :2d
+ Add to mermaid :1d
+ Functionality added :milestone, 2014-01-25, 0d
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
+
+ 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:
+
+
+
+ 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.
+
+
+ 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 <otherTaskID> [[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.
+
+
+ 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 <taskID> syntax.
+
+
+
+
+
+
Metadata syntax
+
Start date
+
End date
+
ID
+
+
+
+
+
<taskID>, <startDate>, <endDate>
+
startdate as interpreted using dateformat
+
endDate as interpreted using dateformat
+
taskID
+
+
+
<taskID>, <startDate>, <length>
+
startdate as interpreted using dateformat
+
Start date + length
+
taskID
+
+
+
<taskID>, after <otherTaskId>, <endDate>
+
End date of previously specified task otherTaskID
+
endDate as interpreted using dateformat
+
taskID
+
+
+
<taskID>, after <otherTaskId>, <length>
+
End date of previously specified task otherTaskID
+
Start date + length
+
taskID
+
+
+
<startDate>, <endDate>
+
startdate as interpreted using dateformat
+
enddate as interpreted using dateformat
+
n/a
+
+
+
<startDate>, <length>
+
startdate as interpreted using dateformat
+
Start date + length
+
n/a
+
+
+
after <otherTaskID>, <endDate>
+
End date of previously specified task otherTaskID
+
enddate as interpreted using dateformat
+
n/a
+
+
+
after <otherTaskID>, <length>
+
End date of previously specified task otherTaskID
+
Start date + length
+
n/a
+
+
+
<endDate>
+
End date of preceding task
+
enddate as interpreted using dateformat
+
n/a
+
+
+
<length>
+
End date of preceding task
+
Start date + length
+
n/a
+
+
+
+
+ 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:
+
+
gantt
+ apple :a, 2017-07-20, 1w
+ banana :crit, b, 2017-07-23, 1d
+ cherry :active, c, after b a, 1d
+
Title
+
+ The title is an optional string to be displayed at the top of the
+ Gantt chart to describe the chart as a whole.
+
+
Section statements
+
+ You can divide the chart into various sections, for example to separate different parts of
+ a project like development and documentation.
+
+
+ To do so, start a line with the section keyword and give it a name. (Note
+ that unlike with the title for the entire chart, this name is
+ required.
+
+
Milestones
+
+ You can add milestones to the diagrams. Milestones differ from tasks as they represent a
+ single instant in time and are identified by the keyword milestone. Below is
+ an example on how to use milestones. As you may notice, the exact location of the
+ milestone is determined by the initial date for the milestone and the "duration" of the
+ task this way: initial date+duration/2.
+
+ dateFormat defines the format of the date input of your
+ gantt elements. How these dates are represented in the rendered chart
+ output are defined by axisFormat.
+
+
Input date format
+
+ The default input date format is YYYY-MM-DD. You can define your custom
+ dateFormat.
+
+
dateFormat YYYY-MM-DD
+
+
The following formatting options are supported:
+
+
+
+
Input
+
Example
+
Description
+
+
+
+
+
YYYY
+
2014
+
4 digit year
+
+
+
YY
+
14
+
2 digit year
+
+
+
Q
+
1..4
+
Quarter of year. Sets month to first month in quarter.
+ Week-based tickIntervals start the week on sunday by default. If you wish to
+ specify another weekday on which the tickInterval should start, use the
+ weekday option:
+
+
gantt
+ tickInterval 1week
+ weekday monday
+
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
+
+
Output in compact mode
+
+ The compact mode allows you to display multiple tasks in the same row. Compact mode can be
+ enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
+ settings.
+
+
---
+displayMode: compact
+---
+gantt
+ title A Gantt Diagram
+ dateFormat YYYY-MM-DD
+
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :a2, 2014-01-20, 25d
+ Another one :a3, 2014-02-10, 20d
+
Comments
+
+ Comments can be entered within a gantt chart, which will be ignored by the parser.
+ Comments need to be on their own line and must be prefaced with %% (double
+ percent signs). Any text after the start of the comment to the next newline will be
+ treated as a comment, including any diagram syntax.
+
+
gantt
+ title A Gantt Diagram
+ %% This is a comment
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1, 20d
+ section Another
+ Task in Another :2014-01-12, 12d
+ another task :24d
+
Styling
+
+ Styling of the Gantt diagram is done by defining a number of CSS classes. During
+ rendering, these classes are extracted from the file located at
+ src/diagrams/gantt/styles.js
+
+
Classes used
+
+
+
+
Class
+
Description
+
+
+
+
+
grid.tick
+
Styling for the Grid Lines
+
+
+
grid.path
+
Styling for the Grid's borders
+
+
+
.taskText
+
Task Text Styling
+
+
+
.taskTextOutsideRight
+
Styling for Task Text that exceeds the activity bar towards the right.
+
+
+
.taskTextOutsideLeft
+
Styling for Task Text that exceeds the activity bar, towards the left.
Turns on/off the rendering of actors below the diagram as well as above it
+
false
+
+
+
bottomMarginAdj
+
+ Adjusts how far down the graph ended. Wide borders styles with css could generate
+ unwanted clipping which is why this config param exists.
+
+
1
+
+
+
+
Interaction
+
+ It is possible to bind a click event to a task. The click can lead to either a javascript
+ callback or to a link which will be opened in the current browser tab.
+ Note: This functionality is disabled when using
+ securityLevel='strict' and enabled when using
+ securityLevel='loose'.
+
+ callback is the name of a javascript function defined on the page displaying the graph,
+ the function will be called with the taskId as the parameter if no other arguments are
+ specified.
+
+
+
Beginner's tip—a full example using interactive links in an html context:
+
+
+
+
+
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 33c2740e5..071cb0ec0 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -114,7 +114,30 @@ gantt
Add another diagram to demo page :48h
```
-It is possible to set multiple dependencies separated by space:
+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` |
+| `, ` | `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 |
+| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
+| `` | End date of preceding task | Start date + `length` | n/a |
+
+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/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index a0cebc560..56fdc75a7 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -63,7 +63,30 @@ gantt
Add another diagram to demo page :48h
```
-It is possible to set multiple dependencies separated by space:
+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` |
+| `, ` | `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 |
+| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
+| `` | End date of preceding task | Start date + `length` | n/a |
+
+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
From bf55d940b68b8aacbcb352be1a7834d0c731b751 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Thu, 18 Jan 2024 22:34:20 +0530
Subject: [PATCH 17/29] Delete docs/syntax/gantt.html
---
docs/syntax/gantt.html | 179939 --------------------------------------
1 file changed, 179939 deletions(-)
delete mode 100644 docs/syntax/gantt.html
diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
deleted file mode 100644
index 4a3156ac7..000000000
--- a/docs/syntax/gantt.html
+++ /dev/null
@@ -1,179939 +0,0 @@
-
-
-
-
- Gantt diagrams
-
-
-
-
-
-
-
-
-
-
-
-
-
Gantt diagrams
-
-
- A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
- independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
- amount of time it would take for any one project to finish. Gantt charts illustrate
- number of days between the start and finish dates of the terminal elements and summary
- elements of a project.
-
-
-
A note to users
-
- Gantt Charts will record each scheduled task as one continuous bar that extends from the
- left to the right. The x axis represents time and the y records the different tasks and
- the order in which they are to be completed.
-
-
- It is important to remember that when a date, day, or collection of dates specific to a
- task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
- number of days, towards the right, not by creating a gap inside the task. As shown here
-
-
-
- However, if the excluded dates are between two tasks that are set to start consecutively,
- the excluded dates will be skipped graphically and left blank, and the following task will
- begin after the end of the excluded dates. As shown here
-
-
-
- A Gantt chart is useful for tracking the amount of time it would take before a project is
- finished, but it can also be used to graphically represent "non-working days", with a few
- tweaks.
-
-
- Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
- docs.
-
-
gantt
- title A Gantt Diagram
- dateFormat YYYY-MM-DD
- section Section
- A task :a1, 2014-01-01, 30d
- Another task :after a1, 20d
- section Another
- Task in Another :2014-01-12, 12d
- another task :24d
-
Syntax
-
gantt
- dateFormat YYYY-MM-DD
- title Adding GANTT diagram functionality to mermaid
- excludes weekends
- %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
- section A section
- Completed task :done, des1, 2014-01-06,2014-01-08
- Active task :active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
-
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
- Functionality added :milestone, 2014-01-25, 0d
-
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
-
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page :20h
- Add another diagram to demo page :48h
-
- 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:
-
-
-
- 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.
-
-
- 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 <otherTaskID> [[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.
-
-
- 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 <taskID> syntax.
-
-
-
-
-
-
Metadata syntax
-
Start date
-
End date
-
ID
-
-
-
-
-
<taskID>, <startDate>, <endDate>
-
startdate as interpreted using dateformat
-
endDate as interpreted using dateformat
-
taskID
-
-
-
<taskID>, <startDate>, <length>
-
startdate as interpreted using dateformat
-
Start date + length
-
taskID
-
-
-
<taskID>, after <otherTaskId>, <endDate>
-
End date of previously specified task otherTaskID
-
endDate as interpreted using dateformat
-
taskID
-
-
-
<taskID>, after <otherTaskId>, <length>
-
End date of previously specified task otherTaskID
-
Start date + length
-
taskID
-
-
-
<startDate>, <endDate>
-
startdate as interpreted using dateformat
-
enddate as interpreted using dateformat
-
n/a
-
-
-
<startDate>, <length>
-
startdate as interpreted using dateformat
-
Start date + length
-
n/a
-
-
-
after <otherTaskID>, <endDate>
-
End date of previously specified task otherTaskID
-
enddate as interpreted using dateformat
-
n/a
-
-
-
after <otherTaskID>, <length>
-
End date of previously specified task otherTaskID
-
Start date + length
-
n/a
-
-
-
<endDate>
-
End date of preceding task
-
enddate as interpreted using dateformat
-
n/a
-
-
-
<length>
-
End date of preceding task
-
Start date + length
-
n/a
-
-
-
-
- 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:
-
-
gantt
- apple :a, 2017-07-20, 1w
- banana :crit, b, 2017-07-23, 1d
- cherry :active, c, after b a, 1d
-
Title
-
- The title is an optional string to be displayed at the top of the
- Gantt chart to describe the chart as a whole.
-
-
Section statements
-
- You can divide the chart into various sections, for example to separate different parts of
- a project like development and documentation.
-
-
- To do so, start a line with the section keyword and give it a name. (Note
- that unlike with the title for the entire chart, this name is
- required.
-
-
Milestones
-
- You can add milestones to the diagrams. Milestones differ from tasks as they represent a
- single instant in time and are identified by the keyword milestone. Below is
- an example on how to use milestones. As you may notice, the exact location of the
- milestone is determined by the initial date for the milestone and the "duration" of the
- task this way: initial date+duration/2.
-
- dateFormat defines the format of the date input of your
- gantt elements. How these dates are represented in the rendered chart
- output are defined by axisFormat.
-
-
Input date format
-
- The default input date format is YYYY-MM-DD. You can define your custom
- dateFormat.
-
-
dateFormat YYYY-MM-DD
-
-
The following formatting options are supported:
-
-
-
-
Input
-
Example
-
Description
-
-
-
-
-
YYYY
-
2014
-
4 digit year
-
-
-
YY
-
14
-
2 digit year
-
-
-
Q
-
1..4
-
Quarter of year. Sets month to first month in quarter.
- Week-based tickIntervals start the week on sunday by default. If you wish to
- specify another weekday on which the tickInterval should start, use the
- weekday option:
-
-
gantt
- tickInterval 1week
- weekday monday
-
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
-
-
Output in compact mode
-
- The compact mode allows you to display multiple tasks in the same row. Compact mode can be
- enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
- settings.
-
-
---
-displayMode: compact
----
-gantt
- title A Gantt Diagram
- dateFormat YYYY-MM-DD
-
- section Section
- A task :a1, 2014-01-01, 30d
- Another task :a2, 2014-01-20, 25d
- Another one :a3, 2014-02-10, 20d
-
Comments
-
- Comments can be entered within a gantt chart, which will be ignored by the parser.
- Comments need to be on their own line and must be prefaced with %% (double
- percent signs). Any text after the start of the comment to the next newline will be
- treated as a comment, including any diagram syntax.
-
-
gantt
- title A Gantt Diagram
- %% This is a comment
- dateFormat YYYY-MM-DD
- section Section
- A task :a1, 2014-01-01, 30d
- Another task :after a1, 20d
- section Another
- Task in Another :2014-01-12, 12d
- another task :24d
-
Styling
-
- Styling of the Gantt diagram is done by defining a number of CSS classes. During
- rendering, these classes are extracted from the file located at
- src/diagrams/gantt/styles.js
-
-
Classes used
-
-
-
-
Class
-
Description
-
-
-
-
-
grid.tick
-
Styling for the Grid Lines
-
-
-
grid.path
-
Styling for the Grid's borders
-
-
-
.taskText
-
Task Text Styling
-
-
-
.taskTextOutsideRight
-
Styling for Task Text that exceeds the activity bar towards the right.
-
-
-
.taskTextOutsideLeft
-
Styling for Task Text that exceeds the activity bar, towards the left.
Turns on/off the rendering of actors below the diagram as well as above it
-
false
-
-
-
bottomMarginAdj
-
- Adjusts how far down the graph ended. Wide borders styles with css could generate
- unwanted clipping which is why this config param exists.
-
-
1
-
-
-
-
Interaction
-
- It is possible to bind a click event to a task. The click can lead to either a javascript
- callback or to a link which will be opened in the current browser tab.
- Note: This functionality is disabled when using
- securityLevel='strict' and enabled when using
- securityLevel='loose'.
-
- callback is the name of a javascript function defined on the page displaying the graph,
- the function will be called with the taskId as the parameter if no other arguments are
- specified.
-
-
-
Beginner's tip—a full example using interactive links in an html context:
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/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-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 5a77fa587..d038cde53 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/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index b6998f249..9bc47ba0c 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -17,7 +17,7 @@ import { teamMembers } from '../contributors';
Join the community
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index f5647e3c3..7ce9124a8 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -52,8 +52,8 @@ export default defineConfig({
socialLinks: [
{ icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
{
- icon: 'slack',
- link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
+ icon: 'discord',
+ link: 'https://discord.gg/wwtabKgp8y',
},
{
icon: {
diff --git a/packages/mermaid/src/docs/community/security.md b/packages/mermaid/src/docs/community/security.md
index e7a0db6ed..a84a106ab 100644
--- a/packages/mermaid/src/docs/community/security.md
+++ b/packages/mermaid/src/docs/community/security.md
@@ -10,7 +10,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/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md
index 421240729..c47ba30da 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-create.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md
@@ -20,9 +20,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/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index 535ee3a3d..bf5866755 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -16,7 +16,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_)
From 427bcaa3f6d517d476cc1a22e3de950a25e3d1a2 Mon Sep 17 00:00:00 2001
From: Oleg A
Date: Tue, 23 Jan 2024 12:20:56 +0300
Subject: [PATCH 23/29] docs: fix lint
---
.../mermaid/src/docs/.vitepress/components/HomePage.vue | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 9bc47ba0c..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';