Merge from Upstream

2025-09-15 05:19:58 +02:00 · 2024-08-27 14:21:46 +02:00
parent 1483e9245e 75f755b823
commit ba978e86ae
20 changed files with 587 additions and 374 deletions
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -1,5 +1,6 @@
 Adamiecki
 arrowend
+Bendpoints
 bmatrix
 braintree
 catmull
--- a/.cspell/misc-terms.txt
+++ b/.cspell/misc-terms.txt
@@ -4,3 +4,4 @@ handDrawn
 KOEPF
 neato
 newbranch
+validify
--- a/cypress/integration/rendering/newShapes.spec.ts
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -40,7 +40,28 @@ const newShapesSet5 = [
  'card',
  'shadedProcess',
 ] as const;
-const newShapesSet6 = ['curlyBraces'];
+
+const newShapesSet6 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const;
+
+const newShapesSet7 = ['forkJoin', 'choice', 'note', 'stadium'] as const;
+
+const newShapesSet8 = [
+  'question',
+  'hexagon',
+  'curlyBraces',
+  'multiRect',
+  'waveEdgedRectangle',
+] as const;
+
+const newShapesSet9 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const;
+
+const newShapesSet10 = [
+  'subroutine',
+  'cylinder',
+  'circle',
+  'doublecircle',
+  'rect_left_inv_arrow',
+] as const;

 // Aggregate all shape sets into a single array
 const newShapesSets = [
@@ -50,6 +71,10 @@ const newShapesSets = [
  newShapesSet4,
  newShapesSet5,
  newShapesSet6,
+  newShapesSet7,
+  newShapesSet8,
+  newShapesSet9,
+  newShapesSet10,
 ] as const;

 looks.forEach((look) => {
@@ -67,7 +92,7 @@ looks.forEach((look) => {
        it(`with label`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
          });
          imgSnapshotTest(flowchartCode, { look });
        });
@@ -75,7 +100,7 @@ looks.forEach((look) => {
        it(`connect all shapes with each other`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`;
+            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
          });
          for (let i = 0; i < newShapesSet.length; i++) {
            for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -88,7 +113,7 @@ looks.forEach((look) => {
        it(`with very long label`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
          });
          imgSnapshotTest(flowchartCode, { look });
        });
@@ -96,7 +121,7 @@ looks.forEach((look) => {
        it(`with markdown htmlLabels:true`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong>' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
          });
          imgSnapshotTest(flowchartCode, { look });
        });
@@ -104,7 +129,7 @@ looks.forEach((look) => {
        it(`with markdown htmlLabels:false`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong>' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
          });
          imgSnapshotTest(flowchartCode, {
            look,
@@ -116,7 +141,7 @@ looks.forEach((look) => {
        it(`with styles`, () => {
          let flowchartCode = `flowchart ${direction}\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
            flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
          });
          imgSnapshotTest(flowchartCode, { look });
@@ -126,7 +151,7 @@ looks.forEach((look) => {
          let flowchartCode = `flowchart ${direction}\n`;
          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
            flowchartCode += `  n${index}${index}:::customClazz\n`;
          });
          imgSnapshotTest(flowchartCode, { look });
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -73,7 +73,9 @@
        font-family: monospace;
        font-size: 72px;
      }
-
+      pre {
+        width: 100%;
+      }
      /* tspan {
              font-size: 6px !important;
            } */
@@ -88,17 +90,202 @@
  config:
    look: handDrawn
    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
+---
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph
+
+    %%
+    state "🟦 Importer" as author_importer
+    state "🟥 Supplier, Owner" as author_owner
+    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
+    state "🟩 Distributor" as repository_distributor
+    state "🟦 Importer" as language_importer
+    state "🟦🟨 Packager" as language_packager
+    state "🟦🟨 OSS Steward" as language_steward
+    state "🟨 Curator" as language_curator
+    state "🟩 Distributor" as language_distributor
+    state "🟦 Contributor" as contributor
+    state "🟦 Importer" as package_importer
+    state "🟨 Patcher" as package_patcher
+    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
+    state "🟨 Curator" as package_curator
+    state "🟩 Distributor" as package_distributor
+    state "🟦 Importer" as integrator_importer
+    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
+    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
+    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
+    state "🟦🟨 Builder" as integrator_builder
+    state "🟨 Deployer" as deployer
+    state "🟦 Vuln. Checker" as integrator_checker
+    state "🟩🟨 SBOM Redactor" as redactor
+    state "🟦 Consumer\n🟦  User" as consumer
+    state "🟦 Auditor" as auditor_internal
+    state "🟦 Auditor" as auditor_external
+
+    %%
+    classDef createsSBOM stroke:red,stroke-width:3px;
+    classDef updatesSBOM stroke:yellow,stroke-width:3px;
+    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
+    classDef distributesSBOM stroke:green,stroke-width:3px;
+    classDef verifiesSBOM stroke:#07f,stroke-width:3px;
+
+    %%
+    class author_importer verifiesSBOM
+    class author_owner createsSBOM
+    class manufacturer_owner createsSBOM
+    class author assemblesSBOM
+    class package_importer verifiesSBOM
+    class package_patcher updatesSBOM
+    class package_packager assemblesSBOM
+    class package_curator distributesSBOM
+    class package_distributor distributesSBOM
+    class language_importer verifiesSBOM
+    class language_packager assemblesSBOM
+    class language_steward updatesSBOM
+    class language_curator distributesSBOM
+    class language_distributor distributesSBOM
+    class repository_distributor distributesSBOM
+    class integrator_importer verifiesSBOM
+    class integrator_owner createsSBOM
+    class integrator_developer assemblesSBOM
+    class integrator_publisher distributesSBOM
+    class integrator_builder assemblesSBOM
+    class integrator_checker verifiesSBOM
+    class deployer assemblesSBOM
+    class redactor distributesSBOM
+    class auditor_internal verifiesSBOM
+    class auditor_external verifiesSBOM
+
+    state "Maintainer Environment" as environment_maintainer {
+        [*] --> author_importer
+        [*] --> author
+        author_importer --> author
+        author_owner --> author
+        author       --> language_packager
+    }
+
+    [*] --> environment_maintainer
+
+    state "Language Ecosystem" as ecosystem_lang {
+        [*] --> language_importer
+        [*] --> language_steward
+        [*] --> language_curator
+        [*] --> language_distributor
+        language_importer --> language_distributor
+        language_importer --> language_curator
+        language_steward --> language_curator
+        language_curator --> language_distributor
+    }
+
+    language_packager --> ecosystem_lang
+    ecosystem_lang    --> ecosystem_lang
+
+    state "Public Collaboration Ecosystem" as ecosystem_repo {
+        [*] --> repository_distributor
+    }
+
+    author         --> ecosystem_repo
+    ecosystem_repo --> author
+
+    repository_distributor --> contributor
+    contributor            --> repository_distributor
+
+    state "Package Ecosystem" as ecosystem_package {
+        [*] --> package_importer
+        [*] --> package_packager
+        [*] --> package_patcher
+        package_importer --> package_patcher
+        package_importer --> package_packager
+        package_patcher  --> package_packager
+        package_packager --> package_curator
+        package_packager --> package_distributor
+        package_curator  --> package_distributor
+    }
+
+    repository_distributor --> ecosystem_package
+    language_distributor   --> ecosystem_package
+    ecosystem_package      --> ecosystem_package
+
+    state "Integrator Environment" as environment_integrator {
+        [*] --> integrator_developer
+        [*] --> integrator_importer
+        integrator_importer  --> integrator_developer
+        integrator_owner     --> integrator_developer
+        integrator_builder   --> integrator_publisher
+        integrator_developer --> integrator_checker
+        integrator_checker   --> integrator_developer
+        auditor_internal     --> integrator_developer
+        integrator_developer --> integrator_builder
+        integrator_developer --> auditor_internal
+    }
+
+    repository_distributor --> environment_integrator
+    language_distributor   --> environment_integrator
+    package_distributor    --> environment_integrator
+
+    state "Production Environment" as environment_prod {
+        [*] --> deployer
+        deployer --> redactor
+    }
+
+    integrator_publisher --> [*]
+    integrator_developer --> environment_prod
+    integrator_builder   --> environment_prod
+    integrator_publisher --> environment_prod
+
+    deployer --> auditor_external
+    deployer --> consumer
+    redactor --> consumer
+
+
+
+</pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
    elk:
        nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart LR
-  A[Start] --Some text--> B(Continue)
-  B --> C{Evaluate}
-  C -- One --> D[Option 1]
-  C -- Two --> E[Option 2]
-  C -- Three --> F[fa:fa-car Option 3]
+stateDiagram-v2
+  A --> A
+  state A {
+    B --> D
+    state B {
+      C
+    }
+    state D {
+      E
+    }
+  }


+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart
+  A --> A
+  subgraph A
+    B --> B
+    subgraph B
+      C
+    end
+  end
+

 </pre
      >
@@ -196,7 +383,7 @@ flowchart TB
          messageFontFamily: 'courier',
        },
        fontSize: 12,
-        logLevel: 0,
+        logLevel: 3,
        securityLevel: 'loose',
      });
      function callback() {
--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -16,7 +16,7 @@

 #### Defined in

-[packages/mermaid/src/config.type.ts:112](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L112)
+[packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)

 ---

@@ -29,7 +29,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+[packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)

 ---

@@ -39,7 +39,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)

 ---

