---
-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 65fa9246e6..4c7c982c37 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/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json
index f833dba523..a04a897ff9 100644
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/layout-elk",
- "version": "0.0.1",
+ "version": "0.1.0",
"description": "ELK layout engine for mermaid",
"module": "dist/mermaid-layout-elk.core.mjs",
"types": "dist/packages/mermaid-layout-elk/src/index.d.ts",
@@ -34,13 +34,14 @@
"d3": "^7.9.0",
"elkjs": "^0.9.3"
},
- "peerDependencies": {
+ "devDependencies": {
+ "@types/d3": "^7.4.3",
"mermaid": "workspace:^"
},
+ "peerDependencies": {
+ "mermaid": "^11.0.0"
+ },
"files": [
"dist"
- ],
- "devDependencies": {
- "@types/d3": "^7.4.3"
- }
+ ]
}
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 0fac3d8672..117ca62763 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-zenuml/package.json b/packages/mermaid-zenuml/package.json
index 1a47a99d8a..43b950e128 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -40,7 +40,7 @@
"mermaid": "workspace:^"
},
"peerDependencies": {
- "mermaid": "workspace:>=10.0.0"
+ "mermaid": "^10 || ^11"
},
"files": [
"dist"
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
index 5d52b64e8b..6289952ea0 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 1f1da6cf2a..109417c035 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 0000000000..17f0767d71
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -0,0 +1,14 @@
+
+
+ 
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 130d6babc2..5aa5155757 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,26 +1,65 @@
+
+
-
+
+
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ce3aea238..3ec200937f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
import TopBar from '../components/TopBar.vue';
import { getRedirect } from './redirect.js';
// @ts-ignore Type not available
-import { h } from 'vue';
-import Theme from 'vitepress/theme';
-import '../style/main.css';
import 'uno.css';
import type { EnhanceAppContext } from 'vitepress';
+import Theme from 'vitepress/theme';
+import { h } from 'vue';
+import '../style/main.css';
export default {
...DefaultTheme,
@@ -24,6 +24,7 @@ export default {
// Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
'home-hero-before': () => h(TopBar),
'home-features-after': () => h(HomePage),
+ 'doc-before': () => h(TopBar),
});
},
enhanceApp({ app, router }: EnhanceAppContext) {
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 2d5972f208..81b0386b14 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -129,7 +130,7 @@ Communication tools and platforms
### Wikis
- [DokuWiki](https://dokuwiki.org)
- - [ComboStrap](https://combostrap.com/mermaid)
+ - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [Foswiki](https://foswiki.org)
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
index 732b9b68cd..049df836ef 100644
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
+ -
+
## About
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 4ada1e05cd..10f7672fdc 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/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js
index ff0b30ac64..1625510589 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 8851a1d959..2717eb717d 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 8b28fe82b8..013be7ba40 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