---
-config:
- look: handDrawn
- layout: elk
- elk:
+ title: hello2
+ config:
+ look: handDrawn
+ layout: elk
+ elk:
nodePlacementStrategy: BRANDES_KOEPF
---
-flowchart TB
- %% A --> C
- B -- sdf sdf --> C{"Evaluate"}
- C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
- C --> F
+flowchart LR
+ A[Start] --Some text--> B(Continue)
+ B --> C{Evaluate}
+ C -- One --> D[Option 1]
+ C -- Two --> E[Option 2]
+ C -- Three --> F[fa:fa-car Option 3]
+
-
+
## About
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 65fa9246e..4c7c982c3 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,30 @@
# Blog
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
7 May 2024 · 5 mins
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 31bac5e29..cdaf0c2ac 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
-#### Weekend (v\
+)
+#### Weekend (v\11.0.0+)
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 9403f2a33..340a31695 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -918,7 +918,7 @@ Usage example:
commit
```
-### Bottom to Top (`BT:`) (v\+)
+### Bottom to Top (`BT:`) (v11.0.0+)
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md
index 3fe7b119e..5eab81910 100644
--- a/docs/syntax/packet.md
+++ b/docs/syntax/packet.md
@@ -4,7 +4,7 @@
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
-# Packet Diagram (v\+)
+# Packet Diagram (v11.0.0+)
## Introduction
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 0f0d63213..435ac7583 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.
There are ten types of arrows currently supported:
-| Type | Description |
-| -------- | ------------------------------------------------------------------------ |
-| `->` | Solid line without arrow |
-| `-->` | Dotted line without arrow |
-| `->>` | Solid line with arrowhead |
-| `-->>` | Dotted line with arrowhead |
-| `<<->>` | Solid line with bidirectional arrowheads (v\+) |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v\+) |
-| `-x` | Solid line with a cross at the end |
-| `--x` | Dotted line with a cross at the end. |
-| `-)` | Solid line with an open arrow at the end (async) |
-| `--)` | Dotted line with a open arrow at the end (async) |
+| Type | Description |
+| -------- | ---------------------------------------------------- |
+| `->` | Solid line without arrow |
+| `-->` | Dotted line without arrow |
+| `->>` | Solid line with arrowhead |
+| `-->>` | Dotted line with arrowhead |
+| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
+| `-x` | Solid line with a cross at the end |
+| `--x` | Dotted line with a cross at the end. |
+| `-)` | Solid line with an open arrow at the end (async) |
+| `--)` | Dotted line with a open arrow at the end (async) |
## Activations
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 0fac3d867..117ca6276 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
export const render = async (
data4Layout: LayoutData,
svg: SVG,
- element: any,
{
common,
getConfig,
@@ -377,6 +376,7 @@ export const render = async (
// calculate start and end points of the edge, note that the source and target
// can be modified for shapes that have ports
+ // @ts-ignore TODO: fix this
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
log.debug('abc78 source and target', source, target);
// Add the edge to the graph
@@ -739,7 +739,7 @@ export const render = async (
// @ts-ignore - ELK is not typed
const elk = new ELK();
-
+ const element = svg.select('g');
// Add the arrowheads to the svg
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
index 5d52b64e8..6289952ea 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -2,7 +2,7 @@ import { select } from 'd3';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
log.debug('Before getData: ');
const data4Layout = diag.db.getData() as LayoutData;
log.debug('Data: ', data4Layout);
- // Create the root SVG - the element is the div containing the SVG element
- const { element, svg } = getDiagramElements(id, securityLevel);
+ // Create the root SVG
+ const svg = getDiagramElement(id, securityLevel);
const direction = getDirection();
data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.diagramId = id;
log.debug('REF1:', data4Layout);
- await render(data4Layout, svg, element);
+ await render(data4Layout, svg);
const padding = data4Layout.config.flowchart?.padding ?? 8;
utils.insertTitle(
svg,
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index 1f1da6cf2..109417c03 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -1,7 +1,7 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
const data4Layout = diag.db.getData() as LayoutData;
// Create the root SVG - the element is the div containing the SVG element
- const { element, svg } = getDiagramElements(id, securityLevel);
+ const svg = getDiagramElement(id, securityLevel);
data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;
// console.log('REF1:', data4Layout);
- await render(data4Layout, svg, element);
+ await render(data4Layout, svg);
const padding = 8;
utils.insertTitle(
- element,
+ svg,
'statediagramTitleText',
conf?.titleTopMargin ?? 25,
diag.db.getDiagramTitle()
diff --git a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
new file mode 100644
index 000000000..17f0767d7
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -0,0 +1,14 @@
+
+
+
+
-
+
## About
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 4ada1e05c..10f7672fd 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,29 @@
# Blog
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
7 May 2024 · 5 mins
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 8497b96a1..01a9f041d 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -114,7 +114,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
-#### Weekend (v\+)
+#### Weekend (v\11.0.0+)
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index d0791718b..2b3f1a88b 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -571,7 +571,7 @@ Usage example:
commit
```
-### Bottom to Top (`BT:`) (v+)
+### Bottom to Top (`BT:`) (v11.0.0+)
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md
index 52a0de887..c7b6cb71b 100644
--- a/packages/mermaid/src/docs/syntax/packet.md
+++ b/packages/mermaid/src/docs/syntax/packet.md
@@ -1,4 +1,4 @@
-# Packet Diagram (v+)
+# Packet Diagram (v11.0.0+)
## Introduction
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 249f7bde0..8826f6275 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -143,18 +143,18 @@ Messages can be of two displayed either solid or with a dotted line.
There are ten types of arrows currently supported:
-| Type | Description |
-| -------- | ----------------------------------------------------------------------- |
-| `->` | Solid line without arrow |
-| `-->` | Dotted line without arrow |
-| `->>` | Solid line with arrowhead |
-| `-->>` | Dotted line with arrowhead |
-| `<<->>` | Solid line with bidirectional arrowheads (v+) |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v+) |
-| `-x` | Solid line with a cross at the end |
-| `--x` | Dotted line with a cross at the end. |
-| `-)` | Solid line with an open arrow at the end (async) |
-| `--)` | Dotted line with a open arrow at the end (async) |
+| Type | Description |
+| -------- | ---------------------------------------------------- |
+| `->` | Solid line without arrow |
+| `-->` | Dotted line without arrow |
+| `->>` | Solid line with arrowhead |
+| `-->>` | Dotted line with arrowhead |
+| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
+| `-x` | Solid line with a cross at the end |
+| `--x` | Dotted line with a cross at the end. |
+| `-)` | Solid line with an open arrow at the end (async) |
+| `--)` | Dotted line with a open arrow at the end (async) |
## Activations
diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js
index ff0b30ac6..162551058 100644
--- a/packages/mermaid/src/rendering-util/insertElementsForSize.js
+++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -1,7 +1,7 @@
import { select } from 'd3';
import { insertNode } from '../dagre-wrapper/nodes.js';
-export const getDiagramElements = (id, securityLevel) => {
+export const getDiagramElement = (id, securityLevel) => {
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {
// Run the renderer. This is what draws the final graph.
- // @ts-ignore todo: fix this
- const element = root.select('#' + id + ' g');
- return { svg, element };
+ return svg;
};
export function insertElementsForSize(el, data) {
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 8851a1d95..2717eb717 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
return { elem, diff };
};
-export const render = async (data4Layout, svg, element) => {
+export const render = async (data4Layout, svg) => {
const graph = new graphlib.Graph({
multigraph: true,
compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
.setDefaultEdgeLabel(function () {
return {};
});
-
+ const element = svg.select('g');
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
clearNodes();
clearEdges();
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 8b28fe82b..013be7ba4 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
render(
layoutData: LayoutData,
svg: SVG,
- element: any,
helpers: InternalHelpers,
options?: RenderOptions
): Promise;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {
registerDefaultLayoutLoaders();
-export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
+export const render = async (data4Layout: LayoutData, svg: SVG) => {
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
}
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader();
- return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
+ return layoutRenderer.render(data4Layout, svg, internalHelpers, {
algorithm: layoutDefinition.algorithm,
});
};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
index ea8ac8ca5..b762e1c1d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
@@ -17,6 +17,7 @@ export const anchor = (parent: SVGAElement, node: Node): Promise =>
cssClasses = 'anchor';
}
const shapeSvg = parent
+ // @ts-ignore - SVGElement is not typed
.insert('g')
.attr('class', cssClasses)
.attr('id', node.domId || node.id);