Version Packages

Pre Release

docs/news/blog.md

@@ -6,6 +6,18 @@
 
 # Blog
 
+## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
+
+9/9/2025 • 5 mins
+
+Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
+
+## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
+
+7/22/2025 • 8 mins
+
+In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
+
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
 
 7/15/2025 • 7 mins

packages/mermaid/CHANGELOG.md

@@ -1,5 +1,11 @@
 # mermaid
 
+## 11.11.1
+
+### Patch Changes
+
+- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
+
 ## 11.11.0
 
 ### Minor Changes

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.11.1",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -37,6 +37,7 @@ export class MindmapDB {
   private nodes: MindmapNode[] = [];
   private count = 0;
   private elements: Record<number, D3Element> = {};
+  private baseLevel?: number;
   public readonly nodeType: typeof nodeType;
 
   constructor() {
@@ -54,6 +55,7 @@ export class MindmapDB {
     this.nodes = [];
     this.count = 0;
     this.elements = {};
+    this.baseLevel = undefined;
   }
 
   public getParent(level: number): MindmapNode | null {
@@ -72,6 +74,17 @@ export class MindmapDB {
   public addNode(level: number, id: string, descr: string, type: number): void {
     log.info('addNode', level, id, descr, type);
 
+    let isRoot = false;
+
+    if (this.nodes.length === 0) {
+      this.baseLevel = level;
+      level = 0;
+      isRoot = true;
+    } else if (this.baseLevel !== undefined) {
+      level = level - this.baseLevel;
+      isRoot = false;
+    }
+
     const conf = getConfig();
     let padding = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
 
@@ -92,6 +105,7 @@ export class MindmapDB {
       children: [],
       width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
       padding,
+      isRoot,
     };
 
     const parent = this.getParent(level);
@@ -99,7 +113,7 @@ export class MindmapDB {
       parent.children.push(node);
       this.nodes.push(node);
     } else {
-      if (this.nodes.length === 0) {
+      if (isRoot) {
         this.nodes.push(node);
       } else {
         throw new Error(
@@ -204,8 +218,7 @@ export class MindmapDB {
     // Build CSS classes for the node
     const cssClasses = ['mindmap-node'];
 
-    // Add section-specific classes
-    if (node.level === 0) {
+    if (node.isRoot === true) {
       // Root node gets special classes
       cssClasses.push('section-root', 'section--1');
     } else if (node.section !== undefined) {

packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

@@ -15,6 +15,7 @@ export interface MindmapNode {
   icon?: string;
   x?: number;
   y?: number;
+  isRoot?: boolean;
 }
 
 export type FilledMindMapNode = RequiredDeep<MindmapNode>;

packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue

@@ -40,105 +40,26 @@ const openSourceFeatures: Feature[] = [
   { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
 ];
 
-const playgroundFeatures: Feature[] = [
-  { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
-  { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
-  { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
+const editorColumns: EditorColumn[] = [
+  {
+    title: 'Mermaid Pro',
+    description: 'Unlock AI and real-time collaboration',
+    highlighted: true,
+    redBarText: 'Recommended',
+    proTrialButtonText: 'Start free trial',
+    proTrialUrl:
+      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
+    features: mermaidChartFeatures,
+  },
+  {
+    title: 'Open Source',
+    description: 'Code only, no login',
+    buttonText: 'Start free',
+    redirectUrl: 'https://mermaid.live/edit',
+    features: openSourceFeatures,
+  },
 ];
 
-const editorColumnVariants: EditorColumn[][] = [
-  [
-    {
-      title: 'Playground',
-      description: 'Basic features, no login',
-      redirectUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground',
-      buttonText: 'Start free',
-      features: playgroundFeatures,
-    },
-    {
-      title: 'Free or Pro',
-      description: 'Advanced features, Free or Pro account',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free',
-      proTrialButtonText: 'Start free',
-      highlighted: true,
-      redBarText: 'Best for collaboration',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      redirectUrl: 'https://mermaid.live/edit',
-      buttonText: 'Start free',
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      redirectUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free',
-      buttonText: 'Start Free',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start Pro trial',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      buttonText: 'Start free',
-      redirectUrl: 'https://mermaid.live/edit',
-      isButtonMargined: true,
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start free trial',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      buttonText: 'Start free',
-      redirectUrl: 'https://mermaid.live/edit',
-      features: openSourceFeatures,
-    },
-  ],
-  [
-    {
-      title: 'Mermaid Pro',
-      description: 'Unlock AI and real-time collaboration',
-      highlighted: true,
-      redBarText: 'Recommended',
-      proTrialButtonText: 'Start free',
-      proTrialUrl:
-        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free',
-      features: mermaidChartFeatures,
-    },
-    {
-      title: 'Open Source',
-      description: 'Code only, no login',
-      redirectUrl: 'https://mermaid.live/edit',
-      buttonText: 'Start free',
-      features: openSourceFeatures,
-    },
-  ],
-];
-
-const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)];
-
 const isVisible = ref(false);
 
 const handleMouseDown = (e: MouseEvent) => {

packages/mermaid/src/docs/.vitepress/theme/mermaid.ts

@@ -1,7 +1,13 @@
 import mermaid, { type MermaidConfig } from 'mermaid';
 import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
+import tidyTreeLayout from '../../../../../mermaid-layout-tidy-tree/dist/mermaid-layout-tidy-tree.core.mjs';
+import layouts from '../../../../../mermaid-layout-elk/dist/mermaid-layout-elk.core.mjs';
 
-const init = mermaid.registerExternalDiagrams([zenuml]);
+const init = Promise.all([
+  mermaid.registerExternalDiagrams([zenuml]),
+  mermaid.registerLayoutLoaders(layouts),
+  mermaid.registerLayoutLoaders(tidyTreeLayout),
+]);
 mermaid.registerIconPacks([
   {
     name: 'logos',

packages/mermaid/src/docs/news/blog.md

@@ -1,5 +1,17 @@
 # Blog
 
+## [The Essential Guide to Mermaid Chart Plugin for VS Code [08/2025]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
+
+9/9/2025 • 5 mins
+
+Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
+
+## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
+
+7/22/2025 • 8 mins
+
+In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
+
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
 
 7/15/2025 • 7 mins

packages/tiny/CHANGELOG.md

@@ -1,5 +1,11 @@
 # mermaid
 
+## 11.11.1
+
+### Patch Changes
+
+- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
+
 ## 11.11.0
 
 ### Minor Changes

packages/tiny/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/tiny",
-  "version": "11.11.0",
+  "version": "11.11.1",
   "description": "Tiny version of mermaid",
   "type": "commonjs",
   "main": "./dist/mermaid.tiny.js",