Merge branch 'develop' of https://github.com/mermaid-js/mermaid into 6623-add-image-icons-support-to-sequence-diagram

fix: refactored image and icon test case files
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-27 00:44:08 +01:00 · 2025-09-16 15:03:02 +05:30 · 2025-08-25 15:34:30 +05:30 · 2025-08-25 15:21:24 +05:30 · 2025-08-14 12:58:24 +05:30 · 2025-08-14 12:49:43 +05:30
89 changed files with 6711 additions and 4579 deletions
--- a/.changeset/bumpy-shrimps-stay.md
+++ b/.changeset/bumpy-shrimps-stay.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add custom images and icons support for sequence diagram actors
--- a/.changeset/clean-wolves-turn.md
+++ b/.changeset/clean-wolves-turn.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Render newlines as spaces in class diagrams
--- a/.changeset/crazy-loops-matter.md
+++ b/.changeset/crazy-loops-matter.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Handle arrows correctly when auto number is enabled
--- a/.changeset/deep-pumas-run.md
+++ b/.changeset/deep-pumas-run.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-chore: Fix mindmap rendering in docs and apply tidytree layout
--- a/.changeset/deep-times-make.md
+++ b/.changeset/deep-times-make.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Add IDs in architecture diagrams
--- a/.changeset/hungry-baths-glow.md
+++ b/.changeset/hungry-baths-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
--- a/.changeset/hungry-guests-drive.md
+++ b/.changeset/hungry-guests-drive.md
@@ -0,0 +1,7 @@
+---
+'mermaid': minor
+'@mermaid-js/layout-tidy-tree': minor
+'@mermaid-js/layout-elk': minor
+---
+
+feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
--- a/.changeset/moody-fans-try.md
+++ b/.changeset/moody-fans-try.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Resolve gantt chart crash due to invalid array length
--- a/.changeset/seven-towns-obey.md
+++ b/.changeset/seven-towns-obey.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: Deprecate flowchart.htmlLabels in favor of root-level htmlLabels
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -36,7 +36,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
        with:
          config-file: ./.github/codeql/codeql-config.yml
          languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -53,7 +53,7 @@ jobs:
          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"

      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          start: pnpm run dev
--- a/.github/workflows/e2e-timings.yml
+++ b/.github/workflows/e2e-timings.yml
@@ -27,12 +27,12 @@ jobs:
        with:
          node-version-file: '.node-version'
      - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          runTests: false

      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          install: false
@@ -58,7 +58,7 @@ jobs:
          echo "EOF" >> $GITHUB_OUTPUT

      - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
+        uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
        with:
          add-paths: |
            cypress/timings.json
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -45,7 +45,7 @@ jobs:
          node-version-file: '.node-version'
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -59,7 +59,7 @@ jobs:

      - name: Install dependencies
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          # just perform install
          runTests: false
@@ -95,13 +95,13 @@ jobs:
      # These cached snapshots are downloaded, providing the reference snapshots.
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

      - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          runTests: false

@@ -117,7 +117,7 @@ jobs:
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          install: false
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -32,7 +32,7 @@ jobs:
      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2

      - name: Restore lychee cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -36,7 +36,7 @@ jobs:

      - name: Create Release Pull Request or Publish to npm
        id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
        with:
          version: pnpm changeset:version
          publish: pnpm changeset:publish
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@@ -20,18 +20,18 @@ jobs:
        with:
          persist-credentials: false
      - name: Run analysis
-        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
        with:
          results_file: results.sarif
          results_format: sarif
          publish_results: true
      - name: Upload artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
        with:
          name: SARIF file
          path: results.sarif
          retention-days: 5
      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
        with:
          sarif_file: results.sarif
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -19,7 +19,7 @@ jobs:
          message: 'chore: update browsers list'
          push: false
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
        with:
          branch: update-browserslist
          title: Update Browserslist
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -803,34 +803,4 @@ describe('Gantt diagram', () => {
      {}
    );
  });
-  it('should handle numeric timestamps with dateFormat x', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat x
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle numeric timestamps with dateFormat X', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat X
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
+++ b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
@@ -0,0 +1,118 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+const looks = ['classic'] as const;
+
+looks.forEach((look) => {
+  describe(`SequenceDiagram icon participants in ${look} look`, () => {
+    it(`single participant with icon`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        Note over Bob: Icon participant`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`two participants, one icon and one normal`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice
+        Bob->>Alice: Hello`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`two icon participants`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice@{ type: "icon", icon: "fa:user" }
+        Bob->>Alice: Hello
+        Alice-->>Bob: Hi`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with markdown htmlLabels:true content`, () => {
+      // html/markdown in messages/notes (participants themselves don't support label/form/w/h)
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice
+        Bob->>Alice: This is **bold** </br>and <strong>strong</strong>
+        Note over Bob,Alice: Mixed <em>HTML</em> and **markdown**`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with markdown htmlLabels:false content`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice
+        Bob->>Alice: This is **bold** </br>and <strong>strong</strong>`;
+      imgSnapshotTest(diagram, {
+        look,
+        htmlLabels: false,
+        flowchart: { htmlLabels: false },
+      });
+    });
+
+    it(`with styles applied to participant`, () => {
+      // style by participant id
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice
+        Bob->>Alice: Styled participant
+`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with classDef and class application`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "icon", icon: "fa:bell" }
+        participant Alice
+        Bob->>Alice: Classed participant
+`;
+      imgSnapshotTest(diagram, { look });
+    });
+  });
+});
+
+// Colored emoji icon tests (analogous to the flowchart colored icon tests), no direction line.
+describe('SequenceDiagram colored icon participant', () => {
+  it('colored emoji icon without styles', () => {
+    const icon = 'fluent-emoji:tropical-fish';
+    const diagram = `
+    sequenceDiagram
+      participant Bob@{ type: "icon", icon: "${icon}" }
+      Note over Bob: colored emoji icon
+`;
+    imgSnapshotTest(diagram);
+  });
+
+  it('colored emoji icon with styles', () => {
+    const icon = 'fluent-emoji:tropical-fish';
+    const diagram = `
+    sequenceDiagram
+      participant Bob@{ type: "icon", icon: "${icon}" }
+`;
+    imgSnapshotTest(diagram);
+  });
+});
+
+// Mixed scenario: multiple interactions, still no direction line.
+describe('SequenceDiagram icon participant with multiple interactions', () => {
+  const icon = 'fa:bell-slash';
+  it('icon participant interacts with two normal participants', () => {
+    const diagram = `
+    sequenceDiagram
+      participant Bob@{ type: "icon", icon: "${icon}" }
+      participant Alice
+      participant Carol
+      Bob->>Alice: Ping
+      Alice-->>Bob: Pong
+      Bob->>Carol: Notify
+      Note right of Bob: Icon side note`;
+    imgSnapshotTest(diagram);
+  });
+});
--- a/cypress/integration/rendering/sequenceDiagram-image.spec.ts
+++ b/cypress/integration/rendering/sequenceDiagram-image.spec.ts
@@ -0,0 +1,94 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+const looks = ['classic'] as const;
+
+looks.forEach((look) => {
+  describe(`SequenceDiagram image participants in ${look} look`, () => {
+    it(`single participant with image`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        Note over Bob: Image participant`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`two participants, one image and one normal`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: Hello`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`two image participants`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        Bob->>Alice: Hello
+        Alice-->>Bob: Hi`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with markdown htmlLabels:true content`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: This is **bold** </br>and <strong>strong</strong>
+        Note over Bob,Alice: Mixed <em>HTML</em> and **markdown**`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with markdown htmlLabels:false content`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: This is **bold** </br>and <strong>strong</strong>`;
+      imgSnapshotTest(diagram, {
+        look,
+        htmlLabels: false,
+        flowchart: { htmlLabels: false },
+      });
+    });
+
+    it(`with styles applied to participant`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: Styled participant
+`;
+      imgSnapshotTest(diagram, { look });
+    });
+
+    it(`with classDef and class application`, () => {
+      const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: Classed participant
+`;
+      imgSnapshotTest(diagram, { look });
+    });
+  });
+});
+
+// Mixed scenario: multiple interactions, still no direction line.
+describe('SequenceDiagram image participant with multiple interactions', () => {
+  const imageUrl = 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg';
+  it('image participant interacts with two normal participants', () => {
+    const diagram = `
+      sequenceDiagram
+        participant Bob@{ type: "image", "image": "${imageUrl}" }
+        participant Alice
+        participant Carol
+        Bob->>Alice: Ping
+        Alice-->>Bob: Pong
+        Bob->>Carol: Notify
+        Note right of Bob: Image side note`;
+    imgSnapshotTest(diagram);
+  });
+});
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,7 @@
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020", "dom"],
-    "types": ["cypress", "node", "@argos-ci/cypress/support"],
+    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
    "allowImportingTsExtensions": true,
    "noEmit": true
  },
--- a/demos/er-multiline.html
+++ b/demos/er-multiline.html
@@ -11,7 +11,7 @@
      rel="stylesheet"
    />
    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      rel="stylesheet"
    />
    <link
--- a/docs/community/contributing.md
+++ b/docs/community/contributing.md
@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-

 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.

-> **💡 Tip**
-> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).

 ```bash
 git clone git@github.com/your-fork/mermaid
--- a/docs/community/intro.md
+++ b/docs/community/intro.md
@@ -33,8 +33,7 @@ mindmap

 ## Join the Development

-> **💡 Tip**
-> **Check out our** [**detailed contribution guide**](./contributing.md).
+> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).

 Where to start:

@@ -48,8 +47,7 @@ Where to start:

 ## A Question Or a Suggestion?

-> **💡 Tip**
-> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
+> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).

 If you have faced a vulnerability [report it to us](./security.md).

--- a/docs/config/directives.md
+++ b/docs/config/directives.md
@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.

 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
   - theme
   - fontFamily
   - logLevel
@@ -236,27 +237,22 @@ A --> C[End]

 Some common flowchart configurations are:

+- _htmlLabels_: true/false
 - _curve_: linear/curve
 - _diagramPadding_: number
 - _useMaxWidth_: number

-**Deprecated configurations:**
-
- ~~_htmlLabels_~~: Use global `htmlLabels` instead
-
 For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._

 The following code snippet changes flowchart config:

-```
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
-```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`

-**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
+Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.

 ```mermaid-example
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]
@@ -267,7 +263,7 @@ A --> C[End]
 ```

 ```mermaid
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]
--- a/docs/config/setup/config/README.md
+++ b/docs/config/setup/config/README.md
@@ -18,7 +18,6 @@

 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
- [getEffectiveHtmlLabels](functions/getEffectiveHtmlLabels.md)
 - [getSiteConfig](functions/getSiteConfig.md)
 - [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)
--- a/docs/config/setup/config/functions/getEffectiveHtmlLabels.md
+++ b/docs/config/setup/config/functions/getEffectiveHtmlLabels.md
@@ -1,29 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getEffectiveHtmlLabels.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getEffectiveHtmlLabels.md).
-
-[**mermaid**](../../README.md)
-
---
-
-# Function: getEffectiveHtmlLabels()
-
-> **getEffectiveHtmlLabels**(`config`): `boolean`
-
-Defined in: [packages/mermaid/src/config.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L272)
-
-Helper function to handle deprecated flowchart.htmlLabels
-
-## Parameters
-
-### config
-
-[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
-
-The configuration object
-
-## Returns
-
-`boolean`
--- a/docs/config/setup/config/functions/getUserDefinedConfig.md
+++ b/docs/config/setup/config/functions/getUserDefinedConfig.md
@@ -12,7 +12,7 @@

 > **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

-Defined in: [packages/mermaid/src/config.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L254)
+Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)

 ## Returns

--- a/docs/config/setup/mermaid/interfaces/ParseOptions.md
+++ b/docs/config/setup/mermaid/interfaces/ParseOptions.md
@@ -10,7 +10,7 @@

 # Interface: ParseOptions

-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer

 > `optional` **suppressErrors**: `boolean`

-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)

 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.
