From 3209ab6d9d43808aafb64942748e97851d75fde5 Mon Sep 17 00:00:00 2001
From: Dennis Schaller <dennis.schaller@klarna.com>
Date: Fri, 9 Aug 2024 11:05:58 +0200
Subject: [PATCH 1/7] add markdown support to sequence diagram notes

---
 demos/sequence.html                           |  49 +++++++
 package.json                                  |   3 +
 .../mermaid/src/diagrams/common/common.ts     |  91 ++++++++++++
 .../sequence/parser/sequenceDiagram.jison     |  25 +++-
 .../src/diagrams/sequence/sequenceRenderer.ts |  31 +++-
 .../mermaid/src/diagrams/sequence/styles.js   | 133 ++++++++++++++++++
 .../mermaid/src/diagrams/sequence/svgDraw.js  |  52 ++++++-
 pnpm-lock.yaml                                |  33 ++++-
 8 files changed, 406 insertions(+), 11 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index eca935ff5b..4098f5fce0 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -249,6 +249,55 @@ <h1>Sequence diagram demos</h1>
       Alice<<->>Bob: Wow, we said that at the same time!
       Bob<<-->>Alice: Bidirectional Arrows are so cool
     </pre>
+
+    <hr />
+
+    <pre class="mermaid">
+    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      note over Alice,John: [ This is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        "description": "This is a note with a description"
+      }
+      ```
+      ]
+      John--xAlice: Great!
+      note left of Alice: [ This is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        from: "Alice",
+        to: "John",
+        "subtitle": "A very pretty one note",
+        "description": "This is a note with a description"
+      }
+      ```
+      ]
+      Alice--xJohn: Awesome!
+      note right of John: [ This is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        "subtitle": "A very pretty one",
+        "description": "This is a note with a description"
+      }
+      ```
+      There can even be `more markdown`:
+      ```
+        const note = "pretty";
+        if (note === "pretty") {
+          console.log("This is a note with a description");
+        } else {
+          // do something else
+        }
+      ```
+      ]
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/package.json b/package.json
index 1ee2cff2d4..d2b15a623a 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "express": "^4.19.1",
     "globals": "^15.4.0",
     "globby": "^14.0.1",
+    "highlight.js": "^11.10.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jison": "^0.4.18",
@@ -109,6 +110,8 @@
     "jsdom": "^24.0.0",
     "langium-cli": "3.0.3",
     "lint-staged": "^15.2.2",
+    "marked": "^14.0.0",
+    "marked-highlight": "^2.1.4",
     "markdown-table": "^3.0.3",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index e24c8e85c8..ef23e7a3e4 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,5 +1,9 @@
 import DOMPurify from 'dompurify';
+import hljs from 'highlight.js';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import type { MermaidConfig } from '../../config.type.js';
+import { parseFontSize } from '../../utils.js';
 
 // Remove and ignore br:s
 export const lineBreakRegex = /<br\s*\/?>/gi;
@@ -367,6 +371,93 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise<
     );
 };
 
+export const markdownRegex = /(```((.|\n)*)```)|(`(.*)`)/g;
+
+/**
+ * Whether or not a text has markdown delimiters
+ *
+ * @param text - The text to test
+ * @returns Whether or not the text has markdown delimiters
+ */
+export const hasMarkdown = (text: string): boolean => (text.match(markdownRegex)?.length ?? 0) > 0;
+
+/**
+ * Attempts to render and return the markdown portion of a string with Marked
+ *
+ * @param text - The text to test
+ * @param config - Configuration for Mermaid
+ * @returns String containing markdown rendered as html, or an error message if it is not and stylesheets aren't present
+ */
+export const renderMarkdown = async (text: string): Promise<string> => {
+  if (!hasMarkdown(text)) {
+    return text;
+  }
+
+  const marked = new Marked(
+    markedHighlight({
+      langPrefix: 'hljs language-',
+      highlight(code, lang) {
+        const language = hljs.getLanguage(lang);
+        const highlighted = hljs.highlight(code, { language: language?.name ?? 'plaintext' });
+        return highlighted.value;
+      },
+    })
+  );
+
+  marked.use({
+    hooks: {
+      processAllTokens: (tokens) =>
+        tokens.map((token) =>
+          token?.lang
+            ? token
+            : {
+                ...token,
+                lang: hljs.highlightAuto(token.text, [
+                  'json',
+                  'javascript',
+                  'typescript',
+                  'html',
+                  'xml',
+                  'java',
+                ]).language,
+              }
+        ),
+    },
+  });
+
+  return marked.parse(text);
+};
+
+/**
+ * This calculates the dimensions of the given text, font size, font family, font weight, and
+ * margins.
+ *
+ * @param text - The text to calculate the width of
+ * @param config - The config for fontSize, fontFamily, fontWeight, and margin all impacting
+ *   the resulting size
+ * @returns The dimensions for the given text
+ */
+export const calculateMarkdownDimensions = async (text: string, config: TextDimensionConfig) => {
+  const { fontSize = 12, fontFamily = 'Arial', fontWeight = 400 } = config;
+  const [, _fontSizePx = '12px'] = parseFontSize(fontSize);
+  text = await renderMarkdown(text, config);
+  const divElem = document.createElement('div');
+  divElem.innerHTML = text;
+  divElem.id = 'markdown-temp';
+  divElem.style.visibility = 'hidden';
+  divElem.style.position = 'absolute';
+  divElem.style.padding = '1em';
+  divElem.style.fontSize = _fontSizePx;
+  divElem.style.fontFamily = fontFamily;
+  divElem.style.fontWeight = '' + fontWeight;
+  divElem.style.top = '0';
+  const body = document.querySelector('body');
+  body?.insertAdjacentElement('beforeend', divElem);
+  const dim = { width: divElem.clientWidth, height: divElem.clientHeight };
+  divElem.remove();
+  return dim;
+};
+
 export default {
   getRows,
   sanitizeText,
diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
index 11b39d2321..4596e55238 100644
--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -19,8 +19,12 @@
 %x acc_title
 %x acc_descr
 %x acc_descr_multiline
+%x text
 %%
 
+<text>"]"                                   										{ this.popState(); return 'SQE'; }
+<text>[^\]]+                                                    { return 'SQC'; }
+<*>(":"\s*[\n\s]*\[)                  													{ this.pushState("text"); return 'SQS'; }
 [\n]+                                                           return 'NEWLINE';
 \s+                                                             /* skip all whitespace */
 <ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
@@ -84,12 +88,13 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \-\-[x]                                                         return 'DOTTED_CROSS';
 \-[\)]                                                          return 'SOLID_POINT';
 \-\-[\)]                                                        return 'DOTTED_POINT';
-":"(?:(?:no)?wrap:)?[^#\n;]+                                    return 'TXT';
+":"(?![\n\s]*\[)(?:(?:no)?wrap:)?[^#\n;]+                       return 'TXT';
 "+"                                                             return '+';
 "-"                                                             return '-';
 <<EOF>>                                                         return 'NEWLINE';
 .                                                               return 'INVALID';
 
+
 /lex
 
 %left '^'
@@ -142,7 +147,7 @@ statement
 	| autonumber 'NEWLINE'  {$$ = {type:'sequenceIndex', sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER}; }
 	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2.actor};}
 	| 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2.actor};}
-	| note_statement 'NEWLINE'
+	| note_statement
 	| links_statement 'NEWLINE'
 	| link_statement 'NEWLINE'
 	| properties_statement 'NEWLINE'
@@ -243,8 +248,24 @@ note_statement
 		$2[0] = $2[0].actor;
 		$2[1] = $2[1].actor;
 		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];}
+	| 'note' placement actor SQS mdtext SQE 'NEWLINE'
+	{
+		$$ = [$3, {type:'addNote', placement:$placement, actor:$actor.actor, text:$mdtext }];}
+	| 'note' 'over' actor_pair SQS mdtext SQE 'NEWLINE'
+	{
+		// Coerce actor_pair into a [to, from, ...] array
+		$2 = [].concat($3, $3).slice(0, 2);
+		$2[0] = $2[0].actor;
+		$2[1] = $2[1].actor;
+		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$mdtext}];}
 	;
 
+mdtext
+  : SQC
+  { $$ = {type: 'text', text: $SQC} }
+  ;
+
+
 links_statement
 	: 'links' actor text2
 	{
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 5299f1b1e1..19b05386db 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1,8 +1,19 @@
 // @ts-nocheck TODO: fix file
 import { select } from 'd3';
-import svgDraw, { drawKatex, ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
+import svgDraw, {
+  drawKatex,
+  drawMarkdown,
+  ACTOR_TYPE_WIDTH,
+  drawText,
+  fixLifeLineHeights,
+} from './svgDraw.js';
 import { log } from '../../logger.js';
-import common, { calculateMathMLDimensions, hasKatex } from '../common/common.js';
+import common, {
+  calculateMathMLDimensions,
+  hasKatex,
+  hasMarkdown,
+  calculateMarkdownDimensions,
+} from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import assignWithDepth from '../../assignWithDepth.js';
@@ -263,7 +274,11 @@ const drawNote = async function (elem: any, noteModel: NoteModel) {
   textObj.textMargin = conf.noteMargin;
   textObj.valign = 'center';
 
-  const textElem = hasKatex(textObj.text) ? await drawKatex(g, textObj) : drawText(g, textObj);
+  const textElem = hasKatex(textObj.text)
+    ? await drawKatex(g, textObj)
+    : hasMarkdown(textObj.text)
+      ? await drawMarkdown(g, textObj)
+      : drawText(g, textObj);
 
   const textHeight = Math.round(
     textElem
@@ -1354,10 +1369,12 @@ const buildNoteModel = async function (msg, actors, diagObj) {
 
   let textDimensions: { width: number; height: number; lineHeight?: number } = hasKatex(msg.message)
     ? await calculateMathMLDimensions(msg.message, getConfig())
-    : utils.calculateTextDimensions(
-        shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
-        noteFont(conf)
-      );
+    : hasMarkdown(msg.message)
+      ? await calculateMarkdownDimensions(msg.message, getConfig())
+      : utils.calculateTextDimensions(
+          shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
+          noteFont(conf)
+        );
   const noteModel = {
     width: shouldWrap
       ? conf.width
diff --git a/packages/mermaid/src/diagrams/sequence/styles.js b/packages/mermaid/src/diagrams/sequence/styles.js
index 5c36b4ed19..681f3b7b83 100644
--- a/packages/mermaid/src/diagrams/sequence/styles.js
+++ b/packages/mermaid/src/diagrams/sequence/styles.js
@@ -1,3 +1,5 @@
+/* spell-checker:disable */
+
 const getStyles = (options) =>
   `.actor {
     stroke: ${options.actorBorder};
@@ -115,6 +117,137 @@ const getStyles = (options) =>
     fill: ${options.actorBkg};
     stroke-width: 2px;
   }
