Merge pull request #6032 from mermaid-js/master

Merge back v4.11.0 to develop
2025-01-14 06:43:25 +08:00 · 2024-11-07 12:14:09 +00:00 · 2024-11-07 12:14:09 +00:00 · c218e365bd
commit c218e365bd
parent ece3b254db f507dbbe00
32 changed files with 305 additions and 129 deletions
--- a/.changeset/chilly-hotels-mix.md
+++ b/.changeset/chilly-hotels-mix.md
@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Jagged edge fix for icon shape
--- a/.changeset/dry-students-act.md
+++ b/.changeset/dry-students-act.md
@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-Add missing TypeScript dependencies
--- a/.changeset/heavy-cats-mate.md
+++ b/.changeset/heavy-cats-mate.md
@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Icon color fix for colored icons.
--- a/.changeset/kind-drinks-invent.md
+++ b/.changeset/kind-drinks-invent.md
@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-Adding Kanban board, a new diagram type
--- a/.changeset/thick-elephants-search.md
+++ b/.changeset/thick-elephants-search.md
@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: error `mermaid.parse` on an invalid shape, so that it matches the errors thrown by `mermaid.render`
--- 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 @@ kanban
    <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 @@ kanban
        // layout: 'dagre',
        // layout: 'elk',
        // layout: 'fixed',
-        htmlLabels: false,
+        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
        // fontFamily: 'Kalam',
--- 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)
--- 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)
--- 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

--- 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
--- 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`                                             |
--- 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
--- 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",
--- 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\`                                             |
--- 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),
+      });
+    }
  }
 };

--- 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);
@ -129,7 +130,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
+    if (doc?.shape && doc.shape === 'kanbanItem') {
      node.shape = doc?.shape;
    }
    if (doc?.label) {
--- 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,10 +64,15 @@ 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 });
-      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;
--- a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@ -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>
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@ -7,17 +7,21 @@ interface Taglines {
 }

 const taglines: Taglines[] = [
+  {
+    label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
+    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&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: '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_js&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>
--- 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),
    });
--- 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

--- 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
--- 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);
--- 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;

--- 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 = [
--- 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 fill = stylesMap.get('fill');
+  options.stroke = fill ?? mainBkg;

  const iconElem = shapeSvg.append('g');
  if (node.icon) {
--- 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 fill = stylesMap.get('fill');
+  options.stroke = fill ?? 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) {
--- 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 fill = stylesMap.get('fill');
+  options.stroke = fill ?? 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;
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts
@ -1,28 +1,33 @@
 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']) => {
+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':
      return 'lightblue';
  }
 };
-export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRenderOptions) => {
-  const unknownNode = node as unknown;
-  const kanbanNode = unknownNode as KanbanNode;
+export async function kanbanItem<T extends SVGGraphicsElement>(
+  parent: D3Selection<T>,
+  // 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;
+  kanbanNode.labelStyle = labelStyles || '';

  const labelPaddingX = 10;
  const orgWidth = kanbanNode.width;
@ -38,10 +43,10 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
  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('svg:a', ':first-child')
+      .insert<SVGAElement>('svg:a', ':first-child')
      .attr('class', 'kanban-ticket-link')
      .attr('xlink:href', ticketUrl)
      .attr('target', '_blank');
@ -49,21 +54,29 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende

  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,
  };
-  const { label: labelEl, bbox: bbox2 } = await insertLabel(
-    link ? link : shapeSvg,
-    kanbanNode.ticket || '',
+  let labelEl, bbox2;
+  if (link) {
+    ({ label: labelEl, bbox: bbox2 } = await insertLabel(
+      link,
+      ('ticket' in kanbanNode && kanbanNode.ticket) || '',
      options
-  );
+    ));
+  } else {
+    ({ label: labelEl, bbox: bbox2 } = await insertLabel(
+      shapeSvg,
+      ('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;
@ -107,21 +120,23 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
        : 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)
      .attr('height', totalHeight);
-    if (kanbanNode.priority) {
-      const line = shapeSvg.append('line', ':first-child');
+
+    const priority = 'priority' in kanbanNode && kanbanNode.priority;
+    if (priority) {
+      const line = shapeSvg.append('line');
      const lineX = x + 2;

      const y1 = y + Math.floor((rx ?? 0) / 2);
@ -133,7 +148,7 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
        .attr('y2', y2)

        .attr('stroke-width', '4')
-        .attr('stroke', colorFromPriority(kanbanNode.priority));
+        .attr('stroke', colorFromPriority(priority));
    }
  }

@ -145,4 +160,4 @@ export const kanbanItem = async (parent: SVG, node: Node, { config }: ShapeRende
  };

  return shapeSvg;
-};
+}
--- 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;
  }
--- 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()?.htmlLabels);
@ -22,9 +21,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
  }

  // Add outer g element
-  const shapeSvg = _shapeSvg
-    ? _shapeSvg
-    : parent
+  const shapeSvg = parent
    .insert('g')
    .attr('class', cssClasses)
    .attr('id', node.domId || node.id);
@ -119,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: {
@ -136,7 +133,10 @@ export const insertLabel = async (
  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,
--- 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,11 +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;
-}
+};