--- a/docs/config/setup/mermaid/interfaces/ParseResult.md
+++ b/docs/config/setup/mermaid/interfaces/ParseResult.md
@@ -10,7 +10,7 @@

 # Interface: ParseResult

-Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer

 > **config**: [`MermaidConfig`](MermaidConfig.md)

-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:92](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L92)

 The config passed as YAML frontmatter or directives

@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives

 > **diagramType**: `string`

-Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)

 The diagram type, e.g. 'flowchart', 'sequence', etc.
--- a/docs/config/setup/mermaid/interfaces/RenderResult.md
+++ b/docs/config/setup/mermaid/interfaces/RenderResult.md
@@ -10,7 +10,7 @@

 # Interface: RenderResult

-Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me

 > `optional` **bindFunctions**: (`element`) => `void`

-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L120)

 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 > **diagramType**: `string`

-Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L110)

 The diagram type, e.g. 'flowchart', 'sequence', etc.

@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 > **svg**: `string`

-Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)

 The svg code for the rendered graph.
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -372,7 +372,7 @@ The list of configuration objects are described [in the mermaidAPI documentation
 ```html
 <script type="module">
  import mermaid from './mermaid.esm.mjs';
-  let config = { startOnLoad: true, htmlLabels: true, flowchart: { useMaxWidth: false } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
  mermaid.initialize(config);
 </script>
 ```
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 - **Plugins** - A plugin system for extending the functionality of Mermaid.

  Official Mermaid Chart plugins:
+
  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
  - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
  - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
 Learn more:

 - Visual Editor For Flowcharts
+
  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)

  - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)

 - Visual Editor For Sequence diagrams
+
  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)

  - [Demo video](https://youtu.be/imc2u5_N6Dc)
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,18 +6,6 @@

 # Blog

-## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
-
-9/9/2025 • 5 mins
-
-Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
-
-## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
-
-7/22/2025 • 8 mins
-
-In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
-
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)

 7/15/2025 • 7 mins
--- a/docs/syntax/architecture.md
+++ b/docs/syntax/architecture.md
@@ -194,7 +194,7 @@ architecture-beta
 ## Icons

 By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
-Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
+Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).

 After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.

--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term.
 - [ ] Legend

 - [x] System Context
+
  - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
  - [x] Person_Ext
  - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term.
  - [x] System_Boundary

 - [x] Container diagram
+
  - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] ContainerDb
  - [x] ContainerQueue
@@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term.
  - [x] Container_Boundary(alias, label, ?tags, $link)

 - [x] Component diagram
+
  - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] ComponentDb
  - [x] ComponentQueue
@@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term.
  - [x] ComponentQueue_Ext

 - [x] Dynamic diagram
+
  - [x] RelIndex(index, from, to, label, ?tags, $link)

 - [x] Deployment diagram
+
  - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
  - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
  - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
  - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()

 - [x] Relationship Types
+
  - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] BiRel (bidirectional relationship)
  - [x] Rel_U, Rel_Up
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -360,8 +360,7 @@ gantt
  weekday monday
 ```

-> **Warning**
-> `millisecond` and `second` support was added in v10.3.0
+> **Warning** > `millisecond` and `second` support was added in v10.3.0

 ## Output in compact mode

--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -194,6 +194,46 @@ sequenceDiagram
    Bob->>Alice: Queue response
 ```

+### Icon
+
+If you want to use a custom icon for a participant, use the JSON configuration syntax as shown below. The `icon` value can be a FontAwesome icon name, emoji, or other supported icon identifier.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "icon", "icon": "fa:bell" }
+    participant Bob
+    Alice->>Bob: Icon participant
+    Bob->>Alice: Response to icon
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "icon", "icon": "fa:bell" }
+    participant Bob
+    Alice->>Bob: Icon participant
+    Bob->>Alice: Response to icon
+```
+
+### Image
+
+If you want to use a custom image for a participant, use the JSON configuration syntax as shown below. The `image` value should be a valid image URL.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+    participant Bob
+    Alice->>Bob: Image participant
+    Bob->>Alice: Response to image
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+    participant Bob
+    Alice->>Bob: Image participant
+    Bob->>Alice: Response to image
+```
+
 ### Aliases

 The actor can have a convenient identifier and a descriptive label.