+
+  .mermaid-markdown-note {
+    padding: 1em;
+  }
+
+  .mermaid-markdown-note p {
+    margin: 0;
+  }
+
+  .mermaid-markdown-note p > code {
+    background-color: #eee;
+    padding: 0.2em;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
+  }
+
+  .mermaid-markdown-note pre {
+    margin-top: 0;
+  }
+
+  .mermaid-markdown-note code {
+    background-color: #fff5f5;
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
+    border-radius: 4px;
+    margin: 0;
+    white-space: pre-wrap;
+  }
+
+  /*!
+    Theme: Default
+    Description: Original highlight.js style
+    Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+    Maintainer: @highlightjs/core-team
+    Website: https://highlightjs.org/
+    License: see project LICENSE
+    Touched: 2021
+  */
+
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  .hljs {
+    background: #f3f3f3;
+    color: #444
+  }
+
+  .hljs-comment {
+    color: #697070
+  }
+
+  .hljs-punctuation,
+  .hljs-tag {
+    color: #444a
+  }
+
+  .hljs-tag .hljs-attr,
+  .hljs-tag .hljs-name {
+    color: #444
+  }
+
+  .hljs-attribute,
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-name,
+  .hljs-selector-tag {
+    font-weight: 700
+  }
+
+  .hljs-deletion,
+  .hljs-number,
+  .hljs-quote,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-string,
+  .hljs-template-tag,
+  .hljs-type {
+    color: #800
+  }
+
+  .hljs-section,
+  .hljs-title {
+    color: #800;
+    font-weight: 700
+  }
+
+  .hljs-link,
+  .hljs-operator,
+  .hljs-regexp,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-symbol,
+  .hljs-template-variable,
+  .hljs-variable {
+    color: #ab5656
+  }
+
+  .hljs-literal {
+    color: #695
+  }
+
+  .hljs-addition,
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-code {
+    color: #397300
+  }
+
+  .hljs-meta {
+    color: #1f7199
+  }
+
+  .hljs-meta .hljs-string {
+    color: #38a
+  }
+
+  .hljs-emphasis {
+    font-style: italic
+  }
+
+  .hljs-strong {
+    font-weight: 700
+  }
+
 `;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 51968ef9fe..5a383207c1 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,4 +1,9 @@
-import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
+import common, {
+  calculateMathMLDimensions,
+  hasKatex,
+  renderKatex,
+  renderMarkdown,
+} from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
@@ -127,6 +132,51 @@ export const drawKatex = async function (elem, textData, msgModel = null) {
   return [textElem];
 };
 
+export const drawMarkdown = async function (elem, textData, msgModel = null) {
+  let textElem = elem.append('foreignObject');
+  const lines = await renderMarkdown(textData.text, configApi.getConfig());
+
+  const divElem = textElem
+    .append('xhtml:div')
+    .attr('xmlns', 'http://www.w3.org/1999/xhtml')
+    .attr('style', 'width: fit-content; padding-bottom: 0.05em;')
+    .html(lines);
+  const dim = divElem.node().getBoundingClientRect();
+  divElem.attr('class', 'mermaid-markdown-note');
+
+  const widthToUse = textData.width;
+  const heightToUse = dim.height;
+
+  textElem.attr('height', Math.round(heightToUse)).attr('width', Math.round(widthToUse));
+
+  if (textData.class === 'noteText') {
+    const rectElem = elem.node().firstChild;
+
+    rectElem.setAttribute('height', heightToUse + 2 * textData.textMargin);
+    const rectDim = rectElem.getBBox();
+
+    textElem
+      .attr('x', Math.round(rectDim.x + rectDim.width / 2 - widthToUse / 2))
+      .attr('y', Math.round(rectDim.y + rectDim.height / 2 - heightToUse / 2));
+  } else if (msgModel) {
+    let { startx, stopx, starty } = msgModel;
+    if (startx > stopx) {
+      const temp = startx;
+      startx = stopx;
+      stopx = temp;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - widthToUse / 2));
+    if (textData.class === 'loopText') {
+      textElem.attr('y', Math.round(starty));
+    } else {
+      textElem.attr('y', Math.round(starty - heightToUse));
+    }
+  }
+  return [textElem];
+};
+
 export const drawText = function (elem, textData) {
   let prevTextHeight = 0;
   let textHeight = 0;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8c2828a76..7a5fbf00b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,6 +131,9 @@ importers:
       globby:
         specifier: ^14.0.1
         version: 14.0.2
+      highlight.js:
+        specifier: ^11.10.0
+        version: 11.10.0
       husky:
         specifier: ^9.0.11
         version: 9.0.11
@@ -155,6 +158,12 @@ importers:
       markdown-table:
         specifier: ^3.0.3
         version: 3.0.3
+      marked:
+        specifier: ^14.0.0
+        version: 14.0.0
+      marked-highlight:
+        specifier: ^2.1.4
+        version: 2.1.4(marked@14.0.0)
       nyc:
         specifier: ^15.1.0
         version: 15.1.0
@@ -5878,6 +5887,10 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  highlight.js@11.10.0:
+    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
+    engines: {node: '>=12.0.0'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -6840,11 +6853,21 @@ packages:
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
+  marked-highlight@2.1.4:
+    resolution: {integrity: sha512-D1GOkcdzP+1dzjoColL7umojefFrASDuLeyaHS0Zr/Uo9jkr1V6vpLRCzfi1djmEaWyK0SYMFtHnpkZ+cwFT1w==}
+    peerDependencies:
+      marked: '>=4 <15'
+
   marked@13.0.2:
     resolution: {integrity: sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==}
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   marked@4.3.0:
     resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
     engines: {node: '>= 12'}
@@ -9959,7 +9982,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.25.2
       '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.23.1
+      browserslist: 4.23.3
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -16518,6 +16541,8 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
+  highlight.js@11.10.0: {}
+
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}
@@ -17694,8 +17719,14 @@ snapshots:
 
   markdown-table@3.0.3: {}
 
+  marked-highlight@2.1.4(marked@14.0.0):
+    dependencies:
+      marked: 14.0.0
+
   marked@13.0.2: {}
 
+  marked@14.0.0: {}
+
   marked@4.3.0: {}
 
   mdast-builder@1.1.1:

From 62b4fdd19e307988704decb989af9d22b812df28 Mon Sep 17 00:00:00 2001
From: Dennis Schaller <dennis.schaller@klarna.com>
Date: Fri, 9 Aug 2024 11:40:49 +0200
Subject: [PATCH 2/7] remove circular dependencies

---
 packages/mermaid/src/diagrams/common/common.ts |  8 +++-----
 packages/mermaid/src/utils.ts                  | 10 ++++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index ef23e7a3e4..c95c8b8a32 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -3,10 +3,8 @@ import hljs from 'highlight.js';
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
 import type { MermaidConfig } from '../../config.type.js';
-import { parseFontSize } from '../../utils.js';
-
-// Remove and ignore br:s
-export const lineBreakRegex = /<br\s*\/?>/gi;
+import { parseFontSize, lineBreakRegex } from '../../utils.js';
+import type { TextDimensionConfig } from '../../types.js';
 
 /**
  * Gets the rows of lines in a string
@@ -440,7 +438,7 @@ export const renderMarkdown = async (text: string): Promise<string> => {
 export const calculateMarkdownDimensions = async (text: string, config: TextDimensionConfig) => {
   const { fontSize = 12, fontFamily = 'Arial', fontWeight = 400 } = config;
   const [, _fontSizePx = '12px'] = parseFontSize(fontSize);
-  text = await renderMarkdown(text, config);
+  text = await renderMarkdown(text);
   const divElem = document.createElement('div');
   divElem.innerHTML = text;
   divElem.id = 'markdown-temp';
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 631b6dd851..95988aeb79 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -23,7 +23,6 @@ import {
   curveStepBefore,
   select,
 } from 'd3';
-import common from './diagrams/common/common.js';
 import { sanitizeDirective } from './utils/sanitizeDirective.js';
 import { log } from './logger.js';
 import { detectType } from './diagram-api/detectType.js';
@@ -34,6 +33,9 @@ import merge from 'lodash-es/merge.js';
 import { directiveRegex } from './diagram-api/regexes.js';
 import type { D3Element, Point, TextDimensionConfig, TextDimensions } from './types.js';
 
+// Remove and ignore br:s
+export const lineBreakRegex = /<br\s*\/?>/gi;
+
 export const ZERO_WIDTH_SPACE = '\u200b';
 
 // Effectively an enum of the supported curve types, accessible by name
@@ -522,7 +524,7 @@ export const drawSimpleText = function (
   }
 ): SVGTextElement {
   // Remove and ignore br:s
-  const nText = textData.text.replace(common.lineBreakRegex, ' ');
+  const nText = textData.text.replace(lineBreakRegex, ' ');
 
   const [, _fontSizePx] = parseFontSize(textData.fontSize);
 
@@ -564,7 +566,7 @@ export const wrapLabel: (label: string, maxWidth: number, config: WrapLabelConfi
         { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '<br/>' },
         config
       );
-      if (common.lineBreakRegex.test(label)) {
+      if (lineBreakRegex.test(label)) {
         return label;
       }
       const words = label.split(' ').filter(Boolean);
@@ -696,7 +698,7 @@ export const calculateTextDimensions: (
     // thus, we'll take the max width between the user supplied font family, and a default
     // of sans-serif.
     const fontFamilies = ['sans-serif', fontFamily];
-    const lines = text.split(common.lineBreakRegex);
+    const lines = text.split(lineBreakRegex);
     const dims = [];
 
     const body = select('body');

From 12d21ad4946fd7df59a07f23210492fc3c81454d Mon Sep 17 00:00:00 2001
From: Dennis Schaller <dennis.schaller@klarna.com>
Date: Fri, 9 Aug 2024 12:06:46 +0200
Subject: [PATCH 3/7] fix dependency issue and types

---
 package.json                                  |  3 --
 packages/mermaid/package.json                 |  4 ++-
 .../mermaid/src/diagrams/common/common.ts     | 36 +++++++++++--------
 .../src/diagrams/common/svgDrawCommon.ts      |  2 +-
 pnpm-lock.yaml                                | 26 +++++---------
 5 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index d2b15a623a..1ee2cff2d4 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,6 @@
     "express": "^4.19.1",
     "globals": "^15.4.0",
     "globby": "^14.0.1",
-    "highlight.js": "^11.10.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jison": "^0.4.18",
@@ -110,8 +109,6 @@
     "jsdom": "^24.0.0",
     "langium-cli": "3.0.3",
     "lint-staged": "^15.2.2",
-    "marked": "^14.0.0",
-    "marked-highlight": "^2.1.4",
     "markdown-table": "^3.0.3",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 585a29ce3e..5e7e6632a9 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -77,10 +77,12 @@
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.10",
     "dompurify": "^3.0.11",
+    "highlight.js": "^11.10.0",
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^13.0.2",
+    "marked": "^14.0.0",
+    "marked-highlight": "^2.1.4",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index c95c8b8a32..0d8fb795c3 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify';
 import hljs from 'highlight.js';
+import type { Token, Tokens } from 'marked';
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
 import type { MermaidConfig } from '../../config.type.js';
@@ -379,6 +380,10 @@ export const markdownRegex = /(```((.|\n)*)```)|(`(.*)`)/g;
  */
 export const hasMarkdown = (text: string): boolean => (text.match(markdownRegex)?.length ?? 0) > 0;
 
+function isCodeToken(animal: Token): animal is Tokens.Code {
+  return (animal as Tokens.Code).lang !== undefined;
+}
+
 /**
  * Attempts to render and return the markdown portion of a string with Marked
  *
@@ -405,21 +410,22 @@ export const renderMarkdown = async (text: string): Promise<string> => {
   marked.use({
     hooks: {
       processAllTokens: (tokens) =>
-        tokens.map((token) =>
-          token?.lang
-            ? token
-            : {
-                ...token,
-                lang: hljs.highlightAuto(token.text, [
-                  'json',
-                  'javascript',
-                  'typescript',
-                  'html',
-                  'xml',
-                  'java',
-                ]).language,
-              }
-        ),
+        tokens.map((token) => {
+          if (isCodeToken(token)) {
+            return {
+              ...token,
+              lang: hljs.highlightAuto(token.text, [
+                'json',
+                'javascript',
+                'typescript',
+                'html',
+                'xml',
+                'java',
+              ]).language,
+            };
+          }
+          return token;
+        }),
     },
   });
 
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 8d5ba3b7ca..79cb9ba94f 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -11,7 +11,7 @@ import type {
   TextData,
   TextObject,
 } from './commonTypes.js';
-import { lineBreakRegex } from './common.js';
+import { lineBreakRegex } from '../../utils.js';
 
 export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
   const rectElement: D3RectElement = element.append('rect');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a5fbf00b0..102785a092 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,9 +131,6 @@ importers:
       globby:
         specifier: ^14.0.1
         version: 14.0.2
-      highlight.js:
-        specifier: ^11.10.0
-        version: 11.10.0
       husky:
         specifier: ^9.0.11
         version: 9.0.11
@@ -158,12 +155,6 @@ importers:
       markdown-table:
         specifier: ^3.0.3
         version: 3.0.3
-      marked:
-        specifier: ^14.0.0
-        version: 14.0.0
-      marked-highlight:
-        specifier: ^2.1.4
-        version: 2.1.4(marked@14.0.0)
       nyc:
         specifier: ^15.1.0
         version: 15.1.0
@@ -236,6 +227,9 @@ importers:
       dompurify:
         specifier: ^3.0.11
         version: 3.1.6
+      highlight.js:
+        specifier: ^11.10.0
+        version: 11.10.0
       katex:
         specifier: ^0.16.9
         version: 0.16.11
@@ -246,8 +240,11 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       marked:
-        specifier: ^13.0.2
-        version: 13.0.2
+        specifier: ^14.0.0
+        version: 14.0.0
+      marked-highlight:
+        specifier: ^2.1.4
+        version: 2.1.4(marked@14.0.0)
       stylis:
         specifier: ^4.3.1
         version: 4.3.2
@@ -6858,11 +6855,6 @@ packages:
     peerDependencies:
       marked: '>=4 <15'
 
-  marked@13.0.2:
-    resolution: {integrity: sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==}
-    engines: {node: '>= 18'}
-    hasBin: true
-
   marked@14.0.0:
     resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
     engines: {node: '>= 18'}
@@ -17723,8 +17715,6 @@ snapshots:
     dependencies:
       marked: 14.0.0
 
-  marked@13.0.2: {}
-
   marked@14.0.0: {}
 
   marked@4.3.0: {}

From a7d5595ebf89f6f657d1d5cec985e0de085f9d2e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:11:55 +0000
Subject: [PATCH 4/7] [autofix.ci] apply automated fixes

---
 docs/config/setup/interfaces/mermaid.DetailedError.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaid.DetailedError.md b/docs/config/setup/interfaces/mermaid.DetailedError.md
index 3b019e58ad..107aebc1c3 100644
--- a/docs/config/setup/interfaces/mermaid.DetailedError.md
+++ b/docs/config/setup/interfaces/mermaid.DetailedError.md
@@ -16,7 +16,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
+[packages/mermaid/src/utils.ts:787](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L787)
 
 ---
 
@@ -26,7 +26,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/utils.ts:783](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L783)
+[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
 
 ---
 
@@ -36,7 +36,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/utils.ts:786](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L786)
+[packages/mermaid/src/utils.ts:788](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L788)
 
 ---
 
@@ -46,4 +46,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/utils.ts:781](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L781)
+[packages/mermaid/src/utils.ts:783](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L783)

From 44f72a9f5ca2921137fd2400b5398112db092463 Mon Sep 17 00:00:00 2001
From: Dennis Schaller <dennis.schaller@klarna.com>
Date: Fri, 16 Aug 2024 10:33:39 +0200
Subject: [PATCH 5/7] add possibility to use square brackets in markdown note

---
 demos/sequence.html                           |  8 +++--
 .../mermaid/src/diagrams/common/common.ts     |  1 +
 .../sequence/parser/sequenceDiagram.jison     | 30 ++++++++++++-------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/demos/sequence.html b/demos/sequence.html
index 4098f5fce0..becfdd3e3f 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -277,13 +277,14 @@ <h1>Sequence diagram demos</h1>
       }
       ```
       ]
