Merge branch 'develop' into fix-edge-direction-id-parsing

Merge pull request #7096 from mermaid-js/renovate/npm-vite-vulnerability
chore(deps): update dependency vite to v7.1.11 [security]
2025-11-07 14:24:13 +01:00 · 2025-11-07 13:00:34 +05:30 · 2025-11-06 14:52:25 +00:00 · 2025-11-06 12:46:25 +00:00 · 2025-11-06 12:31:47 +00:00 · 2025-11-06 12:30:09 +00:00
27 changed files with 2208 additions and 1382 deletions
--- a/.changeset/gold-ducks-sort.md
+++ b/.changeset/gold-ducks-sort.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Proper separation between strings and markdown strings
--- a/.changeset/lucky-cases-switch.md
+++ b/.changeset/lucky-cases-switch.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Allow IDs starting with L, R, T, or B in parser
--- a/.github/workflows/e2e-timings.yml
+++ b/.github/workflows/e2e-timings.yml
@@ -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@0edc001d28a2959cd7a6b505629f1d82f0a6e67d
        with:
          add-paths: |
            cypress/timings.json
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@@ -20,7 +20,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Run analysis
-        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
        with:
          results_file: results.sarif
          results_format: sarif
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -445,7 +445,7 @@ ORDER ||--|{ LINE-ITEM : contains
        { logLevel: 1 }
      );
    });
-    it('should render ER diagram with numeric entity names and attributes', () => {
+    it('should render ER diagram with standalone numeric entities', () => {
      imgSnapshotTest(
        `erDiagram
         PRODUCT ||--o{ ORDER-ITEM : has
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1174,8 +1174,8 @@ end
    end
    githost["Github, Gitlab, BitBucket, etc."]
    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["\`1.\`"]
-    b["\`- x\`"]
+    a["1."]
+    b["- x"]
      `;

    it('should render raw strings', () => {
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1003,49 +1003,4 @@ graph TD
      }
    );
  });
-  it('#5824: should be able to render string and markdown labels', () => {
-    imgSnapshotTest(
-      `
-flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-    `,
-      {
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
-    );
-  });
-  it('69: should render subgraphs with adhoc list headings', () => {
-    imgSnapshotTest(
-      `
-    graph TB
-      subgraph "1. first"
-        a1-->a2
-      end
-      subgraph 2. second
-        b1-->b2
-      end
-      `,
-      { fontFamily: 'courier' }
-    );
-  });
-  it('70: should render subgraphs with markdown headings', () => {
-    imgSnapshotTest(
-      `
-    graph TB
-      subgraph "\`**strong**\`"
-        a1-->a2
-      end
-      `,
-      { fontFamily: 'courier' }
-    );
-  });
 });
--- 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:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)

 ## Properties

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

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

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

 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:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
+Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)

 ## Properties

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

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

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

 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:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
+Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)

 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:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
+Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)

 ## Properties

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

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

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

 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:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
+Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)

 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:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
+Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)

 The svg code for the rendered graph.