--- a/package.json
+++ b/package.json
@@ -63,36 +63,36 @@
    ]
  },
  "devDependencies": {
-    "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.1",
+    "@applitools/eyes-cypress": "^3.44.9",
+    "@argos-ci/cypress": "^5.0.2",
    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
+    "@changesets/cli": "^2.27.12",
    "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.14.6",
+    "@cypress/code-coverage": "^3.12.49",
    "@eslint/js": "^9.26.0",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.3",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
    "@types/js-yaml": "^4.0.9",
    "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.20",
+    "@types/lodash": "^4.17.15",
    "@types/mdast": "^4.0.4",
-    "@types/node": "^22.18.6",
+    "@types/node": "^22.13.5",
    "@types/rollup-plugin-visualizer": "^5.0.3",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/spy": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/coverage-v8": "^3.0.6",
+    "@vitest/spy": "^3.0.6",
+    "@vitest/ui": "^3.0.6",
    "ajv": "^8.17.1",
    "chokidar": "3.6.0",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
    "cors": "^2.8.5",
    "cpy-cli": "^5.0.0",
    "cross-env": "^7.0.3",
-    "cspell": "^9.2.1",
-    "cypress": "^14.5.4",
+    "cspell": "^9.1.3",
+    "cypress": "^14.5.1",
    "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.23",
-    "esbuild": "^0.25.10",
+    "cypress-split": "^1.24.14",
+    "esbuild": "^0.25.0",
    "eslint": "^9.26.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-cypress": "^4.3.0",
@@ -106,30 +106,30 @@
    "eslint-plugin-tsdoc": "^0.4.0",
    "eslint-plugin-unicorn": "^59.0.1",
    "express": "^5.1.0",
-    "globals": "^16.4.0",
-    "globby": "^14.1.0",
+    "globals": "^16.0.0",
+    "globby": "^14.0.2",
    "husky": "^9.1.7",
-    "jest": "^30.1.3",
+    "jest": "^30.0.4",
    "jison": "^0.4.18",
    "js-yaml": "^4.1.0",
    "jsdom": "^26.1.0",
    "langium-cli": "3.3.0",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.1.2",
    "markdown-table": "^3.0.4",
    "nyc": "^17.1.0",
    "path-browserify": "^1.0.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-jsdoc": "^1.3.3",
+    "prettier": "^3.5.2",
+    "prettier-plugin-jsdoc": "^1.3.2",
    "rimraf": "^6.0.1",
    "rollup-plugin-visualizer": "^6.0.3",
-    "start-server-and-test": "^2.1.2",
+    "start-server-and-test": "^2.0.10",
    "tslib": "^2.8.1",
-    "tsx": "^4.20.5",
+    "tsx": "^4.7.3",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.7",
+    "vite": "^7.0.3",
    "vite-plugin-istanbul": "^7.0.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.0.6"
  },
  "nyc": {
    "report-dir": "coverage/cypress"
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -37,12 +37,12 @@
    ]
  },
  "dependencies": {
-    "@braintree/sanitize-url": "^7.1.1",
+    "@braintree/sanitize-url": "^7.0.4",
    "d3": "^7.9.0",
    "khroma": "^2.1.0"
  },
  "devDependencies": {
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
    "mermaid": "workspace:*",
    "rimraf": "^6.0.1"
  },
--- a/packages/mermaid-layout-elk/CHANGELOG.md
+++ b/packages/mermaid-layout-elk/CHANGELOG.md
@@ -1,16 +1,5 @@
 # @mermaid-js/layout-elk

-## 0.2.0
-
-### Minor Changes
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
-  - mermaid@11.11.0
-
 ## 0.1.9

 ### Patch Changes
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.2.0",
+  "version": "0.1.9",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid-layout-tidy-tree/CHANGELOG.md
+++ b/packages/mermaid-layout-tidy-tree/CHANGELOG.md
@@ -1,12 +0,0 @@
-# @mermaid-js/layout-tidy-tree
-
-## 0.2.0
-
-### Minor Changes
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
-  - mermaid@11.11.0
--- a/packages/mermaid-layout-tidy-tree/package.json
+++ b/packages/mermaid-layout-tidy-tree/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-tidy-tree",
-  "version": "0.2.0",
+  "version": "0.1.0",
  "description": "Tidy-tree layout engine for mermaid",
  "module": "dist/mermaid-layout-tidy-tree.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "@zenuml/core": "^3.41.4"
+    "@zenuml/core": "^3.35.2"
  },
  "devDependencies": {
    "mermaid": "workspace:^"
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,19 +1,5 @@
 # mermaid

-## 11.11.0
-
-### Minor Changes
-
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
-
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
-
 ## 11.10.0

 ### Minor Changes
@@ -168,6 +154,7 @@
 ### Minor Changes

 - [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
+
  - Config
  - Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
  - LinkStyle command (linkStyle default interpolate ...)
@@ -186,12 +173,14 @@
 ### Minor Changes

 - [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
+
  - Incorrect label mapping for nodes when using `&`
  - Syntax error when `}` with trailing spaces before new line

 - [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges

 - [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
+
  - Added support for directions
  - Added support for hand drawn look

--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.10.0",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -67,29 +67,29 @@
    ]
  },
  "dependencies": {
-    "@braintree/sanitize-url": "^7.1.1",
-    "@iconify/utils": "^3.0.2",
+    "@braintree/sanitize-url": "^7.0.4",
+    "@iconify/utils": "^3.0.1",
    "@mermaid-js/parser": "workspace:^",
    "@types/d3": "^7.4.3",
-    "cytoscape": "^3.33.1",
+    "cytoscape": "^3.29.3",
    "cytoscape-cose-bilkent": "^4.1.0",
    "cytoscape-fcose": "^2.2.0",
    "d3": "^7.9.0",
    "d3-sankey": "^0.12.3",
    "dagre-d3-es": "7.0.11",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.13",
    "dompurify": "^3.2.5",
    "katex": "^0.16.22",
    "khroma": "^2.1.0",
    "lodash-es": "^4.17.21",
-    "marked": "^16.3.0",
+    "marked": "^16.0.0",
    "roughjs": "^4.6.6",
    "stylis": "^4.3.6",
    "ts-dedent": "^2.2.0",
    "uuid": "^11.1.0"
  },
  "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.5",
+    "@adobe/jsonschema2md": "^8.0.2",
    "@iconify/types": "^2.0.0",
    "@types/cytoscape": "^3.21.9",
    "@types/cytoscape-fcose": "^2.2.4",
@@ -105,30 +105,30 @@
    "@types/stylis": "^4.2.7",
    "@types/uuid": "^10.0.0",
    "ajv": "^8.17.1",
-    "canvas": "^3.2.0",
+    "canvas": "^3.1.0",
    "chokidar": "3.6.0",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
    "csstree-validator": "^4.0.1",
-    "globby": "^14.1.0",
+    "globby": "^14.0.2",
    "jison": "^0.4.18",
-    "js-base64": "^3.7.8",
+    "js-base64": "^3.7.7",
    "jsdom": "^26.1.0",
    "json-schema-to-typescript": "^15.0.4",
    "micromatch": "^4.0.8",
    "path-browserify": "^1.0.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.5.2",
    "remark": "^15.0.1",
    "remark-frontmatter": "^5.0.0",
    "remark-gfm": "^4.0.1",
    "rimraf": "^6.0.1",
-    "start-server-and-test": "^2.1.2",
-    "type-fest": "^4.41.0",
-    "typedoc": "^0.28.13",
-    "typedoc-plugin-markdown": "^4.8.1",
+    "start-server-and-test": "^2.0.10",
+    "type-fest": "^4.35.0",
+    "typedoc": "^0.28.9",
+    "typedoc-plugin-markdown": "^4.8.0",
    "typescript": "~5.7.3",
    "unist-util-flatmap": "^1.0.0",
    "unist-util-visit": "^5.0.0",
-    "vitepress": "^1.6.4",
+    "vitepress": "^1.0.2",
    "vitepress-plugin-search": "1.0.4-alpha.22"
  },
  "files": [
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -227,8 +227,6 @@ export const reset = (config = siteConfig): void => {
 const ConfigWarning = {
  LAZY_LOAD_DEPRECATED:
    'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
-  FLOWCHART_HTML_LABELS_DEPRECATED:
-    'flowchart.htmlLabels is deprecated. Please use global htmlLabels instead.',
 } as const;

 type ConfigWarningStrings = keyof typeof ConfigWarning;
@@ -264,15 +262,3 @@ export const getUserDefinedConfig = (): MermaidConfig => {

  return userConfig;
 };
-
-/**
- * Helper function to handle deprecated flowchart.htmlLabels
- * @param config - The configuration object
- */
-export const getEffectiveHtmlLabels = (config: MermaidConfig): boolean => {
-  if (config.flowchart?.htmlLabels !== undefined) {
-    issueWarning('FLOWCHART_HTML_LABELS_DEPRECATED');
-  }
-
-  return config.htmlLabels ?? config.flowchart?.htmlLabels ?? true;
-};
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -248,12 +248,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   */
  diagramPadding?: number;
  /**
-   * @deprecated
-   * **DEPRECATED: Use global `htmlLabels` instead.**
-   *
-   * Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges.
-   * This property is deprecated.
-   * Please use the global `htmlLabels` configuration instead.
+   * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
   *
   */
  htmlLabels?: boolean;
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -4,8 +4,7 @@ import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../config.js';
-
+import { evaluate } from '../diagrams/common/common.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';

 const rect = async (parent, node) => {
@@ -21,7 +20,7 @@ const rect = async (parent, node) => {
  // add the rect
  const rect = shapeSvg.insert('rect', ':first-child');

-  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);

  // Create the label and insert it after the rect
  const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -39,7 +38,7 @@ const rect = async (parent, node) => {
  // Get the size of the label
  let bbox = text.getBBox();

-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
@@ -151,7 +150,7 @@ const roundedWithTitle = async (parent, node) => {

  // Get the size of the label
  let bbox = text.getBBox();
-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
@@ -191,7 +190,7 @@ const roundedWithTitle = async (parent, node) => {
      node.y -
      node.height / 2 -
      node.padding / 3 +
-      (getEffectiveHtmlLabels(siteConfig) ? 5 : 3) +
+      (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3) +
      subGraphTitleTopMargin
    })`
  );
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -1,7 +1,6 @@
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../config.js';
-import { sanitizeText } from '../diagrams/common/common.js';
+import { evaluate, sanitizeText } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
 import { replaceIconSubstring } from '../rendering-util/createText.js';
 import { decodeEntities } from '../utils.js';
@@ -51,7 +50,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
    vertexText = vertexText[0];
  }
  const config = getConfig();
-  if (getEffectiveHtmlLabels(config)) {
+  if (evaluate(config.flowchart.htmlLabels)) {
    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
    vertexText = vertexText.replace(/\\n|\n/g, '<br />');
    log.debug('vertexText' + vertexText);
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -3,9 +3,8 @@ import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../config.js';
 import utils from '../utils.js';
-import { getUrl } from '../diagrams/common/common.js';
+import { evaluate, getUrl } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.js';
@@ -20,7 +19,7 @@ export const clear = () => {

 export const insertEdgeLabel = async (elem, edge) => {
  const config = getConfig();
-  const useHtmlLabels = getEffectiveHtmlLabels(config);
+  const useHtmlLabels = evaluate(config.flowchart.htmlLabels);
  // Create the actual text element
  const labelElement =
    edge.labelType === 'markdown'
@@ -134,7 +133,7 @@ export const insertEdgeLabel = async (elem, edge) => {
 * @param {any} value
 */
 function setTerminalWidth(fo, value) {
-  if (getEffectiveHtmlLabels(getConfig()) && fo) {
+  if (getConfig().flowchart.htmlLabels && fo) {
    fo.style.width = value.length * 9 + 'px';
    fo.style.height = '12px';
  }
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1,7 +1,6 @@
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../config.js';
-
+import { evaluate } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
 import { getArrowPoints } from './blockArrowHelper.js';
 import createLabel from './createLabel.js';
@@ -589,7 +588,7 @@ const rectWithTitle = async (parent, node) => {

  const text = label.node().appendChild(await createLabel(title, node.labelStyle, true, true));
  let bbox = { width: 0, height: 0 };
-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
@@ -610,7 +609,7 @@ const rectWithTitle = async (parent, node) => {
      )
    );

-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
    const div = descr.children[0];
    const dv = select(descr);
    bbox = div.getBoundingClientRect();
@@ -918,7 +917,7 @@ const class_box = async (parent, node) => {
    .node()
    .appendChild(await createLabel(interfaceLabelText, node.labelStyle, true, true));
  let interfaceBBox = interfaceLabel.getBBox();
-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
    const div = interfaceLabel.children[0];
    const dv = select(interfaceLabel);
    interfaceBBox = div.getBoundingClientRect();
@@ -933,7 +932,7 @@ const class_box = async (parent, node) => {
  let classTitleString = node.classData.label;

  if (node.classData.type !== undefined && node.classData.type !== '') {
-    if (getEffectiveHtmlLabels(getConfig())) {
+    if (getConfig().flowchart.htmlLabels) {
      classTitleString += '&lt;' + node.classData.type + '&gt;';
    } else {
      classTitleString += '<' + node.classData.type + '>';
@@ -944,7 +943,7 @@ const class_box = async (parent, node) => {
    .appendChild(await createLabel(classTitleString, node.labelStyle, true, true));
  select(classTitleLabel).attr('class', 'classTitle');
  let classTitleBBox = classTitleLabel.getBBox();
-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
    const div = classTitleLabel.children[0];
    const dv = select(classTitleLabel);
    classTitleBBox = div.getBoundingClientRect();
@@ -959,7 +958,7 @@ const class_box = async (parent, node) => {
  node.classData.members.forEach(async (member) => {
    const parsedInfo = member.getDisplayDetails();
    let parsedText = parsedInfo.displayText;
-    if (getEffectiveHtmlLabels(getConfig())) {
+    if (getConfig().flowchart.htmlLabels) {
      parsedText = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
    const lbl = labelContainer
@@ -973,7 +972,7 @@ const class_box = async (parent, node) => {
        )
      );
    let bbox = lbl.getBBox();
-    if (getEffectiveHtmlLabels(getConfig())) {
+    if (evaluate(getConfig().flowchart.htmlLabels)) {
      const div = lbl.children[0];
      const dv = select(lbl);
      bbox = div.getBoundingClientRect();
@@ -993,7 +992,7 @@ const class_box = async (parent, node) => {
  node.classData.methods.forEach(async (member) => {
    const parsedInfo = member.getDisplayDetails();
    let displayText = parsedInfo.displayText;
-    if (getEffectiveHtmlLabels(getConfig())) {
+    if (getConfig().flowchart.htmlLabels) {
      displayText = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
    const lbl = labelContainer
@@ -1007,7 +1006,7 @@ const class_box = async (parent, node) => {
        )
      );
    let bbox = lbl.getBBox();
-    if (getEffectiveHtmlLabels(getConfig())) {
+    if (evaluate(getConfig().flowchart.htmlLabels)) {
      const div = lbl.children[0];
      const dv = select(lbl);
      bbox = div.getBoundingClientRect();
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,11 +1,10 @@
 import { updateNodeBounds, labelHelper } from './util.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
 import intersect from '../intersect/index.js';

 const note = async (parent, node) => {
-  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
  if (!useHtmlLabels) {
    node.centerLabel = true;
  }
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -1,15 +1,14 @@
 import createLabel from '../createLabel.js';
 import { createText } from '../../rendering-util/createText.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
 import { select } from 'd3';
-import { sanitizeText } from '../../diagrams/common/common.js';
+import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
 import { decodeEntities } from '../../utils.js';

 export const labelHelper = async (parent, node, _classes, isNode) => {
  const config = getConfig();
  let classes;
-  const useHtmlLabels = node.useHtmlLabels || getEffectiveHtmlLabels(config);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(config.flowchart.htmlLabels);
  if (!_classes) {
    classes = 'node default';
  } else {
@@ -61,7 +60,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
  let bbox = text.getBBox();
  const halfPadding = node.padding / 2;

-  if (getEffectiveHtmlLabels(config)) {
+  if (evaluate(config.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);

--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -3,7 +3,6 @@ import { select, curveLinear } from 'd3';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
 import { render } from '../../dagre-wrapper/index.js';
 import utils, { getEdgeId } from '../../utils.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
@@ -261,7 +260,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
      edgeData.labelpos = 'c';

      // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
-      if (getEffectiveHtmlLabels(getConfig())) {
+      if (getConfig().flowchart?.htmlLabels ?? getConfig().htmlLabels) {
        edgeData.labelType = 'html';
        edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
      } else {
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,5 +1,4 @@
 import DOMPurify from 'dompurify';
-import { getEffectiveHtmlLabels } from '../../config.js';
 import type { MermaidConfig } from '../../config.type.js';

 // Remove and ignore br:s
@@ -65,7 +64,7 @@ export const removeScript = (txt: string): string => {
 };

 const sanitizeMore = (text: string, config: MermaidConfig) => {
-  if (getEffectiveHtmlLabels(config)) {
+  if (config.flowchart?.htmlLabels !== false) {
    const level = config.securityLevel;
    if (level === 'antiscript' || level === 'strict') {
      text = removeScript(text);
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -268,9 +268,7 @@ const fixTaskDates = function (startTime, endTime, dateFormat, excludes, include

 const getStartDate = function (prevTime, dateFormat, str) {
  str = str.trim();
-  if ((dateFormat.trim() === 'x' || dateFormat.trim() === 'X') && /^\d+$/.test(str)) {
-    return new Date(Number(str));
-  }
+
  // Test for after
  const afterRePattern = /^after\s+(?<ids>[\d\w- ]+)/;
  const afterStatement = afterRePattern.exec(str);
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
@@ -321,7 +321,7 @@ export class RequirementDB implements DiagramDB {
        id: `${relation.src}-${relation.dst}-${counter}`,
        start: this.requirements.get(relation.src)?.name ?? this.elements.get(relation.src)?.name,
        end: this.requirements.get(relation.dst)?.name ?? this.elements.get(relation.dst)?.name,
-        label: `«${relation.type}»`,
+        label: `&lt;&lt;${relation.type}&gt;&gt;`,
        classes: 'relationshipLine',
        style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
        labelpos: 'c',
--- a/packages/mermaid/src/diagrams/requirement/styles.js
+++ b/packages/mermaid/src/diagrams/requirement/styles.js
@@ -40,15 +40,6 @@ const getStyles = (options) => `
  .relationshipLabel {
    fill: ${options.relationLabelColor};
  }
-  .edgeLabel {
-    background-color: ${options.edgeLabelBackground};
-  }
-  .edgeLabel .label rect {
-    fill: ${options.edgeLabelBackground};
-  }
-  .edgeLabel .label text {
-    fill: ${options.relationLabelColor};
-  }
  .divider {
    stroke: ${options.nodeBorder};
    stroke-width: 1;
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.ts
@@ -13,8 +13,7 @@ import {
  setAccTitle,
  setDiagramTitle,
 } from '../common/commonDb.js';
-import type { Actor, AddMessageParams, Box, Message, Note } from './types.js';
-import type { ParticipantMetaData } from '../../types.js';
+import type { Actor, AddMessageParams, Box, Message, Note, ParticipantMetaData } from './types.js';

 interface SequenceState {
  prevActor?: string;
@@ -86,6 +85,8 @@ export const PARTICIPANT_TYPE = {
  ENTITY: 'entity',
  PARTICIPANT: 'participant',
  QUEUE: 'queue',
+  ICON: 'icon',
+  IMAGE: 'image',
 } as const;

 export class SequenceDB implements DiagramDB {
@@ -186,6 +187,7 @@ export class SequenceDB implements DiagramDB {
      actorCnt: null,
      rectData: null,
      type: type ?? 'participant',
+      doc: doc,
    });
    if (this.state.records.prevActor) {
      const prevActorInRecords = this.state.records.actors.get(this.state.records.prevActor);
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -2326,4 +2326,73 @@ Bob->>Alice:Got it!
      expect(actors.get('E').description).toBe('E');
    });
  });
+
+  describe('image and icon participant parsing', () => {
+    it('should parse image participant with image URL', async () => {
+      const diagram = await Diagram.fromText(`
+        sequenceDiagram
+        participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        Bob->>Bob: test
+      `);
+      const actors = diagram.db.getActors();
+      expect(actors.get('Bob').type).toBe('image');
+      expect(actors.get('Bob').doc.image).toBe(
+        'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg'
+      );
+    });
+
+    it('should parse icon participant with icon name', async () => {
+      const diagram = await Diagram.fromText(`
+        sequenceDiagram
+        participant Alice@{ "type": "icon", "icon": "fa:bell" }
+        Alice->>Alice: test
+      `);
+      const actors = diagram.db.getActors();
+      expect(actors.get('Alice').type).toBe('icon');
+      expect(actors.get('Alice').doc.icon).toBe('fa:bell');
+    });
+
+    it('should parse two image participants', async () => {
+      const diagram = await Diagram.fromText(`
+        sequenceDiagram
+        participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg" }
+        Bob->>Alice: Hello
+        Alice-->>Bob: Hi
+      `);
+      const actors = diagram.db.getActors();
+      expect(actors.get('Bob').type).toBe('image');
+      expect(actors.get('Bob').doc.image).toBe(
+        'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg'
+      );
+      expect(actors.get('Alice').type).toBe('image');
+      expect(actors.get('Alice').doc.image).toBe(
+        'https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg'
+      );
+    });
+
+    it('should parse image participant with normal participant', async () => {
+      const diagram = await Diagram.fromText(`
+        sequenceDiagram
+        participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+        participant Alice
+        Bob->>Alice: Hello
+      `);
+      const actors = diagram.db.getActors();
+      expect(actors.get('Bob').type).toBe('image');
+      expect(actors.get('Alice').type).toBe('participant');
+    });
+
+    it('should parse icon participant with normal participant', async () => {
+      const diagram = await Diagram.fromText(`
+        sequenceDiagram
+        participant Bob@{ "type": "icon", "icon": "fa:bell" }
+        participant Alice
+        Bob->>Alice: Hello
+      `);
+      const actors = diagram.db.getActors();
+      expect(actors.get('Bob').type).toBe('icon');
+      expect(actors.get('Alice').type).toBe('participant');
+    });
+  });
 });
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -752,6 +752,8 @@ function adjustCreatedDestroyedData(
    PARTICIPANT_TYPE.CONTROL,
    PARTICIPANT_TYPE.ENTITY,
    PARTICIPANT_TYPE.DATABASE,
+    PARTICIPANT_TYPE.ICON,
+    PARTICIPANT_TYPE.IMAGE,
  ];

  // if it is a create message
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,5 +1,6 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
+import { getIconSVG } from '../../rendering-util/icons.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import common, {
  calculateMathMLDimensions,
@@ -322,6 +323,89 @@ export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
  });
 };