-      Alice--xJohn: Awesome!
-      note right of John: [ This is some `markdown` text
+      John--xMaria: And you?
+      note over John,Maria: [ This is some `markdown` text
       ```json
       {
         "title": "This is a note",
         "subtitle": "A very pretty one",
-        "description": "This is a note with a description"
+        "description": "This is a note with a description",
+        "things": ["one", "two", "three"]
       }
       ```
       There can even be `more markdown`:
@@ -296,6 +297,7 @@ <h1>Sequence diagram demos</h1>
         }
       ```
       ]
+      Maria--xBob: I'm fine, thanks!
     </pre>
 
     <script type="module">
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 0d8fb795c3..39d680f879 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -407,6 +407,7 @@ export const renderMarkdown = async (text: string): Promise<string> => {
     })
   );
 
+  // make sure every code block has a language - design will look bad otherwise
   marked.use({
     hooks: {
       processAllTokens: (tokens) =>
diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
index 4596e55238..b37e15a3ac 100644
--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -22,9 +22,10 @@
 %x text
 %%
 
-<text>"]"                                   										{ this.popState(); return 'SQE'; }
-<text>[^\]]+                                                    { return 'SQC'; }
-<*>(":"\s*[\n\s]*\[)                  													{ this.pushState("text"); return 'SQS'; }
+<text>"]"                                   										{ this.counter--; if (this.counter === 0) {this.popState(); return 'MDE'; } return 'SQE'; }
+<text>"["                                                       { this.counter++; return 'SQS' }
+<text>[^\]\[]+                                                    { return 'MDC'; }
+<INITIAL>(":"\s*[\n\s]*\[)                  													{ this.pushState("text"); this.counter = 1; return 'MDS'; }
 [\n]+                                                           return 'NEWLINE';
 \s+                                                             /* skip all whitespace */
 <ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
@@ -248,24 +249,33 @@ note_statement
 		$2[0] = $2[0].actor;
 		$2[1] = $2[1].actor;
 		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];}
-	| 'note' placement actor SQS mdtext SQE 'NEWLINE'
+	| 'note' placement actor MDS mdtext MDE 'NEWLINE'
 	{
-		$$ = [$3, {type:'addNote', placement:$placement, actor:$actor.actor, text:$mdtext }];}
-	| 'note' 'over' actor_pair SQS mdtext SQE 'NEWLINE'
+		$$ = [$3, {type:'addNote', placement:$placement, actor:$actor.actor, text: $mdtext }];}
+	| 'note' 'over' actor_pair MDS mdtext MDE 'NEWLINE'
 	{
 		// Coerce actor_pair into a [to, from, ...] array
 		$2 = [].concat($3, $3).slice(0, 2);
 		$2[0] = $2[0].actor;
 		$2[1] = $2[1].actor;
-		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$mdtext}];}
+		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text: $mdtext}];}
 	;
 
 mdtext
-  : SQC
-  { $$ = {type: 'text', text: $SQC} }
+  : mdtext SQS mdtext SQE
+  {
+    $$ = {type: 'text', text: `${$1.text}[${$3.text}]`};
+  }
+  | mdtext MDC
+  {
+    $$ = {type: 'text', text: `${$1.text}${$2}`};
+  }
+  | MDC
+  {
+    $$ = {type: 'text', text: $1};
+  }
   ;
 
-
 links_statement
 	: 'links' actor text2
 	{

From 8c16a23044e772ce78085142056a46009f1d6c13 Mon Sep 17 00:00:00 2001
From: Dennis Schaller <dennis.schaller@klarna.com>
Date: Mon, 19 Aug 2024 10:26:03 +0200
Subject: [PATCH 6/7] add documentation and c2c test

---
 .../rendering/sequencediagram.spec.js         | 27 +++++++++++++
 demos/sequence.html                           |  4 +-
 docs/syntax/sequenceDiagram.md                | 39 +++++++++++++++++++
 .../src/docs/syntax/sequenceDiagram.md        | 23 +++++++++++
 4 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index f18e99abf8..ef1181c947 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -242,6 +242,33 @@ describe('Sequence diagram', () => {
       `
     );
   });