@@ -49,7 +49,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)

 ---

@@ -59,7 +59,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177)
+[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)

 ---

@@ -69,7 +69,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L103)
+[packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)

 ---

@@ -83,7 +83,7 @@ You can set this attribute to base the seed on a static string.

 #### Defined in

-[packages/mermaid/src/config.type.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L171)
+[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)

 ---

@@ -101,7 +101,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
+[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)

 ---

@@ -111,7 +111,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)

 ---

@@ -122,7 +122,8 @@ should not change unless content is changed.
 #### Type declaration

 | Name                     | Type                                                                                          | Description                                                                                                                                               |
-| :----------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :----------------------- | :-------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cycleBreakingStrategy?` | `"GREEDY"` \| `"DEPTH_FIRST"` \| `"INTERACTIVE"` \| `"MODEL_ORDER"` \| `"GREEDY_MODEL_ORDER"` | This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.                                            |
 | `mergeEdges?`            | `boolean`                                                                                     | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
 | `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"`                 | Elk specific option affecting how nodes are placed.                                                                                                       |

@@ -138,7 +139,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179)
+[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)

 ---

@@ -148,7 +149,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)

 ---

@@ -162,7 +163,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 #### Defined in

-[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
+[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)

 ---

@@ -172,7 +173,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 #### Defined in

-[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

 ---

@@ -186,7 +187,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)

 ---

@@ -196,7 +197,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)

 ---

@@ -206,7 +207,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)

 ---

@@ -228,7 +229,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 #### Defined in

-[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
+[packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)

 ---

@@ -238,7 +239,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 #### Defined in

-[packages/mermaid/src/config.type.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L175)
+[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)

 ---

@@ -265,7 +266,7 @@ fall back to legacy rendering for KaTeX.

 #### Defined in

-[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
+[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)

 ---

@@ -277,7 +278,7 @@ This option decides the amount of logging to be used by mermaid.

 #### Defined in

-[packages/mermaid/src/config.type.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L117)
+[packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)

 ---

@@ -299,7 +300,7 @@ Defines which main look to use for the diagram.

 #### Defined in

-[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)

 ---

@@ -333,7 +334,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)

 ---

@@ -343,7 +344,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)

 ---

@@ -353,7 +354,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180)
+[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)

 ---

@@ -363,7 +364,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)

 ---

@@ -373,7 +374,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)

 ---

@@ -383,7 +384,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)

 ---

@@ -397,7 +398,7 @@ This prevents malicious graph directives from overriding a site's default securi

 #### Defined in

-[packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138)
+[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)

 ---

@@ -409,7 +410,7 @@ Level of trust for parsed diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)

 ---

@@ -419,7 +420,7 @@ Level of trust for parsed diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
+[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)

 ---

@@ -431,7 +432,7 @@ Dictates whether mermaid starts on Page load

 #### Defined in

-[packages/mermaid/src/config.type.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L125)
+[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)

 ---

@@ -441,7 +442,7 @@ Dictates whether mermaid starts on Page load

 #### Defined in

-[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178)
+[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)

 ---

@@ -454,7 +455,7 @@ This is useful when you want to control how to handle syntax errors in your appl

 #### Defined in

-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+[packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)

 ---

@@ -497,7 +498,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L176)
+[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)

 ---

@@ -507,7 +508,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)

 ---

@@ -517,4 +518,4 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -752,14 +752,34 @@ export const render = async (
      'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy,
      'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges,
      'elk.direction': 'DOWN',
-      'spacing.baseValue': 30,
-      // 'spacing.nodeNode': 40,
-      // 'spacing.nodeNodeBetweenLayers': 45,
-      // 'spacing.edgeNode': 40,
-      // 'spacing.edgeNodeBetweenLayers': 30,
-      // 'spacing.edgeEdge': 30,
-      // 'spacing.edgeEdgeBetweenLayers': 40,
-      // 'spacing.nodeSelfLoop': 50,
+      'spacing.baseValue': 35,
+      'elk.layered.unnecessaryBendpoints': true,
+      'elk.layered.cycleBreaking.strategy': data4Layout.config.elk.cycleBreakingStrategy,
+      // 'spacing.nodeNode': 20,
+      // 'spacing.nodeNodeBetweenLayers': 25,
+      // 'spacing.edgeNode': 20,
+      // 'spacing.edgeNodeBetweenLayers': 10,
+      // 'spacing.edgeEdge': 10,
+      // 'spacing.edgeEdgeBetweenLayers': 20,
+      // 'spacing.nodeSelfLoop': 20,
+
+      // Tweaking options
+      // 'elk.layered.nodePlacement.favorStraightEdges': true,
+      // 'nodePlacement.feedbackEdges': true,
+      // 'elk.layered.wrapping.multiEdge.improveCuts': true,
+      // 'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
+      // 'elk.layered.wrapping.strategy': 'MULTI_EDGE',
+      // 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
+      // 'elk.layered.mergeHierarchyEdges': true,
+      // 'elk.layered.feedbackEdges': true,
+      // 'elk.layered.crossingMinimization.semiInteractive': true,
+      // 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
+      // 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
+      // 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
+      // 'elk.insideSelfLoops.activate': true,
+      // 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
+      // 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES
+      // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
    },
    children: [],
    edges: [],
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -99,6 +99,16 @@ export interface MermaidConfig {
     *
     */
    nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
+    /**
+     * This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
+     *
+     */
+    cycleBreakingStrategy?:
+      | 'GREEDY'
+      | 'DEPTH_FIRST'
+      | 'INTERACTIVE'
+      | 'MODEL_ORDER'
+      | 'GREEDY_MODEL_ORDER';
  };
  darkMode?: boolean;
  htmlLabels?: boolean;
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -28,7 +28,7 @@ import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js'
 import { getConfig } from '../../../diagram-api/diagramAPI.js';

 const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
-  log.info('Graph in recursive render: IPI', id, graphlibJson.write(graph), parentCluster);
+  log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
  const dir = graph.graph().rankdir;
  log.trace('Dir in recursive render - dir:', dir);

@@ -124,7 +124,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
          clusterDb.set(node.id, { id: findNonClusterChild(node.id, graph), node });
          // insertCluster(clusters, graph.node(v));
        } else {
-          log.trace('Node - the non recursive path XAX', v, node.id, node);
+          log.warn('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
          await insertNode(nodes, graph.node(v), dir);
        }
      }
