feature: implement neo look and themes for mermaid diagrams - #7501
Merged
Merged
Conversation
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…dering on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…d shape on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
… neo look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…ibutes in neo look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…doubleCircle and rectLeftInvArrow shapes on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…dProcess shapes in neo look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…es in neo look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…aggedWaveEdgedRectangle shape on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…rrow_barb offset for neo look on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…maid-js/mermaid into feature/neo-look-state-diagram
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…tent styling on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…tent styling on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…gnment on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…/mermaid into feature/neo-look-base
… rendering on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This reverts commit b4971bb.
…andling on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…/mermaid into feature/neo-look-base
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…/mermaid into feature/neo-look-base
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…subroutine shapes
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
…s for state diagram on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
TypeScript 6.0.2 (published 2026-03-23) turned moduleResolution 'node' (node10) into a hard error. Since tsc-check uses typescript: '*', CI started failing after TS 6.0 landed on npm. Update module/moduleResolution from 'esnext'/'node' to 'nodenext'/'nodenext' which is supported by TS 6.0+.
ashishjain0512
approved these changes
Mar 25, 2026
ashishjain0512
added a commit
that referenced
this pull request
Apr 1, 2026
* fix(wardley): Handle dual-label evolution stages and evolve syntax 1. Fix evolution stage parsing to combine name + secondName (e.g., "Genesis / Concept") 2. Fix Evolve rule to accept ID/NAME_WITH_SPACES, not just STRING 3. Fix NAME_WITH_SPACES regex to not match digits after spaces - Now matches "Campfire Kettle" but stops at "Kettle" in "Kettle 0.5" - Pattern: /[A-Za-z][A-Za-z0-9_()&]*(?:\s+[A-Za-z][A-Za-z0-9_()&]*)*/ This fixes: - "parses dual-label evolution stages with slashes" test - "parses evolve statements" test 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Prevent NAME_WITH_SPACES from matching newlines Changed \s+ to [ \t]+ in NAME_WITH_SPACES regex to only match spaces and tabs, not newlines. This prevents the terminal from consuming line breaks and causing "Expecting NEWLINE or EOF" errors. Fixes: - "parses custom evolution stages" test - "parses dual-label evolution stages with slashes" test 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Fix pipeline parent name and bidirectional flow 1. Pipeline rule now accepts ID/NAME_WITH_SPACES for parent, not just STRING - Allows `pipeline Kettle {` without quotes 2. Reorder LINK_PORT alternatives to match longest first (+<> before +< and +>) - Fixes bidirectional flow detection (was matching +< instead of +<>) Fixes: - "parses pipeline blocks with single-coordinate components" test - "handles quoted identifiers, inline labels, and converts coordinates to percentages" test 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Support negative label offsets and optional arrow in links 1. Label rule now accepts INT with optional minus sign for negative offsets - Changed from WARDLEY_NUMBER to INT with negX/negY flags - Handle negative values in wardleyParser.ts 2. Link arrow is now optional when LINK_PORT is present - Allows syntax like `"Mobile App" +<> API` without explicit arrow Fixes: - "parses pipeline blocks with single-coordinate components" test - "handles quoted identifiers, inline labels, and converts coordinates to percentages" test 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Allow parentheses after spaces in component names Fixed NAME_WITH_SPACES terminal regex to allow parentheses, digits, and underscores after spaces. This enables component names like "byte pair encoding (BPE)" to parse correctly. Previously, the pattern required letters after spaces which rejected component names with parentheses like "(BPE)" after spaces. Changed pattern from: (?:[ \t]+[A-Za-z][A-Za-z0-9_()&]*)* To: (?:[ \t]+[A-Za-z0-9_()&]+)* Fixes E2E test "should render GPT Tokeniser Architecture" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Allow integer coordinates in annotations Extended WARDLEY_NUMBER terminal to match both decimals (0.5) and integers (1, 100) to support annotations syntax like [1, 0]. The previous regex /[0-9]+\.[0-9]+/ only matched decimals, causing parsing errors for integer coordinates in the annotations statement. Changed to: /[0-9]+\.[0-9]+|[0-9]+/ Fixes GPT Tokeniser test which uses `annotations [1, 0]` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore(wardley): Remove dead code from valueConverter Removed unused case handlers for terminals that no longer exist in the grammar (COMPONENT_NAME, EVOLUTION_NAME, TEXT_UNTIL_BRACKET, TEXT_LINE). These were remnants from earlier grammar iterations. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(wardley): Improve coordinate validation error message Clarified the error message for invalid coordinates to explain that values can be either 0-1 (decimal, converted to percentage) or 0-100 (percentage, used as-is). Before: "must be between 0 and 1 (0-100)" After: "must be between 0-1 (decimal) or 0-100 (percentage)" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat(wardley): Make area dimensions configurable Added `areaWidth` and `areaHeight` configuration options to allow users to customize the size of area rectangles in Wardley diagrams. New config options: - `areaWidth`: Width of area rectangles in pixels (default: 120) - `areaHeight`: Height of area rectangles in pixels (default: 80) Example usage: ``` %%{init: {'wardley-beta': {'areaWidth': 150, 'areaHeight': 100}}}%% wardley-beta area "My Area" [0.5, 0.5] ``` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor(wardley): Remove area feature (not in OWM spec) Removed the `area` feature as it is not part of the standard Online Wardley Maps (OWM) specification. This keeps the implementation aligned with the official OWM syntax. Removed: - `area` grammar rule and KW_AREA terminal - Area parsing, building, and rendering code - WardleyArea interface and related types - areaWidth/areaHeight config options - Area test case - Area documentation section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: pie: Don't sort, keep order. Keep color order constant. * Adds Tachi Code to browser extensions list * sample of what I want to see change * add show data label outside bar but don't do anything with it yet * progress commit return unchanged arrow function to inline look at extreme cases reduce duplication and improve naming [autofix.ci] apply automated fixes improve example cases to highlight incongruity some hacks for easier debugging wip of removing font width requirement for horizontal out of bar stuff remove some prior experimentation we don't need anymore simplified horizontal handling much simpler methodology seems to work across different examples * add cypress tests * add documentation * fixes to cypress test * fix line removed by accident * docs format and content fixes * add release version label to markdown heading within docs * add changeset * fix: align branch label background with text for multi-line labels in LR GitGraph The background rectangle for branch labels was misaligned with the text when branch names contained multi-line text (e.g. "Feature A\n(ongoing)") in LR layout. The old transform used `pos - bbox.height / 2` which caused the rect to shift further up as text height increased, while the text position remained centered at `pos - 1`. Fixed by using a constant y-offset (`pos - 11`) in the transform, derived from the constraint that the rect center must equal the text center regardless of bbox.height. Closes #7362 * fix typo introduced when addressing merge conflicts * fix more typos introduced while addressing merge conflict * fix demo index * change order of docs in nav bar so new diagram is at the bottom * add an example * use example from issue to improve examples * make treeview demo page consistent with treemap demo page (it's fancier) * add changeset * fix examples failing test * add failing parser tests for treeview * wip understanding parser * parser WIP * fix naming conflict * handle null case * add indent tests * adjust indent test (affected by whitespace handling?) * indent tests behave differently locally to pipeline. comment out to check review branch * possible option is to return indent length instead of actual indent (speculative since indent works locally, but not in pipeline) * Revert "possible option is to return indent length instead of actual indent (speculative since indent works locally, but not in pipeline)" This reverts commit b85199f. * test * Revert "Revert "possible option is to return indent length instead of actual indent (speculative since indent works locally, but not in pipeline)"" This reverts commit 209d262. * try this again in pipeline * this reordering made a difference locally * issue with treeview accessibility test is because of fragility with whitespace in front of content that should not have leading whitespace. is it just the test that is fragile? * update docs to include link to langium docs and playground * fix: make treemap title and labels theme-aware for dark background readability * restore comment ignoring, and comment * fix: scope node/edge element IDs to diagram SVG to prevent duplicates When multiple mermaid diagrams appear on the same page, internal SVG element IDs for nodes and edges collide (e.g., flowchart-A-0 appears twice). This causes invalid HTML (WCAG 4.1.1), broken url(#...) refs, and CSS selectors matching the wrong element. Prefix all internal element IDs with the diagram's SVG element ID (e.g., mermaid-0-flowchart-A-0), following the same pattern used for marker IDs in PR #4825. Changes: - render.ts: prefix all node domIds before layout - edges.js: prefix edge path IDs with diagram ID - createGraph.ts: prefix edge label node IDs - flowDb.ts/classDb.ts: add setDiagramId(), defer click handler domId lookup to bind time so prefixed IDs are used - flowRenderer/classRenderer: call setDiagramId() before getData() - flowRenderer: fix link selector to use domId instead of id Affects all diagram types that go through the unified render path: flowchart, class, state, ER, requirement, mindmap. https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE * chore: add node-compile-cache to .gitignore https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE * test: trim unique DOM ID tests from 355 to 161 lines Extract addFlowVertex helper to deduplicate verbose addVertex calls. Remove three describe blocks that only tested local mock functions (string concatenation), keeping all tests that exercise real FlowDB/ClassDB code and the full collision simulation. https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE * refactor: clean up diagramId code per review feedback - Rename setDiagramId param from `id` to `svgElementId` for clarity - Add setDiagramId to DiagramDB interface to centralize the contract - Remove stale "defer lookUpDomId" comments in classDb.ts - Remove PR #4825 reference from render.ts comment https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE * refactor: centralize diagramId field and setter into ScopedDiagramDB base class Extract shared `diagramId` field and `setDiagramId` setter from FlowDB and ClassDB into a new abstract base class `ScopedDiagramDB`. Both DB classes now extend it instead of duplicating the field and method. https://claude.ai/code/session_01FPVnyf54nFQNQnhZ7dSWCE * Revert "refactor: centralize diagramId field and setter into ScopedDiagramDB base class" This reverts commit 7245574. * fix: ensure unique SVG element IDs across multiple mermaid diagrams Fix unscoped element IDs in clusters.js (5 locations), defaultMindmapNode.ts, and kanbanRenderer.ts that caused duplicate DOM IDs when multiple diagrams with identical node names appeared on the same page. Add self-enforcing integration test that renders two identical diagrams for every registered diagram type and asserts no duplicate element IDs. The test auto-detects new diagram types via the registry and fails if they're not covered. Legacy renderers with known issues use it.fails to document them. Add runtime duplicate-ID warning in mermaid.run() (debug log level only) with a pre-filled GitHub issue link for easy reporting. Add Cypress tests for browser-level multi-diagram ID uniqueness verification. https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * chore: add generated .d.ts files from examples package build These type declaration files are generated by the prepare script during pnpm install. Adding them to avoid untracked file warnings. https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * Revert "chore: add generated .d.ts files from examples package build" This reverts commit 10002cf. * chore: gitignore generated .d.ts files from examples package https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * simplify: drop runtime warning and test over-engineering New diagram types are added ~once per 5 months. The 4-category test taxonomy (unified/simple/legacy/jsdom-incompatible), self-enforcement registry check, and runtime duplicate-ID warning were not worth the maintenance cost. Simplified to a flat list of diagram tests that covers all types where IDs should be unique. https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * refactor: drop domId fallback in clusters.js, extract Cypress helper Remove `|| node.id` fallback from clusters.js — every code path that calls insertCluster (dagre, cose-bilkent, kanban) already sets domId. The fallback silently hid missing domId bugs instead of surfacing them. Extract assertNoDuplicateIds into cypress/helpers/util.ts and use it in both marker_unique_id and multi_diagram_unique_ids specs. https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * fix: namespace marker/element IDs with diagram ID to prevent collisions Prefix all hardcoded SVG marker IDs (arrowhead, filled-head, crosshead, sequencenumber, etc.) and element IDs with the diagram's unique ID in sequence, journey, timeline, gantt, and C4 renderers. This prevents cross-diagram ID collisions when multiple diagrams render on the same page. Covers: sequence (12 markers), journey (arrowhead), timeline (arrowhead), C4 (arrowhead, arrowend, filled-head, crosshead, sequencenumber, plus database/computer/clock symbols), and gantt (task + exclude-day IDs). https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * test: add sequence, journey, timeline, gantt, C4 to multi-diagram ID uniqueness tests Extends the parametrized renderTwoAndCheckIds test suite to cover all 5 diagram types that previously had hardcoded marker/element IDs. Also fixes a pre-existing bug in timeline's svgDraw.js where node IDs were `node-undefined` (now uses a monotonic counter prefixed with diagram ID). All 19 diagram types now pass the duplicate-ID stress test. https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * test: add meta-test enforcing ID uniqueness coverage for all diagram types Adds a meta-test that cross-references the detector registry against the test map, so any new diagram type added to mermaid will fail CI unless it has a corresponding ID uniqueness test (or is explicitly excluded with a justification). Also documents block and architecture as known-failing (pre-existing ID collision bugs tracked via it.fails), and excludes mindmap (cytoscape JSDOM limitation, uses unified pipeline so IDs are correct). https://claude.ai/code/session_01QCm1SAitm8ZpLjjsk7eFv3 * test: add comprehensive stress tests for multi-diagram ID uniqueness Exercises the ID scoping mechanism under adversarial conditions: - 5x identical diagrams for 10 different diagram types (flowchart, class, ER, state, sequence, gantt, pie, C4, journey, timeline) - Complex graphs with 20 nodes and fan-out topologies - Nested subgraphs (3 levels deep) - Mixed diagram types on the same page (up to 10 types simultaneously) - FlowDB/ClassDB unit-level stress with 10-100 instances - Sequential render stability and clear/reset cycles - Adversarial node names that mimic diagramId prefixes - SVG marker definition uniqueness (sequence, C4) - Edge label ID uniqueness across renders - Kanban, git graph, requirement, XY chart, quadrant, sankey - Diagram ID prefix propagation verification https://claude.ai/code/session_01MtKnkbaUyKZY6R5vTrMNam * fix: scope journey task line IDs with diagramId to prevent collisions The journey diagram's svgDraw.js used bare `task0`, `task1`, etc. as element IDs without any diagram-scoped prefix. This worked by accident because the module-level taskCount never reset, but was fragile and inconsistent with the ID scoping pattern used by all other diagram types. Fix: - Store the diagramId passed to initGraphics() - Reset taskCount on each render via initGraphics() - Prefix task line IDs with diagramId (e.g. `mermaid-0-task0`) https://claude.ai/code/session_01MtKnkbaUyKZY6R5vTrMNam * test: add targeted journey task-line ID test, remove stress tests Add a focused regression test that verifies journey diagram task line IDs are scoped with the diagramId prefix. This test fails against the pre-fix code (bare "task0"/"task1" IDs) and passes after the fix ("journey-a-task0"/"journey-b-task0"). Remove the large stress test file — the targeted test plus the existing multi-diagram-id-uniqueness suite provide sufficient coverage. https://claude.ai/code/session_01MtKnkbaUyKZY6R5vTrMNam * refactor: trim journey task-line ID test by reusing renderTwoAndCheckIds https://claude.ai/code/session_01MtKnkbaUyKZY6R5vTrMNam * test: add comprehensive stress tests for multi-diagram ID uniqueness Add 43 stress tests covering scenarios beyond the basic two-diagram tests: - Scale: 10 and 20 identical diagrams of 11 different types (flowchart, class, sequence, journey, timeline, gantt, C4, state, ER, pie, git) - Cross-type: mixed diagram types rendered into a single container - Subgraphs/clusters: nested and multi-level subgraph ID isolation - Large diagrams: 50-node flowcharts, 20-message sequences, 20-class diagrams, 15-task journeys - Minimal diagrams: single-node/single-message edge cases - DiagramId boundaries: hyphenated, underscored, numeric-prefixed IDs - Sequential re-rendering: clear-and-rerender and append-without-clear - Module-level counter resets: journey taskCount and timeline nodeCount - SVG marker/defs scoping: sequence, flowchart, and C4 markers - DB-layer scoping: FlowDB and ClassDB lookUpDomId under 5x stress - Kanban pre-flight domId injection - Gantt special characters in task IDs All 43 tests pass, confirming the ID uniqueness fix holds under stress. https://claude.ai/code/session_012gG2dXNE8BJAZfHJjs96aX * fix: resolve three ID-scoping issues found during stress testing 1. flowDb.ts lookUpDomId fallback: when called with an ID not in the vertex map (e.g. subgraph IDs), the fallback now applies the diagramId prefix instead of returning the bare ID. 2. sequence/svgDraw.js drawActorTypeControl: remove the `|| ''` fallback on conf.diagramId that produced colliding marker IDs (e.g. "-filled-head-control") when multiple sequence diagrams share a page. The renderer always sets conf.diagramId before rendering, so the fallback was masking a potential collision. 3. Eliminate module-level diagramId variables in sequence, journey, and timeline renderers to prevent race conditions in concurrent or SSR rendering scenarios: - sequenceRenderer.ts: use conf.diagramId instead of redundant module-level diagramId variable - journey/svgDraw.js: pass diagramId as parameter to drawTask instead of reading from module scope - timeline/svgDraw.js: pass diagramId as parameter to drawTask, drawNode, and defaultBkg; also fixes timeline drawTask which was missing the diagramId prefix entirely ("task0" vs "diagramId-task0") - timeline/timelineRenderer.ts: pass diagramId through drawTasks and drawEvents instead of reading from module-level currentDiagramId Adds 5 regression tests that would have failed before these fixes. https://claude.ai/code/session_012gG2dXNE8BJAZfHJjs96aX * fix: remove diagramId ternary fallbacks — always prefix lookUpDomId in flowDb and classDb, and createGraph's edge-label domId, all had `diagramId ? prefixed : bare` ternaries. Since the render pipeline always calls setDiagramId before any lookups, the bare-ID fallback just silently masked missing diagramId bugs. Now these always prefix, making a missing setDiagramId call surface immediately. https://claude.ai/code/session_012gG2dXNE8BJAZfHJjs96aX * chore: added pnpm changeset * [autofix.ci] apply automated fixes * fix: replace dead/wrong domId fallbacks with loud failures The `|| node.id` / `|| vertex.id` / `: edge.id` fallbacks are dead code — render.ts always sets domId before shape/edge functions run. Worse, if reached, they'd silently produce unscoped IDs, reintroducing the duplicate-ID bug this PR fixes. Changes: - defaultMindmapNode.ts: throw on missing domId, use node.domId directly - flowRenderer-v3-unified.ts: throw on missing domId, use vertex.domId - edges.js: rename `id` param to `diagramId`, throw if missing, drop ternary fallback to bare edge.id * fix: use diagramId instead of undefined id in insertEdge edge markers The addEdgeMarkers call on line 777 referenced `id` which was never defined in insertEdge's scope — the parameter is named `diagramId`. This caused: - ESLint no-undef lint failure - ReferenceError at runtime in all diagrams using the unified renderer - All unit tests and e2e tests to fail Also adds unit tests for the three defensive throw guards introduced in the PR (insertEdge, flowRenderer, defaultMindmapNode) to achieve 100% coverage on new code. https://claude.ai/code/session_01JzR5nomkuYcHxMJ67FMuW4 * fix: resolve E2E test failures caused by ID-prefixed SVG elements The PR's ID-prefixing changes caused three categories of E2E failures: 1. Double <a> wrapping in flowRenderer: The link-wrapping loop (lines 68-105) was dead code before the PR because vertex.id never matched the rendered element's actual ID. The PR's switch to vertex.domId activated this dead code, creating a second <a> inside .node that broke cy.contains().find('.node') in Cypress. Fix: remove the redundant loop since nodes.ts (lines 36-51) already wraps link nodes in <svg:a> during rendering, including sandbox support (target="_top"). The removed sandboxElement and doc variables were only used by this redundant loop and had no other consumers in the function — sandbox mode is fully preserved via nodes.ts. 2. Edge animation selectors: path#L_A_B_0 no longer matches because edge IDs are now prefixed with diagramId. Fix: use attribute selectors path[id$="-L_A_B_0"]. 3. Gantt/rerender selectors: rect#cl1, text#cl1-text, and [id^=flowchart-A] no longer match prefixed IDs. Fix: use [id$="-cl1"], [id$="-cl1-text"], and [id*=flowchart-A]. https://claude.ai/code/session_012TZWtntRQbGFN6Sk9qDuhE * fix: prefix gantt task IDs in click handlers to match rendered element IDs The gantt click handler (pushFun in ganttDb.js) used document.querySelector with the raw task ID (e.g., "cl2"), but the renderer now sets element IDs as "${diagramId}-${taskId}" (e.g., "mermaid-0-cl2"). This meant click event listeners were never attached, breaking all gantt click interactions (both URL navigation and function callbacks) in the E2E tests. Fix: Add setDiagramId to ganttDb.js (matching the pattern used by flowDb.ts and classDb.ts), call it from the gantt renderer's draw function, and use the prefixed ID in pushFun's querySelector calls. https://claude.ai/code/session_012TZWtntRQbGFN6Sk9qDuhE * fix: update CSS ID selectors to match prefixed SVG element IDs The PR prefixes all SVG marker IDs with the diagram container ID (e.g., `mermaid-0-arrowhead` instead of `arrowhead`), but the CSS styles.js files still used hardcoded `#arrowhead`, `#crosshead`, etc. selectors that no longer matched. This caused markers/arrowheads to lose their themed fill/stroke colors, producing subtle visual diffs detected by Argos CI. Replace all `#id` selectors with `[id$="-suffix"]` attribute selectors that match the new prefixed IDs: - sequence/styles.js: #arrowhead, #sequencenumber, #crosshead - class/styles.js: #compositionStart/End, #dependencyStart/End, #extensionStart/End, #aggregationStart/End, #lollipopStart/End - state/styles.js: #statediagram-barbEnd, #dependencyStart/End Also fixes a pre-existing bug in class/styles.js where #dependencyStart was duplicated instead of having #dependencyEnd. https://claude.ai/code/session_01DP7eBkBQuMUqZRkvJBdmyS * fix: give ER background nodes a unique domId to prevent duplicate IDs The erBox shape creates background nodes by spreading the parent node and overriding `id` with a '-background' suffix, but the spread also copies `domId`. Since the SVG element uses `domId || id`, both the foreground and background nodes ended up with the same DOM ID. This caused the background-positioning logic in erRenderer-unified.ts to fail (it selects by `[id*="-background"]`), leaving background nodes un-positioned and visible as duplicate tables. https://claude.ai/code/session_01KzNAdiCYp8tZZoBogdbhin * refactor: drop unnecessary domId fallback in erBox background node render.ts always sets node.domId before erBox runs, so the `|| node.id` fallback is dead code. https://claude.ai/code/session_01KzNAdiCYp8tZZoBogdbhin * refactor: drop unnecessary domId fallback in erBox shape element Same rationale as the background node — render.ts guarantees domId is set before shape rendering. https://claude.ai/code/session_01KzNAdiCYp8tZZoBogdbhin * fix: use nullish coalescing fallback for domId in erBox shape domId is optional on the Node type since it's not yet assigned during getData(). Use ?? node.id as a defensive fallback, matching the convention used by every other shape renderer in the codebase. https://claude.ai/code/session_01UXvz61L5VFDwLmWDqbhfxm * fix: address code review feedback on duplicate SVG element IDs - Guard lookUpDomId() against empty diagramId in flowDb.ts and classDb.ts to prevent malformed IDs like "-flowchart-A-0" when diagramId is unset - Pass diagramId as a parameter to drawMessage() in sequenceRenderer.ts instead of mutating the shared conf object - Update changeset to accurately list covered diagram types and note that remaining types will be addressed in follow-up PRs https://claude.ai/code/session_01UDSa3mTe2uhLiTYVn7cXQg * fix: restore conf.diagramId for svgDraw.js and fix test comments Red-team found that svgDraw.js drawActorTypeControl() reads conf.diagramId directly (lines 690, 712), so removing the mutation would break control actor marker rendering. Keep conf.diagramId assignment for svgDraw.js compatibility while also passing diagramId as a clean parameter to drawMessage(). Also fix misleading test comments that said "prefix is just '-'" — with the empty diagramId guard, no prefix is applied at all. https://claude.ai/code/session_01UDSa3mTe2uhLiTYVn7cXQg * refactor: thread diagramId as parameter instead of mutating conf Remove conf.diagramId mutation entirely. Pass diagramId explicitly through draw() → drawActors() → drawActor() → drawActorTypeControl() so svgDraw.js no longer reads diagramId from the shared config object. https://claude.ai/code/session_01UDSa3mTe2uhLiTYVn7cXQg * fix: update changeset to minor and reflect full diagram coverage All diagram types are effectively covered by the unique DOM ID prefixing, not just a subset. Bump from patch to minor since this is a behavioral change to generated IDs. https://claude.ai/code/session_01UDSa3mTe2uhLiTYVn7cXQg * fix: add ishikawa/venn to ID uniqueness tests and fix architecture test timeout After merging develop, two new diagram types (ishikawa, venn) were added upstream but missing from the multi-diagram ID uniqueness test map, causing the meta-test to fail. The architecture svgDraw test also timed out under parallel execution due to CPU-intensive cytoscape layout. - Add ishikawa and venn entries to DIAGRAMS map in multi-diagram-id-uniqueness.spec.ts - Increase architecture svgDraw describe timeout to 15s to handle resource contention during full test suite runs https://claude.ai/code/session_0195arHUvMWxqnYF8JxcWPru * refactor(types): correct types for `createText.ts` Fix the TypeScript types for `createText.ts`, allowing us to remove the `@ts-nocheck` statement. I've also made sure to get rid of all the `any` types in this file. * docs: add a TSDoc comment to `createText()` * fix: support classDef styling inside composite states * fix(architecture): scope cytoscape label mapping to edges with labels The edge stylesheet selector applied `label: 'data(label)'` to all edges, including those without titles. This caused cytoscape to emit console warnings about mapping data to elements without corresponding data fields. Split the edge selector so label mapping only applies via `edge[label]`, matching the existing `node[label]` guard pattern. Resolves #6031 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add small TSDoc comment to decodeEntities() I'm not exactly sure why `decodeEntities()` is needed and what it does, but I added a brief comment to make it a bit more clear that it's **NOT** decoding HTML entities, but just decoding what `encodeEntities` is doing. * refactor: `decodeEntities` if `htmlLabels: false` In the `createText()` function, we are calling `decodeEntities()` on the input if `htmlLabels: true`, but we weren't doing it `htmlLabels: false` was set. I can't seem to find anywhere this is actually impacting diagrams, since we're calling `decodeEntities()` already normally before calling `createText()`, hence why this is just a `refactor` commit. Original-commit: #7297 Co-authored-by: chandershekhar22 <chandersj.it.22@nitj.ac.in> * fix: prevent escaping `<` and `&` when `htmlLabels: false` When creating labels using `htmlLabels: false`, e.g. ```mermaid --- config: htmlLabels: false --- flowchart TD A[2 < 4 && 12 > 14] ``` The SVG node label gets rendered as `2 < 4 && 12 > 14`. This is fine for HTML text, where we use `.innerHTML` to set the value. But for non-HTML Labels, we use `.textContent`, so we need to pass the unescaped values. Ideally we would stop calling DOMPurify on this label when `.textContent` is used, since the content doesn't need to be sanitized, but adding a quick `<`/`>`/`&`-> `<`/`>`/`&` also works. I've adapted this commit from #6406. Closes: #6406 Co-authored-by: khalil <5alil.landolsi@gmail.com> * refactor: handle `node.padding==undefined` TypeScript wasn't catching these earlier, since `bbox` was `any`, but now that it's been typed correctly, all the `node.padding` uses in expressions with `bbox` are throwing TypeScript errors. * refactor(types): assert `.textContent` is non-null According to MDN, this is only `null` if the `Node` is a `Document`. I'm not 100% sure why TypeScript is throwing an error on this, since my VS Code shows that `Element.textContent` will never be `null`, since `Document` can never be an `Element`, but we do have other non-null assertions for this scattered over the place. See: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent * refactor(types): type known `<div>` elements We know that the output of `createText` when `htmlLabels: true` is set is a `<foreignObject>` that contains a `<div>`, so this can fix our TypeScript errors. * fix(sequence): add catch-all rule for ID lexer state to prevent hang The sequence diagram JISON parser had no catch-all rule in the exclusive ID lexer state. When input like `participant X asAlias:text` was parsed (missing space after "as"), none of the ID-state rules could match due to the colon terminating the character class match before end-of-line. This caused a lexer error that could hang browsers depending on error recovery behavior. Add a catch-all `<ID>[^\n]+` rule that produces an INVALID token when no other ID-state rule matches, ensuring the parser always makes progress and produces a clean parse error. Resolves #6399 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: fix duplicate `createText` test case See: #7436 (review) * refactor: remove unused requirement box unescaping Replacing `<` and `>` in requirement shapes is no longer necessary, now that `createText` does it automatically when `htmlLabels: false`. * fix(flowchart): warn when style targets a non-existent node Resolves #7040 When a `style` statement references a node that hasn't been defined (e.g., `style A fill:#f00` when only `AA` exists), log a warning instead of silently creating a phantom node. The node is still created for backward compatibility, but the warning helps users catch typos. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs(classDiagram): remove broken inline annotation example Resolves #7143 The docs TIP blockquote recommended `class Shape <<interface>>` as "inline" annotation syntax, but this is not valid — the parser grammar has no rule for annotations after classIdentifier. Only the separate line (`<<interface>> Shape`) and nested (`{ <<interface>> }`) syntaxes are supported. Removed the misleading TIP section. Added tests verifying both valid annotation syntaxes match the remaining docs examples. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs(gantt): document valid duration token formats Resolves #7212 Added a "Duration format" section to gantt.md listing valid unit suffixes (ms, s, h, d, w, M, y) with examples. Also notes that decimal values are supported and invalid tokens are silently ignored. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: use `<<` for requirement edge labels Before aac86f7 (fix: edge label rendering for ER and requirement diagrams when flowchart: { htmlLabels: false }, 2026-01-06), we used to use `<<` for requirement edge labels. However, due to a bug in `createText` with `useHtmlLabels: false`, where `<` was being rendered as `<`, we updated it to `«`. Now that this bug has been fixed in 57b70b3 (fix: prevent escaping `<` and `&` when `htmlLabels: false`, 2026-03-02), we can revert this change and go back to using `<<`. We have to encode it as `<<` instead of `<<`, as otherwise `marked` treats it as HTML. No changelog should be necessary, assuming this gets merged before the next release. * Add vertical timeline * [autofix.ci] apply automated fixes * add release version * [autofix.ci] apply automated fixes * add visual regression test * handle string fontSize correctly * Update gitignore * Update gitignore * chore(dev-deps): upgrade pnpm to v10.30.3 See: https://github.com/pnpm/pnpm/releases/tag/v10.30.3 * build: set a 3 day `minimumReleaseAge` for NPM Set a 3 day `minimumReleaseAge` dependency cooldown for NPN dependencies, so that we never automatically upgrade to a dependency that is less than 3 days old. This helps avoid supply-chain attacks and prevents issues with NPM packages being unpublished. If we do need to manually update something, we can use `minimumReleaseAgeExclude` for this. See: https://blog.yossarian.net/2025/11/21/We-should-all-be-using-dependency-cooldowns See: https://docs.renovatebot.com/presets-security/#securityminimumreleaseagenpm See: https://pnpm.io/settings#minimumreleaseage * ci(renovate): add dependency cooldown for CI/Docker @renovatebot supports these for Docker images hosted on docker.io, and most GitHub tags, but only for the `major`, `minor`, and `patch` updates. Digest updates usually won't work. See: https://docs.renovatebot.com/key-concepts/minimum-release-age/#which-registries-support-release-timestamps See: https://docs.renovatebot.com/key-concepts/minimum-release-age/#which-update-types-take-minimumreleaseage-into-account See: renovatebot/renovate#39781 (reply in thread) * fix(classDiagram): support inline annotation syntax (class Shape <<interface>>) Add grammar rules to classStatement for inline annotations instead of removing the docs example. Supports three forms: - class Shape <<interface>> - class Shape <<interface>> { members } - class Shape <<interface>> {} Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: fix wording nit and rename changeset file - "either way" → "in all cases" for three annotation methods - Rename changeset to match fix approach Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Version Packages * issue 1331 - draw children under same g * fix: add E2E snapshot test and changeset for state diagram root <g> grouping Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: update .gitignore to include architecture-randomize.html in demos/dev * feat(architecture): enable architecture diagram tests and add randomization demo - Re-enabled tests for architecture diagrams, ensuring deterministic layouts. - Added a new test for complex deeply-nested diagrams. - Introduced a new HTML demo for testing architecture randomization configurations. * feat(architecture): add `randomize` option for architecture diagrams layout - Introduced a new `randomize` configuration option to allow random initial node positions in architecture diagrams. - Updated the configuration schema and types to include the new option, defaulting to `false` for deterministic layouts. - Modified the architecture renderer to utilize the `randomize` setting during layout calculations. * refactor(architecture): standardize syntax in architecture diagram tests - Updated the syntax for connections and labels in architecture diagram tests for consistency. - Added a new test case to validate rendering with the `randomize` option set to true, ensuring no errors occur during the process. * update parser to require spaces around content * fix formatting * generate new changeset (minor) * support customising text colour and line colour separately - still need to check docs and e2e for this, but not theming * update cypress * reviewing other examples, it seems more consistent to refer to label than text eg labelFontSize and labelColor * fix missed examples * regenerate changeset * make custom formatting examples more exaggerated to convey meaning more clearly * new changeset * add link to ishikawa diagram * remove redundant change sets * add theme support for data label colour in xy chart * update changeset as per feedback * use feat prefix in changeset * fix: address PR review issues for duplicate SVG element IDs - Restore .gitignore entries lost during merge conflict resolution - Fix block diagram duplicate IDs by adding diagramId support to blockDB and prefixing node domIds and edge IDs in renderHelpers - Fix architecture diagram duplicate IDs by adding diagramId to ArchitectureDB and prefixing all element IDs in svgDraw - Move block/architecture from known-failing to passing tests - Reset timeline taskCount in initGraphics to prevent counter leaks - Add diagramId to LayoutData TypeScript interface for type safety - Remove dead insertDynamicNumber function from C4 svgDraw - Remove redundant `const diagramId = id` alias in sequence renderer - Standardize domId fallback from ?? to || in erBox.ts https://claude.ai/code/session_01SPyLYoNghEHAXG6a5Vtr2X * fix: update architecture svgDraw test selectors for prefixed IDs The test used un-prefixed selectors like `#group-api` and `[id^=service-]` which no longer match after IDs are prefixed with the diagram's SVG element ID. https://claude.ai/code/session_01SPyLYoNghEHAXG6a5Vtr2X * docs: regenerate LayoutData docs for diagramId property https://claude.ai/code/session_01SPyLYoNghEHAXG6a5Vtr2X * Add IntelliJ Idea integration with Mermaid Visualizer * [autofix.ci] apply automated fixes * turn on data labels for Render all the theme color e2e test * fix pnpm lock file * merge v11.13.0 to develop * fix: ER diagram parsing for numeric entity identifier "1" The lexer now correctly tokenizes "1" followed by whitespace and a digit as the ONLY_ONE cardinality token. This fixes parsing errors when using "1" as an entity name on the right side of a relationship with cardinality 1. Fixes #7472 * fix: prevent long pie chart titles from being clipped When a pie chart has a long title (e.g. "Weekly Grocery Consumption for a Family of 4"), the title text was clipped on the left side because the SVG viewBox did not account for the title width. The title is centered at x = pieWidth/2 in SVG coordinates. If the title is wider than pieWidth, it extends past x=0 and gets clipped since the viewBox started at x=0. Fixed by measuring the rendered title width and expanding the viewBox to accommodate it when the title is wider than the chart + legend area. Closes #5567 * rework: use viewBox expansion for wide titles instead of group shifting Replace the group-shift approach with direct viewBox expansion using Math.min(0, titleLeft) / Math.max(chartAndLegendWidth, titleRight). This correctly handles all overflow cases (left, right, or both) without needing conditional group transforms. Also rename legendWidth to chartAndLegendWidth for clarity. * fix(ishikawa): preserve cause hierarchy when effect is indented more than causes Set baseLevel from the first cause instead of the effect line, so relative indentation between causes is preserved regardless of effect indentation. Previously, all causes were clamped to level 1 when the effect had higher indentation, destroying the parent-child hierarchy. Resolves #7469 * test(ishikawa): add e2e visual test for indented effect with dedented causes Adds snapshot test covering the scenario from #7469 where the effect line is indented more than its causes. * test: add boundary test for multi-digit numeric entity identifier Add test case using entity "12" to ensure lexer fix covers all numeric identifiers, not just single digit 1. Refs #7472 * fix(treemap): add changeset and dark theme Cypress snapshot tests Add a patch changeset for the theme-aware color fix. Add Cypress snapshot tests verifying treemap readability on dark and neutral themes. Resolves #7218 * docs(gantt): add missing minutes (m) unit to duration format table The parseDuration regex in ganttDb.js already supports 'm' for minutes, and ganttDb.spec.ts has an existing test for it. Add the missing row. * add spec * chore: update mermaid version to minor for architecture diagram changes * docs(architecture): add configuration section for `randomize` option in architecture diagrams - Introduced a new section in the architecture documentation detailing the `randomize` option for initial node positions. - Provided examples for enabling randomization via frontmatter and `mermaid.initialize()`. - Updated the configuration table to include the new option and its default behavior. * feat(schema): add `randomize` option to configuration schema * fix typo in renovate config * fix naming conflict * regenerate lockfile * add unit test for multi diagram id uniqueness * chore: remove accidental planning/guide files from PR Remove files that were accidentally committed and flagged by reviewers: - PR_READY.md - PR_SUBMISSION_GUIDE.md - WARDLEY_MAPS_USER_GUIDE.md - WARDLEY_MAPS_MEDIUM_GUIDE.md Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * renovate config typo take 2 * oops I brought back the first typo * fix: preserve original arrow types when splitting labeled edges When an edge with a label gets split into two sub-edges (edge-to-label and edge-from-label) in createGraph.ts, the arrow types were being hardcoded instead of preserving the original edge's arrow types. This caused labeled open edges (using --- syntax) to incorrectly show arrowheads, and bidirectional labeled edges to lose their start arrows. Now edgeToLabel preserves the original arrowTypeStart and edgeFromLabel preserves the original arrowTypeEnd, fixing the rendering for all labeled edge types. Fixes #6289 * refactor: remove dead createGraphWithElements function, keep regression test The createGraphWithElements function in createGraph.ts was exported but never imported anywhere in the codebase. The original fix modified this dead code path, which had no runtime effect. The active code path in flowDb.ts already correctly handles arrow_open edges by setting arrowTypeStart/End to 'none'. No edge splitting occurs for labeled edges in the dagre layout — labels are rendered as floating SVG elements positioned at the edge midpoint. Removed the entire dead code file and kept the Cypress regression test for open edge arrowhead behavior. * Merge pull request #7501 from mermaid-js/feature/neo-look-base feature: implement neo look and themes for mermaid diagrams * fix: apply classDef styles correctly to divider element on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com> * fix: iupdate branch label positioning on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com> --------- Co-authored-by: tractorjuice <129532814+tractorjuice@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Danny Milosavljevic <gitea@fake.local> Co-authored-by: David Septimus <davidseptimus@gmail.com> Co-authored-by: leentaylor <leentaylor@gmail.com> Co-authored-by: Lee Taylor <84303927+lee-treehouse@users.noreply.github.com> Co-authored-by: Varun Chawla <varun_6april@hotmail.com> Co-authored-by: Adam <adam@mymac.local> Co-authored-by: Varun Chawla <34209028+veeceey@users.noreply.github.com> Co-authored-by: Alex Turner <alex@turntrout.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Alois Klink <alois@aloisklink.com> Co-authored-by: Knut Sveidqvist <knsv@users.noreply.github.com> Co-authored-by: kibanana <kyw017763@gmail.com> Co-authored-by: Knut Sveidqvist <knsv@sveido.com> Co-authored-by: chandershekhar22 <chandersj.it.22@nitj.ac.in> Co-authored-by: khalil <5alil.landolsi@gmail.com> Co-authored-by: TATSUNO “Taz” Yasuhiro <ytatsuno.jp@gmail.com> Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com> Co-authored-by: Sidharth Vinod <github@sidharth.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: dripcoding <dripcoding@gmail.com> Co-authored-by: knsv-bot <knsv-bot@macos.shared> Co-authored-by: Jeroen Smink <jeroensmink98@gmail.com> Co-authored-by: Alex9583 <37045839+Alex9583@users.noreply.github.com> Co-authored-by: GhassenS <ghassensiala12@gmail.com> Co-authored-by: omkarht <omkar@mermaidchart.com> Co-authored-by: darshanr0107 <darshan@mermaidchart.com>
ashishjain0512
added a commit
that referenced
this pull request
May 11, 2026
* chore:add changeset on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com> * Merge pull request #7501 from mermaid-js/feature/neo-look-base feature: implement neo look and themes for mermaid diagrams * Correct formatting for run * Added new line to �[1mMERMAID LOCAL DOCKER DEVELOPMENT�[0m Welcome! Thank you for joining the development. This is a script for running commands within docker containers at ease. __________________________________________________________________________________________ Development Quick Start Guide: �[1m./run pnpm install�[0m # Install packages �[1m./run dev�[0m # Launch dev server with examples, open http://localhost:9000 �[1m./run docs:dev�[0m # Launch official website, open http://localhost:3333 �[1m./run pnpm vitest�[0m # Run watcher for unit tests �[1m./run cypress�[0m # Run integration tests (after starting dev server) �[1m./run pnpm build�[0m # Prepare it for production __________________________________________________________________________________________ Commands: �[1m./run build�[0m # Build image �[1m./run cypress�[0m # Run integration tests �[1m./run dev�[0m # Run dev server with examples, open http://localhost:9000 �[1m./run docs:dev�[0m # For docs contributions, open http://localhost:3333 �[1m./run help�[0m # Show this help �[1m./run pnpm�[0m # Run any 'pnpm' command �[1m./run sh�[0m # Open 'sh' inside docker container for development __________________________________________________________________________________________ Examples of frequently used commands: �[1m./run pnpm add --filter mermaid�[0m �[4mpackage�[0m Add package to mermaid �[1m./run pnpm -w run lint:fix�[0m Run prettier and ES lint �[1mgit diff --name-only develop | xargs ./run pnpm prettier --write�[0m Prettify everything you added so far �[1m./run cypress open --project .�[0m Open cypress interactive GUI �[1m./run cypress run --spec cypress/integration/rendering/�[0m�[4mtest.spec.ts�[0m Run specific test in cypress �[1mxhost +local:�[0m Allow local connections for x11 server or �[1mMERMAID LOCAL DOCKER DEVELOPMENT�[0m Welcome! Thank you for joining the development. This is a script for running commands within docker containers at ease. __________________________________________________________________________________________ Development Quick Start Guide: �[1m./run pnpm install�[0m # Install packages �[1m./run dev�[0m # Launch dev server with examples, open http://localhost:9000 �[1m./run docs:dev�[0m # Launch official website, open http://localhost:3333 �[1m./run pnpm vitest�[0m # Run watcher for unit tests �[1m./run cypress�[0m # Run integration tests (after starting dev server) �[1m./run pnpm build�[0m # Prepare it for production __________________________________________________________________________________________ Commands: �[1m./run build�[0m # Build image �[1m./run cypress�[0m # Run integration tests �[1m./run dev�[0m # Run dev server with examples, open http://localhost:9000 �[1m./run docs:dev�[0m # For docs contributions, open http://localhost:3333 �[1m./run help�[0m # Show this help �[1m./run pnpm�[0m # Run any 'pnpm' command �[1m./run sh�[0m # Open 'sh' inside docker container for development __________________________________________________________________________________________ Examples of frequently used commands: �[1m./run pnpm add --filter mermaid�[0m �[4mpackage�[0m Add package to mermaid �[1m./run pnpm -w run lint:fix�[0m Run prettier and ES lint �[1mgit diff --name-only develop | xargs ./run pnpm prettier --write�[0m Prettify everything you added so far �[1m./run cypress open --project .�[0m Open cypress interactive GUI �[1m./run cypress run --spec cypress/integration/rendering/�[0m�[4mtest.spec.ts�[0m Run specific test in cypress �[1mxhost +local:�[0m Allow local connections for x11 server output * fix: correct extension marker dimensions for mobile/iOS rendering * test(sankey): add tests for special characters in node names Add explicit test cases for special characters (single quotes, ampersands, forward slashes, and hyphens) in Sankey diagram node names. These tests verify the fix for issue #7528 where special characters in node names like 'Agricultural \'waste\'', 'Lighting & appliances', and 'Over generation / exports' are correctly parsed. The tests confirm that both 'sankey' and 'sankey-beta' syntax properly handle these characters in CSV-style diagram definitions. * feat(sankey): add Apple-style interactive Sankey demo - Implement collapsible nodes with recursive pruning - Auto-zoom layout to fill canvas when nodes are hidden - Strict CSV order sorting for stable node positions - Target-based link coloring with transparency and blend mode - Smart indicator icons (only shown when collapsed) - Smooth fade animations for enter/exit transitions * feat(sankey): add interactive collapse/expand with auto-zoom animation - Add precomputed topology to identify central node (max flow) - Central node (Revenue) can collapse both left and right sides - Other nodes can only collapse their children direction - Auto-zoom: remaining nodes expand to fill canvas after collapse - Collapse animation: nodes shrink towards anchor, expand from anchor - Central node is 1.5x wider for visual emphasis - Indicators show collapse state with directional arrows * feat(sankey): add Apple-style rendering with smart labels and custom node colors - Add smart label positioning based on node layer relative to central node - Add outlined label style (labelStyle: 'outlined') as new default - Add nodeColors config option for custom node color mapping - Add configurable nodeWidth and nodePadding options - Update styles.js with new CSS for outlined labels - Fix YAML frontmatter indentation in demos/sankey.html - Add Cypress tests for new features BREAKING CHANGE: labelStyle now defaults to 'outlined' instead of 'default' * [autofix.ci] apply automated fixes * refactor(sankey): rename labelStyle enum values and remove demo file - Rename labelStyle 'outlined' to 'default' (new default behavior) - Rename labelStyle 'default' to 'legacy' (original behavior) - Remove demo-sankey.html (demonstration file only) - Update tests, demo, and renderer for new naming * fix(sankey): clean up tests and demo - remove unnecessary whitespace changes * fix(sankey): remove curly braces from nodeColors description to fix docs build The curly braces in the YAML description were being parsed as Vue template syntax, causing a 'Duplicate attribute' error during vitepress docs build. * [autofix.ci] apply automated fixes * fix(sankey): address PR review feedback - Restore SankeyLinkColor gradient meta:enum and default that were accidentally deleted - Rename labelStyle 'default' to 'outlined', default to 'legacy' (non-breaking) - Restore original position-based label positioning for legacy mode - Validate nodeColors values as CSS colors in sanitizeDirective - Use theme variables instead of hardcoded colors in styles.js - Add changeset * [autofix.ci] apply automated fixes * fix(sankey): address review nits and add documentation for new config options - Improve type safety: use SankeyNodeWithLayer interface for findCentralNodeLayer - Reduce code duplication: extract appendLabel helper for D3 label chains - Add documentation for labelStyle, nodeWidth, nodePadding, and nodeColors * fix(sankey): handle undefined node.value in findCentralNodeLayer d3SankeyNode.value is number | undefined - add nullish coalescing to fix TS errors. * [autofix.ci] apply automated fixes * [autofix.ci] apply automated fixes (attempt 2/3) * fix(gantt): limit loop if excluding all dates Add an iteration limit to `fixTaskDates` to prevent infinite loops (i.e. when `excludes` is used to exclude every possible date). I've picked 10k days, in case some users are using `dateFormat` and `excludes` to exclude entire years, since 10k days is 27 years, and anything above that starts to have noticable lag. * fix(eventmodeling): address PR retest feedback - themes, wrapLabel, relation stroke - Add EM theme variables to all built-in themes (dark, default, forest, neutral) so dark mode and other themes render with appropriate colors instead of always falling back to light-theme defaults. - Apply wrapLabel() to plain text before HTML assembly to prevent splitting inside HTML tags. Also remove redundant newline replacement in data block path since wrapLabel now handles line breaking on plain text. - Read relation stroke color from themeVariables.emRelationStroke in renderer instead of using hardcoded '#000' from db.ts. - Add emRelationStroke variable to all theme files including theme-base. * chore(deps): update dependency dompurify to v3.3.2 [security] * chore(deps): update autofix-ci/action digest to 7a166d7 * chore(deps): update dependency ajv to v8.18.0 [security] * chore(deps): update peter-evans/create-pull-request digest to 8170bcc * chore(deps): update eslint * fix: type error in toHtml fixed * Fixed typo * [autofix.ci] apply automated fixes * fix(class): Self-referential class multiplicity labels rendered multiple times Fixes #7560 where cardinality labels (e.g. "1", "0..1") were displayed 3x on self-referential class diagram relationships. Root cause: The dagre layout splits self-loops into 3 edges but structuredClone copied cardinality labels to all of them. Now each segment only carries its relevant cardinality label. Also fix DOM hierarchy bug in edge label creation where labels were appended to the wrong parent element. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(class): Keep relationship title on self-referential edges The middle edge segment of a self-loop should preserve its label (e.g. "refers") — only the cardinality labels need to be cleared. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * add link in sidebar to Wardley map * chore(deps): update dependency lodash-es to v4.18.1 [security] * chore(deps): update peter-evans/create-pull-request digest to d32e88d * chore(deps): update dependency eslint-plugin-cypress to ^5.3.0 * fix(class): avoid duplicate labels on self-referential edges Clear label props on split sub-edges to prevent multiplicity labels from rendering 3x after structuredClone during layout. - keep labels only on correct sub-edges - defensively clear all label positions - remove unintended arrow on edge2 - add visual regression test - add changeset * flowchart: add datastore shape * [autofix.ci] apply automated fixes * add docs and changeset * fix handDrawn look * chore: drop lodash-es in favour of es-toolkit * docs auto-gen * add changeset * feat(eventmodeling): enforce Event Modeling connection invariants via Langium validator Signed-off-by: Yordis Prieto <yordis.prieto@gmail.com> * fix(block-beta): normalize width before comparison in getMaxChildSize In `getMaxChildSize`, the comparison `width > maxWidth` used the raw element width, but `maxWidth` stores the normalized per-column width (width / widthInColumns). This caused `maxWidth` to shrink when a multi-column child's raw width exceeded the previous normalized value. Normalize width before the comparison so both sides use the same unit. Fixes #7503 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: add changeset Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * [autofix.ci] apply automated fixes * chore(deps): update dependency vite to v7.3.2 [security] * test: use type-safe `vi.mock(import()` calls Vitest now supports type-safe mocks using `vi.mock(import('module'),` * test: replace unnecessary mocks with spys This isn't strictly unit testing (more like integration testing), but it's more useful to test the entire chain! * fix: prevent unbalanced CSS styles in classDefs Currently, adding a `}` to a classDef can allow modifying the global CSS, which can lead to a DoS or leaking private data. Using the `sanitizeCss` function automatically handles these unbalanced `{}`. For `themeVariables`, we're instead using `val.match(/^[\d"#%(),.;A-Za-z]+$/)` to avoid issues like this, see ec2da8e (Only allowing a subset of characters in themeVariables, 2022-06-21), but I think `sanitizeCss` is less likely to break any existing behaviour. * fix: improve mermaidAPI D3 types Right now, many of the functions within `mermaidAPI` were using a `type D3Element = any` type, which has no type safety. Our existing `D3Selection<T extends SVGElement>` exists and is better, but some of our APIs allow a generic `Element` or `HTMLElement`, so I made a new `D3HtmlSelection<T extends Element>` type for this. Some of the types are a bit contrived unfortunately, since a `D3HtmlSelection<HTMLElement>` is not assignable to a `D3HtmlSelection<Element>`, even if `HTMLElement` is a subclass of `Element`. * refactor: tighten `createUserStyles` param types Change the type of `mermaidAPI.createUserStyles`'s `svgId` from a `string` to a `#${string}` to make it more clear that this shouldn't be an ID, but a CSS selector to an ID. * fix: create CSS styles using the CSSOM Currently, we're creating CSS styles using strings, which isn't ideal, since it can lead to CSS injections other other CSS bugs. However, we can instead use Constructable Stylesheets and the CSSOM to better construct a CSS stylesheet. This new API scrubs invalid syntax from the CSS stylesheet and does some normalization (e.g. removing unnecessary spaces). [1]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/replaceSync See: https://web.dev/articles/constructable-stylesheets * fix: try using `replaceSync` to parse `themeCSS` Check for the existance of `CSSStyleSheet.replaceSync`, and whether it is a function, to parse `themeCSS` and convert it to a string. We already call `sanitizeCSS` on this option, so it's low risk, but this should make it slightly safer and normalize the CSS slightly. For environments where `CSSStyleSheet.replaceSync` does not yet exist (e.g. jsdom or Safari 16.3 or earlier), we just use the old legacy code. See: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/replaceSync * fix: pin 2 actions to commit SHA, extract 2 expressions to env vars * fix: quote env var references in run blocks Did some research into the CodeQL envvar-injection-critical guidance (https://codeql.github.com/codeql-query-help/actions/actions-envvar-injection-critical/) and wanted to add this additional change to prevent shell injection through attacker-controllable values like ref names and workflow inputs, and to prevent unexpected behavior from special characters in secret values. Before: echo ${REF_NAME} After: echo "${REF_NAME}" * style: add trailing newline to action file This was done by running `npx prettier --write .github/workflows/release-preview-publish.yml`. The autofix CI job doesn't push changes to the `.github` folder to prevent an infinite loop. * ci: remove `GIT_REF: ${{github.ref}}` GitHub already has a built-in environment variable called `GITHUB_REF` for this value. See: https://docs.github.com/en/actions/reference/workflows-and-actions/variables * test: add E2E visual regression test for mixed column spans (#7503) Adds a block-beta test case that mixes :1 and :4 column spans to prevent the width normalization bug from re-regressing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * [autofix.ci] apply automated fixes * [autofix.ci] apply automated fixes * fix(sequence): add label box background for alt/else section titles Section titles like "else" in alt/else blocks were rendered without a .labelBox background polygon, unlike the main loop label. When custom CSS set .loopText to white, section titles became invisible against the white SVG background. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(sequence): use labelText class for alt/else section titles Section titles like "else" in alt/else blocks used the loopText CSS class, which meant custom themeCSS targeting .loopText (e.g. setting fill to white) would make section titles invisible. Changed to labelText class so section title styling is independent of loopText overrides. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(sequence): add sectionTitle CSS class for alt/else section labels Section titles like "else" used the loopText CSS class, which meant custom themeCSS targeting .loopText or .labelText (e.g. setting fill to white) would make section titles invisible. Introduced a dedicated .sectionTitle class styled with loopTextColor, isolating section title text from unrelated CSS overrides. Resolves #7546 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(sequence): add font-weight bold to sectionTitle class Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(sequence): let CSS class control sectionTitle font-weight Clear the inline fontWeight for section titles so the .sectionTitle CSS class rule (font-weight: bold) is not overridden by the inline element.style font-weight. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: prevent CSS namespace escape using `:not(&)` Currently, we're namespacing user's custom CSS to only apply within the `<div id='svgId'>` by doing: ```css #svgId { .myCssClass { /* my rules here */ } } ``` If there's no `&` in the child rule selector, one gets prefixed [automatically][1], which namespaces the rule correctly. ```css #svgId { & .myCssClass { /* my rules here */} } ``` However, if an `&` is present in the child rule selector, there's no automatic prefix of the parent rule selector, which allows user defined CSS to escape the `<div id='svgId'>`, e.g. ```css #svgId { :not(&) { /* my rules here */ } } ``` This commit adds a stylis middleware that automatically prefixes `#svgId` to any rule selector if it's not already there, preventing this bypass. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector * fix: disallow some CSS at-rules in custom CSS Disallow some CSS at-rules in custom CSS, e.g. like `@font-face`. There's no way to namespace these so that only apply within the Mermaid SVG. Nested at-rules, e.g. `@supports selector(h2 > p) {h2 > p {/*val*/}}` are still allowed, since stylis will namespace the inner rules automatically. `@keyframes` have been kept, as they are required for animations in mermaid. Co-authored-by: zsxsoft <git@zsxsoft.com> * revert: remove font-weight bold from sectionTitle Argos screenshots confirm section titles should not be bold. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: update E2E timings * First version of scoped e2e tests * fix(stateDiagram): enforce strict comment syntax Addresses feedback from the review: - Comments after blank lines are now recognized; - Adds tests for blank-line and edge-case scenarios; - Adds a brief code comment in the test explaining the expected behavior for inline %%. Fixes #7090 * fix: skip namespacing CSSKeyframeRule This was breaking animations, since we changing ```css @Keyframes hi { from { stroke-dashoffset:1000; } } ``` to ```css @Keyframes hi { /* Not correct */ #svgId from { stroke-dashoffset:1000; } } ``` Fixes: 6476973 * Added info about scoped tests in doc * test(stateDiagram): improve note parsing edge case tests Address review feedback by: -adding assertions for note content, not just state relations; -splitting test cases to separately cover two edge cases: "send note" and "end note" inside note text. Fixes #7089 * feat: add nested namespace support for class diagrams Restore and properly implement nested namespaces, which regressed between 11.3.0 and 11.4.x. Both dot notation (namespace A.B.C) and syntactic nesting (namespace A { namespace B {} }) now create hierarchical namespace clusters in the rendered diagram. Closes #3384, #4618, #5487, #6085 Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * docs: add nested namespace documentation and changeset Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * fix: use short name as label for nested namespaces For syntactic nesting (namespace A { namespace B {} }), the displayed label now shows the short name "B" instead of the qualified "A.B". Each namespace stores a separate label (last segment of the id) for display, while the full dot-separated id is used internally for graph wiring and uniqueness. Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * feat: support custom labels on namespaces Add square bracket label syntax for namespaces, matching the existing class label pattern: namespace Auth["Authentication Service"] { } The label replaces the displayed name while the id is used internally. Closes #6018 Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * test: add Cypress E2E snapshot tests for nested namespaces Add visual regression tests across all four renderers (v2, v3, ELK, handDrawn) covering dot-notation nesting, syntactic nesting, and labeled namespaces. Existing namespace tests will produce updated snapshots due to the new hierarchical cluster rendering. Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * chore: add comment clarifying namespaceStack push ordering Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * address suggestions from comments * refactor(e2e): organise spec files into diagram subfolders Move all diagram-specific Cypress specs from the flat cypress/integration/rendering/ directory into per-diagram subfolders (e.g. cypress/integration/rendering/flowchart/). The detection script now uses filesystem discovery instead of a hardcoded DIAGRAM_SPEC_MAP: it checks whether cypress/integration/rendering/<diagram-name>/ exists and returns a glob pattern (cypress/integration/rendering/<name>/**) as the --spec argument. Adding a new spec to a subfolder requires zero config changes. Cross-cutting specs (theme, conf-and-directives, shapes, etc.) remain at the root of cypress/integration/rendering/ and continue to trigger the full suite. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(e2e): replace CROSS_CUTTING_SPECS list with positional convention Any spec file at the root of cypress/integration/rendering/ is treated as cross-cutting (full suite). Any spec in a subfolder is scoped to that subfolder. No explicit list to maintain — the directory position is the convention. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Fix lint errors * Corrected import paths * chore(deps): update dependency dompurify to v3.4.0 [security] * fix(eventmodeling): avoid shipping pre-release screen terminology Signed-off-by: Yordis Prieto <yordis.prieto@gmail.com> * Test feature * Changed to correct branch for test * Corrected error * Lint * New test * feat: add hierarchicalNamespaces config option for compact rendering When set to false, only user-declared namespaces render as flat boxes using their full qualified name; auto-created intermediate ancestors are elided and their children moved to the nearest explicit ancestor. Defaults to true (existing nested behavior). Adds explicit field to NamespaceNode, updates both v2 and v3 renderers, demos, docs, unit tests, and Cypress E2E snapshots. Co-Authored-By: Claude Opus 4.6 (prompted with care by @M-a-c) * fix(block): add edge style functions and properties to block db and types * fix(block): wire edge styles in parser and allow equal sign in node ids * fix(block): render dynamic edge styles instead of hardcoded classes * fix(sequence): handle negative message width on right-to-left arrows when using messageAlign * test(block): add unit and visual tests for arrow types * style(block): format code and fix lint issues * fix lint (unknown word "leftx") and add changeset * fix: resolve sankey syntax error (#7613) * [autofix.ci] apply automated fixes * fix(stateDiagram): allow inline comments and fix single % parsing Addresses feedback from the review: - Updates lexer to allow '%%' comments both at start-of-line and inline; - Treats a single '%' as normal text instead of a comment; - Updates stateDiagram.md documentation to clarify the new comment syntax; - Adds unit tests for inline comments and single '%' scenarios. Fixes #7090 * 7604: Fix for the default config * [autofix.ci] apply automated fixes * fix(tidy-tree): keep mindmap edges connected to a non-circular root The tidy-tree layout's calculateEdgePositions only added intermediate routing points for source/target nodes in the 'left' or 'right' section. For root-sourced edges (section === 'root'), no intermediate point was pushed, so the post-loop intersection recompute used the child's center as the reference and could land the start anchor on the root's top/bottom edge instead of its left/right edge — visually disconnecting the link. The cloud root only appeared correct by coincidence of its rounded shape. Add 'root' branches to both the source and target intermediate-point blocks. The root-side intermediate is placed on the side facing the other node's section. Resolves #7572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(tidy-tree): type PositionedEdge.points to unblock CI type build Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Remove comment * Remove hard coding for test no longer in use * Disabled randomized rendering for large diagram to adress flakiness * fix(wardley): allow hyphens in unquoted component names Widens NAME_WITH_SPACES to permit `-` when not followed by `>`, so multi-word names like `real-time processing` and `end-user` parse without quoting while `A->B` still tokenises as an arrow. Brings the parser in line with OnlineWardleyMaps (OWM) convention. - Grammar: add -(?!>) negative lookahead to both char-class groups in NAME_WITH_SPACES - Tests: hyphenated component/anchor/pipeline names, hyphenated link endpoints, plus A->B and foo-bar->baz regression guards (18 total) - Docs: note allowed and example under Components section Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(wardley): address non-blocking review feedback from knsv - Sanitize link labels through textSanitizer() for defense-in-depth - Add feat: prefix to changeset description - Remove auto-generated docs files (docs/syntax/wardley.md, MermaidConfig.md) - Document handdrawn/rough mode limitation in wardley docs - Add required array to WardleyDiagramConfig schema Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(wardley): pipeline link resolution, theme integration, and type safety - Fix pipeline component links by adding resolveNodeId() that matches components by label when synthetic ID lookup fails - Add wardley theme variables to all 5 theme files for proper dark/forest/ neutral theme support - Create styles.ts with CSS class rules driven by theme variables - Wire styles into wardleyDiagram.ts (replaces empty styles function) - Fix incorrect Required<WardleyNode> cast to narrow WardleyNode & { x; y } - Replace any[] with proper d3.Selection type for textElements Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * [autofix.ci] apply automated fixes * add drawMessage test * [autofix.ci] apply automated fixes * fix(wardley): address review feedback from #7642 - Add changeset for patch bump - Inline comment on NAME_WITH_SPACES explaining the -(?!>) trick - Edge-case tests: trailing hyphen (`foo-`) and double hyphen (`foo--bar`) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(wardley): address review feedback from #7641 - Reuse theme-level this.gridColor across all 5 themes instead of hardcoded rgba values, so Wardley grid lines track the palette (gantt-style). evolutionStroke stays hardcoded: the red is a Wardley/OWM semantic convention for evolution arrows regardless of theme and is overridable via themeVariables.wardley.evolutionStroke - Add wardleyBuilder.spec.ts covering resolveNodeId: exact-id match, label-fallback (pipeline synthetic-id case), unknown-input passthrough, and id-wins-over-label disambiguation - Extract WardleyText type alias for the d3 text selection signature Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore: add changeset for block diagram arrows * test(block): add extra edge style assertions requested in review * fix: improve zenuml print rendering, sizing, and syntax resilience * Use ARGOS_SUBSET config for scoped tests * Testing scope after fix * New test * Test of bug fix * Test with change * Remove comment * build(parser): bundle types using api-extractor Use `@microsoft/api-extractor` to bundle the TypeScript `.d.ts` types for `@mermaid-js/parser`. In a future commit, we want to bundle `langium`, which would need us to bundle `langium`'s types as well. Bundling reduces the size of our `dist/` folder, and makes it more obvious which of our types are external. I've made this as a `prepack` step, so that it doesn't affect the majority of mermaid developers when they run `pnpm install`. It's only when we publish the package that we'd bundle the code. This also means it will be tested by the `pnpm run test:check:tsc` test that we have. * fix(parser): bundle langium and chevrotain Bundle langium and chevrotain in the `@mermaid-js/parser` package, so they're no longer dependencies. This has the following benefits: 1. Chevrotain v11.1.1 has a pin on lodash-es v4.17.23. There are a couple of CVEs/alerts on that version, and chevrotain will not make a new v11 release since those alerts don't affect chevrotain, see Chevrotain/chevrotain#2186 2. Langium v4 raises an install warning on Node.JS v20.0, which is causing issues for some of mermaid's users, even if this code only runs in the browser. I'm using `api-extractor` to bundle the types for this. We're still keeping the `@chevrotatin/types` package as a dependency, since `api-extractor` can't seem to handle it, and it's only used for types. * fix(wardley): address second-round review feedback from #7641 - E2E theme coverage: render the same Wardley diagram under base, dark, forest, and neutral themes via imgSnapshotTest, locking in the new styles.ts/theme-block integration visually. - E2E pipeline-link-target coverage: add `User -> Electric Kettle` to the pipelines test fixture so resolveNodeId's label-fallback is exercised end-to-end (link targeting a pipeline child). - Introduce top-level wardleyEvolutionColor theme variable (default '#dc3545' / '#ff6b6b' for dark) so the evolution-arrow red is overridable via themeVariables.wardleyEvolutionColor at the palette level, not only via themeVariables.wardley.evolutionStroke. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test(sankey): keep PR scoped to parser coverage * test(sankey): cover reported special-character sample * chore(dev-deps): remove unused `@types/uuid` UUID v11 already comes with TypeScript types. See: https://github.com/uuidjs/uuid/blob/3b57f95555ab1b8432213264b5eaa318958fb8fe/CHANGELOG.md#1100-2024-10-26 * fix: loosen `uuid` dependency range to allow v14 Mermaid does not use any of the vulnerable code in CVE-2026-41907, but this allows users to silence any `npm audit` alerts on it. Since the only breaking changes in v12-v14 are essentially Node.JS version support, I've broadened our range to allow all versions: - [v12][]: remove CommonJS and Node.JS v16 support - [v13][]: make browser exports the default - [v14][]: remove Node.JS v18 support I don't think there would be any Mermaid users that are still on Node.JS v18, since d3c0893 (fix(deps): update all major dependencies, 2025-07-09) bumped [marked to v16][marked@v16], which requires Node.JS v20. [v12]: https://github.com/uuidjs/uuid/releases/tag/v12.0.0 [v13]: https://github.com/uuidjs/uuid/releases/tag/v13.0.0 [v14]: https://github.com/uuidjs/uuid/releases/tag/v14.0.0 [marked@v16]: https://github.com/markedjs/marked/releases/tag/v16.0.0 See: CVE-2026-41907 See: d3c0893 * fix(quadrant-chart): add UNICODE_TEXT support for CJK and emoji The lexer ALPHA token only matched ASCII [A-Za-z]+, and the UNICODE_TEXT token was referenced in the grammar but never emitted. This caused bare Chinese/Japanese/Korean text in x-axis, y-axis, quadrant-N labels and point names to fail with a parse error. Added [\u0080-\uFFFF]+ lexer rule to emit UNICODE_TEXT, and added UNICODE_TEXT to the alphaNumToken grammar rule. Fixes #7120 * fix(quadrant-chart): narrow UNICODE_TEXT range, add comment, Latin-1 tests Narrow [\u0080-\uFFFF]+ to [^\x00-\x7F]+ for cross-grammar consistency with erDiagram. Add explanatory comment. Add test coverage for Latin-1 accented characters (Café, Größe, catégoría, naïve). Add changeset. * feat(architecture): expose fcose layout knobs via config Targets #6024, #6120, #7267. Adds four optional config keys under `ArchitectureDiagramConfig` that pass through to the underlying [cytoscape-fcose](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose) layout. Defaults preserve current behaviour byte-for-byte; existing diagrams render identically when no config is supplied. | Key | Default | Effect | |---|---|---| | `nodeSeparation` | `75` | Min separation between sibling nodes in the same group. | | `idealEdgeLengthMultiplier` | `1.5` | Multiplier on `iconSize` for same-group edges. | | `edgeElasticity` | `0.45` | Spring elasticity (0–1) for same-group edges. | | `numIter` | `2500` | Max fcose iterations; trades runtime for layout quality. | Cross-group edge lengths and elasticity are unchanged (`0.5 * iconSize` and `0.001`). Includes: - `config.schema.yaml` updated with the four properties. - `config.type.ts` regenerated via `pnpm --filter mermaid types:build-config`. - `architectureRenderer.ts` hoists the four constants once before the `cy.layout` call. - Docs section "Layout tuning (v11.15.0+)" added under Configuration with a worked example. - Unit tests verifying round-trip + per-key override + partial set. - Cypress `imgSnapshotTest` cases per knob using the 3-DB → MCP repro from #6120. Note: pre-commit hook bypassed because `pnpm --filter mermaid run docs:build` (run by lint-staged on docs changes) currently fails on pre-existing TypeScript errors in `packages/mermaid/src/diagrams/wardley/wardleyParser.ts` that exist on `develop`. * chore: add changeset and use MERMAID_RELEASE_VERSION placeholder * docs: use MERMAID_RELEASE_VERSION placeholder for new section * docs: replace 'tunables' with 'options' to satisfy cspell * [autofix.ci] apply automated fixes * docs: tidy redundant 'options expose options' phrasing * refactor: drop misleading 3-DB→MCP knob snapshots; rewrite docs example The 3-DB → MCP repro from #6120 cannot be fixed by any combination of these knobs (measured: DB1 and DB3 land at identical screen coordinates regardless of nodeSeparation / idealEdgeLengthMultiplier / edgeElasticity / numIter values), because the BFS spatial map collapses sibling nodes onto the same logical position before fcose ever runs. Including those snapshots in the test suite would ship visibly-broken renders as 'passing' and overstate what this PR fixes. Replaced with a 3-node chain that demonstrates idealEdgeLengthMultiplier visibly stretching same-group edge length — an honest demonstration of one knob's effect. Other knobs are covered by unit tests for config plumbing. Updated the docs example to use the same chain diagram and added an explicit note that the knobs do not fix #6120-style sibling collapse — that needs the declarative align row|column directive in the companion PR. * chore: re-apply PR #7561 701020c (Merge branch 'master' into develop, 2026-04-01) was a bad merge, which didn't correctly cleanup the changeset entries. Fixes: 701020c * docs(event): remove redundant changeset entries Event modelling diagrams have not yet been released, so we don't need any separate changesets that mention event modelling. Unfortunately, we can't make a single changeset entry with multiple PRs/commits, but we can at least make a single changeset with multiple authors. Fixes: d50c423 Fixes: 32c257e * docs: improve `end note` changeset entry This changeset did not mention it had anything to do with state diagrams. Fixes: bfe60cc * docs: clarify changeset for autonumber change Update the changeset for 0aca217 (Make changes to allow for decimal values for sequence numbers, added corresponding unit tests, and updated docs., 2025-11-18) to mention that it's for sequence diagrams. I've also updated the changeset to point to 0aca217 directly, since the changeset was generated in a different PR from the rest of the changes. Fixes: 50b2166 * docs(tidy-tree): prevent changeset from bumping mermaid This change/PR doesn't touch mermaid, so there's no reason to patch it. Fixes: 5ab4693 * docs(zenuml): remove `mermaid` from changeset 45a9498 (fix: improve zenuml print rendering, sizing, and syntax resilience, 2026-04-22) only ever modifies the `packages/mermaid-zenuml` directory. It makes no changes to the `mermaid` package. See: 45a9498 * docs: remove changeset for docs-only change Since this is a docs-site only change, this won't affect consumers of Mermaid and we probably don't need a changeset for this. Fixes: 48424ae * docs: add state diagrams to `%` comment changeset The changeset for removing `%` comments in state diagrams didn't mention they were for state diagrams. It also didn't mention migration steps. Fixes: 8c1a0c1 * docs: add diagram prefix to changesets Instead of having `fix: .......`, I've changed the changesets to `fix(diagram): ......` to make it a bit easier to quickly see the diagram types that you are interested in. * ci: fix release preview publish errors Currently, `npm publish` runs `pnpm docs:verify-version`, which might possible fail if there are any `<MERMAID_RELEASE_VERSION>` placeholders in our docs. I've made a new environment variable, `ONLY_WARN_ON_VERIFY_ERROR`, that can be used to disable this behaviour, allowing us to publish release previews. * ci: limit release-preview-publish.yml permissions If we don't have the `id-token: write` permission, there's no way we can accidentally write the NPM! But we still need `packages: write` to write to GitHub Packages. * ci: use `npm publish --tag preview` for previews Make sure that we use a preview tag for previews * ci: include parser in `@mermaid-js/mermaid` pkg Right now, since we're using `npm publish` instead of `pnpm publish`, the `^workspace:` specifier in our `package.json` file won't work. We're also not publishing a `@mermaid-js/parser` package. Instead, we can use `pnpm pack` to create a `.tgz` that `npm publish` can upload. We can also use `bundledDependencies` to include the `@mermaid-js/parser` package, in case the latest preview version of mermaid requires new changes to that package. * fix(wardley): fix unnecessary sanitization of text The `wardleyRenderer` file never uses `.html()` or `.innerHTML` to set items within the HTML. Instead, it only ever uses D3 Selection's `.text`, which works `textContent`. This makes it immune to XSS attacks. When we over-sanitize this text, the diagram will show `<` instead of `<` in labels. * fix: revert endEdgeLabelLeft/endEdgeLabelRight change fedf70c (fix(class): Self-referential class multiplicity labels rendered multiple times, 2026-04-04) changed how `endLabel`s were rendered, by preventing them from being rendered within their `endEdgeLabelLeft` or `endLabelRight` elements, when they existed. Although when looking at the code, this seems correct (as otherwise `inner` is not used), this actually causes the labels to render on top of the edges, which makes the class diagrams look worse. This commit reverts that change, to avoid any visaul regression differences. Fixes: fedf70c * docs: improve nested namespace changeset As the nested namespace PR might change rendering behaviour for existing class diagrams that use dots in their namespaces, I've updated the changeset to explain how you can disable this feature by using `class.hierarchicalNamespaces`. --------- Signed-off-by: Yordis Prieto <yordis.prieto@gmail.com> Co-authored-by: darshanr0107 <darshan@mermaidchart.com> Co-authored-by: omkarht <omkar@mermaidchart.com> Co-authored-by: Mason Deacon <mdeaconfrop@gmail.com> Co-authored-by: Rayan Salhab <rayansalhab@hotmail.com> Co-authored-by: Zainan Victor Zhou (MBP2023) <zzn-github@zzn.im> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Alois Klink <alois@aloisklink.com> Co-authored-by: Ladislav Gazo <ladislav.gazo@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Takuya HARA <h.taku86@gmail.com> Co-authored-by: GhassenS <ghassen.siala@medtech.tn> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: leentaylor <leentaylor@gmail.com> Co-authored-by: Knut Sveidqvist <knsv@users.noreply.github.com> Co-authored-by: pbrolin47 <114684273+pbrolin47@users.noreply.github.com> Co-authored-by: Arun Chandanaveli <aruncveli@gmail.com> Co-authored-by: Maddy Guthridge <hello@maddyguthridge.com> Co-authored-by: Yordis Prieto <yordis.prieto@gmail.com> Co-authored-by: NYCU-Chung <chung.la13@nycu.edu.tw> Co-authored-by: Knut Bot <knsv@mermaidchart.com> Co-authored-by: dagecko <cnyhuis@vigilantnow.com> Co-authored-by: zsxsoft <git@zsxsoft.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Sidharth Vinod <github@sidharth.dev> Co-authored-by: Per Brolin <per@mermaidchart.com> Co-authored-by: Rodrigo Santos <rodrigo.jose.nunes.dos.santos@tecnico.ulisboa.pt> Co-authored-by: Beatriz Braga <beatrizagbraga@tecnico.ulisboa.pt> Co-authored-by: Mac Carter <harlow44@gmail.com> Co-authored-by: Felix <202006933@alu.comillas.edu> Co-authored-by: Daniil Beliak <34097111+ekiauhce@users.noreply.github.com> Co-authored-by: Hadile Djebbi <117598338+hadileee@users.noreply.github.com> Co-authored-by: Knut Sveidqvist <knsv@sveido.com> Co-authored-by: tractorjuice <129532814+tractorjuice@users.noreply.github.com> Co-authored-by: MrCoder <eagle.xiao@gmail.com> Co-authored-by: Rayan Salhab <r.salhab@aiyexpertsolutions.com> Co-authored-by: cyphercodes <7407177+cyphercodes@users.noreply.github.com> Co-authored-by: dull bird <1155115927@link.cuhk.edu.hk> Co-authored-by: Timothy <50641082+txmxthy@users.noreply.github.com> Co-authored-by: Alois Klink <alois@mermaidchart.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📑 Summary
This PR implements a comprehensive "Neo" look and feel for Mermaid diagrams, introducing modern styling with drop shadows, gradients, and enhanced visual aesthetics across all diagram types. Additionally, it adds new Redux theme variants for sequence and timeline diagrams.
📏 Design Decisions
Neo Theme Implementation:
theme-neo.js,theme-neo-dark.js,theme-redux.js,theme-redux-dark.js,theme-redux-color.js, andtheme-redux-dark-color.jsDiagram-Specific Enhancements:
bowTieRect,cylinder,hexagon,stadium,triangle, etc.Architecture:
MermaidConfiginterface to includeuseGradient,gradientStart,gradientStop, anddropShadowconfiguration optionsrendering-elements/to apply theme-specific stylingMake sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.