+  it('should render a sequence diagram with markdown notes', () => {
+    imgSnapshotTest(
+      `
+        sequenceDiagram
+        participant a as Alice
+        participant j as John
+        a->>j: Hello John, how are you?
+        note over a, j: [ This is a **bold** note
+          \`\`\`json
+          {
+            "name": "Alice",
+            "age": 30
+          }
+          \`\`\`
+        ]
+        j-->>a: Great!
+        note right of a:
+        [
+          This is another \`markdown\` note
+        ]
+      `,
+      {
+        logLevel: 0,
+        sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+      }
+    );
+  });
   describe('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
diff --git a/demos/sequence.html b/demos/sequence.html
index becfdd3e3f..242abcffb2 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -257,7 +257,7 @@ <h1>Sequence diagram demos</h1>
       actor Alice
       actor John
       Alice-xJohn: Hello John, how are you?
-      note over Alice,John: [ This is some `markdown` text
+      note over Alice,John: [ *This* is some `markdown` text
       ```json
       {
         "title": "This is a note",
@@ -287,7 +287,7 @@ <h1>Sequence diagram demos</h1>
         "things": ["one", "two", "three"]
       }
       ```
-      There can even be `more markdown`:
+      There can _even_ be `more markdown`:
       ```
         const note = "pretty";
         if (note === "pretty") {
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 0f0d632138..af2c1eb339 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -306,6 +306,45 @@ sequenceDiagram
     Note over Alice,John: A typical interaction
 ```
 
+## Markdown Notes (v10.8.0+)
+
+It is possible to use markdown in notes on sequence diagrams. This is done by the notation
+Note \[ right of | left of | over ] \[Actor]: \[ Markdown Text ]
+
+See the example below:
+
+````mermaid-example
+sequenceDiagram
+    participant John
+    Note right of John: [
+        This is some text which *will* be handled by _marked_ to support `markdown syntax`
+        ```json
+        {
+            "status": 200,
+            "data": [
+                { name: "John", age: 28 }
+            ]
+        }
+        ```
+    ]
+````
+
+````mermaid
+sequenceDiagram
+    participant John
+    Note right of John: [
+        This is some text which *will* be handled by _marked_ to support `markdown syntax`
+        ```json
+        {
+            "status": 200,
+            "data": [
+                { name: "John", age: 28 }
+            ]
+        }
+        ```
+    ]
+````
+
 ## Line breaks
 
 Line break can be added to Note and Message:
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 249f7bde03..44215856d7 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -207,6 +207,29 @@ sequenceDiagram
     Note over Alice,John: A typical interaction
 ```
 
+## Markdown Notes (v10.8.0+)
+
+It is possible to use markdown in notes on sequence diagrams. This is done by the notation
+Note [ right of | left of | over ] [Actor]: [ Markdown Text ]
+
+See the example below:
+
+````mermaid-example
+sequenceDiagram
+    participant John
+    Note right of John: [
+        This is some text which *will* be handled by _marked_ to support `markdown syntax`
+        ```json
+        {
+            "status": 200,
+            "data": [
+                { name: "John", age: 28 }
+            ]
+        }
+        ```
+    ]
+````
+
 ## Line breaks
 
 Line break can be added to Note and Message:

From 04732b9c7bc54c8f7384f6aefc8bc78099f5d712 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 19 Aug 2024 11:56:54 +0000
Subject: [PATCH 7/7] [autofix.ci] apply automated fixes

---
 docs/config/setup/interfaces/mermaid.Mermaid.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md
index a340c7a970..86bdbe8fab 100644
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@@ -147,7 +147,7 @@ Internal helpers for mermaid
 | `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |