From 38eed7c9880c6d4081155608942d6c9dfab6b783 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:54:46 -0700
Subject: [PATCH 01/30] product hunt promo material updates

---
 docs/ecosystem/mermaid-chart.md                    |  2 +-
 .../.vitepress/components/ProductHuntBadge.vue     | 14 --------------
 .../mermaid/src/docs/.vitepress/theme/index.ts     |  3 ---
 .../mermaid/src/docs/ecosystem/mermaid-chart.md    |  2 +-
 4 files changed, 2 insertions(+), 19 deletions(-)
 delete mode 100644 packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue

diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md
index 32bf3376fc..1348219c10 100644
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-whiteboard?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;whiteboard" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=486720&theme=light" alt="Mermaid&#0032;Whiteboard - Drag&#0032;&#0038;&#0032;Drop&#0032;your&#0032;Nodes&#0032;with&#0032;Mermaid&#0039;s&#0032;new&#0032;Whiteboard&#0033; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 
diff --git a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
deleted file mode 100644
index 0f246db715..0000000000
--- a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="-mt-6 mb-8">
-    <a
-      href="https://www.producthunt.com/posts/mermaid-whiteboard?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;whiteboard"
-      target="_blank"
-      ><img
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=486720&theme=light"
-        alt="Mermaid&#0032;Whiteboard - Drag&#0032;&#0038;&#0032;Drop&#0032;your&#0032;Nodes&#0032;with&#0032;Mermaid&#0039;s&#0032;new&#0032;Whiteboard&#0033; | Product Hunt"
-        style="width: 250px; height: 54px"
-        width="250"
-        height="54"
-    /></a>
-  </div>
-</template>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 05f15ea6ad..3ec200937f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -9,8 +9,6 @@ import Contributors from '../components/Contributors.vue';
 import HomePage from '../components/HomePage.vue';
 // @ts-ignore Type not available
 import TopBar from '../components/TopBar.vue';
-// @ts-ignore Type not available
-import ProductHuntBadge from '../components/ProductHuntBadge.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
 import 'uno.css';
@@ -25,7 +23,6 @@ export default {
     return h(Theme.Layout, null, {
       // 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-hero-info-before': () => h(ProductHuntBadge),
       'home-features-after': () => h(HomePage),
       'doc-before': () => h(TopBar),
     });
diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
index 83695dab75..77a7020b77 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
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-whiteboard?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;whiteboard" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=486720&theme=light" alt="Mermaid&#0032;Whiteboard - Drag&#0032;&#0038;&#0032;Drop&#0032;your&#0032;Nodes&#0032;with&#0032;Mermaid&#0039;s&#0032;new&#0032;Whiteboard&#0033; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 

From 6df1fa1a0324190f987281f370f1a53aea3eabe7 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:26:17 -0700
Subject: [PATCH 02/30] update taglines

---
 .../src/docs/.vitepress/components/TopBar.vue        | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 5aa5155757..b36fdd2d00 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -7,6 +7,10 @@ interface Taglines {
 }
 
 const taglines: Taglines[] = [
+  {
+    label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
+    url: 'https://docs.mermaidchart.com/guides/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
+  },
   {
     label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
     url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
@@ -16,8 +20,8 @@ const taglines: Taglines[] = [
     url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
   },
   {
-    label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
+    label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle',
   },
 ];
 
@@ -25,7 +29,7 @@ let index = ref(Math.floor(Math.random() * taglines.length));
 onMounted(() => {
   setInterval(() => {
     index.value = (index.value + 1) % taglines.length;
-  }, 60_000);
+  }, 40_000);
 });
 </script>
 
@@ -41,7 +45,7 @@ onMounted(() => {
         >
           <span class="font-semibold">{{ taglines[index].label }}</span>
           <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
-            Try it now
+            Try now
           </button>
         </a>
       </transition>

From 054f9291502c3b0e966dcf4ace0b5358150ecd6c Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 29 Oct 2024 21:12:11 +0900
Subject: [PATCH 03/30] refactor: remove unused param from `labelHelper()`

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../rendering-elements/shapes/util.ts               | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
index 6a9db8c222..e69e36e382 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -10,8 +10,7 @@ import type { D3Selection, Point } from '../../../types.js';
 export const labelHelper = async <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node,
-  _classes?: string,
-  _shapeSvg?: D3Selection<T>
+  _classes?: string
 ) => {
   let cssClasses;
   const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
@@ -22,12 +21,10 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   }
 
   // Add outer g element
-  const shapeSvg = _shapeSvg
-    ? _shapeSvg
-    : parent
-        .insert('g')
-        .attr('class', cssClasses)
-        .attr('id', node.domId || node.id);
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', cssClasses)
+    .attr('id', node.domId || node.id);
 
   // Create the label and insert it after the rect
   const labelEl = shapeSvg

From f33ebfaf7a135834affbc5e114014028c82c99ef Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 29 Oct 2024 21:13:10 +0900
Subject: [PATCH 04/30] refactor: fix broken generic on `insertLabel()`

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../src/rendering-util/rendering-elements/shapes/util.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
index e69e36e382..d18394f688 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -116,7 +116,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   labelEl.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label: labelEl };
 };
