Release Candidate 11.17.0

.changeset/architecture-unicode-titles.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/parser': patch
+---
+
+fix(architecture): allow non-ASCII characters and punctuation in unquoted titles

.changeset/c4-named-attrs-fix.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(c4): named attributes such as `$tags`, `$link` and `$sprite` are no longer clobbered to undefined when they arrive in an earlier positional slot of Person/System/Container/Component/Boundary/Rel statements.

.changeset/c4-unified-shapes.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(c4): render C4 elements through the unified shape system, using the new person shape

.changeset/class-default-unified-renderer.md

@@ -0,0 +1,7 @@
+---
+'mermaid': minor
+---
+
+feat(class): route `classDiagram` to the unified (v2) renderer by default
+
+Set `class: { defaultRenderer: 'dagre-d3' }` in the config to restore the legacy renderer.

.changeset/collapsible-subgraphs.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(flowchart): add collapsible flowchart subgraphs via `subgraphId@{ view: collapsed }`

.changeset/dagre-quiet-debug-logs.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(flowchart): stop dagre layout from spamming `warn`-level logs on every node/edge/cluster

.changeset/elk-keep-entry-node-on-top.md

@@ -0,0 +1,6 @@
+---
+'@mermaid-js/layout-elk': minor
+'mermaid': minor
+---
+
+feat(elk): add `elk.keepEntryNodeOnTop` config option to keep a recursive flow's entry node on top

.changeset/elk-node-placement-alignment.md

@@ -0,0 +1,6 @@
+---
+'mermaid': minor
+'@mermaid-js/layout-elk': minor
+---
+
+feat(elk): add `elk.nodePlacementAlignment` config option

.changeset/every-hats-invent.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(er): add subgraph support to ER diagrams.

.changeset/examples-relatable-examples.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/examples': minor
+---
+
+feat: add relatable, real-world examples for every diagram type, showcasing each diagram's strengths

.changeset/fix-block-diagram-wide-label-overlap.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(block): sibling blocks overlapping in block diagrams when one has a label wider than 200px

.changeset/fix-edge-dasharray-rangeerror.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: a `RangeError: Invalid array length` crash when rendering certain edges.

.changeset/fix-treeview-icons-strict-security.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(treeView): icons disappearing after strict security sanitization.

.changeset/general-shapes.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(flowchart): add `folder`, `bucket`, `console` (terminal window) and `browser` shapes

.changeset/kind-dogs-crash.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(block): allow classdefs to update text color

.changeset/layout-spacing-precedence.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(dagre): let a diagram's own nodeSpacing/rankSpacing take effect in the unified dagre layout

.changeset/person-shape.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(flowchart): add `person` shape (circular head above a rounded body), usable in flowcharts via `A@{ shape: person }`

.changeset/revert-pr-7672.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(flowchart): reverts the behavior change from #7672 (fix/4648-directions), since arrows between subgraphs are broken

.changeset/tangy-regions-flow.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+perf: use `fastdom` to batch DOM measurements (up to 25% speedup)

.changeset/xychart-legends.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(xyChart): add legends for named line and bar series

.cspell/code-terms.txt

@@ -23,6 +23,7 @@ classdef
 classdefid
 classentity
 classname
+clazz
 CODEOWNERS
 COLONSEP
 COMPOSIT_STATE
@@ -163,6 +164,7 @@ ts-nocheck
 tsdoc
 typeof
 typestr
+uninstrumented
 unrouted
 unshift
 urlsafe

.cspell/libraries.txt

@@ -24,6 +24,7 @@ Doctave
 DokuWiki
 dompurify
 elkjs
+fastdom
 fcose
 fontawesome
 Fonticons
@@ -48,6 +49,7 @@ matplotlib
 mdbook
 Mermerd
 mkdocs
+monocart
 Nextra
 nodenext
 npmjs

.cspell/mermaid-terms.txt

@@ -42,6 +42,7 @@ sandboxed
 sentencepiece
 siebling
 statediagram
+Structurizr
 substate
 treeview
 unfixable

.esbuild/build.ts