--- a/package.json
+++ b/package.json
@@ -63,21 +63,21 @@
    ]
  },
  "devDependencies": {
-    "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.3",
+    "@applitools/eyes-cypress": "^3.55.4",
+    "@argos-ci/cypress": "^6.1.5",
    "@changesets/changelog-github": "^0.5.1",
    "@changesets/cli": "^2.29.7",
-    "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.14.6",
+    "@cspell/eslint-plugin": "^9.3.0",
+    "@cypress/code-coverage": "^3.14.7",
    "@eslint/js": "^9.26.0",
    "@rollup/plugin-typescript": "^12.1.4",
    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.3",
+    "@types/express": "^5.0.5",
    "@types/js-yaml": "^4.0.9",
    "@types/jsdom": "^21.1.7",
    "@types/lodash": "^4.17.20",
    "@types/mdast": "^4.0.4",
-    "@types/node": "^22.18.6",
+    "@types/node": "^22.18.13",
    "@types/rollup-plugin-visualizer": "^5.0.3",
    "@vitest/coverage-v8": "^3.2.4",
    "@vitest/spy": "^3.2.4",
@@ -88,23 +88,23 @@
    "cors": "^2.8.5",
    "cpy-cli": "^5.0.0",
    "cross-env": "^7.0.3",
-    "cspell": "^9.2.1",
+    "cspell": "^9.2.2",
    "cypress": "^14.5.4",
    "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.23",
-    "esbuild": "^0.25.10",
+    "cypress-split": "^1.24.25",
+    "esbuild": "^0.25.12",
    "eslint": "^9.26.0",
    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^4.3.0",
+    "eslint-plugin-cypress": "^5.2.0",
    "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^28.14.0",
-    "eslint-plugin-jsdoc": "^50.8.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jsdoc": "^61.1.12",
    "eslint-plugin-json": "^4.0.1",
    "eslint-plugin-lodash": "^8.0.0",
    "eslint-plugin-markdown": "^5.1.0",
    "eslint-plugin-no-only-tests": "^3.3.0",
    "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^62.0.0",
    "express": "^5.1.0",
    "globals": "^16.4.0",
    "globby": "^14.1.0",
@@ -121,10 +121,10 @@
    "prettier": "^3.6.2",
    "prettier-plugin-jsdoc": "^1.3.3",
    "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
+    "rollup-plugin-visualizer": "^6.0.5",
    "start-server-and-test": "^2.1.2",
    "tslib": "^2.8.1",
-    "tsx": "^4.20.5",
+    "tsx": "^4.20.6",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.38.0",
    "vite": "^7.0.7",
--- 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.41.6"
  },
  "devDependencies": {
    "mermaid": "workspace:^"
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -77,9 +77,9 @@
    "d3": "^7.9.0",
    "d3-sankey": "^0.12.3",
    "dagre-d3-es": "7.0.13",
-    "dayjs": "^1.11.18",
-    "dompurify": "^3.2.5",
-    "katex": "^0.16.22",
+    "dayjs": "^1.11.19",
+    "dompurify": "^3.2.7",
+    "katex": "^0.16.25",
    "khroma": "^2.1.0",
    "lodash-es": "^4.17.21",
    "marked": "^16.3.0",
@@ -89,10 +89,10 @@
    "uuid": "^11.1.0"
  },
  "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.5",
+    "@adobe/jsonschema2md": "^8.0.7",
    "@iconify/types": "^2.0.0",
    "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-fcose": "^2.2.4",
+    "@types/cytoscape-fcose": "^2.2.5",
    "@types/d3-sankey": "^0.12.4",
    "@types/d3-scale": "^4.0.9",
    "@types/d3-scale-chromatic": "^3.1.0",
@@ -101,7 +101,7 @@
    "@types/jsdom": "^21.1.7",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
-    "@types/micromatch": "^4.0.9",
+    "@types/micromatch": "^4.0.10",
    "@types/stylis": "^4.2.7",
    "@types/uuid": "^10.0.0",
    "ajv": "^8.17.1",
@@ -123,7 +123,7 @@
    "rimraf": "^6.0.1",
    "start-server-and-test": "^2.1.2",
    "type-fest": "^4.41.0",
-    "typedoc": "^0.28.13",
+    "typedoc": "^0.28.14",
    "typedoc-plugin-markdown": "^4.8.1",
    "typescript": "~5.7.3",
    "unist-util-flatmap": "^1.0.0",
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -85,17 +85,6 @@ export class FlowDB implements DiagramDB {
    return common.sanitizeText(txt, this.config);
  }