-export const insertLabel = async (
+export const insertLabel = async <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   label: string,
   options: {

From 9168d5d1f4e3947e0c91ed20453f460c07d41f93 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 29 Oct 2024 21:13:57 +0900
Subject: [PATCH 05/30] refactor(types): fix some type errors in kanbanItem

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../rendering-elements/shapes/kanbanItem.ts   | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
index 61dc3f85da..4dc6324a72 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@@ -1,10 +1,10 @@
 import { labelHelper, insertLabel, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { SVG } from '../../../diagram-api/types.js';
 import type { Node, KanbanNode, ShapeRenderOptions } from '../../types.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
+import type { D3Selection } from '../../../types.js';
 
 const colorFromPriority = (priority: KanbanNode['priority']) => {
   switch (priority) {
@@ -18,7 +18,11 @@ const colorFromPriority = (priority: KanbanNode['priority']) => {
       return 'lightblue';
   }
 };
-export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRenderOptions) => {
+export const kanbanItem = async <T extends SVGGraphicsElement>(
+  parent: D3Selection<T>,
+  node: Node,
+  { config }: ShapeRenderOptions
+) => {
   const unknownNode = node as unknown;
   const kanbanNode = unknownNode as KanbanNode;
   const { labelStyles, nodeStyles } = styles2String(kanbanNode);
@@ -41,7 +45,7 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
   if (kanbanNode.ticket && config?.kanban?.ticketBaseUrl) {
     ticketUrl = config?.kanban?.ticketBaseUrl.replace('#TICKET#', kanbanNode.ticket);
     link = shapeSvg
-      .insert('svg:a', ':first-child')
+      .insert<SVGAElement>('svg:a', ':first-child')
       .attr('class', 'kanban-ticket-link')
       .attr('xlink:href', ticketUrl)
       .attr('target', '_blank');
@@ -56,11 +60,16 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
     padding: kanbanNode.padding,
     centerLabel: false,
   };
-  const { label: labelEl, bbox: bbox2 } = await insertLabel(
-    link ? link : shapeSvg,
-    kanbanNode.ticket || '',
-    options
-  );
+  let labelEl, bbox2;
+  if (link) {
+    ({ label: labelEl, bbox: bbox2 } = await insertLabel(link, kanbanNode.ticket || '', options));
+  } else {
+    ({ label: labelEl, bbox: bbox2 } = await insertLabel(
+      shapeSvg,
+      kanbanNode.ticket || '',
+      options
+    ));
+  }
   const { label: labelElAssigned, bbox: bboxAssigned } = await insertLabel(
     shapeSvg,
     kanbanNode.assigned || '',

From dffaf9fa8ff523fa4d30b9c73c54175cfe36d423 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Tue, 29 Oct 2024 13:41:20 +0100
Subject: [PATCH 06/30] fix for kanban section shape

---
 packages/mermaid/src/diagrams/kanban/kanbanDb.ts               | 3 ++-
 .../mermaid/src/rendering-util/rendering-elements/clusters.js  | 2 +-
 .../mermaid/src/rendering-util/rendering-elements/shapes.ts    | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
index e6f57ef79a..f27799f1e8 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
@@ -129,7 +129,8 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
       throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`);
     }
 
-    if (doc?.shape) {
+    // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem or kanbanSection
+    if (doc?.shape && (doc.shape === 'kanbanItem' || doc.shape === 'kanbanSection')) {
       node.shape = doc?.shape;
     }
     if (doc?.label) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 3bd9c9dc77..12ba15f39c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -280,7 +280,7 @@ const roundedWithTitle = async (parent, node) => {
 
   return { cluster: shapeSvg, labelBBox: bbox };
 };
-const kanbanSection = async (parent, node) => {
+export const kanbanSection = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
   const siteConfig = getConfig();
   const { themeVariables, handDrawnSeed } = siteConfig;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
index 4f6459d852..0dd22b1134 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
@@ -59,6 +59,7 @@ import { waveRectangle } from './shapes/waveRectangle.js';
 import { windowPane } from './shapes/windowPane.js';
 import { classBox } from './shapes/classBox.js';
 import { kanbanItem } from './shapes/kanbanItem.js';
+import { kanbanSection } from './clusters.js';
 
 type ShapeHandler = <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -478,6 +479,7 @@ const generateShapeMap = () => {
     iconRounded,
     imageSquare,
     kanbanItem,
+    kanbanSection,
     anchor,
   } as const;
 

From ef30283fe90481b1c9d45a5bcec18362ee2377f6 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 29 Oct 2024 21:39:34 +0900
Subject: [PATCH 07/30] refactor: fix more type errors in kanbanItem

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../rendering-elements/shapes/kanbanItem.ts   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
index 4dc6324a72..d19ada7c45 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@@ -6,12 +6,14 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 
-const colorFromPriority = (priority: KanbanNode['priority']) => {
+const colorFromPriority = (priority: NonNullable<KanbanNode['priority']>) => {
   switch (priority) {
     case 'Very High':
       return 'red';
     case 'High':
       return 'orange';
+    case 'Medium':
+      return null; // no stroke
     case 'Low':
       return 'blue';
     case 'Very Low':
@@ -20,11 +22,9 @@ const colorFromPriority = (priority: KanbanNode['priority']) => {
 };
 export const kanbanItem = async <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
-  node: Node,
+  kanbanNode: Node | Omit<KanbanNode, 'level'>,
   { config }: ShapeRenderOptions
 ) => {
-  const unknownNode = node as unknown;
-  const kanbanNode = unknownNode as KanbanNode;
   const { labelStyles, nodeStyles } = styles2String(kanbanNode);
   kanbanNode.labelStyle = labelStyles;
 
@@ -42,7 +42,7 @@ export const kanbanItem = async <T extends SVGGraphicsElement>(
   let ticketUrl = '';
   let link;
 
-  if (kanbanNode.ticket && config?.kanban?.ticketBaseUrl) {
+  if ('ticket' in kanbanNode && kanbanNode.ticket && config?.kanban?.ticketBaseUrl) {
     ticketUrl = config?.kanban?.ticketBaseUrl.replace('#TICKET#', kanbanNode.ticket);
     link = shapeSvg
       .insert<SVGAElement>('svg:a', ':first-child')
@@ -62,17 +62,21 @@ export const kanbanItem = async <T extends SVGGraphicsElement>(
   };
   let labelEl, bbox2;
   if (link) {
-    ({ label: labelEl, bbox: bbox2 } = await insertLabel(link, kanbanNode.ticket || '', options));
+    ({ label: labelEl, bbox: bbox2 } = await insertLabel(
+      link,
+      ('ticket' in kanbanNode && kanbanNode.ticket) || '',
+      options
+    ));
   } else {
     ({ label: labelEl, bbox: bbox2 } = await insertLabel(
       shapeSvg,
-      kanbanNode.ticket || '',
+      ('ticket' in kanbanNode && kanbanNode.ticket) || '',
       options
     ));
   }
   const { label: labelElAssigned, bbox: bboxAssigned } = await insertLabel(
     shapeSvg,
-    kanbanNode.assigned || '',
+    ('assigned' in kanbanNode && kanbanNode.assigned) || '',
     options
   );
   kanbanNode.width = orgWidth;
@@ -129,7 +133,9 @@ export const kanbanItem = async <T extends SVGGraphicsElement>(
       .attr('y', y)
       .attr('width', totalWidth)
       .attr('height', totalHeight);
-    if (kanbanNode.priority) {
+
+    const priority = 'priority' in kanbanNode && kanbanNode.priority;
+    if (priority) {
       const line = shapeSvg.append('line', ':first-child');
       const lineX = x + 2;
 
@@ -142,7 +148,7 @@ export const kanbanItem = async <T extends SVGGraphicsElement>(
         .attr('y2', y2)
 
         .attr('stroke-width', '4')
-        .attr('stroke', colorFromPriority(kanbanNode.priority));
+        .attr('stroke', colorFromPriority(priority));
     }
   }
 

From 0197c089169cfe28a476f73c2b216dc537bbf818 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Tue, 29 Oct 2024 14:04:57 +0100
Subject: [PATCH 08/30] revert adding kanban section to shape

---
 packages/mermaid/src/diagrams/kanban/kanbanDb.ts              | 4 ++--
 .../mermaid/src/rendering-util/rendering-elements/clusters.js | 2 +-
 .../mermaid/src/rendering-util/rendering-elements/shapes.ts   | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
index f27799f1e8..5d6fc68f90 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
@@ -129,8 +129,8 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
       throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`);
     }
 
-    // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem or kanbanSection
-    if (doc?.shape && (doc.shape === 'kanbanItem' || doc.shape === 'kanbanSection')) {
+    // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem
+    if (doc?.shape && doc.shape === 'kanbanItem') {
       node.shape = doc?.shape;
     }
     if (doc?.label) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 12ba15f39c..3bd9c9dc77 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -280,7 +280,7 @@ const roundedWithTitle = async (parent, node) => {
 
   return { cluster: shapeSvg, labelBBox: bbox };
 };
-export const kanbanSection = async (parent, node) => {
+const kanbanSection = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
   const siteConfig = getConfig();
   const { themeVariables, handDrawnSeed } = siteConfig;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
index 0dd22b1134..4f6459d852 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
@@ -59,7 +59,6 @@ import { waveRectangle } from './shapes/waveRectangle.js';
 import { windowPane } from './shapes/windowPane.js';
 import { classBox } from './shapes/classBox.js';
 import { kanbanItem } from './shapes/kanbanItem.js';
-import { kanbanSection } from './clusters.js';
 
 type ShapeHandler = <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -479,7 +478,6 @@ const generateShapeMap = () => {
     iconRounded,
     imageSquare,
     kanbanItem,
-    kanbanSection,
     anchor,
   } as const;
 

From 34e8946c585ac039e0c2b02947d110df1d295c25 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Tue, 29 Oct 2024 22:17:24 +0900
Subject: [PATCH 09/30] refactor(types): fix kanbanItem circular types

Exclude the `node.shape` type from `kanbanItem()`, as otherwise it
causes a circular dependency in the types.
---
 .../rendering-elements/shapes/kanbanItem.ts              | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
index d19ada7c45..34ba7873d5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@@ -20,11 +20,12 @@ const colorFromPriority = (priority: NonNullable<KanbanNode['priority']>) => {
       return 'lightblue';
   }
 };
-export const kanbanItem = async <T extends SVGGraphicsElement>(
+export async function kanbanItem<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
-  kanbanNode: Node | Omit<KanbanNode, 'level'>,
+  // Omit the 'shape' prop since otherwise, it causes a TypeScript circular dependency error
+  kanbanNode: Omit<Node, 'shape'> | Omit<KanbanNode, 'level' | 'shape'>,
   { config }: ShapeRenderOptions
-) => {
+) {
   const { labelStyles, nodeStyles } = styles2String(kanbanNode);
   kanbanNode.labelStyle = labelStyles;
 
@@ -160,4 +161,4 @@ export const kanbanItem = async <T extends SVGGraphicsElement>(
   };
 
   return shapeSvg;
-};
+}

From 124d2f72dd20e3441aeaa5cf1cb64947d95a3590 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 29 Oct 2024 14:51:55 +0100
Subject: [PATCH 10/30] Fix for icon borders

---
 packages/mermaid/src/diagrams/kanban/kanbanDb.ts         | 1 +
 .../rendering-elements/shapes/iconCircle.ts              | 6 ++++--
 .../rendering-elements/shapes/iconRounded.ts             | 8 +++++---
 .../rendering-elements/shapes/iconSquare.ts              | 9 ++++++---
 packages/mermaid/src/rendering-util/types.ts             | 2 ++
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
index e6f57ef79a..260b1d32a5 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
@@ -84,6 +84,7 @@ const getData = function () {
         shape: 'kanbanItem',
         level: item.level,
         rx: 5,
+        ry: 5,
         cssStyles: ['text-align: left'],
       } satisfies KanbanNode;
       _nodes.push(childNode);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 313e5c7af1..785a3d219c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -26,16 +26,18 @@ export async function iconCircle<T extends SVGGraphicsElement>(
 
   const topLabel = node.pos === 't';
 
-  const { nodeBorder } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: 'transparent' });
+  const options = userNodeOverrides(node, {});
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
+  const stroke = stylesMap.get('stroke');
+  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
 
   const iconElem = shapeSvg.append('g');
   if (node.icon) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index ab778de71b..cfb13c35c6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -30,7 +30,7 @@ export async function iconRounded<T extends SVGGraphicsElement>(
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { nodeBorder } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -40,12 +40,14 @@ export async function iconRounded<T extends SVGGraphicsElement>(
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: 'transparent' });
+  const options = userNodeOverrides(node, {});
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
+  const stroke = stylesMap.get('stroke');
+  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
 
   const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
 
@@ -58,7 +60,7 @@ export async function iconRounded<T extends SVGGraphicsElement>(
     stroke: 'none',
   });
 
-  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child').attr('class', 'icon-shape2');
   const outerShape = shapeSvg.insert(() => outerNode);
 
   if (node.icon) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 8cbccb74d2..97d5da1d19 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -3,6 +3,7 @@ import { log } from '../../../logger.js';
 import { getIconSVG } from '../../icons.js';
 import type { Node, ShapeRenderOptions } from '../../types.js';
 import intersect from '../intersect/index.js';
+import { createRoundedRectPathD } from './roundedRectPath.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
@@ -29,7 +30,7 @@ export async function iconSquare<T extends SVGGraphicsElement>(
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { nodeBorder } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -39,14 +40,16 @@ export async function iconSquare<T extends SVGGraphicsElement>(
 
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: 'transparent' });
+  const options = userNodeOverrides(node, {});
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
+  const stroke = stylesMap.get('stroke');
+  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
 
-  const iconNode = rc.rectangle(x, y, width, height, options);
+  const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 0.1), options);
 
   const outerWidth = Math.max(width, bbox.width);
   const outerHeight = height + bbox.height + labelPadding;
diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts
index e49218f711..f8e9c31b53 100644
--- a/packages/mermaid/src/rendering-util/types.ts
+++ b/packages/mermaid/src/rendering-util/types.ts
@@ -161,4 +161,6 @@ export interface KanbanNode extends Node {
   assigned?: string;
   icon?: string;
   level: number;
+  rx: number;
+  ry: number;
 }

From 73bbde8476ec76e3c46eac2320d04cd7e195c278 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 29 Oct 2024 16:21:56 +0100
Subject: [PATCH 11/30] Update of the background-fix

---
 cypress/platform/knsv2.html                   | 101 +++++++++++++++++-
 .../rendering-elements/shapes/iconCircle.ts   |   4 +-
 .../rendering-elements/shapes/iconRounded.ts  |   4 +-
 .../rendering-elements/shapes/iconSquare.ts   |   4 +-
 4 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 1de0712838..66fc0f2d31 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -10,6 +10,10 @@
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
       rel="stylesheet"
     />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -84,12 +88,81 @@
   </head>
 
   <body>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
+  A:::AClass
+  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
+  style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
     <pre id="diagram4" class="mermaid2">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -118,6 +191,30 @@
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
+
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
+
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
@@ -135,7 +232,7 @@
         // layout: 'dagre',
         // layout: 'elk',
         // layout: 'fixed',