@@ -305,12 +305,64 @@ export const render = async (data4Layout, svg) => {

  log.debug('Edges:', data4Layout.edges);
  data4Layout.edges.forEach((edge) => {
+    // Handle self-loops
+    if (edge.start === edge.end) {
+      const nodeId = edge.start;
+      const specialId1 = nodeId + '---' + nodeId + '---1';
+      const specialId2 = nodeId + '---' + nodeId + '---2';
+      const node = graph.node(nodeId);
+      graph.setNode(specialId1, {
+        domId: specialId1,
+        id: specialId1,
+        parentId: node.parentId,
+        labelStyle: '',
+        label: '',
+        padding: 0,
+        shape: 'labelRect',
+        // shape: 'rect',
+        style: '',
+        width: 10,
+        height: 10,
+      });
+      graph.setParent(specialId1, node.parentId);
+      graph.setNode(specialId2, {
+        domId: specialId2,
+        id: specialId2,
+        parentId: node.parentId,
+        labelStyle: '',
+        padding: 0,
+        // shape: 'rect',
+        shape: 'labelRect',
+        label: '',
+        style: '',
+        width: 10,
+        height: 10,
+      });
+      graph.setParent(specialId2, node.parentId);
+
+      const edge1 = structuredClone(edge);
+      const edgeMid = structuredClone(edge);
+      const edge2 = structuredClone(edge);
+      edge1.label = '';
+      edge1.arrowTypeEnd = 'none';
+      edge1.id = nodeId + '-cyclic-special-1';
+      edgeMid.arrowTypeEnd = 'none';
+      edgeMid.id = nodeId + '-cyclic-special-mid';
+      edge2.label = '';
+      edge1.fromCluster = nodeId;
+      edge2.toCluster = nodeId;
+      edge2.id = nodeId + '-cyclic-special-2';
+      graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
+      graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');
+      graph.setEdge(specialId2, nodeId, edge2, nodeId + '-cyc<lic-special-2');
+    } else {
      graph.setEdge(edge.start, edge.end, { ...edge }, edge.id);
+    }
  });

  log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
  adjustClustersAndEdges(graph);
-  log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
+  log.warn('Graph after XAX:', JSON.stringify(graphlibJson.write(graph)));
  const siteConfig = getConfig();
  await recursiveRender(
    element,
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
@@ -267,51 +267,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
      ' --- ',
      clusterDb.get(e.w)
    );
-    if (clusterDb.get(e.v) && clusterDb.get(e.w) && clusterDb.get(e.v) === clusterDb.get(e.w)) {
-      log.warn('Fixing and trying link to self - removing XXX', e.v, e.w, e.name);
-      log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
-      v = getAnchorId(e.v);
-      w = getAnchorId(e.w);
-      graph.removeEdge(e.v, e.w, e.name);
-      const specialId1 = e.w + '---' + e.v + '---1';
-      const specialId2 = e.w + '---' + e.v + '---2';
-      graph.setNode(specialId1, {
-        domId: specialId1,
-        id: specialId1,
-        labelStyle: '',
-        label: '',
-        padding: 0,
-        shape: 'labelRect',
-        style: '',
-        width: 10,
-        height: 10,
-      });
-      graph.setNode(specialId2, {
-        domId: specialId2,
-        id: specialId2,
-        labelStyle: '',
-        padding: 0,
-        shape: 'labelRect',
-        style: '',
-        width: 10,
-        height: 10,
-      });
-      const edge1 = structuredClone(edge);
-      const edgeMid = structuredClone(edge);
-      const edge2 = structuredClone(edge);
-      edge1.label = '';
-      edge1.arrowTypeEnd = 'none';
-      edge1.id = e.name + '-cyclic-special-1';
-      edgeMid.arrowTypeEnd = 'none';
-      edgeMid.id = e.name + '-cyclic-special-mid';
-      edge2.label = '';
-      edge1.fromCluster = e.v;
-      edge2.toCluster = e.v;
-      edge2.id = e.name + '-cyclic-special-2';
-      graph.setEdge(v, specialId1, edge1, e.name + '-cyclic-special-0');
-      graph.setEdge(specialId1, specialId2, edgeMid, e.name + '-cyclic-special-1');
-      graph.setEdge(specialId2, w, edge2, e.name + '-cyclic-special-2');
-    } else if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
+    if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
      log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
      v = getAnchorId(e.v);
      w = getAnchorId(e.w);
@@ -334,13 +290,6 @@ export const adjustClustersAndEdges = (graph, depth) => {
  extractor(graph, 0);

  log.trace(clusterDb);
-
-  // Remove references to extracted cluster
-  // graph.edges().forEach((edge) => {
-  //   if (isDescendant(edge.v, clusterId) || isDescendant(edge.w, clusterId)) {
-  //     graph.removeEdge(edge);
-  //   }
-  // });
 };

 export const extractor = (graph, depth) => {
@@ -441,7 +390,7 @@ export const extractor = (graph, depth) => {
  for (const node of nodes) {
    const data = graph.node(node);
    log.warn(' Now next level', node, data);
-    if (data.clusterNode) {
+    if (data?.clusterNode) {
      extractor(data.graph, depth + 1);
    }
  }
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -3,20 +3,17 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 // @ts-ignore TODO: Fix rough typings
 import rough from 'roughjs';
-import { solidStateFill, styles2String } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import { createPathFromPoints, getNodeClasses, labelHelper } from './util.js';

-export const choice = (parent: SVG, node: Node) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-  const { themeVariables } = getConfig();
-  const { lineColor } = themeVariables;
-  const shapeSvg = parent
-    .insert('g')
-    .attr('class', 'node default')
-    .attr('id', node.domId || node.id);
+export const choice = async (parent: SVG, node: Node) => {
+  const { nodeStyles } = styles2String(node);
+  node.label = '';
+  const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
+  const { cssStyles } = node;
+
+  const s = Math.max(28, node.width ?? 0);

-  const s = 28;
  const points = [
    { x: 0, y: s / 2 },
    { x: s / 2, y: 0 },
@@ -24,40 +21,34 @@ export const choice = (parent: SVG, node: Node) => {
    { x: -s / 2, y: 0 },
  ];

-  let choice;
-  if (node.look === 'handDrawn') {
  // @ts-ignore TODO: Fix rough typings
  const rc = rough.svg(shapeSvg);
-    const pointArr = points.map(function (d) {
-      return [d.x, d.y];
-    });
-    const roughNode = rc.polygon(pointArr, solidStateFill(lineColor));
-    choice = shapeSvg.insert(() => roughNode);
-  } else {
-    choice = shapeSvg.insert('polygon', ':first-child').attr(
-      'points',
-      points
-        .map(function (d) {
-          return d.x + ',' + d.y;
-        })
-        .join(' ')
-    );
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
  }

-  // center the circle around its coordinate
-  choice
-    .attr('class', 'state-start')
-    // @ts-ignore TODO: Fix rough typings
-    .attr('r', 7)
-    .attr('width', 28)
-    .attr('height', 28)
-    .attr('style', nodeStyles);
+  const choicePath = createPathFromPoints(points);
+  const roughNode = rc.path(choicePath, options);
+  const choiceShape = shapeSvg.insert(() => roughNode, ':first-child');
+
+  choiceShape.attr('class', 'basic label-container');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    choiceShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    choiceShape.selectAll('path').attr('style', nodeStyles);
+  }

  node.width = 28;
  node.height = 28;

  node.intersect = function (point) {
-    return intersect.circle(node, 14, point);
+    return intersect.polygon(node, points, point);
  };

  return shapeSvg;
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -109,7 +109,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {

  updateNodeBounds(node, cylinder);

-  label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height})`);
+  label.attr(
+    'transform',
+    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))})`
+  );

  node.intersect = function (point) {
    const pos = intersect.rect(node, point);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
@@ -1,62 +1,50 @@
-import { updateNodeBounds } from './util.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 import rough from 'roughjs';
-import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';

-export const forkJoin = (parent: SVG, node: Node, dir: string) => {
-  const { themeVariables } = getConfig();
-  const { lineColor } = themeVariables;
-  const shapeSvg = parent
-    .insert('g')
-    .attr('class', 'node default')
-    .attr('id', node.domId || node.id);
+export const forkJoin = async (parent: SVG, node: Node, dir: string) => {
+  const { nodeStyles } = styles2String(node);
+  node.label = '';
+  const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));

-  let width = 70;
-  let height = 10;
+  const { cssStyles } = node;
+  let width = Math.max(70, node?.width ?? 0);
+  let height = Math.max(10, node?.height ?? 0);

  if (dir === 'LR') {
-    width = 10;
-    height = 70;
+    width = Math.max(10, node?.width ?? 0);
+    height = Math.max(70, node?.height ?? 0);
  }
+
  const x = (-1 * width) / 2;
  const y = (-1 * height) / 2;

-  let shape;
-  if (node.look === 'handDrawn') {
  // @ts-ignore TODO: Fix rough typings
  const rc = rough.svg(shapeSvg);
-    const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));
-    shape = shapeSvg.insert(() => roughNode);
-  } else {
-    shape = shapeSvg
-      .append('rect')
-      .attr('x', x)
-      .attr('y', y)
-      .attr('width', width)
-      .attr('height', height)
-      .attr('class', 'fork-join');
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const roughNode = rc.rectangle(x, y, width, height, options);
+
+  const shape = shapeSvg.insert(() => roughNode, ':first-child');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    shape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    shape.selectAll('path').attr('style', nodeStyles);
  }

  updateNodeBounds(node, shape);
-  let nodeHeight = 0;
-  let nodeWidth = 0;
-  let nodePadding = 10;
-  if (node.height) {
-    nodeHeight = node.height;
-  }
-  if (node.width) {
-    nodeWidth = node.width;
-  }

-  if (node.padding) {
-    nodePadding = node.padding;
-  }
-
-  node.height = nodeHeight + nodePadding / 2;
-  node.width = nodeWidth + nodePadding / 2;
  node.intersect = function (point) {
    return intersect.rect(node, point);
  };
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,34 +8,37 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createInvertedTrapezoidPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x + height / 6},${y}`,
-    `L${x + width - height / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y - height}`,
-    `L${x - (2 * height) / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
+// export const createInvertedTrapezoidPathD = (
+//   x: number,
+//   y: number,
+//   width: number,
+//   height: number
+// ): string => {
+//   return [
+//     `M${x + height / 6},${y}`,
+//     `L${x + width - height / 6},${y}`,
+//     `L${x + width + (2 * height) / 6},${y - height}`,
+//     `L${x - (2 * height) / 6},${y - height}`,
+//     'Z',
+//   ].join(' ');
+// };

 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
-  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const w = bbox.width + labelPaddingY;
-  const h = bbox.height + labelPaddingX;
+  const nodePadding = node.padding ?? 0;
+  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding * 2;
+  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
+
+  const w = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
+  const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
+
  const points = [
-    { x: h / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: (-2 * h) / 6, y: -h },
+    { x: 0, y: 0 },
+    { x: w, y: 0 },
+    { x: w + (3 * h) / 6, y: -h },
+    { x: (-3 * h) / 6, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +48,8 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
+    // const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,34 +8,19 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createLeanLeftPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x + (2 * height) / 6},${y}`,
-    `L${x + width + height / 6},${y}`,
-    `L${x + width - (2 * height) / 6},${y - height}`,
-    `L${x - height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
-
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const w = bbox.width + labelPaddingY;
-  const h = bbox.height + labelPaddingX;
+  const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
+  const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
  const points = [
-    { x: (2 * h) / 6, y: 0 },
-    { x: w + h / 6, y: 0 },
-    { x: w - (2 * h) / 6, y: -h },
-    { x: -h / 6, y: -h },
+    { x: 0, y: 0 },
+    { x: w + (3 * h) / 6, y: 0 },
+    { x: w, y: -h },
+    { x: -(3 * h) / 6, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +30,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createLeanLeftPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
+    // const pathData = createLeanLeftPathD(0, 0, w, h);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,21 +8,6 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createLeanRightPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x - (2 * height) / 6},${y}`,
-    `L${x + width - height / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y - height}`,
-    `L${x + height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
-
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
@@ -30,13 +15,14 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE

  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const w = bbox.width + labelPaddingY;
-  const h = bbox.height + labelPaddingX;
+
+  const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
+  const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: -h },
-    { x: h / 6, y: -h },
+    { x: (-3 * h) / 6, y: 0 },
+    { x: w, y: 0 },
+    { x: w + (3 * h) / 6, y: -h },
+    { x: 0, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -46,7 +32,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createLeanRightPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -1,52 +1,46 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import rough from 'roughjs';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';

 export const note = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables, handDrawnSeed } = getConfig();
-  const { noteBorderColor, noteBkgColor } = themeVariables;
-
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
+  const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
+  const x = -totalWidth / 2;
+  const y = -totalHeight / 2;
+  const { cssStyles } = node;
  const useHtmlLabels = node.useHtmlLabels;
  if (!useHtmlLabels) {
    node.centerLabel = true;
  }
-  const { shapeSvg, bbox } = await labelHelper(parent, node, 'node ' + node.cssClasses);

  log.info('Classes = ', node.cssClasses);
-  const { cssStyles } = node;
-  let rect;
-  const totalWidth = bbox.width + node.padding;
-  const totalHeight = bbox.height + node.padding;
-  const x = -totalWidth / 2;
-  const y = -totalHeight / 2;
-
-  if (node.look === 'handDrawn') {
  // add the rect
  // @ts-ignore TODO: Fix rough typings
  const rc = rough.svg(shapeSvg);
-    const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
-      roughness: 0.7,
-      fill: noteBkgColor,
-      fillWeight: 3,
-      seed: handDrawnSeed,
-      // fillStyle: 'solid', // solid fill'
-      stroke: noteBorderColor,
-    });
+  const options = userNodeOverrides(node, {});

-    rect = shapeSvg.insert(() => roughNode, ':first-child');
-    rect.attr('class', 'basic label-container').attr('style', cssStyles);
-  } else {
-    rect = shapeSvg.insert('rect', ':first-child');
-    rect
-      .attr('rx', node.rx)
-      .attr('ry', node.ry)
-      .attr('x', x)
-      .attr('y', y)
-      .attr('width', totalWidth)
-      .attr('height', totalHeight);
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const noteShapeNode = rc.rectangle(x, y, totalWidth, totalHeight, options);
+
+  const rect = shapeSvg.insert(() => noteShapeNode, ':first-child');
+  rect.attr('class', 'basic label-container');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    rect.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    rect.selectAll('path').attr('style', nodeStyles);
  }

  updateNodeBounds(node, rect);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -6,18 +6,6 @@ import {
  userNodeOverrides,
 } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
-import { insertPolygonShape } from './insertPolygonShape.js';
-
-export const createPolygonPathD = (x: number, y: number, width: number, height: number): string => {
-  return [
-    `M${x - height / 2},${y}`,
-    `L${x + width},${y}`,
-    `L${x + width},${y - height}`,
-    `L${x - height / 2},${y - height}`,
-    `L${x},${y - height / 2}`,
-    'Z',
-  ].join(' ');
-};

 export const rect_left_inv_arrow = async (
  parent: SVGAElement,
@@ -28,42 +16,53 @@ export const rect_left_inv_arrow = async (
  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
  const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
  const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
-  const w = bbox.width + labelPaddingY;
-  const h = bbox.height + labelPaddingX;
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
+  const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
+
+  const x = -w / 2;
+  const y = -h / 2;
+  const notch = y / 2;
+
  const points = [
-    { x: -h / 2, y: 0 },
-    { x: w, y: 0 },
-    { x: w, y: -h },
-    { x: -h / 2, y: -h },
-    { x: 0, y: -h / 2 },
+    { x: x + notch, y },
+    { x: x, y: 0 },
+    { x: x + notch, y: -y },
+    { x: -x, y: -y },
+    { x: -x, y },
  ];

-  let polygon;
  const { cssStyles } = node;
-
-  if (node.look === 'handDrawn') {
  // @ts-ignore - rough is not typed
  const rc = rough.svg(shapeSvg);
  const options = userNodeOverrides(node, {});
-    const pathData = createPolygonPathD(0, 0, w, h);
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const pathData = createPathFromPoints(points);
  const roughNode = rc.path(pathData, options);

-    polygon = shapeSvg
-      .insert(() => roughNode, ':first-child')
-      .attr('transform', `translate(${-w / 2}, ${h / 2})`);
-    if (cssStyles) {
-      polygon.attr('style', cssStyles);
+  const polygon = shapeSvg.insert(() => roughNode, ':first-child');
+
+  polygon.attr('class', 'basic label-container');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    polygon.selectAll('path').attr('style', cssStyles);
  }
-  } else {
-    polygon = insertPolygonShape(shapeSvg, w, h, points);
+  if (nodeStyles && node.look !== 'handDrawn') {
+    polygon.selectAll('path').attr('style', nodeStyles);
  }

-  if (nodeStyles) {
-    polygon.attr('style', nodeStyles);
-  }
-  node.width = w + h;
-  node.height = h;
-
+  polygon.attr('transform', `translate(${-notch / 2},0)`);
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + -notch / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+  );
  updateNodeBounds(node, polygon);

  node.intersect = function (point) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -10,10 +10,10 @@ import rough from 'roughjs';
 export const shadedProcess = async (parent: SVGAElement, node: Node) => {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const halfPadding = (node?.padding || 0) / 2;
-  const w = bbox.width + node.padding;
-  const h = bbox.height + node.padding;
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const halfPadding = node?.padding ?? 0;
+  const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
+  const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
  const x = -bbox.width / 2 - halfPadding;
  const y = -bbox.height / 2 - halfPadding;

@@ -43,6 +43,11 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
    rect.selectAll('path').attr('style', nodeStyles);
  }

+  label.attr(
+    'transform',
+    `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
+  );
+
  updateNodeBounds(node, rect);

  node.intersect = function (point) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import {
@@ -8,20 +8,20 @@ import {
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';

-export const createTrapezoidPathD = (
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): string => {
-  return [
-    `M${x - (2 * height) / 6},${y}`,
-    `L${x + width + (2 * height) / 6},${y}`,
-    `L${x + width - height / 6},${y - height}`,
-    `L${x + height / 6},${y - height}`,
-    'Z',
-  ].join(' ');
-};
+// export const createTrapezoidPathD = (
+//   x: number,
+//   y: number,
+//   width: number,
+//   height: number
+// ): string => {
+//   return [
+//     `M${x - (2 * height) / 6},${y}`,
+//     `L${x + width + (2 * height) / 6},${y}`,
+//     `L${x + width - height / 6},${y - height}`,
+//     `L${x + height / 6},${y - height}`,
+//     'Z',
+//   ].join(' ');
+// };

 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
  const { labelStyles, nodeStyles } = styles2String(node);
@@ -32,10 +32,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
  const w = bbox.width + labelPaddingY;
  const h = bbox.height + labelPaddingX;
  const points = [
-    { x: (-2 * h) / 6, y: 0 },
-    { x: w + (2 * h) / 6, y: 0 },
-    { x: w - h / 6, y: -h },
-    { x: h / 6, y: -h },
+    { x: (-3 * h) / 6, y: 0 },
+    { x: w + (3 * h) / 6, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +45,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
    // @ts-ignore - rough is not typed
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
-    const pathData = createTrapezoidPathD(0, 0, w, h);
+    const pathData = createPathFromPoints(points);
    const roughNode = rc.path(pathData, options);

    polygon = shapeSvg
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -123,6 +123,17 @@ properties:
          - LINEAR_SEGMENTS
          - BRANDES_KOEPF
        default: BRANDES_KOEPF
+      cycleBreakingStrategy:
+        description: |
+          This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
+        type: string
+        enum:
+          - GREEDY
+          - DEPTH_FIRST
+          - INTERACTIVE
+          - MODEL_ORDER
+          - GREEDY_MODEL_ORDER
+        default: GREEDY_MODEL_ORDER
  darkMode:
    type: boolean
    default: false