-  private sanitizeNodeLabelType(labelType?: string) {
-    switch (labelType) {
-      case 'markdown':
-      case 'string':
-      case 'text':
-        return labelType;
-      default:
-        return 'markdown';
-    }
-  }
-
  /**
   * Function to lookup domId from id in the graph definition.
   *
@@ -219,7 +208,6 @@ export class FlowDB implements DiagramDB {

      if (doc?.label) {
        vertex.text = doc?.label;
-        vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
      }
      if (doc?.icon) {
        vertex.icon = doc?.icon;
@@ -279,7 +267,7 @@ export class FlowDB implements DiagramDB {
      if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
        edge.text = edge.text.substring(1, edge.text.length - 1);
      }
-      edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
+      edge.labelType = linkTextObj.type;
    }

    if (type !== undefined) {
@@ -714,7 +702,7 @@ You have to call mermaid.initialize.`
      title: title.trim(),
      classes: [],
      dir,
-      labelType: this.sanitizeNodeLabelType(_title?.type),
+      labelType: _title.type,
    };

    log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
@@ -1024,7 +1012,6 @@ You have to call mermaid.initialize.`
      const baseNode = {
        id: vertex.id,
        label: vertex.text,
-        labelType: vertex.labelType,
        labelStyle: '',
        parentId,
        padding: config.flowchart?.padding || 8,
@@ -1101,7 +1088,6 @@ You have to call mermaid.initialize.`
        id: subGraph.id,
        label: subGraph.title,
        labelStyle: '',
-        labelType: subGraph.labelType,
        parentId: parentDB.get(subGraph.id),
        padding: 8,
        cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
@@ -1133,7 +1119,6 @@ You have to call mermaid.initialize.`
        end: rawEdge.end,
        type: rawEdge.type ?? 'normal',
        label: rawEdge.text,
-        labelType: rawEdge.labelType,
        labelpos: 'c',
        thickness: rawEdge.stroke,
        minlen: rawEdge.length,
--- a/packages/mermaid/src/diagrams/flowchart/types.ts
+++ b/packages/mermaid/src/diagrams/flowchart/types.ts
@@ -29,7 +29,7 @@ export interface FlowVertex {
  domId: string;
  haveCallback?: boolean;
  id: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
  link?: string;
  linkTarget?: string;
  props?: any;
@@ -62,7 +62,7 @@ export interface FlowEdge {
  style?: string[];
  length?: number;
  text: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
  classes: string[];
  id?: string;
  animation?: 'fast' | 'slow';
--- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
+++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts
@@ -62,7 +62,6 @@ const getData = function () {
    const node = {
      id: section.id,
      label: sanitizeText(section.label ?? '', conf),
-      labelType: 'markdown',
      isGroup: true,
      ticket: section.ticket,
      shape: 'kanbanSection',
@@ -77,7 +76,6 @@ const getData = function () {
        id: item.id,
        parentId: section.id,
        label: sanitizeText(item.label ?? '', conf),
-        labelType: 'markdown',
        isGroup: false,
        ticket: item?.ticket,
        priority: item?.priority,
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -260,7 +260,6 @@ export class MindmapDB {
      id: node.id.toString(),
      domId: 'node_' + node.id.toString(),
      label: node.descr,
-      labelType: 'markdown',
      isGroup: false,
      shape: getShapeFromType(node.type),
      width: node.width,
--- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts
@@ -16,7 +16,6 @@ export interface MindmapNode {
  x?: number;
  y?: number;
  isRoot?: boolean;
-  labelType?: string;
 }

 export type FilledMindMapNode = RequiredDeep<MindmapNode>;
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -21,18 +21,18 @@
    "font-awesome": "^4.7.0",
    "jiti": "^2.4.2",
    "mermaid": "workspace:^",
-    "vue": "^3.5.21"
+    "vue": "^3.5.23"
  },
  "devDependencies": {
-    "@iconify-json/carbon": "^1.2.13",
-    "@unocss/reset": "^66.5.1",
-    "@vite-pwa/vitepress": "^1.0.0",
+    "@iconify-json/carbon": "^1.2.14",
+    "@unocss/reset": "^66.5.4",
+    "@vite-pwa/vitepress": "^1.0.1",
    "@vitejs/plugin-vue": "^6.0.1",
    "fast-glob": "^3.3.3",
    "https-localhost": "^4.7.1",
    "pathe": "^2.0.3",
-    "unocss": "^66.5.1",
-    "unplugin-vue-components": "^28.4.1",
+    "unocss": "^66.5.4",
+    "unplugin-vue-components": "^28.8.0",
    "vite": "^7.0.7",
    "vite-plugin-pwa": "^1.0.3",
    "vitepress": "1.6.4",
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -30,17 +30,11 @@ const rect = async (parent, node) => {
  // Create the label and insert it after the rect
  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');

-  let text;
-  if (node.labelType === 'markdown') {
-    text = await createText(labelEl, node.label, {
+  const text = await createText(labelEl, node.label, {
    style: node.labelStyle,
    useHtmlLabels,
    isNode: true,
  });
-  } else {
-    const labelElement = await createLabel(node.label, node.labelStyle, false, true);
-    text = labelEl.node()?.appendChild(labelElement);
-  }

  // Get the size of the label
  let bbox = text.getBBox();
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -29,7 +29,7 @@ import {
 import rough from 'roughjs';
 import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
-import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
+import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';

 export const edgeLabels = new Map();
 export const terminalLabels = new Map();
@@ -47,16 +47,14 @@ export const getLabelStyles = (styleArray) => {
 export const insertEdgeLabel = async (elem, edge) => {
  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);

-  const labelElement =
-    edge.labelType === 'markdown'
-      ? await createText(elem, edge.label, {
-          style: getLabelStyles(edge.labelStyle),
+  const { labelStyles } = styles2String(edge);
+  edge.labelStyle = labelStyles;
+  const labelElement = await createText(elem, edge.label, {
+    style: edge.labelStyle,
    useHtmlLabels,
    addSvgBackground: true,
    isNode: false,
-        })
-      : await createLabel(edge.label, getLabelStyles(edge.labelStyle), undefined, false);
-
+  });
  log.info('abc82', edge, edge.labelType);

  // Create outer g, edgeLabel, this will be positioned after graph layout
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts
@@ -62,13 +62,10 @@ export async function erBox<T extends SVGGraphicsElement>(parent: D3Selection<T>

    // drawRect doesn't center non-htmlLabels correctly as of now, so translate label
    if (!evaluate(config.htmlLabels)) {
-      const textElement = shapeSvg.select('.label text');
-      const textNode = textElement.node() as SVGTextElement;
-      if (textNode) {
-        const bbox = textNode.getBBox();
+      const textElement = shapeSvg.select('text');
+      const bbox = (textElement.node() as SVGTextElement)?.getBBox();
      textElement.attr('transform', `translate(${-bbox.width / 2}, 0)`);
    }
-    }
    return shapeSvg;
  }

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -1,4 +1,3 @@
-import createLabel from '../createLabel.js';
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
@@ -14,7 +13,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
  _classes?: string
 ) => {
  let cssClasses;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
  if (!_classes) {
    cssClasses = 'node default';
  } else {
@@ -41,9 +40,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
    label = typeof node.label === 'string' ? node.label : node.label[0];
  }

-  let text;
-  if (node.labelType === 'markdown') {
-    text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
+  const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
    useHtmlLabels,
    width: node.width || getConfig().flowchart?.wrappingWidth,
    // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
@@ -51,16 +48,6 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
    style: node.labelStyle,
    addSvgBackground: !!node.icon || !!node.img,
  });
-  } else {
-    const labelElement = await createLabel(
-      sanitizeText(decodeEntities(label), getConfig()),
-      node.labelStyle,
-      false,
-      true
-    );
-    text = labelEl.node()?.appendChild(labelElement);
-  }
-
  // Get the size of the label
  let bbox = text.getBBox();
  const halfPadding = (node?.padding ?? 0) / 2;
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -1,7 +1,6 @@
 export interface NodeMetaData {
  shape?: string;
  label?: string;
-  labelType?: string;
  icon?: string;
  form?: string;
  pos?: 't' | 'b';
--- a/packages/parser/src/language/architecture/architecture.langium
+++ b/packages/parser/src/language/architecture/architecture.langium
@@ -20,11 +20,11 @@ fragment Statement:
 ;

 fragment LeftPort:
-    ':'lhsDir=ARROW_DIRECTION
+    ':' lhsDir=ID
 ;

 fragment RightPort:
-    rhsDir=ARROW_DIRECTION':'
+    rhsDir=ID ':'
 ;

 fragment Arrow:
@@ -47,6 +47,5 @@ Edge:
    lhsId=ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ID rhsGroup?=ARROW_GROUP? EOL
 ;

-terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
 terminal ARROW_GROUP: /\{group\}/;
 terminal ARROW_INTO: /<|>/;
--- a/packages/parser/tests/architecture.test.ts
+++ b/packages/parser/tests/architecture.test.ts
@@ -19,6 +19,64 @@ describe('architecture', () => {
    });
  });

+  describe('should handle services', () => {
+    it('should handle service with icon', () => {
+      const context = `architecture-beta
+        service TH(disk)
+      `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+      expect(result.value.services).toHaveLength(1);
+      expect(result.value.services?.[0].id).toBe('TH');
+      expect(result.value.services?.[0].icon).toBe('disk');
+    });
+
+    it('should handle service with icon starting with arrow direction letters', () => {
+      const context = `architecture-beta
+        service T(disk)
+        service TH(database)
+        service L(server)
+        service R(cloud)
+        service B(internet)
+        service TOP(disk)
+        service LEFT(disk)
+        service RIGHT(disk)
+        service BOTTOM(disk)
+      `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+      expect(result.value.services).toHaveLength(9);
+    });
+
+    it('should handle service with icon and title', () => {
+      const context = `architecture-beta
+        service db(database)[Database]
+      `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+      expect(result.value.services).toHaveLength(1);
+      expect(result.value.services?.[0].id).toBe('db');
+      expect(result.value.services?.[0].icon).toBe('database');
+      expect(result.value.services?.[0].title).toBe('Database');
+    });
+
+    it('should handle service in a group', () => {
+      const context = `architecture-beta
+        group api(cloud)[API]
+        service db(database)[Database] in api
+      `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+      expect(result.value.services).toHaveLength(1);
+      expect(result.value.services?.[0].id).toBe('db');
+      expect(result.value.services?.[0].in).toBe('api');
+    });
+  });
+
  describe('should handle TitleAndAccessibilities', () => {
    it.each([
      `architecture-beta title sample title`,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
darshanr0107	b2159e4d8a	Merge branch 'develop' into fix-edge-direction-id-parsing	2025-11-07 13:00:34 +05:30
Shubham P	f45ea0c60e	Merge pull request #7096 from mermaid-js/renovate/npm-vite-vulnerability chore(deps): update dependency vite to v7.1.11 [security]	2025-11-06 14:52:25 +00:00
renovate[bot]	d20955a56a	chore(deps): update dependency vite to v7.1.11 [security]	2025-11-06 12:46:25 +00:00
Shubham P	fb66b3fbe3	Merge pull request #7049 from mermaid-js/renovate/major-eslint chore(deps): update eslint (major)	2025-11-06 12:31:47 +00:00
Shubham P	82ea5d63bb	Merge pull request #7017 from mermaid-js/renovate/peter-evans-create-pull-request-digest chore(deps): update peter-evans/create-pull-request digest to 0edc001	2025-11-06 12:30:09 +00:00
renovate[bot]	881e74087a	chore(deps): update eslint	2025-11-06 12:06:45 +00:00
renovate[bot]	09920c0497	chore(deps): update peter-evans/create-pull-request digest to 0edc001	2025-11-06 12:05:55 +00:00
Shubham P	8065d65cd7	Merge pull request #6973 from mermaid-js/renovate/patch-dompurify fix(deps): update dependency dompurify to ^3.2.7	2025-11-06 11:52:40 +00:00
renovate[bot]	09b841f781	fix(deps): update dependency dompurify to ^3.2.7	2025-11-06 10:46:44 +00:00
Shubham P	d0f9dc0c9b	Merge pull request #7018 from mermaid-js/renovate/patch-all-patch fix(deps): update all patch dependencies (patch)	2025-11-06 10:28:10 +00:00
renovate[bot]	15e2824d53	fix(deps): update all patch dependencies	2025-11-06 10:04:11 +00:00
Shubham P	7eb582e860	Merge pull request #7135 from mermaid-js/fix/er-numeric-entity-test-conflict refactor: update test description for standalone numeric entities in ER diagram	2025-11-06 09:51:04 +00:00
omkarht	6ca928f31f	refactor: update test description for standalone numeric entities in ER diagram	2025-11-06 15:05:58 +05:30
darshanr0107	f7d7fe42aa	fix: prevent edge direction tokens L,R,T,B from breaking ID parsing on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-10-27 13:33:48 +05:30