@@ -6,10 +6,14 @@ import type { MermaidBuildOptions } from './util.js';
 import { defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
+// Opt-in: build a profiling-enabled artifact (`pnpm build:esbuild --profiling`).
+// Off by default so released bundles never carry the profiler.
+const shouldProfile = process.argv.includes('--profiling');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
   const commonOptions: MermaidBuildOptions = {
     ...defaultOptions,
+    profiling: shouldProfile,
     options: packageOptions[entryName],
   } as const;
   const buildConfigs: MermaidBuildOptions[] = [

.esbuild/dev-explorer/console-panel.ts

@@ -14,13 +14,17 @@
   message: string;
 };
 
+const pad2 = (n: number) => (n < 10 ? '0' + n : '' + n);
+
+// Manual HH:MM:SS.mmm — NOT `toLocaleTimeString`. The Intl path costs ~1µs/call,
+// and the panel formats every visible entry on every render; a chatty render
+// (dagre emits thousands of log lines) turned this into seconds of self-time
+// (9s+ in profiles). Hand-formatting is ~100x cheaper and locale-irrelevant here.
 function formatTs(ts: number) {
   const d = new Date(ts);
-  return (
-    d.toLocaleTimeString(undefined, { hour12: false }) +
-    '.' +
-    String(d.getMilliseconds()).padStart(3, '0')
-  );
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}.${String(
+    d.getMilliseconds()
+  ).padStart(3, '0')}`;
 }
 
 function _levelVariant(level: LogLevel) {
@@ -72,6 +76,13 @@
   declare showDebug: boolean;
   declare filterText: string;
 
+  /** Hard cap on retained entries. A single dagre render can emit tens of
+   *  thousands of log lines; without a cap the panel grows unbounded and every
+   *  re-render re-formats the whole list (O(n²)). Keep only the newest N. */
+  static MAX_LOGS = 5000;
+  #pending: LogEntry[] = [];
+  #flushHandle = 0;
+
   constructor() {
     super();
     this.logs = [];
@@ -87,11 +98,36 @@
   }
 
   clear() {
+    if (this.#flushHandle) {
+      cancelAnimationFrame(this.#flushHandle);
+      this.#flushHandle = 0;
+    }
+    this.#pending = [];
     this.logs = [];
   }
 
+  // Batch appends into ONE state update per frame. The old code reassigned
+  // `this.logs` on every entry, so a render emitting N log lines triggered N
+  // Lit re-renders, each re-formatting up to N entries → O(n²) and seconds of
+  // wasted reformatting (the dagre-vs-elk "spinning" was entirely this).
+  // Coalescing collapses a whole render's logs into a single bounded update.
   append(entry: LogEntry) {
-    this.logs = [...this.logs, entry];
+    this.#pending.push(entry);
+    if (this.#flushHandle) {
+      return;
+    }
+    this.#flushHandle = requestAnimationFrame(() => this.#flushPending());
+  }
+
+  #flushPending() {
+    this.#flushHandle = 0;
+    if (this.#pending.length === 0) {
+      return;
+    }
+    const merged = [...this.logs, ...this.#pending];
+    this.#pending = [];
+    const max = DevConsolePanel.MAX_LOGS;
+    this.logs = merged.length > max ? merged.slice(merged.length - max) : merged;
   }
 
   #visibleText() {
@@ -181,30 +217,30 @@
             placeholder="filter…"
             clearable
             value=${this.filterText}
             @sl-input=${(e: any) => (this.filterText = e.target.value ?? '')}
           ></sl-input>
           <sl-checkbox
             size="small"
             ?checked=${this.showDebug}
             @sl-change=${(e: any) => (this.showDebug = e.target.checked)}
             >debug</sl-checkbox
           >
           <sl-checkbox
             size="small"
             ?checked=${this.showInfo}
             @sl-change=${(e: any) => (this.showInfo = e.target.checked)}
             >info</sl-checkbox
           >
           <sl-checkbox
             size="small"
             ?checked=${this.showWarn}
             @sl-change=${(e: any) => (this.showWarn = e.target.checked)}
             >warn</sl-checkbox
           >
           <sl-checkbox
             size="small"
             ?checked=${this.showError}
             @sl-change=${(e: any) => (this.showError = e.target.checked)}
             >error</sl-checkbox
           >
           <sl-button