+const drawActorTypeIcon = async function (elem, actor, conf, isFooter) {
+  const actorY = isFooter ? actor.stopy : actor.starty;
+  const center = actor.x + actor.width / 2;
+  const centerY = actorY + actor.height / 2;
+
+  const line = elem.append('g').lower();
+  if (!isFooter) {
+    actorCnt++;
+    line
+      .append('line')
+      .attr('id', 'actor' + actorCnt)
+      .attr('x1', center)
+      .attr('y1', centerY + 25)
+      .attr('x2', center)
+      .attr('y2', 2000)
+      .attr('class', 'actor-line')
+      .attr('stroke-width', '0.5px')
+      .attr('stroke', '#999')
+      .attr('name', actor.name);
+    actor.actorCnt = actorCnt;
+  }
+
+  const actElem = elem.append('g');
+  let cssClass = 'actor-icon';
+  if (isFooter) {
+    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssClass += ` ${TOP_ACTOR_CLASS}`;
+  }
+
+  actElem.attr('class', cssClass);
+  actElem.attr('name', actor.name);
+
+  // Define the size of the square and icon
+  const iconSize = actor.width / 5;
+  const squareX = center - iconSize / 2;
+  const squareY = !isFooter ? actorY + 10 : actorY;
+
+  // Draw a square rectangle for the actor icon background
+
+  actElem
+    .append('rect')
+    .attr('x', squareX)
+    .attr('y', squareY)
+    .attr('width', iconSize)
+    .attr('height', iconSize)
+    .attr('rx', 3) // rounded corners, optional
+    .attr('ry', 3)
+    .attr('fill', 'none'); // light gray background or customize as needed
+
+  // Render icon SVG inside the rectangle
+  const iconGroup = actElem.append('g').attr('transform', `translate(${squareX}, ${squareY})`);
+
+  iconGroup
+    .append('svg')
+    .attr('width', iconSize)
+    .attr('height', iconSize)
+    .html(
+      `<g>${await getIconSVG(actor.doc.icon, {
+        height: iconSize,
+        width: iconSize,
+        fallbackPrefix: '',
+      })}</g>`
+    );
+
+  // Add text label below icon
+  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
+    actor.description,
+    actElem,
+    actor.x,
+    actorY + (!isFooter ? 40 : 30), // positioning below the square icon
+    actor.width,
+    20,
+    { class: 'actor-icon-text' },
+    conf
+  );
+
+  const bounds = actElem.node().getBBox();
+  actor.height = bounds.height + (conf.sequence?.labelBoxHeight ?? 0);
+
+  return actor.height;
+};
+
 /**
 * Draws an actor in the diagram with the attached line
 *
@@ -414,6 +498,174 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {

  return height;
 };
+const drawActorTypeImage = async function (elem, actor, conf, isFooter) {
+  const img = new Image();
+  img.src = actor.doc.image ?? '';
+  await img.decode();
+
+  const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', ''));
+  const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', ''));
+
+  actor.doc.imageAspectRatio = imageNaturalWidth / imageNaturalHeight;
+
+  // Calculate image dimensions with proper sizing logic
+  let imageWidth, imageHeight;
+
+  // Check if custom dimensions are provided and valid
+  const hasValidCustomDimensions =
+    actor.doc.height && actor.doc.height > 10 && actor.doc.width && actor.doc.width > 10;
+
+  if (hasValidCustomDimensions) {
+    if (actor.doc.constraint === 'on') {
+      // Maintain aspect ratio with constraint
+      const customAspectRatio = imageNaturalWidth / imageNaturalHeight;
+
+      if (customAspectRatio > actor.doc.imageAspectRatio) {
+        // Width is the limiting factor
+        imageHeight = actor.doc.height;
+        imageWidth = actor.doc.height * actor.doc.imageAspectRatio;
+      } else {
+        // Height is the limiting factor
+        imageWidth = actor.doc.width;
+        imageHeight = actor.doc.width / actor.doc.imageAspectRatio;
+      }
+    } else {
+      // Use custom dimensions without maintaining aspect ratio
+      imageWidth = actor.doc.width;
+      imageHeight = actor.doc.height;
+    }
+  } else {
+    // Use default sizing based on actor width
+    const defaultImageSize = actor.width / 3.5;
+
+    // Ensure minimum and maximum sizes
+    const minSize = 30;
+    const maxSize = actor.width * 0.8;
+
+    if (actor.doc.imageAspectRatio >= 1) {
+      // Landscape or square image
+      imageWidth = Math.min(Math.max(defaultImageSize, minSize), maxSize);
+      imageHeight = imageWidth / actor.doc.imageAspectRatio;
+    } else {
+      // Portrait image
+      imageHeight = Math.min(Math.max(defaultImageSize, minSize), maxSize);
+      imageWidth = imageHeight * actor.doc.imageAspectRatio;
+    }
+
+    // Ensure the image doesn't exceed actor bounds
+    if (imageWidth > actor.width * 0.9) {
+      imageWidth = actor.width * 0.9;
+      imageHeight = imageWidth / actor.doc.imageAspectRatio;
+    }
+  }
+
+  const actorY = isFooter ? actor.stopy : actor.starty;
+  const center = actor.x + actor.width / 2;
+  const centerY = actorY + imageHeight;
+
+  // Calculate positioning
+  const squareX = center - imageWidth / 2;
+  let squareY;
+
+  if (isFooter) {
+    squareY = actorY + (imageHeight - imageHeight * 1);
+  } else {
+    squareY = actorY + 5;
+  }
+
+  // Calculate text position based on image position and size
+  const textY = !isFooter ? squareY + imageHeight : actorY + imageHeight; // Place text below image for header
+
+  // Draw actor line for non-footer elements
+  const x = center;
+  const y = centerY + (isFooter ? 0 : imageHeight / 2); // Adjust line start based on image height
+  const line = elem.append('g').lower();
+  if (!isFooter) {
+    actorCnt++;
+    line
+      .append('line')
+      .attr('id', 'actor' + actorCnt)
+      .attr('x1', x)
+      .attr('y1', y) // Adjust line start based on image height
+      .attr('x2', center)
+      .attr('y2', 2000)
+      .attr('class', 'actor-line')
+      .attr('stroke-width', '0.5px')
+      .attr('stroke', '#999')
+      .attr('name', actor.name);
+    actor.actorCnt = actorCnt;
+  }
+
+  const actElem = elem.append('g');
+  let cssClass = 'actor-image';
+  if (isFooter) {
+    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssClass += ` ${TOP_ACTOR_CLASS}`;
+  }
+
+  actElem.attr('class', cssClass);
+  actElem.attr('name', actor.name);
+
+  // Draw background rectangle for the actor image
+  actElem
+    .append('rect')
+    .attr('x', squareX)
+    .attr('y', squareY)
+    .attr('width', imageWidth)
+    .attr('height', imageHeight)
+    .attr('rx', 3)
+    .attr('ry', 3)
+    .attr('fill', 'white')
+    .attr('stroke', '#ddd')
+    .attr('stroke-width', '1px');
+
+  // Create clipping path for the image
+  const clipId = `clip-actor-${actorCnt || 'footer'}-${Math.random().toString(36).substr(2, 9)}`;
+  actElem
+    .append('defs')
+    .append('clipPath')
+    .attr('id', clipId)
+    .append('rect')
+    .attr('x', squareX)
+    .attr('y', squareY)
+    .attr('width', imageWidth)
+    .attr('height', imageHeight)
+    .attr('rx', 3)
+    .attr('ry', 3);
+
+  // Render image inside the rectangle
+  const imageGroup = actElem.append('g');
+
+  if (actor.doc.image) {
+    imageGroup
+      .append('image')
+      .attr('x', squareX)
+      .attr('y', squareY)
+      .attr('width', imageWidth)
+      .attr('height', imageHeight)
+      .attr('href', img.src)
+      .attr('preserveAspectRatio', actor.doc.constraint === 'on' ? 'xMidYMid meet' : 'none');
+  }
+
+  // Add text label
+  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
+    actor.description,
+    actElem,
+    actor.x,
+    textY,
+    actor.width,
+    20,
+    { class: 'actor-image-text' },
+    conf
+  );
+
+  // Calculate final bounds and update actor height
+  const bounds = actElem.node().getBBox();
+  actor.height = bounds.height + (conf.sequence?.labelBoxHeight ?? 0);
+
+  return actor.height;
+};

 /**
 * Draws an actor in the diagram with the attached line
@@ -1122,6 +1374,10 @@ export const drawActor = async function (elem, actor, conf, isFooter) {
      return await drawActorTypeCollections(elem, actor, conf, isFooter);
    case 'queue':
      return await drawActorTypeQueue(elem, actor, conf, isFooter);
+    case 'icon':
+      return await drawActorTypeIcon(elem, actor, conf, isFooter);
+    case 'image':
+      return await drawActorTypeImage(elem, actor, conf, isFooter);
  }
 };

--- a/packages/mermaid/src/diagrams/sequence/types.ts
+++ b/packages/mermaid/src/diagrams/sequence/types.ts
@@ -17,6 +17,9 @@ export interface Actor {
  actorCnt: number | null;
  rectData: unknown;
  type: string;
+  doc?: ParticipantMetaData; // For documentation
+  iconName?: string; // For icon type
+  imgSrc?: string; // For img type
 }

 export interface Message {
@@ -90,3 +93,20 @@ export interface Note {
  message: string;
  wrap: boolean;
 }
+
+export interface ParticipantMetaData {
+  type?:
+    | 'actor'
+    | 'participant'
+    | 'boundary'
+    | 'control'
+    | 'entity'
+    | 'database'
+    | 'collections'
+    | 'queue'
+    | 'icon'
+    | 'img';
+  icon?: string;
+  img?: string;
+  form?: string;
+}
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -40,26 +40,105 @@ const openSourceFeatures: Feature[] = [
  { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
 ];

-const editorColumns: EditorColumn[] = [
-  {
-    title: 'Mermaid Pro',
-    description: 'Unlock AI and real-time collaboration',
-    highlighted: true,
-    redBarText: 'Recommended',
-    proTrialButtonText: 'Start free trial',
-    proTrialUrl:
-      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
-    features: mermaidChartFeatures,
-  },
-  {
-    title: 'Open Source',
-    description: 'Code only, no login',
-    buttonText: 'Start free',
-    redirectUrl: 'https://mermaid.live/edit',
-    features: openSourceFeatures,
-  },
+const playgroundFeatures: Feature[] = [
+  { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
+  { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+  { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
 ];

+const editorColumnVariants: EditorColumn[][] = [
+  [
+    {
+      title: 'Playground',
+      description: 'Basic features, no login',
+      redirectUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground',
+      buttonText: 'Start free',
+      features: playgroundFeatures,
+    },
+    {
+      title: 'Free or Pro',
+      description: 'Advanced features, Free or Pro account',
+      proTrialUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free',
+      proTrialButtonText: 'Start free',
+      highlighted: true,
+      redBarText: 'Best for collaboration',
+      features: mermaidChartFeatures,
+    },
+    {
+      title: 'Open Source',
+      description: 'Code only, no login',
+      redirectUrl: 'https://mermaid.live/edit',
+      buttonText: 'Start free',
+      features: openSourceFeatures,
+    },
+  ],
+  [
+    {
+      title: 'Mermaid Pro',
+      description: 'Unlock AI and real-time collaboration',
+      redirectUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free',
+      buttonText: 'Start Free',
+      highlighted: true,
+      redBarText: 'Recommended',
+      proTrialButtonText: 'Start Pro trial',
+      proTrialUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
+      features: mermaidChartFeatures,
+    },
+    {
+      title: 'Open Source',
+      description: 'Code only, no login',
+      buttonText: 'Start free',
+      redirectUrl: 'https://mermaid.live/edit',
+      isButtonMargined: true,
+      features: openSourceFeatures,
+    },
+  ],
+  [
+    {
+      title: 'Mermaid Pro',
+      description: 'Unlock AI and real-time collaboration',
+      highlighted: true,
+      redBarText: 'Recommended',
+      proTrialButtonText: 'Start free trial',
+      proTrialUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
+      features: mermaidChartFeatures,
+    },
+    {
+      title: 'Open Source',
+      description: 'Code only, no login',
+      buttonText: 'Start free',
+      redirectUrl: 'https://mermaid.live/edit',
+      features: openSourceFeatures,
+    },
+  ],
+  [
+    {
+      title: 'Mermaid Pro',
+      description: 'Unlock AI and real-time collaboration',
+      highlighted: true,
+      redBarText: 'Recommended',
+      proTrialButtonText: 'Start free',
+      proTrialUrl:
+        'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free',
+      features: mermaidChartFeatures,
+    },
+    {
+      title: 'Open Source',
+      description: 'Code only, no login',
+      redirectUrl: 'https://mermaid.live/edit',
+      buttonText: 'Start free',
+      features: openSourceFeatures,
+    },
+  ],
+];
+
+const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)];
+
 const isVisible = ref(false);

 const handleMouseDown = (e: MouseEvent) => {
--- a/packages/mermaid/src/docs/config/directives.md
+++ b/packages/mermaid/src/docs/config/directives.md
@@ -17,6 +17,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.

 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
   - theme
   - fontFamily
   - logLevel
@@ -185,27 +186,22 @@ A --> C[End]

 Some common flowchart configurations are:

+- _htmlLabels_: true/false
 - _curve_: linear/curve
 - _diagramPadding_: number
 - _useMaxWidth_: number

-**Deprecated configurations:**
-
- ~~_htmlLabels_~~: Use global `htmlLabels` instead
-
 For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._

 The following code snippet changes flowchart config:

-```
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
-```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`

-**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
+Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.

 ```mermaid-example
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -368,7 +368,7 @@ The list of configuration objects are described [in the mermaidAPI documentation
 ```html
 <script type="module">
  import mermaid from './mermaid.esm.mjs';
-  let config = { startOnLoad: true, htmlLabels: true, flowchart: { useMaxWidth: false } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
  mermaid.initialize(config);
 </script>
 ```
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -23,6 +23,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 - **Plugins** - A plugin system for extending the functionality of Mermaid.

  Official Mermaid Chart plugins:
+
  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
  - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
  - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -33,11 +33,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
 Learn more:

 - Visual Editor For Flowcharts
+
  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)

  - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)

 - Visual Editor For Sequence diagrams
+
  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)

  - [Demo video](https://youtu.be/imc2u5_N6Dc)
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,17 +1,5 @@
 # Blog

-## [The Essential Guide to Mermaid Chart Plugin for VS Code [08/2025]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
-
-9/9/2025 • 5 mins
-
-Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
-
-## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
-
-7/22/2025 • 8 mins
-
-In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
-
 ## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)

 7/15/2025 • 7 mins
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -17,25 +17,25 @@
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
-    "@vueuse/core": "^13.9.0",
+    "@vueuse/core": "^13.1.0",
    "font-awesome": "^4.7.0",
    "jiti": "^2.4.2",
    "mermaid": "workspace:^",
-    "vue": "^3.5.21"
+    "vue": "^3.4.38"
  },
  "devDependencies": {
-    "@iconify-json/carbon": "^1.2.13",
-    "@unocss/reset": "^66.5.1",
+    "@iconify-json/carbon": "^1.1.37",
+    "@unocss/reset": "^66.0.0",
    "@vite-pwa/vitepress": "^1.0.0",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.0",
    "fast-glob": "^3.3.3",
    "https-localhost": "^4.7.1",
    "pathe": "^2.0.3",
-    "unocss": "^66.5.1",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^7.0.7",
-    "vite-plugin-pwa": "^1.0.3",
-    "vitepress": "1.6.4",
+    "unocss": "^66.4.2",
+    "unplugin-vue-components": "^28.4.0",
+    "vite": "^7.0.0",
+    "vite-plugin-pwa": "^1.0.0",
+    "vitepress": "1.6.3",
    "workbox-window": "^7.3.0"
  }
 }
--- a/packages/mermaid/src/docs/syntax/architecture.md
+++ b/packages/mermaid/src/docs/syntax/architecture.md
@@ -156,7 +156,7 @@ architecture-beta
 ## Icons

 By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
-Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
+Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).

 After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.

--- a/packages/mermaid/src/docs/syntax/c4.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -83,6 +83,7 @@ The following unfinished features are not supported in the short term.
 - [ ] Legend

 - [x] System Context
+
  - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
  - [x] Person_Ext
  - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -96,6 +97,7 @@ The following unfinished features are not supported in the short term.
  - [x] System_Boundary

 - [x] Container diagram
+
  - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] ContainerDb
  - [x] ContainerQueue
@@ -105,6 +107,7 @@ The following unfinished features are not supported in the short term.
  - [x] Container_Boundary(alias, label, ?tags, $link)

 - [x] Component diagram
+
  - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] ComponentDb
  - [x] ComponentQueue
@@ -113,15 +116,18 @@ The following unfinished features are not supported in the short term.
  - [x] ComponentQueue_Ext

 - [x] Dynamic diagram
+
  - [x] RelIndex(index, from, to, label, ?tags, $link)

 - [x] Deployment diagram
+
  - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
  - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
  - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
  - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()

 - [x] Relationship Types
+
  - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
  - [x] BiRel (bidirectional relationship)
  - [x] Rel_U, Rel_Up
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -118,6 +118,30 @@ sequenceDiagram
    Bob->>Alice: Queue response
 ```

+### Icon
+
+If you want to use a custom icon for a participant, use the JSON configuration syntax as shown below. The `icon` value can be a FontAwesome icon name, emoji, or other supported icon identifier.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "icon", "icon": "fa:bell" }
+    participant Bob
+    Alice->>Bob: Icon participant
+    Bob->>Alice: Response to icon
+```
+
+### Image
+
+If you want to use a custom image for a participant, use the JSON configuration syntax as shown below. The `image` value should be a valid image URL.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+    participant Bob
+    Alice->>Bob: Image participant
+    Bob->>Alice: Response to image
+```
+
 ### Aliases

 The actor can have a convenient identifier and a descriptive label.
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -2,7 +2,6 @@ import { assert, beforeEach, describe, expect, it, vi } from 'vitest';

 import assignWithDepth from './assignWithDepth.js';
 import type { MermaidConfig } from './config.type.js';
-import { getEffectiveHtmlLabels } from './config.js';
 import mermaid from './mermaid.js';
 import mermaidAPI, {
  appendDivSvgG,
@@ -359,11 +358,10 @@ describe('mermaidAPI', () => {
        });

        describe('no htmlLabels in the configuration', () => {
-          const mocked_config_no_htmlLabels: MermaidConfig = {
+          const mocked_config_no_htmlLabels = {
            themeCSS: 'default',
            fontFamily: 'serif',
            altFontFamily: 'sans-serif',
-            htmlLabels: false, // Explicitly set to false
          };

          describe('creates styles for shape elements "rect", "polygon", "ellipse", and "circle"', () => {
@@ -1150,63 +1148,4 @@ flowchart TD
      }
    );
  });
-
-  describe('flowchart.htmlLabels deprecation behavior', () => {
-    beforeEach(() => {
-      mermaidAPI.globalReset();
-    });
-
-    it('should use root-level htmlLabels when only root-level is set', () => {
-      const config: MermaidConfig = { htmlLabels: true };
-      expect(config.htmlLabels).toBe(true);
-
-      const config2: MermaidConfig = { htmlLabels: false };
-      expect(config2.htmlLabels).toBe(false);
-    });
-
-    it('should check config.htmlLabels value directly when set', () => {
-      const config1: MermaidConfig = { htmlLabels: true };
-      expect(config1.htmlLabels).toBe(true);
-
-      const config2: MermaidConfig = { htmlLabels: false };
-      expect(config2.htmlLabels).toBe(false);
-
-      const config3: MermaidConfig = { htmlLabels: undefined };
-      expect(config3.htmlLabels).toBeUndefined();
-    });
-
-    it('should use getEffectiveHtmlLabels only when fallback logic is needed', () => {
-      // Only call getEffectiveHtmlLabels when we need the fallback behavior
-      const configWithDeprecated: MermaidConfig = { flowchart: { htmlLabels: true } };
-      expect(getEffectiveHtmlLabels(configWithDeprecated)).toBe(true);
-
-      const configWithBoth: MermaidConfig = {
-        htmlLabels: false,
-        flowchart: { htmlLabels: true },
-      };
-      expect(getEffectiveHtmlLabels(configWithBoth)).toBe(false); // Root takes precedence
-
-      const configEmpty: MermaidConfig = {};
-      expect(getEffectiveHtmlLabels(configEmpty)).toBe(true); // Default to true
-    });
-
-    it('should verify the precedence logic: config.htmlLabels ?? config.flowchart?.htmlLabels ?? true', () => {
-      // Test the exact precedence chain
-      const config1: MermaidConfig = { htmlLabels: true };
-      const result1 = config1.htmlLabels ?? config1.flowchart?.htmlLabels ?? true;
-      expect(result1).toBe(true);
-
-      const config2: MermaidConfig = { htmlLabels: false };
-      const result2 = config2.htmlLabels ?? config2.flowchart?.htmlLabels ?? true;
-      expect(result2).toBe(false);
-
-      const config3: MermaidConfig = { flowchart: { htmlLabels: true } };
-      const result3 = config3.htmlLabels ?? config3.flowchart?.htmlLabels ?? true;
-      expect(result3).toBe(true);
-
-      const config4: MermaidConfig = {};
-      const result4 = config4.htmlLabels ?? config4.flowchart?.htmlLabels ?? true;
-      expect(result4).toBe(true);
-    });
-  });
 });
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -11,7 +11,6 @@ import packageJson from '../package.json' assert { type: 'json' };
 import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
 import assignWithDepth from './assignWithDepth.js';
 import * as configApi from './config.js';
-import { getEffectiveHtmlLabels } from './config.js';
 import type { MermaidConfig } from './config.type.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
@@ -129,7 +128,7 @@ export const createCssStyles = (

  // classDefs defined in the diagram text
  if (classDefs instanceof Map) {
-    const htmlLabels = getEffectiveHtmlLabels(config);
+    const htmlLabels = config.htmlLabels ?? config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?

    const cssHtmlElements = ['> *', 'span']; // TODO make a constant
    const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -1,6 +1,5 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
-
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { select } from 'd3';
@@ -26,7 +25,7 @@ const rect = async (parent, node) => {
    .attr('id', node.id)
    .attr('data-look', node.look);

-  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);

  // Create the label and insert it after the rect
  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -40,7 +39,7 @@ const rect = async (parent, node) => {
  // Get the size of the label
  let bbox = text.getBBox();

-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
@@ -189,7 +188,7 @@ const roundedWithTitle = async (parent, node) => {
  // Get the size of the label
  let bbox = text.getBBox();

-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
@@ -265,7 +264,7 @@ const roundedWithTitle = async (parent, node) => {

  label.attr(
    'transform',
-    `translate(${node.x - bbox.width / 2}, ${y + 1 - (getEffectiveHtmlLabels(siteConfig) ? 0 : 3)})`
+    `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
  );

  const rectBox = rect.node().getBBox();
@@ -296,7 +295,7 @@ const kanbanSection = async (parent, node) => {
    .attr('id', node.id)
    .attr('data-look', node.look);

-  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);

  // Create the label and insert it after the rect
  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -311,7 +310,7 @@ const kanbanSection = async (parent, node) => {
  // Get the size of the label
  let bbox = text.getBBox();

-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);
    bbox = div.getBoundingClientRect();
--- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
 import common, {
+  evaluate,
  hasKatex,
  renderKatexSanitized,
  sanitizeText,
@@ -64,7 +64,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
    vertexText = vertexText[0];
  }

-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
    vertexText = vertexText.replace(/\\n|\n/g, '<br />');
    log.info('vertexText' + vertexText);
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -1,5 +1,5 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
@@ -45,7 +45,7 @@ export const getLabelStyles = (styleArray) => {
 };

 export const insertEdgeLabel = async (elem, edge) => {
-  let useHtmlLabels = getEffectiveHtmlLabels(getConfig());
+  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);

  const { labelStyles } = styles2String(edge);
  edge.labelStyle = labelStyles;
@@ -161,7 +161,7 @@ export const insertEdgeLabel = async (elem, edge) => {
 * @param {any} value
 */
 function setTerminalWidth(fo, value) {
-  if (getEffectiveHtmlLabels(getConfig()) && fo) {
+  if (getConfig().flowchart.htmlLabels && fo) {
    fo.style.width = value.length * 9 + 'px';
    fo.style.height = '12px';
  }
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -5,7 +5,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
 import { getConfig } from '../../../config.js';
-import { getEffectiveHtmlLabels } from '../../../config.js';

 export async function note<T extends SVGGraphicsElement>(
  parent: D3Selection<T>,
@@ -14,7 +13,7 @@ export async function note<T extends SVGGraphicsElement>(
 ) {
  const { labelStyles, nodeStyles } = styles2String(node);
  node.labelStyle = labelStyles;
-  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart?.htmlLabels !== false;
  if (!useHtmlLabels) {
    node.centerLabel = true;
  }
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -1,7 +1,6 @@
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../../config.js';
 import { select } from 'd3';
 import defaultConfig from '../../../defaultConfig.js';
 import { evaluate, sanitizeText } from '../../../diagrams/common/common.js';
@@ -131,7 +130,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
    addSvgBackground?: boolean | undefined;
  }
 ) => {
-  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || options.useHtmlLabels;
+  const useHtmlLabels = options.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);

  // Create the label and insert it after the rect
  const labelEl = parent
@@ -149,7 +148,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
  let bbox = text.getBBox();
  const halfPadding = options.padding / 2;

-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
    const div = text.children[0];
    const dv = select(text);

--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -153,8 +153,6 @@ properties:
    default: false
  htmlLabels:
    type: boolean # maybe unused, seems to be copied in each diagram config
-    default: true
-
  fontFamily:
    description: |
      Specifies the font to be used in the rendered diagrams.
@@ -2054,6 +2052,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
      - titleTopMargin
      - subGraphTitleMargin
      - diagramPadding
+      - htmlLabels
      - nodeSpacing
      - rankSpacing
      - curve
@@ -2085,13 +2084,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
        default: 8
      htmlLabels:
        description: |
-          **DEPRECATED: Use global `htmlLabels` instead.**
-
-          Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges.
-          This property is deprecated.
-          Please use the global `htmlLabels` configuration instead.
+          Flag for setting whether or not a html tag should be used for rendering labels on the edges.
        type: boolean
-        deprecated: true
+        default: true
      nodeSpacing:
        description: |
          Defines the spacing between nodes on the same level
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -13,18 +13,6 @@ export interface NodeMetaData {
  ticket?: string;
 }

-export interface ParticipantMetaData {
-  type?:
-    | 'actor'
-    | 'participant'
-    | 'boundary'
-    | 'control'
-    | 'entity'
-    | 'database'
-    | 'collections'
-    | 'queue';
-}
-
 export interface EdgeMetaData {
  animation?: 'fast' | 'slow';
  animate?: boolean;
--- a/packages/parser/README.md
+++ b/packages/parser/README.md
@@ -44,15 +44,18 @@ ValueConverter -->> Package: Return AST
 ```

 - When to override `TokenBuilder`?
+
  - To override keyword rules.
  - To override terminal rules that need a custom function.
  - To manually reorder the list of rules.

 - When to override `Lexer`?
+
  - To modify input before tokenizing.
  - To insert/modify tokens that cannot or have not been parsed.

 - When to override `LangiumParser`?
+
  - To insert or modify attributes that can't be parsed.

 - When to override `ValueConverter`?
--- a/packages/tiny/CHANGELOG.md
+++ b/packages/tiny/CHANGELOG.md
@@ -1,19 +1,5 @@
 # mermaid

-## 11.11.0
-
-### Minor Changes
-
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
-
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
-
 ## 11.10.0

 ### Minor Changes
@@ -168,6 +154,7 @@
 ### Minor Changes

 - [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
+
  - Config
  - Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
  - LinkStyle command (linkStyle default interpolate ...)
@@ -186,12 +173,14 @@
 ### Minor Changes

 - [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
+
  - Incorrect label mapping for nodes when using `&`
  - Syntax error when `}` with trailing spaces before new line

 - [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges

 - [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
+
  - Added support for directions
  - Added support for hand drawn look

--- a/packages/tiny/package.json
+++ b/packages/tiny/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/tiny",
-  "version": "11.11.0",
+  "version": "11.10.0",
  "description": "Tiny version of mermaid",
  "type": "commonjs",
  "main": "./dist/mermaid.tiny.js",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
omkarht	4c40dd406d	Merge branch 'develop' of https://github.com/mermaid-js/mermaid into 6623-add-image-icons-support-to-sequence-diagram	2025-09-16 15:03:02 +05:30
omkarht	8dcddaf314	fix: refactored image and icon test case files on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-25 15:34:30 +05:30
omkarht	bd19523f5d	Merge branch 'develop' of https://github.com/mermaid-js/mermaid into 6623-add-image-icons-support-to-sequence-diagram	2025-08-25 15:21:24 +05:30
omkarht	6b64b92b6e	docs: add documentation on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-14 12:58:24 +05:30
omkarht	41e3d2449a	test: add test cases for image and icon support Some optional description over here if you need to add more info on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-14 12:49:43 +05:30
omkarht	0386ed6b32	fix: refactored code on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-14 12:40:37 +05:30
omkarht	97481b4d11	Merge branch '6623-add-image-icons-support-to-sequence-diagram' of https://github.com/mermaid-js/mermaid into 6623-add-image-icons-support-to-sequence-diagram	2025-08-13 14:12:18 +05:30
omkarht	b8b120939e	chore: added changeset on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-13 14:11:54 +05:30
autofix-ci[bot]	71e4d62153	[autofix.ci] apply automated fixes	2025-08-13 07:57:40 +00:00
omkarht	b867370f1b	6623: add image and icon support for sequence diagrams on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-08-13 13:21:06 +05:30