-        htmlLabels: false,
+        // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 785a3d219c..e8e16853a6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -36,8 +36,8 @@ export async function iconCircle<T extends SVGGraphicsElement>(
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
-  const stroke = stylesMap.get('stroke');
-  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
+  const fill = stylesMap.get('fill');
+  options.stroke = fill ?? mainBkg;
 
   const iconElem = shapeSvg.append('g');
   if (node.icon) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index cfb13c35c6..40c427ef5e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -46,8 +46,8 @@ export async function iconRounded<T extends SVGGraphicsElement>(
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
-  const stroke = stylesMap.get('stroke');
-  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
+  const fill = stylesMap.get('fill');
+  options.stroke = fill ?? mainBkg;
 
   const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 97d5da1d19..e3536b89e4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -46,8 +46,8 @@ export async function iconSquare<T extends SVGGraphicsElement>(
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
-  const stroke = stylesMap.get('stroke');
-  options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
+  const fill = stylesMap.get('fill');
+  options.stroke = fill ?? mainBkg;
 
   const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 0.1), options);
 

From a381ab6c418dfbc093d85b6a829a0cc22d2e560a Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 30 Oct 2024 18:34:52 +0900
Subject: [PATCH 12/30] refactor(types): separate `ClusterNode`s

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../mermaid/src/diagrams/flowchart/flowDb.ts  | 19 +++++++++---
 .../rendering-elements/clusters.js            |  7 +++++
 .../rendering-elements/nodes.ts               |  8 +++--
 packages/mermaid/src/rendering-util/types.ts  | 31 +++++++++++++------
 4 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 9e3f64a6ce..1dbc789c92 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -893,7 +893,7 @@ const addNodeFromVertex = (
     node.cssCompiledStyles = getCompiledStyles(vertex.classes);
     node.cssClasses = vertex.classes.join(' ');
   } else {
-    nodes.push({
+    const baseNode = {
       id: vertex.id,
       label: vertex.text,
       labelStyle: '',
@@ -902,10 +902,8 @@ const addNodeFromVertex = (
       cssStyles: vertex.styles,
       cssCompiledStyles: getCompiledStyles(['default', 'node', ...vertex.classes]),
       cssClasses: 'default ' + vertex.classes.join(' '),
-      shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
       domId: vertex.domId,
-      isGroup,
       look,
       link: vertex.link,
       linkTarget: vertex.linkTarget,
@@ -916,7 +914,20 @@ const addNodeFromVertex = (
       assetWidth: vertex.assetWidth,
       assetHeight: vertex.assetHeight,
       constraint: vertex.constraint,
-    });
+    };
+    if (isGroup) {
+      nodes.push({
+        ...baseNode,
+        isGroup: true,
+        shape: 'rect',
+      });
+    } else {
+      nodes.push({
+        ...baseNode,
+        isGroup: false,
+        shape: getTypeFromVertex(vertex),
+      });
+    }
   }
 };
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 3bd9c9dc77..1dd87d4388 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -471,6 +471,13 @@ const shapes = {
 
 let clusterElems = new Map();
 
+/**
+ * @typedef {keyof typeof shapes} ClusterShapeID
+ */
+
+/**
+ * @param {import('../types.js').ClusterNode} node - Shape defaults to 'rect'
+ */
 export const insertCluster = async (elem, node) => {
   const shape = node.shape || 'rect';
   const cluster = await shapes[shape](elem, node);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts b/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts
index e2eea5e198..5af6cd17a0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts
@@ -1,6 +1,6 @@
 import { log } from '../../logger.js';
 import { shapes } from './shapes.js';
-import type { Node, ShapeRenderOptions } from '../types.js';
+import type { Node, NonClusterNode, ShapeRenderOptions } from '../types.js';
 import type { SVGGroup } from '../../mermaid.js';
 import type { D3Selection } from '../../types.js';
 import type { graphlib } from 'dagre-d3-es';
@@ -10,7 +10,11 @@ type NodeElement = D3Selection<SVGAElement> | Awaited<ReturnType<ShapeHandler>>;
 
 const nodeElems = new Map<string, NodeElement>();
 
-export async function insertNode(elem: SVGGroup, node: Node, renderOptions: ShapeRenderOptions) {
+export async function insertNode(
+  elem: SVGGroup,
+  node: NonClusterNode,
+  renderOptions: ShapeRenderOptions
+) {
   let newEl: NodeElement | undefined;
   let el;
 
diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts
index f8e9c31b53..86cfd50b30 100644
--- a/packages/mermaid/src/rendering-util/types.ts
+++ b/packages/mermaid/src/rendering-util/types.ts
@@ -1,5 +1,6 @@
 export type MarkdownWordType = 'normal' | 'strong' | 'em';
 import type { MermaidConfig } from '../config.type.js';
+import type { ClusterShapeID } from './rendering-elements/clusters.js';
 import type { ShapeID } from './rendering-elements/shapes.js';
 export interface MarkdownWord {
   content: string;
@@ -9,8 +10,7 @@ export type MarkdownLine = MarkdownWord[];
 /** Returns `true` if the line fits a constraint (e.g. it's under 𝑛 chars) */
 export type CheckFitFunction = (text: MarkdownLine) => boolean;
 
-// Common properties for any node in the system
-export interface Node {
+interface BaseNode {
   id: string;
   label?: string;
   description?: string[];
@@ -38,7 +38,6 @@ export interface Node {
   linkTarget?: string;
   tooltip?: string;
   padding?: number; //REMOVE?, use from LayoutData.config - Keep, this could be shape specific
-  shape?: ShapeID;
   isGroup: boolean;
   width?: number;
   height?: number;
@@ -75,6 +74,22 @@ export interface Node {
   constraint?: 'on' | 'off';
 }
 
+/**
+ * Group/cluster nodes, e.g. nodes that contain other nodes.
+ */
+export interface ClusterNode extends BaseNode {
+  shape?: ClusterShapeID;
+  isGroup: true;
+}
+
+export interface NonClusterNode extends BaseNode {
+  shape?: ShapeID;
+  isGroup: false;
+}
+
+// Common properties for any node in the system
+export type Node = ClusterNode | NonClusterNode;
+
 // Common properties for any edge in the system
 export interface Edge {
   id: string;
@@ -118,9 +133,9 @@ export interface RectOptions {
 }
 
 // Extending the Node interface for specific types if needed
-export interface ClassDiagramNode extends Node {
+export type ClassDiagramNode = Node & {
   memberData: any; // Specific property for class diagram nodes
-}
+};
 
 // Specific interfaces for layout and render data
 export interface LayoutData {
@@ -154,13 +169,11 @@ export interface ShapeRenderOptions {
   dir?: Node['dir'];
 }
 
-export interface KanbanNode extends Node {
+export type KanbanNode = Node & {
   // Kanban specif data
   priority?: 'Very High' | 'High' | 'Medium' | 'Low' | 'Very Low';
   ticket?: string;
   assigned?: string;
   icon?: string;
   level: number;
-  rx: number;
-  ry: number;
-}
+};

From 143806b3603979597d45920c005f6b77525df1ea Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 30 Oct 2024 18:45:12 +0900
Subject: [PATCH 13/30] refactor(types): assert `insertNode` returns non-empty

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
index 9bd3e07317..ba28eae7ba 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
@@ -63,7 +63,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
       item.x = section.x;
       item.width = WIDTH - 1.5 * padding;
       const nodeEl = await insertNode(nodesElem, item, { config: conf });
-      const bbox = nodeEl.node().getBBox();
+      const bbox = nodeEl.node()!.getBBox();
       item.y = y + bbox.height / 2;
       await positionNode(item);
       y = item.y + bbox.height / 2 + padding / 2;

From 953d288957bf234927c4eca8ff7ce94cf540d172 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 30 Oct 2024 18:52:09 +0900
Subject: [PATCH 14/30] refactor(types): fix kanbanRenderer types

Add the appropriate type checks to ensure that we're only ever calling:

- `insertCluster()` with `ClusterNode`
- `insertNode()` with a `NonClusterNode`

Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d
---
 .../mermaid/src/diagrams/kanban/kanbanRenderer.ts     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
index ba28eae7ba..dc57808a9c 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
@@ -7,6 +7,7 @@ import type { KanbanDB } from './kanbanTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 import { insertCluster } from '../../rendering-util/rendering-elements/clusters.js';
 import { insertNode, positionNode } from '../../rendering-util/rendering-elements/nodes.js';
+import type { ClusterNode } from '../../rendering-util/types.js';
 
 export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   log.debug('Rendering kanban diagram\n' + text);
@@ -26,7 +27,10 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   sectionsElem.attr('class', 'sections');
   const nodesElem = svg.append('g');
   nodesElem.attr('class', 'items');
-  const sections = data4Layout.nodes.filter((node) => node.isGroup);
+  const sections = data4Layout.nodes.filter(
+    // TODO: TypeScript 5.5 will infer this predicate automatically
+    (node): node is typeof node & ClusterNode => node.isGroup
+  );
   let cnt = 0;
   // TODO set padding
   const padding = 10;
@@ -60,6 +64,11 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
     let y = top;
     const sectionItems = data4Layout.nodes.filter((node) => node.parentId === section.id);
     for (const item of sectionItems) {
+      if (item.isGroup) {
+        // Kanban diagrams should not have groups within groups
+        // this should never happen
+        throw new Error('Groups within groups are not allowed in Kanban diagrams');
+      }
       item.x = section.x;
       item.width = WIDTH - 1.5 * padding;
       const nodeEl = await insertNode(nodesElem, item, { config: conf });

From c1ca3511c4428cdb4643b6ebc7a047a190d473de Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 30 Oct 2024 11:54:31 +0100
Subject: [PATCH 15/30] Fix (tmp) for handling of config of htmlLabels ion
 note. MOvint class box out of flowchart docs

---
 .../rendering-util/rendering-elements/shapes.ts   | 15 ++++++---------
 .../rendering-elements/shapes/note.ts             |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
index 4f6459d852..dbfc93677f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
@@ -449,14 +449,6 @@ export const shapesDefs = [
     aliases: ['lined-document'],
     handler: linedWaveEdgedRect,
   },
-  {
-    semanticName: 'Class Box',
-    name: 'Class Box',
-    shortName: 'classBox',
-    description: 'Class Box',
-    aliases: ['class-box'],
-    handler: classBox,
-  },
 ] as const satisfies ShapeDefinition[];
 
 const generateShapeMap = () => {
@@ -477,8 +469,13 @@ const generateShapeMap = () => {
     icon,
     iconRounded,
     imageSquare,
-    kanbanItem,
     anchor,
+
+    // Kanban diagram
+    kanbanItem,
+
+    // class diagram
+    classBox,
   } as const;
 
   const entries = [
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
index dfad92949e..4a7f66a877 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -13,7 +13,7 @@ export async function note<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const useHtmlLabels = node.useHtmlLabels || getConfig().htmlLabels;
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart?.htmlLabels !== false;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }

From 8ef5d324fd92532886f3fbfc08fd5ce25337ebd1 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 30 Oct 2024 13:32:03 +0100
Subject: [PATCH 16/30] Typescript fixes

---
 .../rendering-elements/shapes/kanbanItem.ts       | 15 +++++++--------
 .../rendering-elements/shapes/util.ts             |  5 ++++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
index 34ba7873d5..fba867a71a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@@ -27,7 +27,7 @@ export async function kanbanItem<T extends SVGGraphicsElement>(
   { config }: ShapeRenderOptions
 ) {
   const { labelStyles, nodeStyles } = styles2String(kanbanNode);
-  kanbanNode.labelStyle = labelStyles;
+  kanbanNode.labelStyle = labelStyles || '';
 
   const labelPaddingX = 10;
   const orgWidth = kanbanNode.width;
@@ -54,11 +54,10 @@ export async function kanbanItem<T extends SVGGraphicsElement>(
 
   const options = {
     useHtmlLabels: kanbanNode.useHtmlLabels,
-    labelStyle: kanbanNode.labelStyle,
+    labelStyle: kanbanNode.labelStyle || '',
     width: kanbanNode.width,
-    icon: kanbanNode.icon,
     img: kanbanNode.img,
-    padding: kanbanNode.padding,
+    padding: kanbanNode.padding || 8,
     centerLabel: false,
   };
   let labelEl, bbox2;
@@ -121,15 +120,15 @@ export async function kanbanItem<T extends SVGGraphicsElement>(
         : rc.rectangle(x, y, totalWidth, totalHeight, options);
 
     rect = shapeSvg.insert(() => roughNode, ':first-child');
-    rect.attr('class', 'basic label-container').attr('style', cssStyles);
+    rect.attr('class', 'basic label-container').attr('style', cssStyles ? cssStyles : null);
   } else {
     rect = shapeSvg.insert('rect', ':first-child');
 
     rect
       .attr('class', 'basic label-container __APA__')
       .attr('style', nodeStyles)
-      .attr('rx', rx)
-      .attr('ry', ry)
+      .attr('rx', rx ?? 5)
+      .attr('ry', ry ?? 5)
       .attr('x', x)
       .attr('y', y)
       .attr('width', totalWidth)
@@ -137,7 +136,7 @@ export async function kanbanItem<T extends SVGGraphicsElement>(
 
     const priority = 'priority' in kanbanNode && kanbanNode.priority;
     if (priority) {
-      const line = shapeSvg.append('line', ':first-child');
+      const line = shapeSvg.append('line');
       const lineX = x + 2;
 
       const y1 = y + Math.floor((rx ?? 0) / 2);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
index 09b45eacdf..52471ecc07 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -133,7 +133,10 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
   const useHtmlLabels = options.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
 
   // Create the label and insert it after the rect
-  const labelEl = parent.insert('g').attr('class', 'label').attr('style', options.labelStyle);
+  const labelEl = parent
+    .insert('g')
+    .attr('class', 'label')
+    .attr('style', options.labelStyle || '');
 
   const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
     useHtmlLabels,

From 1c66237fa80edfe5a2cca650ad27157ddba6def6 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 30 Oct 2024 21:41:38 +0900
Subject: [PATCH 17/30] test(unit): update docs unit test snapshot

This snapshot should have been modified in
c1ca3511c (Fix (tmp) for handling of config of htmlLabels ion note. MOvint class box out of flowchart docs, 2024-10-30

Fixes: c1ca3511c4428cdb4643b6ebc7a047a190d473de
---
 packages/mermaid/scripts/docs.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/scripts/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts
index 4ed61e9ffe..68677d4c9c 100644
--- a/packages/mermaid/scripts/docs.spec.ts
+++ b/packages/mermaid/scripts/docs.spec.ts
@@ -172,7 +172,6 @@ This Markdown should be kept.
         "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
         | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
         | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
-        | Class Box                         | Class Box              | \`classBox\`     | Class Box                      | \`class-box\`                                                      |
         | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
         | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
         | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |

From 97c61d818c814bf6b734154aa958f6ba9bc01cec Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Wed, 30 Oct 2024 14:11:41 +0100
Subject: [PATCH 18/30] added changeset for class diagram

---
 .changeset/polite-rules-rescue.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .changeset/polite-rules-rescue.md

diff --git a/.changeset/polite-rules-rescue.md b/.changeset/polite-rules-rescue.md
new file mode 100644
index 0000000000..c35af3ab4a
--- /dev/null
+++ b/.changeset/polite-rules-rescue.md
@@ -0,0 +1,15 @@
+---
+'mermaid': minor
+---
+
+Class diagram changes:
+
+- Updates the class diagram to the new unified way of rendering.
+- Includes a new "classBox" shape to be used in diagrams
+- Other updates such as:
+  - the option to hide the empty members box in class diagrams,
+  - support for handDrawn look,
+  - the introduction of the classDef statement into class diagrams,
+  - support for styling the default class,
+  - support lollipop interfaces.
+- Includes fixes / additions for #5562 #3139 and #4037

From b02294376a9eed4de439c226085e725f9a2d5684 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:05:05 +0000
Subject: [PATCH 19/30] [autofix.ci] apply automated fixes

---
 docs/config/setup/interfaces/mermaid.LayoutData.md   | 6 +++---
 docs/config/setup/interfaces/mermaid.RenderResult.md | 6 +++---
 docs/syntax/flowchart.md                             | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaid.LayoutData.md b/docs/config/setup/interfaces/mermaid.LayoutData.md
index 1570b2b2a9..5616e1c9a7 100644
--- a/docs/config/setup/interfaces/mermaid.LayoutData.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutData.md
@@ -20,7 +20,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L128)
+[packages/mermaid/src/rendering-util/types.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L144)
 
 ---
 
@@ -30,7 +30,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L127)
+[packages/mermaid/src/rendering-util/types.ts:143](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L143)
 
 ---
 
@@ -40,4 +40,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L126)
+[packages/mermaid/src/rendering-util/types.ts:142](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L142)
diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md
index f9954437a7..f882b7af4e 100644
--- a/docs/config/setup/interfaces/mermaid.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaid.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95)
+[packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
+[packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)
+[packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 97b9110d1d..3837e77de6 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -319,7 +319,6 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
-| Class Box                         | Class Box              | `classBox`     | Class Box                      | `class-box`                                                      |
 | Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
 | Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
 | Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |

From 8a0ecc1fe9a65c76c33f0fa658f0564f3b206617 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 31 Oct 2024 00:09:10 +0900
Subject: [PATCH 20/30] chore: update changeset for #5880

This isn't documented, but apparently changesets supports this in https://github.com/changesets/changesets/commit/91d1ef2ef703be6b727650ef67a932757b97d1ef

This is needed to give @yari-dewalt credit for PR #5880
---
 .changeset/polite-rules-rescue.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.changeset/polite-rules-rescue.md b/.changeset/polite-rules-rescue.md
index c35af3ab4a..b0e1d90afd 100644
--- a/.changeset/polite-rules-rescue.md
+++ b/.changeset/polite-rules-rescue.md
@@ -13,3 +13,5 @@ Class diagram changes:
   - support for styling the default class,
   - support lollipop interfaces.
 - Includes fixes / additions for #5562 #3139 and #4037
+
+pr: 5880

From d4e5acc530742c6bab3971cfe135137c774ae613 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:19:33 +0000
Subject: [PATCH 21/30] Version Packages

---
 .changeset/chilly-hotels-mix.md      |  5 -----
 .changeset/dry-students-act.md       |  5 -----
 .changeset/heavy-cats-mate.md        |  5 -----
 .changeset/kind-drinks-invent.md     |  5 -----
 .changeset/polite-rules-rescue.md    | 17 -----------------
 .changeset/thick-elephants-search.md |  5 -----
 packages/mermaid/CHANGELOG.md        | 28 ++++++++++++++++++++++++++++
 packages/mermaid/package.json        |  2 +-
 8 files changed, 29 insertions(+), 43 deletions(-)
 delete mode 100644 .changeset/chilly-hotels-mix.md
 delete mode 100644 .changeset/dry-students-act.md
 delete mode 100644 .changeset/heavy-cats-mate.md
 delete mode 100644 .changeset/kind-drinks-invent.md
 delete mode 100644 .changeset/polite-rules-rescue.md
 delete mode 100644 .changeset/thick-elephants-search.md

diff --git a/.changeset/chilly-hotels-mix.md b/.changeset/chilly-hotels-mix.md
deleted file mode 100644
index 642ab6ecf6..0000000000
--- a/.changeset/chilly-hotels-mix.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Jagged edge fix for icon shape
diff --git a/.changeset/dry-students-act.md b/.changeset/dry-students-act.md
deleted file mode 100644
index 43f439f2ee..0000000000
--- a/.changeset/dry-students-act.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Add missing TypeScript dependencies
diff --git a/.changeset/heavy-cats-mate.md b/.changeset/heavy-cats-mate.md
deleted file mode 100644
index c903cc47e5..0000000000
--- a/.changeset/heavy-cats-mate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Icon color fix for colored icons.
diff --git a/.changeset/kind-drinks-invent.md b/.changeset/kind-drinks-invent.md
deleted file mode 100644
index 244be2bf63..0000000000
--- a/.changeset/kind-drinks-invent.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-Adding Kanban board, a new diagram type
diff --git a/.changeset/polite-rules-rescue.md b/.changeset/polite-rules-rescue.md
deleted file mode 100644
index b0e1d90afd..0000000000
--- a/.changeset/polite-rules-rescue.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-'mermaid': minor
----
-
-Class diagram changes:
-
-- Updates the class diagram to the new unified way of rendering.
-- Includes a new "classBox" shape to be used in diagrams
-- Other updates such as:
-  - the option to hide the empty members box in class diagrams,
-  - support for handDrawn look,
-  - the introduction of the classDef statement into class diagrams,
-  - support for styling the default class,
-  - support lollipop interfaces.
-- Includes fixes / additions for #5562 #3139 and #4037
-
-pr: 5880
diff --git a/.changeset/thick-elephants-search.md b/.changeset/thick-elephants-search.md
deleted file mode 100644
index 5e29c42d66..0000000000
--- a/.changeset/thick-elephants-search.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: error `mermaid.parse` on an invalid shape, so that it matches the errors thrown by `mermaid.render`
diff --git a/packages/mermaid/CHANGELOG.md b/packages/mermaid/CHANGELOG.md
index 7331081728..6332963edc 100644
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,5 +1,33 @@
 # mermaid
 
+## 11.4.0
+
+### Minor Changes
+
+- [#5999](https://github.com/mermaid-js/mermaid/pull/5999) [`742ad7c`](https://github.com/mermaid-js/mermaid/commit/742ad7c130964df1fb5544e909d9556081285f68) Thanks [@knsv](https://github.com/knsv)! - Adding Kanban board, a new diagram type
+
+- [#5880](https://github.com/mermaid-js/mermaid/pull/5880) [`bdf145f`](https://github.com/mermaid-js/mermaid/commit/bdf145ffe362462176d9c1e68d5f3ff5c9d962b0) Thanks [@yari-dewalt](https://github.com/yari-dewalt)! - Class diagram changes:
+
+  - Updates the class diagram to the new unified way of rendering.
+  - Includes a new "classBox" shape to be used in diagrams
+  - Other updates such as:
+    - the option to hide the empty members box in class diagrams,
+    - support for handDrawn look,
+    - the introduction of the classDef statement into class diagrams,
+    - support for styling the default class,
+    - support lollipop interfaces.
+  - Includes fixes / additions for #5562 #3139 and #4037
+
+### Patch Changes
+
+- [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Jagged edge fix for icon shape
+
+- [#5933](https://github.com/mermaid-js/mermaid/pull/5933) [`72d60d2`](https://github.com/mermaid-js/mermaid/commit/72d60d2633584eb59bccdb6cf30b9522db645db2) Thanks [@remcohaszing](https://github.com/remcohaszing)! - Add missing TypeScript dependencies
+
+- [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Icon color fix for colored icons.
+
+- [#6002](https://github.com/mermaid-js/mermaid/pull/6002) [`5fabd41`](https://github.com/mermaid-js/mermaid/commit/5fabd414fbee01e43bf6c900907ffc1511ca7440) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: error `mermaid.parse` on an invalid shape, so that it matches the errors thrown by `mermaid.render`
+
 ## 11.3.0
 
 ### Minor Changes
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index afee6aab5f..78bf583881 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "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",

From bbf6ab1206e97df1a453d8649a8e41ed34f58326 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Wed, 30 Oct 2024 08:58:52 -0700
Subject: [PATCH 22/30] update whiteboard tagline

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index b36fdd2d00..2e5514b160 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -9,7 +9,7 @@ interface Taglines {
 const taglines: Taglines[] = [
   {
     label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-    url: 'https://docs.mermaidchart.com/guides/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
+    url: 'https://mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
     label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',

From 1dd7bcb0a60f8eb8a6cb53ddc1b1b31f99407ea4 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Wed, 30 Oct 2024 09:20:35 -0700
Subject: [PATCH 23/30] minor update

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 2e5514b160..3b6beadb66 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -9,7 +9,7 @@ interface Taglines {
 const taglines: Taglines[] = [
   {
     label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-    url: 'https://mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
     label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',

From 7e71b85668e9314cd0a8e01dbdb4a8fe797bae95 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Fri, 1 Nov 2024 06:43:26 -0700
Subject: [PATCH 24/30] update blog page

---
 docs/news/blog.md                      | 12 ++++++++++++
 packages/mermaid/src/docs/news/blog.md | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/docs/news/blog.md b/docs/news/blog.md
index 589665254b..70a31e5c04 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,18 @@
 
 # Blog
 
+## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
+
+Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
+
+October 31, 2024 · 2 mins
+
+## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
+
+An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
+
+October 24, 2024 · 4 mins
+
 ## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
 
 24 September 2024 · 5 mins
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 4f67758f30..d15f79cdc3 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,17 @@
 # Blog
 
+## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
+
+Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
+
+October 31, 2024 · 2 mins
+
+## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
+
+An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
+
+October 24, 2024 · 4 mins
+
 ## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
 
 24 September 2024 · 5 mins

From 63ff5b1d98ffeb6fd46bd7db4138f32ea9fadb95 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 5 Nov 2024 07:57:55 -0800
Subject: [PATCH 25/30] update utm

---
 .../mermaid/src/docs/.vitepress/components/TopBar.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 3b6beadb66..48836a69db 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -9,19 +9,19 @@ interface Taglines {
 const taglines: Taglines[] = [
   {
     label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
     label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
   },
   {
     label: 'Diagram live with teammates in Mermaid Chart',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams',
   },
   {
     label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle',
   },
 ];
 

From f4713332c000b1a632ed03ac29923b30afb92c60 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 5 Nov 2024 07:58:56 -0800
Subject: [PATCH 26/30] minor fix

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 48836a69db..4b1b250bb7 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -13,7 +13,7 @@ const taglines: Taglines[] = [
   },
   {
     label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
   },
   {
     label: 'Diagram live with teammates in Mermaid Chart',

From 757627427b2ec1e3798d99129affe69b0c90de82 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 8 Nov 2024 13:47:39 +0100
Subject: [PATCH 27/30] Fix for intersection issue

---
 cypress/platform/knsv2.html                   | 59 +++++++++++++++----
 .../shapes/tiltedCylinder.ts                  |  2 +-
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 66fc0f2d31..a69804655e 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -89,70 +89,105 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
+---
+config:
+    look: handDrawn
+    theme: default
+---
+flowchart LR
+    n00@{ shape: triangle, label: 'This is a label for triangle shape' }
+    n11@{ shape: sloped-rectangle, label: 'This is a label for sloped-rectangle shape' }
+    n22@{ shape: horizontal-cylinder, label: 'This is a label for horizontal-cylinder shape' }
+    n33@{ shape: flipped-triangle, label: 'This is a label for flipped-triangle shape' }
+    n44@{ shape: hourglass, label: 'This is a label for hourglass shape' }
+    n00 --> n11
+    n00 --> n22
+    n00 --> n33
+    n00 --> n44
+    n11 --> n22
+    n11 --> n33
+    n11 --> n44
+    n22 --> n33
+    n22 --> n44
+    n33 --> n44
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+    look: handDrawn
+    theme: default
+---
+flowchart LR
+    n22@{ shape: h-cyl }
+    n00 --> n11
+    n00 --> n22
+    n11 --> n22
+    </pre>
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
index f8a2fb52b2..29f2c267f5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
@@ -125,7 +125,7 @@ export async function tiltedCylinder<T extends SVGGraphicsElement>(
     ) {
       let x = rx * rx * (1 - (y * y) / (ry * ry));
       if (x != 0) {
-        x = Math.sqrt(x);
+        x = Math.sqrt(Math.abs(x));
       }
       x = rx - x;
       if (point.x - (node.x ?? 0) > 0) {

From 1388662132cc829f9820c2e9970ae04e2dd90588 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 8 Nov 2024 13:54:28 +0100
Subject: [PATCH 28/30] Added changeset

---
 .changeset/fresh-bears-doubt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fresh-bears-doubt.md

diff --git a/.changeset/fresh-bears-doubt.md b/.changeset/fresh-bears-doubt.md
new file mode 100644
index 0000000000..911ef74c1d
--- /dev/null
+++ b/.changeset/fresh-bears-doubt.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Intersection calculations for tilted cylinder/DAS when using handdrawn look. Some random seeds could cause the calculations to break.

From 6b23647bec67a3f3dc13c0a7cb105cde8195bf54 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 14 Nov 2024 15:07:46 +0100
Subject: [PATCH 29/30] #6058 Casting task-id and assigned fields to string
 after yaml parsing

---
 packages/mermaid/src/diagrams/kanban/kanbanDb.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
index 478c378038..a9bcbb7b81 100644
--- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
@@ -138,13 +138,13 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
       node.label = doc?.label;
     }
     if (doc?.icon) {
-      node.icon = doc?.icon;
+      node.icon = doc?.icon.toString();
     }
     if (doc?.assigned) {
-      node.assigned = doc?.assigned;
+      node.assigned = doc?.assigned.toString();
     }
     if (doc?.ticket) {
-      node.ticket = doc?.ticket;
+      node.ticket = doc?.ticket.toString();
     }
 
     if (doc?.priority) {

From 01b5079562ec8d34ce9964910f168873843c68f8 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 14 Nov 2024 15:13:07 +0100
Subject: [PATCH 30/30] Adding changeset

---
 .changeset/eleven-rocks-leave.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eleven-rocks-leave.md

diff --git a/.changeset/eleven-rocks-leave.md b/.changeset/eleven-rocks-leave.md
new file mode 100644
index 0000000000..a8fcbae1f0
--- /dev/null
+++ b/.changeset/eleven-rocks-leave.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Kanban diagrams will not render when adding a number as ticket id or assigned for a task