mermaid-js · ashishjain0512 · Nov 7, 2024 · Oct 18, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/.changeset/chilly-hotels-mix.md b/.changeset/chilly-hotels-mix.md
diff --git a/.changeset/dry-students-act.md b/.changeset/dry-students-act.md
diff --git a/.changeset/heavy-cats-mate.md b/.changeset/heavy-cats-mate.md
diff --git a/.changeset/kind-drinks-invent.md b/.changeset/kind-drinks-invent.md
diff --git a/.changeset/thick-elephants-search.md b/.changeset/thick-elephants-search.md
diff --git 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/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
@@ -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/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/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/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`                                             |

diff --git 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
@@ -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",

diff --git 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\`                                             |

diff --git 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/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) {

diff --git 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;