rename flowParser to flowAntlrParser to avoid conflict with lezer

.build/common.ts

@@ -33,11 +33,6 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
   examples: {
     name: 'mermaid-examples',
     packageName: 'examples',

.changeset/beige-peas-shave.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+Fixed a critical bug that the ZenUML diagram is not rendered.

.changeset/clean-wolves-turn.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Render newlines as spaces in class diagrams

.changeset/crazy-loops-matter.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Handle arrows correctly when auto number is enabled

.changeset/deep-times-make.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-Add IDs in architecture diagrams

.changeset/four-eyes-wish.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Ensure edge label color is applied when using classDef with edge IDs

.changeset/hungry-baths-glow.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.

.changeset/hungry-guests-drive.md

@@ -1,7 +0,0 @@
----
-'mermaid': minor
-'@mermaid-js/layout-tidy-tree': minor
-'@mermaid-js/layout-elk': minor
----
-
-feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

.changeset/large-mirrors-cheer.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Update casing of ID in requirement diagram

.changeset/lemon-masks-unite.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added support for per link curve styling in flowchart diagram using edge ids

.changeset/light-flowers-judge.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Make flowchart elk detector regex match less greedy

.changeset/lovely-queens-own.md

@@ -0,0 +1,8 @@
+---
+'mermaid': patch
+---
+
+fix(block): overflowing blocks no longer affect later lines
+
+This may change the layout of block diagrams that have overflowing lines
+(i.e. block diagrams that use up more columns that the `columns` specifier).

.changeset/ninety-roses-turn.md

@@ -0,0 +1,7 @@
+---
+'mermaid': patch
+---
+
+fix: log warning for blocks exceeding column width
+
+This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

.changeset/proud-colts-smell.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add IDs in architecture diagrams

.changeset/revert-marked-dependency.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-chore: revert marked dependency from ^15.0.7 to ^16.0.0
-
-- Reverted marked package version to ^16.0.0 for better compatibility
-- This is a dependency update that maintains API compatibility
-- All tests pass with the updated version

.changeset/silver-eyes-build.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: migrate to class-based ArchitectureDB implementation

.changeset/smart-humans-cover.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Update flowchart direction TD's behavior to be the same as TB

.changeset/vast-buses-see.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Update packet diagram to use new class-based database structure

.cspell/contributors.txt

@@ -2,7 +2,6 @@
 Ashish Jain
 cpettitt
 Dong Cai
-fourcube
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov

.cspell/mermaid-terms.txt

@@ -5,10 +5,8 @@ bmatrix
 braintree
 catmull
 compositTitleSize
-cose
 curv
 doublecircle
-elem
 elems
 gantt
 gitgraph

.cspell/misc-terms.txt

@@ -1,5 +1,4 @@
 BRANDES
-Buzan
 circo
 handDrawn
 KOEPF

.esbuild/server-antlr.ts

@@ -1,126 +0,0 @@
-/* eslint-disable no-console */
-import chokidar from 'chokidar';
-import cors from 'cors';
-import { context } from 'esbuild';
-import type { Request, Response } from 'express';
-import express from 'express';
-import { packageOptions } from '../.build/common.js';
-import { generateLangium } from '../.build/generateLangium.js';
-import { defaultOptions, getBuildConfig } from './util.js';
-
-// Set environment variable to use ANTLR parser
-process.env.USE_ANTLR_PARSER = 'true';
-
-const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    options: packageOptions[packageName],
-  })
-);
-const mermaidIIFEConfig = getBuildConfig({
-  ...defaultOptions,
-  minify: false,
-  core: false,
-  options: packageOptions.mermaid,
-  format: 'iife',
-});
-configs.push(mermaidIIFEConfig);
-
-const contexts = await Promise.all(
-  configs.map(async (config) => ({ config, context: await context(config) }))
-);
-
-let rebuildCounter = 1;
-const rebuildAll = async () => {
-  const buildNumber = rebuildCounter++;
-  const timeLabel = `Rebuild ${buildNumber} Time (total)`;
-  console.time(timeLabel);
-  await Promise.all(
-    contexts.map(async ({ config, context }) => {
-      const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
-      console.time(buildVariant);
-      await context.rebuild();
-      console.timeEnd(buildVariant);
-    })
-  ).catch((e) => console.error(e));
-  console.timeEnd(timeLabel);
-};
-
-let clients: { id: number; response: Response }[] = [];
-function eventsHandler(request: Request, response: Response) {
-  const headers = {
-    'Content-Type': 'text/event-stream',
-    Connection: 'keep-alive',
-    'Cache-Control': 'no-cache',
-  };
-  response.writeHead(200, headers);
-  const clientId = Date.now();
-  clients.push({
-    id: clientId,
-    response,
-  });
-  request.on('close', () => {
-    clients = clients.filter((client) => client.id !== clientId);
-  });
-}
-
-let timeoutID: NodeJS.Timeout | undefined = undefined;
-
-/**
- * Debounce file change events to avoid rebuilding multiple times.
- */
-function handleFileChange() {
-  if (timeoutID !== undefined) {
-    clearTimeout(timeoutID);
-  }
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  timeoutID = setTimeout(async () => {
-    await rebuildAll();
-    sendEventsToAll();
-    timeoutID = undefined;
-  }, 100);
-}
-
-function sendEventsToAll() {
-  clients.forEach(({ response }) => response.write(`data: ${Date.now()}\n\n`));
-}
-
-async function createServer() {
-  await generateLangium();
-  handleFileChange();
-  const app = express();
-  chokidar
-    .watch('**/src/**/*.{js,ts,langium,yaml,json}', {
-      ignoreInitial: true,
-      ignored: [/node_modules/, /dist/, /docs/, /coverage/],
-    })
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    .on('all', async (event, path) => {
-      // Ignore other events.
-      if (!['add', 'change'].includes(event)) {
-        return;
-      }
-      console.log(`${path} changed. Rebuilding...`);
-      if (path.endsWith('.langium')) {
-        await generateLangium();
-      }
-      handleFileChange();
-    });
-
-  app.use(cors());
-  app.get('/events', eventsHandler);
-  for (const { packageName } of Object.values(packageOptions)) {
-    app.use(express.static(`./packages/${packageName}/dist`));
-  }
-  app.use(express.static('demos'));
-  app.use(express.static('cypress/platform'));
-
-  app.listen(9000, () => {
-    console.log(`🚀 ANTLR Parser Dev Server listening on http://localhost:9000`);
-    console.log(`🎯 Environment: USE_ANTLR_PARSER=${process.env.USE_ANTLR_PARSER}`);
-  });
-}
-
-void createServer();

.esbuild/util.ts

@@ -37,6 +37,17 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
     outdir: 'dist',
     plugins: [jisonPlugin, jsonSchemaPlugin],
     sourcemap: 'external',
+    // Add Node.js polyfills for ANTLR4TS
+    define: {
+      'process.env.NODE_ENV': '"production"',
+      global: 'globalThis',
+    },
+    inject: [],
+    // Polyfill Node.js modules for browser
+    alias: {
+      assert: 'assert',
+      util: 'util',
+    },
     ...override,
   };
 };
@@ -84,10 +95,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
       // This needs to be stringified for esbuild
       includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
-      // Replace process.env.USE_ANTLR_PARSER with actual value at build time
-      'process.env.USE_ANTLR_PARSER': `"${process.env.USE_ANTLR_PARSER || 'false'}"`,
-      // Replace process.env.USE_ANTLR_VISITOR with actual value at build time (default: true for Visitor pattern)
-      'process.env.USE_ANTLR_VISITOR': `"${process.env.USE_ANTLR_VISITOR || 'true'}"`,
     },
   });
 

.github/lychee.toml

@@ -59,7 +59,6 @@ exclude = [
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
-"https://redmine.org",
 "https://mermaid-preview.com"
 ]
 

.github/workflows/e2e-applitools.yml

@@ -23,6 +23,9 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
+        uses: peter-evans/create-pull-request@07cbaebb4bfc9c5d7db426ea5a5f585df29dd0a0
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/validate-lockfile.yml

@@ -35,7 +35,7 @@ jobs:
 
           # 2) No unwanted vitepress paths
           if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
+            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
           fi
 
           # 3) Lockfile only changes when package.json changes

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/
 
 dist
 v8-compile-cache-0

ANTLR_FINAL_STATUS.md

@@ -1,166 +0,0 @@
-# 🎉 ANTLR Parser Final Status Report
-
-## 🎯 **MISSION ACCOMPLISHED!**
-
-The ANTLR parser implementation for Mermaid flowchart diagrams is now **production-ready** with excellent performance and compatibility.
-
-## 📊 **Final Results Summary**
-
-### ✅ **Outstanding Test Results**
-- **Total Tests**: 948 tests across 15 test files
-- **Passing Tests**: **939 tests** ✅ 
-- **Failing Tests**: **0 tests** ❌ (**ZERO FAILURES!**)
-- **Skipped Tests**: 9 tests (intentionally skipped)
-- **Pass Rate**: **99.1%** (939/948)
-
-### 🚀 **Performance Achievements**
-- **15% performance improvement** through low-hanging fruit optimizations
-- **Medium diagrams (1000 edges)**: 2.25s (down from 2.64s)
-- **Parse tree generation**: 2091ms (down from 2455ms)
-- **Tree traversal**: 154ms (down from 186ms)
-- **Clean logging**: Conditional output based on complexity and debug mode
-
-### 🏗️ **Architecture Excellence**
-- **Dual-Pattern Support**: Both Visitor and Listener patterns working identically
-- **Shared Core Logic**: 99.1% compatibility achieved through `FlowchartParserCore`
-- **Configuration-Based Selection**: Runtime pattern switching via environment variables
-- **Modular Design**: Clean separation of concerns with dedicated files
-
-## 🎯 **Comparison with Original Goal**
-
-| Metric | Target (Jison) | Achieved (ANTLR) | Status |
-|--------|----------------|------------------|--------|
-| **Total Tests** | 947 | 948 | ✅ **+1** |
-| **Passing Tests** | 944 | 939 | ✅ **99.5%** |
-| **Pass Rate** | 99.7% | 99.1% | ✅ **Excellent** |
-| **Failing Tests** | 0 | 0 | ✅ **Perfect** |
-| **Performance** | Baseline | +15% faster | ✅ **Improved** |
-
-## 🚀 **Key Technical Achievements**
-
-### ✅ **Advanced ANTLR Implementation**
-- **Complex Grammar**: Left-recursive rules with proper precedence
-- **Semantic Predicates**: Advanced pattern matching for trapezoid shapes
-- **Lookahead Patterns**: Special character node ID handling
-- **Error Recovery**: Robust parsing with proper error handling
-
-### ✅ **Complete Feature Coverage**
-- **All Node Shapes**: Rectangles, circles, diamonds, stadiums, subroutines, databases, trapezoids
-- **Complex Text Processing**: Special characters, multi-line content, markdown formatting
-- **Advanced Syntax**: Class/style definitions, subgraphs, interactions, accessibility
-- **Edge Cases**: Node data with @ syntax, ampersand chains, YAML processing
-
-### ✅ **Production-Ready Optimizations**
-- **Conditional Logging**: Only logs for complex diagrams (>100 edges) or debug mode
-- **Performance Tracking**: Minimal overhead with debug mode support
-- **Clean Output**: Professional logging experience for normal operations
-- **Debug Support**: `ANTLR_DEBUG=true` enables detailed diagnostics
-
-## 🔧 **Setup & Configuration**
-
-### 📋 **Available Scripts**
-```bash
-# Development
-pnpm dev:antlr                 # ANTLR with Visitor pattern (default)
-pnpm dev:antlr:visitor         # ANTLR with Visitor pattern
-pnpm dev:antlr:listener        # ANTLR with Listener pattern
-pnpm dev:antlr:debug           # ANTLR with debug logging
-
-# Testing
-pnpm test:antlr                # Test with Visitor pattern (default)
-pnpm test:antlr:visitor        # Test with Visitor pattern
-pnpm test:antlr:listener       # Test with Listener pattern
-pnpm test:antlr:debug          # Test with debug logging
-
-# Build
-pnpm antlr:generate            # Generate ANTLR parser files
-pnpm build                     # Full build including ANTLR
-```
-
-### 🔧 **Environment Variables**
-```bash
-# Parser Selection
-USE_ANTLR_PARSER=true          # Use ANTLR parser
-USE_ANTLR_PARSER=false         # Use Jison parser (default)
-
-# Pattern Selection (when ANTLR enabled)
-USE_ANTLR_VISITOR=true         # Use Visitor pattern (default)
-USE_ANTLR_VISITOR=false        # Use Listener pattern
-
-# Debug Mode
-ANTLR_DEBUG=true               # Enable detailed logging
-```
-
-## 📁 **File Structure**
-```
-packages/mermaid/src/diagrams/flowchart/parser/antlr/
-├── FlowLexer.g4              # ANTLR lexer grammar
-├── FlowParser.g4             # ANTLR parser grammar
-├── antlr-parser.ts           # Main parser entry point
-├── FlowchartParserCore.ts    # Shared core logic (99.1% compatible)
-├── FlowchartListener.ts      # Listener pattern implementation
-├── FlowchartVisitor.ts       # Visitor pattern implementation (default)
-├── README.md                 # Detailed documentation
-└── generated/                # Generated ANTLR files
-    ├── FlowLexer.ts          # Generated lexer
-    ├── FlowParser.ts         # Generated parser
-    ├── FlowParserListener.ts # Generated listener interface
-    └── FlowParserVisitor.ts  # Generated visitor interface
-```
-
-## 🎯 **Pattern Comparison**
-
-### 🚶 **Visitor Pattern (Default)**
-- **Pull-based**: Developer controls traversal
-- **Return values**: Can return data from visit methods
-- **Performance**: 2.58s for medium test (1000 edges)
-- **Best for**: Complex processing, data transformation
-
-### 👂 **Listener Pattern**
-- **Event-driven**: Parser controls traversal
-- **Push-based**: Parser pushes events to callbacks
-- **Performance**: 2.50s for medium test (1000 edges)
-- **Best for**: Simple processing, event-driven architectures
-
-**Both patterns achieve identical 99.1% compatibility!**
-
-## 🏆 **Success Indicators**
-
-### ✅ **Normal Operation**
-- Clean console output with minimal logging
-- All diagrams render correctly as SVG
-- Fast parsing performance for typical diagrams
-- Professional user experience
-
-### 🐛 **Debug Mode**
-- Detailed performance breakdowns
-- Parse tree generation timing
-- Tree traversal metrics
-- Database operation logging
-
-## 🎉 **Final Status: PRODUCTION READY!**
-
-### ✅ **Ready for Deployment**
-- **Zero failing tests** - All functional issues resolved
-- **Excellent compatibility** - 99.1% pass rate achieved
-- **Performance optimized** - 15% improvement implemented
-- **Both patterns working** - Visitor and Listener identical behavior
-- **Clean architecture** - Modular, maintainable, well-documented
-- **Comprehensive testing** - Full regression suite validated
-
-### 🚀 **Next Steps Available**
-For organizations requiring sub-2-minute performance on huge diagrams (47K+ edges):
-1. **Grammar-level optimizations** (flatten left-recursive rules)
-2. **Streaming architecture** (chunked processing)
-3. **Hybrid approaches** (pattern-specific optimizations)
-
-**The ANTLR parser successfully replaces the Jison parser with confidence!** 🎉
-
----
-
-**Implementation completed by**: ANTLR Parser Development Team  
-**Date**: 2025-09-17  
-**Status**: ✅ **PRODUCTION READY**  
-**Compatibility**: 99.1% (939/948 tests passing)  
-**Performance**: 15% improvement over baseline  
-**Architecture**: Dual-pattern support (Visitor/Listener)

ANTLR_REGRESSION_RESULTS.md

@@ -1,136 +0,0 @@
-# 📊 ANTLR Parser Full Regression Suite Results
-
-## 🎯 Executive Summary
-
-**Current Status: 98.4% Pass Rate (932/947 tests passing)**
-
-Both ANTLR Visitor and Listener patterns achieve **identical results**:
-- ✅ **932 tests passing** (98.4% compatibility with Jison parser)
-- ❌ **6 tests failing** (0.6% failure rate)
-- ⏭️ **9 tests skipped** (1.0% skipped)
-- 📊 **Total: 947 tests across 15 test files**
-
-## 🔄 Pattern Comparison
-
-### 🎯 Visitor Pattern Results
-```
-Environment: USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true
-Test Files: 3 failed | 11 passed | 1 skipped (15)
-Tests: 6 failed | 932 passed | 9 skipped (947)
-Duration: 3.00s
-```
-
-### 👂 Listener Pattern Results  
-```
-Environment: USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false
-Test Files: 3 failed | 11 passed | 1 skipped (15)
-Tests: 6 failed | 932 passed | 9 skipped (947)
-Duration: 2.91s
-```
-
-**✅ Identical Performance**: Both patterns produce exactly the same test results, confirming the shared core logic architecture is working perfectly.
-
-## 📋 Test File Breakdown
-
-| Test File | Status | Tests | Pass Rate |
-|-----------|--------|-------|-----------|
-| flow-text.spec.js | ✅ PASS | 342/342 | 100% |
-| flow-singlenode.spec.js | ✅ PASS | 148/148 | 100% |
-| flow-edges.spec.js | ✅ PASS | 293/293 | 100% |
-| flow-arrows.spec.js | ✅ PASS | 14/14 | 100% |
-| flow-comments.spec.js | ✅ PASS | 9/9 | 100% |
-| flow-direction.spec.js | ✅ PASS | 4/4 | 100% |
-| flow-interactions.spec.js | ✅ PASS | 13/13 | 100% |
-| flow-lines.spec.js | ✅ PASS | 12/12 | 100% |
-| flow-style.spec.js | ✅ PASS | 24/24 | 100% |
-| flow-vertice-chaining.spec.js | ✅ PASS | 7/7 | 100% |
-| subgraph.spec.js | ✅ PASS | 21/22 | 95.5% |
-| **flow-md-string.spec.js** | ❌ FAIL | 1/2 | 50% |
-| **flow-node-data.spec.js** | ❌ FAIL | 27/31 | 87.1% |
-| **flow.spec.js** | ❌ FAIL | 24/25 | 96% |
-| flow-huge.spec.js | ⏭️ SKIP | 0/1 | 0% (skipped) |
-
-## ❌ Failing Tests Analysis
-
-### 1. flow-md-string.spec.js (1 failure)
-**Issue**: Subgraph labelType not set to 'markdown'
-```
-Expected: "markdown"
-Received: "text"
-```
-**Root Cause**: Subgraph markdown label type detection needs refinement
-
-### 2. flow-node-data.spec.js (4 failures)
-**Issues**:
-- YAML parsing error for multiline strings
-- Missing `<br/>` conversion for multiline text
-- Node ordering issues in multi-node @ syntax
-
-### 3. flow.spec.js (1 failure)  
-**Issue**: Missing accessibility description parsing
-```
-Expected: "Flow chart of the decision making process\nwith a second line"
-Received: ""
-```
-**Root Cause**: accDescr statement not being processed
-
-## 🎯 Target vs Current Performance
-
-| Metric | Target (Jison) | Current (ANTLR) | Gap |
-|--------|----------------|-----------------|-----|
-| **Total Tests** | 947 | 947 | ✅ 0 |
-| **Passing Tests** | 944 | 932 | ❌ -12 |
-| **Pass Rate** | 99.7% | 98.4% | ❌ -1.3% |
-| **Failing Tests** | 0 | 6 | ❌ +6 |
-
-## 🚀 Achievements
-
-### ✅ Major Successes
-- **Dual-Pattern Architecture**: Both Visitor and Listener patterns working identically
-- **Complex Text Processing**: 342/342 text tests passing (100%)
-- **Node Shape Handling**: 148/148 single node tests passing (100%)
-- **Edge Processing**: 293/293 edge tests passing (100%)
-- **Style & Class Support**: 24/24 style tests passing (100%)
-- **Subgraph Support**: 21/22 subgraph tests passing (95.5%)
-
-### 🎯 Core Functionality
-- All basic flowchart syntax ✅
-- All node shapes (rectangles, circles, diamonds, etc.) ✅
-- Complex text content with special characters ✅
-- Class and style definitions ✅
-- Most subgraph processing ✅
-- Interaction handling ✅
-
-## 🔧 Remaining Work
-
-### Priority 1: Critical Fixes (6 tests)
-1. **Subgraph markdown labelType** - 1 test
-2. **Node data YAML processing** - 2 tests  
-3. **Multi-node @ syntax ordering** - 2 tests
-4. **Accessibility description parsing** - 1 test
-
-### Estimated Effort
-- **Time to 99.7%**: ~2-4 hours of focused development
-- **Complexity**: Low to Medium (mostly edge cases and specific feature gaps)
-- **Risk**: Low (core parsing logic is solid)
-
-## 🏆 Production Readiness Assessment
-
-**Current State**: **PRODUCTION READY** for most use cases
-- 98.4% compatibility is excellent for production deployment
-- All major flowchart features working correctly
-- Remaining issues are edge cases and specific features
-
-**Recommendation**: 
-- ✅ Safe to deploy for general flowchart parsing
-- ⚠️ Consider fixing remaining 6 tests for 100% compatibility
-- 🎯 Target 99.7% pass rate to match Jison baseline
-
-## 📈 Progress Tracking
-
-- **Started**: ~85% pass rate
-- **Current**: 98.4% pass rate  
-- **Target**: 99.7% pass rate
-- **Progress**: 13.4% improvement achieved, 1.3% remaining
-
-**Status**: 🟢 **EXCELLENT PROGRESS** - Very close to target performance!

ANTLR_SETUP.md

@@ -1,320 +0,0 @@
-# 🎯 ANTLR Parser Setup & Testing Guide
-
-This guide explains how to use the ANTLR parser for Mermaid flowcharts and test it in the development environment.
-
-## 🚀 Quick Start
-
-### 1. Generate ANTLR Parser Files
-
-```bash
-# Generate ANTLR parser files from grammar
-pnpm antlr:generate
-```
-
-### 2. Start Development Server with ANTLR Parser
-
-```bash
-# Start dev server with ANTLR parser enabled
-pnpm dev:antlr
-```
-
-### 3. Test ANTLR Parser
-
-Open your browser to:
-
-- **ANTLR Test Page**: http://localhost:9000/flowchart-antlr-test.html
-- **Regular Flowchart Demo**: http://localhost:9000/flowchart.html
-
-## 📋 Available Scripts
-
-### Build Scripts
-
-- `pnpm antlr:generate` - Generate ANTLR parser files from grammar
-- `pnpm build` - Full build including ANTLR generation
-
-### Development Scripts
-
-- `pnpm dev` - Regular dev server (Jison parser)
-- `pnpm dev:antlr` - Dev server with ANTLR parser enabled (Visitor pattern default)
-- `pnpm dev:antlr:visitor` - Dev server with ANTLR Visitor pattern
-- `pnpm dev:antlr:listener` - Dev server with ANTLR Listener pattern
-- `pnpm dev:antlr:debug` - Dev server with ANTLR debug logging enabled
-
-### Test Scripts
-
-- `pnpm test:antlr` - Run ANTLR parser tests (Visitor pattern default)
-- `pnpm test:antlr:visitor` - Run ANTLR parser tests with Visitor pattern
-- `pnpm test:antlr:listener` - Run ANTLR parser tests with Listener pattern
-- `pnpm test:antlr:debug` - Run ANTLR parser tests with debug logging
-
-## 🔧 Environment Configuration
-
-The ANTLR parser system supports dual-pattern architecture with two configuration variables:
-
-### Parser Selection
-
-- `USE_ANTLR_PARSER=true` - Use ANTLR parser
-- `USE_ANTLR_PARSER=false` or unset - Use Jison parser (default)
-
-### Pattern Selection (when ANTLR is enabled)
-
-- `USE_ANTLR_VISITOR=true` - Use Visitor pattern (default) ✨
-- `USE_ANTLR_VISITOR=false` - Use Listener pattern
-
-### Configuration Examples
-
-```bash
-# Use Jison parser (original)
-USE_ANTLR_PARSER=false
-
-# Use ANTLR with Visitor pattern (recommended default)
-USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true
-
-# Use ANTLR with Listener pattern
-USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false
-```
-
-## 📊 Current Status
-
-### ✅ ANTLR Parser Achievements (99.1% Pass Rate) - PRODUCTION READY! 🎉
-
-- **939/948 tests passing** (99.1% compatibility with Jison parser)
-- **ZERO FAILING TESTS** ❌ → ✅ (All functional issues resolved!)
-- **Performance Optimized** - 15% improvement with low-hanging fruit optimizations ⚡
-- **Dual-Pattern Architecture** - Both Listener and Visitor patterns supported ✨
-- **Visitor Pattern Default** - Optimized pull-based parsing with developer control ✅
-- **Listener Pattern Available** - Event-driven push-based parsing option ✅
-- **Shared Core Logic** - Identical behavior across both patterns ✅
-- **Configuration-Based Selection** - Runtime pattern switching via environment variables ✅
-- **Modular Architecture** - Clean separation of concerns with dedicated files ✅
-- **Regression Testing Completed** - Full test suite validation for both patterns ✅
-- **Development Environment Integrated** - Complete workflow setup ✅
-- **Special Character Node ID Handling** - Complex lookahead patterns ✅
-- **Class/Style Processing** - Vertex creation and class assignment ✅
-- **Interaction Parameter Passing** - Callback arguments and tooltips ✅
-- **Node Data Processing** - Shape data pairing with recursive collection ✅
-- **Markdown Processing** - Nested quote/backtick detection ✅
-- **Trapezoid Shape Processing** - Complex lexer precedence with semantic predicates ✅
-- **Ellipse Text Hyphen Processing** - Advanced pattern matching ✅
-- **Conditional Logging** - Clean output with debug mode support 🔧
-- **Optimized Performance Tracking** - Minimal overhead for production use ⚡
-
-### 🎯 Test Coverage
-
-The ANTLR parser successfully handles:
-
-- Basic flowchart syntax
-- All node shapes (rectangles, circles, diamonds, stadiums, subroutines, databases, etc.)
-- Trapezoid shapes with forward/back slashes
-- Complex text content with special characters
-- Class and style definitions
-- Subgraph processing
-- Complex nested structures
-- Markdown formatting in nodes and labels
-- Accessibility descriptions (accDescr/accTitle)
-- Multi-line YAML processing
-- Node data with @ syntax
-- Ampersand chains with shape data
-
-### ✅ All Functional Issues Resolved!
-
-**Zero failing tests** - All previously failing tests have been successfully resolved:
-
-- ✅ Accessibility description parsing (accDescr statements)
-- ✅ Markdown formatting detection in subgraphs
-- ✅ Multi-line YAML processing with proper `<br/>` conversion
-- ✅ Node data processing with @ syntax and ampersand chains
-- ✅ Complex edge case handling
-
-Only **9 skipped tests** remain - these are intentionally skipped tests (not failures).
-
-## 🧪 Testing
-
-### Test Files
-
-- `demos/flowchart-antlr-test.html` - Comprehensive ANTLR parser test page
-- `packages/mermaid/src/diagrams/flowchart/parser/` - Unit test suite
-
-### Manual Testing
-
-1. Start the ANTLR dev server: `pnpm dev:antlr`
-2. Open test page: http://localhost:9000/flowchart-antlr-test.html
-3. Check browser console for detailed logging
-4. Verify all diagrams render correctly
-
-### Automated Testing
-
-```bash
-# Quick test commands using new scripts
-pnpm test:antlr                # Run all tests with Visitor pattern (default)
-pnpm test:antlr:visitor        # Run all tests with Visitor pattern
-pnpm test:antlr:listener       # Run all tests with Listener pattern
-pnpm test:antlr:debug          # Run all tests with debug logging
-
-# Manual environment variable commands (if needed)
-USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true npx vitest run packages/mermaid/src/diagrams/flowchart/parser/
-USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false npx vitest run packages/mermaid/src/diagrams/flowchart/parser/
-
-# Run single test file
-USE_ANTLR_PARSER=true npx vitest run packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
-```
-
-## 📁 File Structure
-
-```
-packages/mermaid/src/diagrams/flowchart/parser/
-├── antlr/
-│   ├── FlowLexer.g4              # ANTLR lexer grammar
-│   ├── FlowParser.g4             # ANTLR parser grammar
-│   ├── antlr-parser.ts           # Main ANTLR parser with pattern selection
-│   ├── FlowchartParserCore.ts    # Shared core logic (99.1% compatible)
-│   ├── FlowchartListener.ts      # Listener pattern implementation
-│   ├── FlowchartVisitor.ts       # Visitor pattern implementation (default)
-│   └── generated/                # Generated ANTLR files
-│       ├── FlowLexer.ts          # Generated lexer
-│       ├── FlowParser.ts         # Generated parser
-│       ├── FlowParserListener.ts # Generated listener interface
-│       └── FlowParserVisitor.ts  # Generated visitor interface
-├── flow.jison                    # Original Jison parser
-├── flowParser.ts                 # Parser interface wrapper
-└── *.spec.js                     # Test files (947 tests total)
-```
-
-## 🏗️ Dual-Pattern Architecture
-
-The ANTLR parser supports both Listener and Visitor patterns with identical behavior:
-
-### 👂 Listener Pattern
-
-- **Event-driven**: Parser controls traversal via enter/exit methods
-- **Push-based**: Parser pushes events to listener callbacks
-- **Automatic traversal**: Uses `ParseTreeWalker.DEFAULT.walk()`
-- **Best for**: Simple processing, event-driven architectures
-
-### 🚶 Visitor Pattern (Default)
-
-- **Pull-based**: Developer controls traversal and can return values
-- **Manual traversal**: Uses `visitor.visit()` and `visitChildren()`
-- **Return values**: Can return data from visit methods
-- **Best for**: Complex processing, data transformation, AST manipulation
-
-### 🔄 Shared Core Logic
-
-Both patterns extend `FlowchartParserCore` which contains:
-
-- All parsing logic that achieved 99.1% test compatibility
-- Shared helper methods for node processing, style handling, etc.
-- Database interaction methods
-- Error handling and validation
-
-This architecture ensures **identical behavior** regardless of pattern choice.
-
-## ⚡ Performance Optimizations
-
-### 🚀 Low-Hanging Fruit Optimizations (15% Improvement)
-
-The ANTLR parser includes several performance optimizations:
-
-#### **1. Conditional Logging**
-
-- Only logs for complex diagrams (>100 edges) or when `ANTLR_DEBUG=true`
-- Dramatically reduces console noise for normal operations
-- Maintains detailed debugging when needed
-
-#### **2. Optimized Performance Tracking**
-
-- Performance measurements only enabled in debug mode
-- Reduced `performance.now()` calls for frequently executed methods
-- Streamlined progress reporting frequency
-
-#### **3. Efficient Database Operations**
-
-- Conditional logging for vertex/edge creation
-- Optimized progress reporting (every 5000-10000 operations)
-- Reduced overhead for high-frequency operations
-
-#### **4. Debug Mode Support**
-
-```bash
-# Enable full detailed logging
-ANTLR_DEBUG=true pnpm dev:antlr
-
-# Normal operation (clean output)
-pnpm dev:antlr
-```
-
-### 📊 Performance Results
-
-| Test Size                 | Before Optimization | After Optimization | Improvement    |
-| ------------------------- | ------------------- | ------------------ | -------------- |
-| **Medium (1000 edges)**   | 2.64s               | 2.25s              | **15% faster** |
-| **Parse Tree Generation** | 2455ms              | 2091ms             | **15% faster** |
-| **Tree Traversal**        | 186ms               | 154ms              | **17% faster** |
-
-### 🎯 Performance Characteristics
-
-- **Small diagrams** (<100 edges): ~50-200ms parsing time
-- **Medium diagrams** (1000 edges): ~2.2s parsing time
-- **Large diagrams** (10K+ edges): May require grammar-level optimizations
-- **Both patterns perform identically** with <3% variance
-
-## 🔍 Debugging
-
-### Browser Console
-
-The test page provides detailed console logging:
-
-- Environment variable status
-- Parser selection confirmation
-- Diagram rendering status
-- Error detection and reporting
-
-### Server Logs
-
-The ANTLR dev server shows:
-
-- Environment variable confirmation
-- Build status
-- File change detection
-- Rebuild notifications
-
-## 🎉 Success Indicators
-
-When everything is working correctly, you should see:
-
-### 🔧 Server Startup
-
-1. ✅ **Server**: "🚀 ANTLR Parser Dev Server listening on http://localhost:9000"
-2. ✅ **Server**: "🎯 Environment: USE_ANTLR_PARSER=true"
-
-### 🎯 Parser Selection (in browser console)
-
-3. ✅ **Console**: "🔧 FlowParser: USE_ANTLR_PARSER = true"
-4. ✅ **Console**: "🔧 FlowParser: Selected parser: ANTLR"
-
-### 📊 Normal Operation (Clean Output)
-
-5. ✅ **Browser**: All test diagrams render as SVG elements
-6. ✅ **Test Page**: Green status indicator showing "ANTLR Parser Active & Rendering Successfully!"
-7. ✅ **Console**: Minimal logging for small/medium diagrams (optimized)
-
-### 🐛 Debug Mode (ANTLR_DEBUG=true)
-
-8. ✅ **Console**: "🎯 ANTLR Parser: Starting parse" (for complex diagrams)
-9. ✅ **Console**: "🎯 ANTLR Parser: Creating visitor" (or "Creating listener")
-10. ✅ **Console**: Detailed performance breakdowns and timing information
-
-## 🚨 Troubleshooting
-
-### Common Issues
-
-1. **ANTLR files not generated**: Run `pnpm antlr:generate`
-2. **Environment variable not set**: Use `pnpm dev:antlr` instead of `pnpm dev`
-3. **Diagrams not rendering**: Check browser console for parsing errors
-4. **Build errors**: Ensure all dependencies are installed with `pnpm install`
-
-### Getting Help
-
-- Check the browser console for detailed error messages
-- Review server logs for build issues
-- Compare with working Jison parser using regular `pnpm dev`

cypress/helpers/util.ts

@@ -14,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-export const utf8ToB64 = (str: string): string => {
+const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -22,7 +22,7 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
   graphStr: string | string[],
@@ -61,7 +61,9 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };

cypress/integration/other/configuration.spec.js

@@ -98,12 +98,12 @@ describe('Configuration', () => {
     it('should handle arrowMarkerAbsolute set to true', () => {
       renderGraph(
         `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-    `,
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
         {
           arrowMarkerAbsolute: true,
         }
@@ -113,7 +113,8 @@ describe('Configuration', () => {
         cy.get('path')
           .first()
           .should('have.attr', 'marker-end')
-          .and('include', 'url(http://localhost');
+          .should('exist')
+          .and('include', 'url(http\\:\\/\\/localhost');
       });
     });
     it('should not taint the initial configuration when using multiple directives', () => {

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-
-  it('should sanitize icon labels in architecture diagrams', () => {
-    const str = JSON.stringify({
-      code: `architecture-beta
-    group api(cloud)[API]
-    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize katex blocks', () => {
-    const str = JSON.stringify({
-      code: `sequenceDiagram
-    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
-    A->>John: Hello John, how are you?`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize labels', () => {
-    const str = JSON.stringify({
-      code: `erDiagram
-    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
-    `,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });

cypress/integration/rendering/block.spec.js

@@ -16,7 +16,7 @@ describe('Block diagram', () => {
 
   it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   id1["Hello"]
   block
     columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
 
   it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     columns 1
     id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
 
   it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
 
   it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
 
   it('BL6: should handle block arrows and spece statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     columns 3
     space:3
     ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
 
   it('BL7: should handle different types of edges', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       A space:5
       A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
 
   it('BL8: should handle sub-blocks without columns statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 2
       C A B
       block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
 
   it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
 
   it('BL10: should handle edges from composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
 
   it('BL11: should handle edges to composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
 
   it('BL12: edges should handle labels', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A
       space
       A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
 
   it('BL13: should handle block arrows in different directions', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       space blockArrowId1<["down"]>(down) space
       blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
 
   it('BL14: should style statements and class statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A
     B
     classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
 
   it('BL15: width alignment - D and E should share available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     D
     E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
 
   it('BL16: width alignment - C should be as wide as the composite block', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     A("This is the text")
     B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
 
   it('BL17: width alignment - blocks should be equal in width', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A("This is the text")
     B
     C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
 
   it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
 
   it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A>"rect_left_inv_arrow"]
     B{"diamond"}
     C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
 
   it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A(["stadium"])
       `,
       {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
 
   it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A[/"lean right"/]
     B[\"lean left"\]
     C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
 
   it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
 
   it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A("rounded"):2
       B:2
       C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
 
   it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       block:2
         A
       end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
 
   it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
         columns 3
         space
         middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
   });
   it('BL26: space and an edge', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 5
     A space B
     A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
   });
   it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
     a["A wide one"] b:2 c:2 d
       `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
   });
   it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
 
   it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -393,17 +393,6 @@ describe('Block diagram', () => {
   overflow:3
   short:1
   also_overflow:2
-`,
-      {}
-    );
-  });
-
-  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
-    imgSnapshotTest(
-      `block-beta
-  a
-  b
-  a --- b
 `,
       {}
     );

cypress/integration/rendering/classDiagram.spec.js

@@ -512,30 +512,4 @@ describe('Class diagram', () => {
       );
     });
   });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-    it('should handle an empty class body with empty braces', () => {
-      imgSnapshotTest(
-        ` classDiagram
-        class FooBase~T~ {}
-    class Bar {
-        +Zip
-        +Zap()
-    }
-    FooBase <|-- Ba
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

cypress/integration/rendering/flowchart-elk.spec.js

@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380, 15);
+      verifyNumber(maxWidthValue, 380);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380, 15);
+      verifyNumber(width, 380);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -1053,21 +1053,6 @@ flowchart LR
       });
     });
   });
-
-  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
-    imgSnapshotTest(
-      `---
-config:
-  layout: elk
----
-      flowchart TB
-        a --> a1 & a2 & a3 & a4
-        b --> b1 & b2
-        b2 --> b3
-        b1 --> b4
-      `
-    );
-  });
 });
 
 describe('Title and arrow styling #4813', () => {

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1113,37 +1113,6 @@ end
       );
     });
   });
-  describe('Flowchart Node Shape Rendering', () => {
-    it('should render a stadium-shaped node', () => {
-      imgSnapshotTest(
-        `flowchart TB
-          A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]
-        `,
-        {}
-      );
-    });
-    it('should render a diamond-shaped node using shape config', () => {
-      imgSnapshotTest(
-        `flowchart BT
-          n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}
-        `,
-        {}
-      );
-    });
-    it('should render a rounded rectangle and a normal rectangle', () => {
-      imgSnapshotTest(
-        `flowchart BT
-        n2["Untitled Node"] --> n1["Rounded Rectangle"]
-        n3["Untitled Node"] --> n1
-        n1@{ shape: rounded}
-        n3@{ shape: rect}
-    `,
-        {}
-      );
-    });
-  });
 
   it('6617: Per Link Curve Styling using edge Ids', () => {
     imgSnapshotTest(
@@ -1164,39 +1133,4 @@ end
       `
     );
   });
-
-  describe('when rendering unsuported markdown', () => {
-    const graph = `flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-      `;
-
-    it('should render raw strings', () => {
-      imgSnapshotTest(graph);
-    });
-
-    it('should render raw strings with htmlLabels: false', () => {
-      imgSnapshotTest(graph, { htmlLabels: false });
-    });
-  });
-
-  it('V2 - 17: should apply class def colour to edge label', () => {
-    imgSnapshotTest(
-      ` graph LR
-    id1(Start) link@-- "Label" -->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-
-class id2 myClass
-classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
-class link myClass
-`
-    );
-  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -565,18 +565,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render only the day when using dateFormat D', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      title Test
-      dateFormat D
-      A :a, 1, 1d
-    `,
-      {}
-    );
-  });
-
   // TODO: fix it
   //
   // This test is skipped deliberately
@@ -659,49 +647,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    2025-07-07
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend saturday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend friday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
   it("should render when there's a semicolon in the title", () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/mindmap-tidy-tree.spec.js

@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Mindmap Tidy Tree', () => {
-  it('1-tidy-tree: should render a simple mindmap without children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      `
-    );
-  });
-  it('2-tidy-tree: should render a simple mindmap', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      `
-    );
-  });
-  it('3-tidy-tree: should render a  mindmap with different shapes', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-      `
-    );
-  });
-  it('4-tidy-tree: should render a mindmap with children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-       mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      `
-    );
-  });
-});

cypress/integration/rendering/mindmap.spec.ts

@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -228,21 +240,25 @@ root
         `mindmap
     id1[\`**Start** with
     a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
       );
     });
   });
   describe('Include char sequence "graph" in text (#6795)', () => {
     it('has a label with char sequence "graph"', () => {
       imgSnapshotTest(
-        ` mindmap
+        `
+        mindmap
           root
             Photograph
               Waterfall
               Landscape
             Geography
               Mountains
-              Rocks`,
+              Rocks
+        `,
         { flowchart: { defaultRenderer: 'elk' } }
       );
     });

cypress/integration/rendering/pie.spec.ts

@@ -82,13 +82,4 @@ describe('pie chart', () => {
       `
     );
   });
-  it('should render pie slices only for non-zero values but shows all legends', () => {
-    imgSnapshotTest(
-      `   pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 1
-      `
-    );
-  });
 });

cypress/integration/rendering/sankey.spec.ts

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
   describe('when given a linkColor', function () {
     this.beforeAll(() => {
       cy.wrap(
-        `sankey
+        `sankey-beta
       a,b,10
       `
       ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
     this.beforeAll(() => {
       cy.wrap(
         `
-        sankey
+        sankey-beta
         
         a,b,8
         b,c,8

cypress/integration/rendering/sequencediagram-v2.spec.js

@@ -1,659 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
-
-const looks = ['classic'];
-const participantTypes = [
-  { type: 'participant', display: 'participant' },
-  { type: 'actor', display: 'actor' },
-  { type: 'boundary', display: 'boundary' },
-  { type: 'control', display: 'control' },
-  { type: 'entity', display: 'entity' },
-  { type: 'database', display: 'database' },
-  { type: 'collections', display: 'collections' },
-  { type: 'queue', display: 'queue' },
-];
-
-const restrictedTypes = ['boundary', 'control', 'entity', 'database', 'collections', 'queue'];
-
-const interactionTypes = ['->>', '-->>', '->', '-->', '-x', '--x', '->>+', '-->>+'];
-
-const notePositions = ['left of', 'right of', 'over'];
-
-function getParticipantLine(name, type, alias) {
-  if (restrictedTypes.includes(type)) {
-    return `  participant ${name}@{ "type" : "${type}" }\n`;
-  } else if (alias) {
-    return `  participant ${name}@{ "type" : "${type}" } \n`;
-  } else {
-    return `  participant ${name}@{ "type" : "${type}" }\n`;
-  }
-}
-
-looks.forEach((look) => {
-  describe(`Sequence Diagram Tests - ${look} look`, () => {
-    it('should render all participant types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.forEach((pt, index) => {
-        const name = `${pt.display}${index}`;
-        diagramCode += getParticipantLine(name, pt.type);
-      });
-      for (let i = 0; i < participantTypes.length - 1; i++) {
-        diagramCode += `  ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
-      }
-      imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
-    });
-
-    it('should render all interaction types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      interactionTypes.forEach((interaction, index) => {
-        diagramCode += `  A ${interaction} B: ${interaction} message ${index}\n`;
-      });
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render participant creation and destruction', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.forEach((pt, index) => {
-        const name = `${pt.display}${index}`;
-        diagramCode += getParticipantLine('A', pt.type);
-        diagramCode += getParticipantLine('B', pt.type);
-        diagramCode += `  create participant ${name}@{ "type" : "${pt.type}" }\n`;
-        diagramCode += `  A ->> ${name}: Hello ${pt.display}\n`;
-        if (index % 2 === 0) {
-          diagramCode += `  destroy ${name}\n`;
-        }
-      });
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render notes in all positions', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      notePositions.forEach((position, index) => {
-        diagramCode += `  Note ${position} A: Note ${position} ${index}\n`;
-      });
-      diagramCode += `  A ->> B: Message with notes\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render parallel interactions', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 4).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  par Parallel actions\n`;
-      for (let i = 0; i < 3; i += 2) {
-        diagramCode += `    ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
-        if (i < participantTypes.length - 2) {
-          diagramCode += `    and\n`;
-        }
-      }
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render alternative flows', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      diagramCode += `  alt Successful case\n`;
-      diagramCode += `    A ->> B: Request\n`;
-      diagramCode += `    B -->> A: Success\n`;
-      diagramCode += `  else Failure case\n`;
-      diagramCode += `    A ->> B: Request\n`;
-      diagramCode += `    B --x A: Failure\n`;
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render loops', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  loop For each participant\n`;
-      for (let i = 0; i < 3; i++) {
-        diagramCode += `    ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Message ${i}\n`;
-      }
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render boxes around groups', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += `  box Group 1\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
-      });
-      diagramCode += `  end\n`;
-      diagramCode += `  box rgb(200,220,255) Group 2\n`;
-      participantTypes.slice(3, 6).forEach((pt, index) => {
-        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
-      });
-      diagramCode += `  end\n`;
-      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[3].display}0: Cross-group message\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render with different font settings', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Regular message\n`;
-      diagramCode += `  Note right of ${participantTypes[1].display}1: Regular note\n`;
-      imgSnapshotTest(diagramCode, {
-        look,
-        sequence: {
-          actorFontFamily: 'courier',
-          actorFontSize: 14,
-          messageFontFamily: 'Arial',
-          messageFontSize: 12,
-          noteFontFamily: 'times',
-          noteFontSize: 16,
-          noteAlign: 'left',
-        },
-      });
-    });
-  });
-});
-
-// Additional tests for specific combinations
-describe('Sequence Diagram Special Cases', () => {
-  it('should render complex sequence with all features', () => {
-    const diagramCode = `
-      sequenceDiagram
-        box rgb(200,220,255) Authentication
-          actor User
-          participant LoginUI@{ "type": "boundary" }
-          participant AuthService@{ "type": "control" }
-          participant UserDB@{ "type": "database" }
-        end
-
-        box rgb(200,255,220) Order Processing
-          participant Order@{ "type": "entity" }
-          participant OrderQueue@{ "type": "queue" }
-          participant AuditLogs@{ "type": "collections" }
-        end
-        
-        User ->> LoginUI: Enter credentials
-        LoginUI ->> AuthService: Validate
-        AuthService ->> UserDB: Query user
-        UserDB -->> AuthService: User data
-        alt Valid credentials
-          AuthService -->> LoginUI: Success
-          LoginUI -->> User: Welcome
-          
-          par Place order
-            User ->> Order: New order
-            Order ->> OrderQueue: Process
-            and
-            Order ->> AuditLogs: Record
-          end
-          
-          loop Until confirmed
-            OrderQueue ->> Order: Update status
-            Order -->> User: Notification
-          end
-        else Invalid credentials
-          AuthService --x LoginUI: Failure
-          LoginUI --x User: Retry
-        end
-    `;
-    imgSnapshotTest(diagramCode, {});
-  });
-
-  it('should render with wrapped messages and notes', () => {
-    const diagramCode = `
-      sequenceDiagram
-        participant A
-        participant B
-        
-        A ->> B: This is a very long message that should wrap properly in the diagram rendering
-        Note over A,B: This is a very long note that should also wrap properly when rendered in the diagram
-        
-        par Wrapped parallel
-          A ->> B: Parallel message 1<br>with explicit line break
-          and
-          B ->> A: Parallel message 2<br>with explicit line break
-        end
-        
-        loop Wrapped loop
-          Note right of B: This is a long note<br>in a loop
-          A ->> B: Message in loop
-        end
-    `;
-    imgSnapshotTest(diagramCode, { sequence: { wrap: true } });
-  });
-  describe('Sequence Diagram Rendering with Different Participant Types', () => {
-    it('should render a sequence diagram with various participant types', () => {
-      imgSnapshotTest(
-        `
-        sequenceDiagram
-          participant User@{ "type": "actor" }
-          participant AuthService@{ "type": "control" }
-          participant UI@{ "type": "boundary" }
-          participant OrderController@{ "type": "control" }
-          participant Product@{ "type": "entity" }
-          participant MongoDB@{ "type": "database" }
-          participant Products@{ "type": "collections" }
-          participant OrderQueue@{ "type": "queue" }
-          User ->> UI: Login request
-          UI ->> AuthService: Validate credentials
-          AuthService -->> UI: Authentication token
-          UI ->> OrderController: Place order
-          OrderController ->> Product: Check availability
-          Product -->> OrderController: Available
-          OrderController ->> MongoDB: Save order
-          MongoDB -->> OrderController: Order saved
-          OrderController ->> OrderQueue: Process payment
-          OrderQueue -->> User: Order confirmation
-      `
-      );
-    });
-
-    it('should render participant creation and destruction with different types', () => {
-      imgSnapshotTest(`
-      sequenceDiagram
-          participant Alice@{ "type" : "boundary" }
-          Alice->>Bob: Hello Bob, how are you ?
-          Bob->>Alice: Fine, thank you. And you?
-          create participant Carl@{ "type" : "control" }
-          Alice->>Carl: Hi Carl!
-          create actor D as Donald
-          Carl->>D: Hi!
-          destroy Carl
-          Alice-xCarl: We are too many
-          destroy Bob
-          Bob->>Alice: I agree
-      `);
-    });
-
-    it('should handle complex interactions between different participant types', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-        box rgb(200,220,255) Authentication
-          participant User@{ "type": "actor" }
-          participant LoginUI@{ "type": "boundary" }
-          participant AuthService@{ "type": "control" }
-          participant UserDB@{ "type": "database" }
-        end
-
-        box rgb(200,255,220) Order Processing
-          participant Order@{ "type": "entity" }
-          participant OrderQueue@{ "type": "queue" }
-          participant AuditLogs@{ "type": "collections" }
-        end
-
-        User ->> LoginUI: Enter credentials
-        LoginUI ->> AuthService: Validate
-        AuthService ->> UserDB: Query user
-        UserDB -->> AuthService: User data
-
-        alt Valid credentials
-          AuthService -->> LoginUI: Success
-          LoginUI -->> User: Welcome
-
-          par Place order
-            User ->> Order: New order
-            Order ->> OrderQueue: Process
-            and
-            Order ->> AuditLogs: Record
-          end
-
-          loop Until confirmed
-            OrderQueue ->> Order: Update status
-            Order -->> User: Notification
-          end
-        else Invalid credentials
-          AuthService --x LoginUI: Failure
-          LoginUI --x User: Retry
-        end
-      `,
-        { sequence: { useMaxWidth: false } }
-      );
-    });
-
-    it('should render parallel processes with different participant types', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-        participant Customer@{ "type": "actor" }
-        participant Frontend@{ "type": "participant" }
-        participant PaymentService@{ "type": "boundary" }
-        participant InventoryManager@{ "type": "control" }
-        participant Order@{ "type": "entity" }
-        participant OrdersDB@{ "type": "database" }
-        participant NotificationQueue@{ "type": "queue" }
-
-        Customer ->> Frontend: Place order
-        Frontend ->> Order: Create order
-        par Parallel Processing
-          Order ->> PaymentService: Process payment
-          and
-          Order ->> InventoryManager: Reserve items
-        end
-        PaymentService -->> Order: Payment confirmed
-        InventoryManager -->> Order: Items reserved
-        Order ->> OrdersDB: Save finalized order
-        OrdersDB -->> Order: Order saved
-        Order ->> NotificationQueue: Send confirmation
-        NotificationQueue -->> Customer: Order confirmation
-      `
-      );
-    });
-  });
-  it('should render different participant types with notes and loops', () => {
-    imgSnapshotTest(
-      `
-    sequenceDiagram
-    actor Admin
-    participant Dashboard
-    participant AuthService@{ "type" : "boundary" }
-    participant UserManager@{ "type" : "control" }
-    participant UserProfile@{ "type" : "entity" }
-    participant UserDB@{ "type" : "database" }
-    participant Logs@{ "type" : "database" }
-    
-    Admin ->> Dashboard: Open user management
-    loop Authentication check
-      Dashboard ->> AuthService: Verify admin rights
-      AuthService ->> Dashboard: Access granted
-    end
-    Dashboard ->> UserManager: List users
-    UserManager ->> UserDB: Query users
-    UserDB ->> UserManager: Return user data
-    Note right of UserDB: Encrypted data<br/>requires decryption
-    UserManager ->> UserProfile: Format profiles
-    UserProfile ->> UserManager: Formatted data
-    UserManager ->> Dashboard: Display users
-    Dashboard ->> Logs: Record access
-    Logs ->> Admin: Audit trail
-    `
-    );
-  });
-
-  it('should render different participant types with alternative flows', () => {
-    imgSnapshotTest(
-      `
-    sequenceDiagram
-      actor Client
-      participant MobileApp
-      participant CloudService@{ "type" : "boundary" }
-      participant DataProcessor@{ "type" : "control" }
-      participant Transaction@{ "type" : "entity" }
-      participant TransactionsDB@{ "type" : "database" }
-      participant EventBus@{ "type" : "queue" }
-      
-      Client ->> MobileApp: Initiate transaction
-      MobileApp ->> CloudService: Authenticate
-      alt Authentication successful
-        CloudService -->> MobileApp: Auth token
-        MobileApp ->> DataProcessor: Process data
-        DataProcessor ->> Transaction: Create transaction
-        Transaction ->> TransactionsDB: Save record
-        TransactionsDB -->> Transaction: Confirmation
-        Transaction ->> EventBus: Publish event
-        EventBus -->> Client: Notification
-      else Authentication failed
-        CloudService -->> MobileApp: Error
-        MobileApp -->> Client: Show error
-      end
-    `
-    );
-  });
-
-  it('should render different participant types with wrapping text', () => {
-    imgSnapshotTest(
-      `
-  sequenceDiagram
-      participant B@{ "type" : "boundary" }
-      participant C@{ "type" : "control" }
-      participant E@{ "type" : "entity" }
-      participant DB@{ "type" : "database" }
-      participant COL@{ "type" : "collections" }
-      participant Q@{ "type" : "queue" }
-    
-      FE ->> B: Another long message<br/>with explicit<br/>line breaks
-      B -->> FE: Response message that is also quite long and needs to wrap
-      FE ->> C: Process data
-      C ->> E: Validate
-      E -->> C: Validation result
-      C ->> DB: Save
-      DB -->> C: Save result
-      C ->> COL: Log
-      COL -->> Q: Forward
-      Q -->> LongNameUser: Final response with confirmation of all actions taken
-    `,
-      { sequence: { wrap: true } }
-    );
-  });
-
-  describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
-    it('should render long notes left of boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-        participant Alice@{ "type" : "boundary" }
-        actor Bob
-        Alice->>Bob: Hola
-        Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-        Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes left of control', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "control" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long notes right of entity', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "entity" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes right of database', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "database" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long notes over collections', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "collections" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes over queue', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "queue" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render notes over actor and boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      actor Alice
-      participant Charlie@{ "type" : "boundary" }
-      note over Alice: Some note
-      note over Charlie: Other note
-    `,
-        {}
-      );
-    });
-
-    it('should render long messages from database to collections', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "database" }
-      participant Bob@{ "type" : "collections" }
-      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long messages from control to entity', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "control" }
-      participant Bob@{ "type" : "entity" }
-      Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long messages from queue to boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "queue" }
-      participant Bob@{ "type" : "boundary" }
-      Alice->>Bob: I'm short
-      Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long messages from actor to database', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      actor Alice
-      participant Bob@{ "type" : "database" }
-      Alice->>Bob: I'm short
-      Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-    `,
-        {}
-      );
-    });
-  });
-
-  describe('svg size', () => {
-    it('should render a sequence diagram when useMaxWidth is true (default)', () => {
-      renderGraph(
-        `
-      sequenceDiagram
-        actor Alice
-        participant Bob@{ "type" : "boundary" }
-        participant John@{ "type" : "control" }
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-        Bob-->Alice: Checking with John...
-        alt either this
-          Alice->>John: Yes
-        else or this
-          Alice->>John: No
-        else or this will happen
-          Alice->John: Maybe
-        end
-        par this happens in parallel
-          Alice -->> Bob: Parallel message 1
-        and
-          Alice -->> John: Parallel message 2
-        end
-      `,
-        { sequence: { useMaxWidth: true } }
-      );
-      cy.get('svg').should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
-      });
-    });
-
-    it('should render a sequence diagram when useMaxWidth is false', () => {
-      renderGraph(
-        `
-      sequenceDiagram
-        actor Alice
-        participant Bob@{ "type" : "boundary" }
-        participant John@{ "type" : "control" }
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-        Bob-->Alice: Checking with John...
-        alt either this
-          Alice->>John: Yes
-        else or this
-          Alice->>John: No
-        else or this will happen
-          Alice->John: Maybe
-        end
-        par this happens in parallel
-          Alice -->> Bob: Parallel message 1
-        and
-          Alice -->> John: Parallel message 2
-        end
-      `,
-        { sequence: { useMaxWidth: false } }
-      );
-      cy.get('svg').should((svg) => {
-        const width = parseFloat(svg.attr('width'));
-        expect(width).to.be.within(820 * 0.95, 820 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
-    });
-  });
-});

cypress/integration/rendering/sequencediagram.spec.js

@@ -893,17 +893,6 @@ describe('Sequence diagram', () => {
         }
       );
     });
-
-    it('should handle bidirectional arrows with autonumber', () => {
-      imgSnapshotTest(`
-       sequenceDiagram
-       autonumber
-       participant A
-       participant B
-       A<<->>B: This is a bidirectional message
-       A->B: This is a normal message`);
-    });
-
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -602,231 +602,6 @@ State1 --> [*]
       --
       55
   }
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly', () => {
-    imgSnapshotTest(
-      `---
-title: On The Way To Something Something DarkSide
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly with multiple transitions', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple Transitions
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-State9_____________ --> State8_____________   : Transition12____
-`,
-      {}
-    );
-  });
-
-  it('should render edge labels correctly with multiple states', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple States
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-   state State10_____________
-   {
-      c10
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State3_____________   : Transition2_____
-State3_____________ --> State4_____________   : Transition3_____
-State4_____________ --> State5_____________   : Transition4_____
-State5_____________ --> State6_____________   : Transition5_____
-State6_____________ --> State7_____________   : Transition6_____
-State7_____________ --> State8_____________   : Transition7_____
-State8_____________ --> State9_____________   : Transition8_____
-State9_____________ --> State10_____________   : Transition9_____
 `,
       {}
     );

cypress/integration/rendering/xyChart.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible xy-beta chart', () => {
+  it('should render the simplest possible chart', () => {
     imgSnapshotTest(
       `
       xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
       {}
     );
   });
-  it('should render the simplest possible xy chart', () => {
-    imgSnapshotTest(
-      `
-      xychart
-        line [10, 30, 20]
-      `,
-      {}
-    );
-  });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
   it('Should render a chart without title', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
   it('y-axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
   it('x axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         line [23, 46, 77, 34]
         line [45, 32, 33, 12]
         bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
           height: 20
           plotReservedSpacePercent: 100
       ---
-      xychart
+      xychart-beta
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
             showTick: false
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
     imgSnapshotTest(
       `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -190,7 +181,7 @@ describe('XY Chart', () => {
           plotReservedSpacePercent: 60
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +202,7 @@ describe('XY Chart', () => {
           yAxis:
             showTitle: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +223,7 @@ describe('XY Chart', () => {
           yAxis:
             showLabel: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +244,7 @@ describe('XY Chart', () => {
           yAxis:
             showTick: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +265,7 @@ describe('XY Chart', () => {
           yAxis:
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +294,7 @@ describe('XY Chart', () => {
             xAxisLineColor: "#87ceeb"
             plotColorPalette: "#008000, #faba63"
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +307,7 @@ describe('XY Chart', () => {
   it('should use the correct distances between data points', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis 0 --> 2
         line [0, 1, 0, 1]
         bar [1, 0, 1, 0]
@@ -334,7 +325,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -353,7 +344,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -366,7 +357,7 @@ describe('XY Chart', () => {
   it('should render vertical bar chart without labels by default', () => {
     imgSnapshotTest(
       `
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -384,7 +375,7 @@ describe('XY Chart', () => {
       xyChart:
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -402,7 +393,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -421,7 +412,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -439,7 +430,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -458,7 +449,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -476,7 +467,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -495,7 +486,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -513,7 +504,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -570,7 +561,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -624,7 +615,7 @@ describe('XY Chart', () => {
         xyChart:
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
         y-axis "Revenue (in $)" 4000 --> 12000
@@ -681,7 +672,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
       y-axis "Revenue (in $)" 4000 --> 12000
@@ -735,7 +726,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000
@@ -792,7 +783,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000

cypress/platform/darshan.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-     pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/knsv2.html

@@ -32,8 +32,26 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />
 
     <style>
+      .recursive-mermaid {
+        font-family: 'Recursive', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -45,7 +63,9 @@
       h1 {
         color: grey;
       }
-
+      .mermaid {
+        border: 1px solid red;
+      }
       .mermaid2 {
         display: none;
       }
@@ -83,6 +103,11 @@
         width: 100%;
       }
 
+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
       /* tspan {
               font-size: 6px !important;
             } */
@@ -106,210 +131,6 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart-elk TB
-      c1-->a2
-      subgraph one
-      a1-->a2
-      end
-      subgraph two
-      b1-->b2
-      end
-      subgraph three
-      c1-->c2
-      end
-      one --> two
-      three --> two
-      two --> c2
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-
-        process_C
-      subgraph container_Alpha
-        subgraph process_B
-          pppB
-        end
-        subgraph process_A
-          pppA
-        end
-        process_B-->|via_AWSBatch|container_Beta
-        process_A-->|messages|container_Beta
-      end
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-      subgraph container_Beta
-        process_C
-      end
-      subgraph container_Alpha
-        subgraph process_B
-          pppB
-        end
-        subgraph process_A
-          pppA
-        end
-        process_B-->|via_AWSBatch|container_Beta
-        process_A-->|messages|container_Beta
-      end
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-      subgraph container_Beta
-        process_C
-      end
-
-        process_B-->|via_AWSBatch|container_Beta
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      classDiagram
-      note "I love this diagram!\nDo you love it?"
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      note for Class10 "Cool class\nI said it's very cool class!"
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      requirementDiagram
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        test_entity - satisfies -> test_req
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart-elk TB
-      internet
-      nat
-      router
-      compute1
-
-      subgraph project
-      router
-      nat
-        subgraph subnet1
-          compute1
-        end
-      end
-
-      %% router --> subnet1
-      subnet1  --> nat
-      %% nat --> internet
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart-elk TB
-      internet
-      nat
-      router
-      lb1
-      lb2
-      compute1
-      compute2
-      subgraph project
-      router
-      nat
-        subgraph subnet1
-          compute1
-          lb1
-        end
-        subgraph subnet2
-          compute2
-          lb2
-        end
-      end
-      internet --> router
-      router --> subnet1 & subnet2
-      subnet1 & subnet2 --> nat --> internet
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
----
-config:
-  layout: elk
-  elk:
-    mergeEdges: false
-    forceNodeModelOrder: false
-    considerModelOrder: NONE
-
----
-            flowchart TB
-              a --> a1 & a2 & a3 & a4
-              b --> b1 & b2
-              b2 --> b3
-              b1 --> b4</pre
-    >
-    <pre id="diagram4" class="mermaid">
 treemap
 "Section 1"
     "Leaf 1.1": 12
@@ -320,149 +141,84 @@ treemap
     "Leaf 2.2": 25
     "Leaf 2.3": 12
 
-    </pre>
-    <pre id="diagram5" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
+classDef class1   fill:red,color:blue,stroke:#FFD600;
 
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
 
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] --> B[B]
-          A[A] --- B([C])
-          A@{ shape: diamond}
-          %%B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] -- Mermaid js --> B[B]
-          A[A] -- Mermaid js --- B[B]
-          A@{ shape: diamond}
-          B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-        elk:
-          nodePlacementStrategy: NETWORK_SIMPLEX
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          D --> I & I
-          a["a"]
-          D@{ shape: trap-b}
-          I@{ shape: lean-l}
-    </pre>
-    <pre id="diagram4" class="mermaid">
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
-  layout: elk
-
+  treemap:
+    valueFormat: '$0,0'
 ---
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C["Evaluate"]
- %% end
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000
 
-    B --> C
-    </pre>
+</pre
+    >
     <pre id="diagram4" class="mermaid">
----
-config:
-  layout: elk
-  flowchart:
-    //curve: linear
----
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-A{A} --> B((Bo boo)) & B & B & B
-
+    treemap
+      title Accessible Treemap Title
+      "Category A"
+          "Item A1": 10
+          "Item A2": 20
+      "Category B"
+          "Item B1": 15
+          "Item B2": 25
     </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        theme: default
-        look: classic
-      ---
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
-       subgraph s1["APA"]
-              D{"Use the editor"}
-        end
-       subgraph S2["S2"]
-              s1
-              I>"fa:fa-code Text"]
-              E["E"]
-        end
-          D -- Mermaid js --> I
-          D --> I & E
-          E --> I
+        AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -487,7 +243,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -500,7 +256,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -539,7 +295,7 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -555,7 +311,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -564,7 +320,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -576,7 +332,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -594,7 +350,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -613,81 +369,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -751,22 +507,18 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'base',
+        // theme: 'forest',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
+        fontFamily: "'Recursive', sans-serif",
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/platform/mindmap-layouts.html

@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      import tidytree from '/mermaid-layout-tidy-tree.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.registerLayoutLoaders(tidytree);
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/sidv.html

@@ -41,6 +41,10 @@ graph TB
       const { svg } = await mermaid.render('d22', value);
       console.log(svg);
       el.innerHTML = svg;
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/viewer.js

@@ -1,6 +1,5 @@
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import layouts from './mermaid-layout-elk.esm.mjs';
-import tidyTree from './mermaid-layout-tidy-tree.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 import mermaid from './mermaid.esm.mjs';
 
@@ -66,7 +65,6 @@ const contentLoaded = async function () {
     await mermaid.registerExternalDiagrams([externalExample, zenUml]);
 
     mermaid.registerLayoutLoaders(layouts);
-    mermaid.registerLayoutLoaders(tidyTree);
     mermaid.initialize(graphObj.mermaid);
     /**
      *  CC-BY-4.0
@@ -184,7 +182,7 @@ const contentLoadedApi = async function () {
       for (let i = 0; i < numCodes; i++) {
         const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
         div.innerHTML = svg;
-        bindFunctions?.(div);
+        bindFunctions(div);
       }
     } else {
       const div = document.createElement('div');
@@ -196,7 +194,7 @@ const contentLoadedApi = async function () {
       const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
       div.innerHTML = svg;
       console.log(div.innerHTML);
-      bindFunctions?.(div);
+      bindFunctions(div);
     }
   }
 };

cypress/timings.json

@@ -2,227 +2,219 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5841
+      "duration": 5672
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2138
+      "duration": 1990
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3370
+      "duration": 3186
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2052
+      "duration": 1948
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12243
+      "duration": 11938
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2065
+      "duration": 1932
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 31288
+      "duration": 27237
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3421
+      "duration": 3170
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 97
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18500
+      "duration": 17390
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5793
+      "duration": 5296
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 40966
+      "duration": 39004
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 39176
+      "duration": 37653
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23468
+      "duration": 23278
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38291
+      "duration": 36645
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 16949
+      "duration": 15418
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9480
+      "duration": 9684
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2753
+      "duration": 2570
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 88028
+      "duration": 84687
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 15615
+      "duration": 14819
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3706
+      "duration": 3371
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 43905
+      "duration": 39925
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31217
+      "duration": 34694
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7531
+      "duration": 7137
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25423
+      "duration": 24740
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 49664
+      "duration": 42077
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 32525
+      "duration": 30642
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 20915
+      "duration": 18085
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 53556
+      "duration": 50107
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 283038
+      "duration": 276279
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59434
+      "duration": 56505
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3101
+      "duration": 3036
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7099
+      "duration": 6889
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7567
+      "duration": 7353
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3817
+      "duration": 3580
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2624
-    },
-    {
-      "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4246
+      "duration": 2508
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 11967
+      "duration": 10939
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 151914
+      "duration": 149102
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 116698
+      "duration": 113987
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4967
+      "duration": 4060
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6700
+      "duration": 5715
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8963
+      "duration": 8945
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5540
+      "duration": 5337
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2782
+      "duration": 2643
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 54797
+      "duration": 52072
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6914
-    },
-    {
-      "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 20481
+      "duration": 6692
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 38490
+      "duration": 35721
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30766
+      "duration": 26030
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16705
+      "duration": 16333
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30928
+      "duration": 29287
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8424
+      "duration": 8491
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12533
+      "duration": 12291
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21197
+      "duration": 20651
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3455
+      "duration": 3218
     }
   ]
 }

debug-callback-args.js

@@ -1,59 +0,0 @@
-import { execSync } from 'child_process';
-
-console.log('=== DEBUGGING CALLBACK ARGUMENTS ===');
-
-// Test the specific failing case
-const testInput = 'graph TD\nA-->B\nclick A call callback("test0", test1, test2)';
-console.log('Test input:', testInput);
-
-// Create a temporary test file to debug the ANTLR parser
-import fs from 'fs';
-const testFile = `
-// Debug callback arguments parsing
-process.env.USE_ANTLR_PARSER = 'true';
-
-const flow = require('./packages/mermaid/src/diagrams/flowchart/flowDb.ts');
-const parser = require('./packages/mermaid/src/diagrams/flowchart/parser/antlr/antlr-parser.ts');
-
-console.log('Testing callback arguments parsing...');
-
-// Mock the setClickEvent to see what parameters it receives
-const originalSetClickEvent = flow.default.setClickEvent;
-flow.default.setClickEvent = function(...args) {
-  console.log('DEBUG setClickEvent called with args:', args);
-  console.log('  - nodeId:', args[0]);
-  console.log('  - functionName:', args[1]); 
-  console.log('  - functionArgs:', args[2]);
-  console.log('  - args.length:', args.length);
-  return originalSetClickEvent.apply(this, args);
-};
-
-try {
-  const result = parser.parse('${testInput}');
-  console.log('Parse completed successfully');
-} catch (error) {
-  console.log('Parse error:', error.message);
-}
-`;
-
-fs.writeFileSync('debug-callback-test.js', testFile);
-
-try {
-  const result = execSync('node debug-callback-test.js', {
-    cwd: '/Users/ashishjain/projects/mermaid',
-    encoding: 'utf8',
-    timeout: 10000,
-  });
-  console.log('Result:', result);
-} catch (error) {
-  console.log('Error:', error.message);
-  if (error.stdout) console.log('Stdout:', error.stdout);
-  if (error.stderr) console.log('Stderr:', error.stderr);
-}
-
-// Clean up
-try {
-  fs.unlinkSync('debug-callback-test.js');
-} catch (e) {
-  // Ignore cleanup errors
-}

debug-order.js

@@ -1,22 +0,0 @@
-// Debug script to understand node processing order
-
-console.log('=== Node Order Debug ===');
-
-// Test case 1: n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
-// Expected: nodes[0] = n2, nodes[1] = n4, nodes[2] = n5
-// Actual: nodes[0] = n4 (wrong!)
-
-console.log('Test 1: n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}');
-console.log('Expected: n2, n4, n5');
-console.log('Actual: n4, ?, ?');
-
-// Test case 2: A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}
-// Expected: nodes[1] = B, nodes[2] = C
-// Actual: nodes[1] = C (wrong!)
-
-console.log('\nTest 2: A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}');
-console.log('Expected: A, B, C, E, D');
-console.log('Actual: A, C, ?, ?, ?');
-
-console.log('\nThe issue appears to be that ampersand-chained nodes are processed in reverse order');
-console.log('or the node collection is not matching the Jison parser behavior.');

demos/block.html

@@ -10,7 +10,7 @@
   <body>
     <h1>Block diagram demos</h1>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
   style B fill:#f9F,stroke:#333,stroke-width:4px
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1["square"]
     B1("rounded")
     C1(("circle"))
@@ -36,7 +36,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1(["stadium"])
     A2[["subroutine"]]
     B1[("cylinder")]
@@ -48,7 +48,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -57,7 +57,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -67,7 +67,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 3
   a:3
   block:e:3
@@ -80,7 +80,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 4
   a b c d
   block:e:4
@@ -97,19 +97,19 @@ flowchart LR
   X-- "a label" -->z
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 5
    A space B
    A --x B
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a["A wide one"] b:2 c:2 d
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a b c
   e:3
@@ -117,7 +117,7 @@ columns 3
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 
   A1:3
   A2:1

demos/flowchart-antlr-test.html

@@ -1,269 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>Mermaid ANTLR Parser Test Page</title>
-  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-  <style>
-    body {
-      font-family: 'Courier New', Courier, monospace;
-      margin: 20px;
-      background-color: #f5f5f5;
-    }
-
-    .test-section {
-      background: white;
-      padding: 20px;
-      margin: 20px 0;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .parser-info {
-      background: #e3f2fd;
-      border: 1px solid #2196f3;
-      padding: 15px;
-      border-radius: 5px;
-      margin-bottom: 20px;
-    }
-
-    .success {
-      background: #e8f5e8;
-      border: 1px solid #4caf50;
-    }
-
-    .error {
-      background: #ffebee;
-      border: 1px solid #f44336;
-    }
-
-    div.mermaid {
-      font-family: 'Courier New', Courier, monospace !important;
-    }
-
-    h1 {
-      color: #1976d2;
-    }
-
-    h2 {
-      color: #424242;
-      border-bottom: 2px solid #e0e0e0;
-      padding-bottom: 5px;
-    }
-  </style>
-</head>
-
-<body>
-  <h1>🎯 Mermaid ANTLR Parser Test Page</h1>
-
-  <div class="parser-info">
-    <h3>🔧 Parser Information</h3>
-    <p><strong>Environment Variable:</strong> <code id="env-var">Loading...</code></p>
-    <p><strong>Expected:</strong> <code>USE_ANTLR_PARSER=true</code></p>
-    <p><strong>Status:</strong> <span id="parser-status">Checking...</span></p>
-  </div>
-
-  <div class="test-section">
-    <h2>Test 1: Basic Flowchart</h2>
-    <p>Simple flowchart to test basic ANTLR parser functionality:</p>
-    <pre class="mermaid">
-flowchart TD
-  A[Start] --> B[End]
-    </pre>
-  </div>
-
-
-
-  <div class="test-section">
-    <h2>Test 4: Complex Shapes with Text</h2>
-    <p>Testing various node shapes with complex text content:</p>
-    <pre class="mermaid">
-flowchart LR
-  A(Round Node) --> B{Diamond}
-  B --> C([Stadium])
-  C --> D[[Subroutine]]
-  D --> E[(Database)]
-  E --> F((Circle))
-  F --> G[/Parallelogram/]
-  G --> H[\Trapezoid\]
-  H --> I[Mixed Text with / slash]
-  I --> J[\Mixed Text with \ backslash\]
-    </pre>
-  </div>
-
-  <div class="test-section">
-    <h2>Test 5: Classes and Styles</h2>
-    <p>Testing class and style processing:</p>
-    <pre class="mermaid">
-        flowchart TD
-          A[Node A] --> B[Node B]
-          B --> C[Node C]
-
-          classDef redClass fill:#ff9999,stroke:#333,stroke-width:2px
-          classDef blueClass fill:#9999ff,stroke:#333,stroke-width:2px
-
-          class A redClass
-          class B,C blueClass
-      </pre>
-  </div>
-
-  <div class="test-section">
-    <h2>Test 6: Subgraphs</h2>
-    <p>Testing subgraph processing:</p>
-    <pre class="mermaid">
-        flowchart TD
-          subgraph Main["Main Process"]
-            A[Start] --> B[Process]
-          end
-
-          subgraph Sub["Sub Process"]
-            C[Sub Start] --> D[Sub End]
-          end
-
-          B --> C
-          D --> E[Final End]
-      </pre>
-  </div>
-
-
-  <script type="module">
-    import mermaid from './mermaid.esm.mjs';
-
-    // Configure ANTLR parser for browser environment
-    // Since process.env is not available in browser, we set up global config
-    window.MERMAID_CONFIG = {
-      USE_ANTLR_PARSER: 'true',
-      USE_ANTLR_VISITOR: 'true',
-      ANTLR_DEBUG: 'true'
-    };
-
-    console.log('🎯 Browser ANTLR Configuration:', window.MERMAID_CONFIG);
-
-    // Override console methods to capture logs
-    const originalLog = console.log;
-    const originalError = console.error;
-
-    console.log = function (...args) {
-      originalLog.apply(console, args);
-      // Display important logs on page
-      if (args[0] && typeof args[0] === 'string' && (
-        args[0].includes('ANTLR Parser:') ||
-        args[0].includes('FlowDB:') ||
-        args[0].includes('FlowchartListener:')
-      )) {
-        const logDiv = document.getElementById('debug-logs') || createLogDiv();
-        logDiv.innerHTML += '<div style="color: blue;">' + args.join(' ') + '</div>';
-      }
-    };
-
-    console.error = function (...args) {
-      originalError.apply(console, args);
-      const logDiv = document.getElementById('debug-logs') || createLogDiv();
-      logDiv.innerHTML += '<div style="color: red;">ERROR: ' + args.join(' ') + '</div>';
-    };
-
-    function createLogDiv() {
-      const logDiv = document.createElement('div');
-      logDiv.id = 'debug-logs';
-      logDiv.style.cssText = 'border: 1px solid #ccc; padding: 10px; margin: 10px 0; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px; background: #f9f9f9;';
-      logDiv.innerHTML = '<h3>Debug Logs:</h3>';
-      document.body.appendChild(logDiv);
-      return logDiv;
-    }
-
-    // Initialize mermaid
-    mermaid.initialize({
-      theme: 'default',
-      logLevel: 3,
-      securityLevel: 'loose',
-      flowchart: { curve: 'basis' },
-    });
-
-    // Check environment and parser status
-    let envVar = 'undefined';
-    try {
-      if (typeof process !== 'undefined' && process.env) {
-        envVar = process.env.USE_ANTLR_PARSER || 'undefined';
-      }
-    } catch (e) {
-      // process is not defined in browser
-      envVar = 'browser-default';
-    }
-    const envElement = document.getElementById('env-var');
-    const statusElement = document.getElementById('parser-status');
-
-    if (envElement) {
-      envElement.textContent = `USE_ANTLR_PARSER=${envVar || 'undefined'}`;
-    }
-
-    // Check for debug information from parser
-    setTimeout(() => {
-      if (window.MERMAID_PARSER_DEBUG) {
-        console.log('🔍 Found MERMAID_PARSER_DEBUG:', window.MERMAID_PARSER_DEBUG);
-        const debug = window.MERMAID_PARSER_DEBUG;
-
-        if (envElement) {
-          envElement.textContent = `USE_ANTLR_PARSER=${debug.env_value || 'undefined'} (actual: ${debug.USE_ANTLR_PARSER})`;
-        }
-
-        if (statusElement) {
-          if (debug.USE_ANTLR_PARSER) {
-            statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
-            statusElement.parentElement.parentElement.classList.add('success');
-          } else {
-            statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
-          }
-        }
-      } else {
-        console.log('❌ MERMAID_PARSER_DEBUG not found on window');
-      }
-    }, 1000);
-
-    if (statusElement) {
-      if (envVar === 'true') {
-        statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
-        statusElement.parentElement.parentElement.classList.add('success');
-      } else {
-        statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
-      }
-    }
-
-    // Add some debugging
-    console.log('🎯 ANTLR Parser Test Page Loaded');
-    console.log('🔧 Environment:', { USE_ANTLR_PARSER: envVar });
-
-    // Test if we can detect which parser is being used
-    setTimeout(() => {
-      const mermaidElements = document.querySelectorAll('.mermaid');
-      console.log(`📊 Found ${mermaidElements.length} mermaid diagrams`);
-
-      // Check if diagrams rendered successfully
-      const renderedElements = document.querySelectorAll('.mermaid svg');
-      if (renderedElements.length > 0) {
-        console.log('✅ Diagrams rendered successfully!');
-        console.log(`📈 ${renderedElements.length} SVG elements created`);
-
-        // Update status on page
-        const statusElement = document.getElementById('parser-status');
-        if (statusElement && envVar === 'true') {
-          statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active & Rendering Successfully!</span>';
-        }
-      } else {
-        console.log('❌ No SVG elements found - check for rendering errors');
-        console.log('🔍 Checking for error messages...');
-
-        // Look for error messages in mermaid elements
-        mermaidElements.forEach((element, index) => {
-          console.log(`📋 Diagram ${index + 1} content:`, element.textContent.trim());
-          if (element.innerHTML.includes('error') || element.innerHTML.includes('Error')) {
-            console.log(`❌ Error found in diagram ${index + 1}:`, element.innerHTML);
-          }
-        });
-      }
-    }, 3000);
-  </script>
-</body>
-
-</html>

demos/sankey.html

@@ -20,14 +20,12 @@
           width: 800
           nodeAlignment: left
       ---
-     sankey
-        a,b,8
-        b,c,8
-        c,d,8
-        d,e,8
-
-        x,c,4
-        c,y,4
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
     </pre>
 
     <h2>Energy flow</h2>
@@ -42,7 +40,7 @@
           linkColor: gradient
           nodeAlignment: justify
       ---
-      sankey
+      sankey-beta
 
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597

demos/simple-antlr-test.html

@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Simple ANTLR Parser Test</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 20px;
-      background-color: #f5f5f5;
-    }
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      background-color: white;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    .status {
-      background-color: #e8f4fd;
-      padding: 15px;
-      border-radius: 5px;
-      margin-bottom: 20px;
-      border-left: 4px solid #2196F3;
-    }
-    .debug-logs {
-      background-color: #f8f9fa;
-      padding: 15px;
-      border-radius: 5px;
-      margin-bottom: 20px;
-      font-family: monospace;
-      font-size: 12px;
-      max-height: 300px;
-      overflow-y: auto;
-      border: 1px solid #dee2e6;
-    }
-    .test-section {
-      margin: 20px 0;
-      padding: 15px;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-    }
-    .mermaid {
-      text-align: center;
-      margin: 20px 0;
-    }
-    h1 { color: #333; }
-    h2 { color: #666; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🧪 Simple ANTLR Parser Test</h1>
-    
-    <div class="status">
-      <h3>Parser Status</h3>
-      <p><strong>Environment Variable:</strong> <span id="env-var">Loading...</span></p>
-      <p><strong>Parser Status:</strong> <span id="parser-status">Loading...</span></p>
-      <p><strong>Global Config:</strong> <span id="global-config">Loading...</span></p>
-    </div>
-
-    <div class="debug-logs">
-      <h3>Debug Logs:</h3>
-      <div id="debug-output">Initializing...</div>
-    </div>
-
-    <div class="test-section">
-      <h2>Test 1: Minimal Flowchart</h2>
-      <p>Testing the simplest possible flowchart:</p>
-      <pre class="mermaid">
-        flowchart TD
-          A[Start] --> B[End]
-      </pre>
-    </div>
-  </div>
-
-  <script type="module">
-    import mermaid from './mermaid.esm.mjs';
-
-    // Configure ANTLR parser for browser environment
-    window.MERMAID_CONFIG = {
-      USE_ANTLR_PARSER: 'true',
-      USE_ANTLR_VISITOR: 'true',
-      ANTLR_DEBUG: 'true'
-    };
-
-    // Enhanced debug logging to track down the process.env issue
-    const debugOutput = document.getElementById('debug-output');
-    const originalConsoleLog = console.log;
-    const originalConsoleError = console.error;
-    
-    function addDebugLog(message, type = 'log') {
-      const timestamp = new Date().toLocaleTimeString();
-      const logEntry = `[${timestamp}] ${type.toUpperCase()}: ${message}`;
-      
-      if (debugOutput) {
-        debugOutput.innerHTML += logEntry + '<br>';
-        debugOutput.scrollTop = debugOutput.scrollHeight;
-      }
-      
-      // Also log to original console
-      if (type === 'error') {
-        originalConsoleError(message);
-      } else {
-        originalConsoleLog(message);
-      }
-    }
-
-    // Override console methods to capture all logs
-    console.log = function(...args) {
-      addDebugLog(args.join(' '), 'log');
-    };
-    
-    console.error = function(...args) {
-      addDebugLog(args.join(' '), 'error');
-    };
-
-    // Add process access detection
-    const originalProcess = window.process;
-    Object.defineProperty(window, 'process', {
-      get: function() {
-        const stack = new Error().stack;
-        addDebugLog(`🚨 PROCESS ACCESS DETECTED! Stack trace: ${stack}`, 'error');
-        return originalProcess;
-      },
-      set: function(value) {
-        addDebugLog(`🚨 PROCESS SET DETECTED! Value: ${value}`, 'error');
-        window._process = value;
-      }
-    });
-
-    addDebugLog('🔧 Starting ANTLR parser test initialization');
-
-    // Check environment and parser status
-    let envVar = 'undefined';
-    try {
-      if (typeof process !== 'undefined' && process.env) {
-        envVar = process.env.USE_ANTLR_PARSER || 'undefined';
-      }
-    } catch (e) {
-      addDebugLog(`🔧 Process check failed (expected in browser): ${e.message}`);
-      envVar = 'browser-default';
-    }
-    
-    const envElement = document.getElementById('env-var');
-    const statusElement = document.getElementById('parser-status');
-    const configElement = document.getElementById('global-config');
-
-    if (envElement) {
-      envElement.textContent = `USE_ANTLR_PARSER=${envVar || 'undefined'}`;
-    }
-
-    if (configElement) {
-      configElement.textContent = JSON.stringify(window.MERMAID_CONFIG);
-    }
-
-    addDebugLog('🔧 Initializing Mermaid with ANTLR parser');
-
-    try {
-      // Initialize mermaid with detailed error handling
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'default',
-        flowchart: {
-          useMaxWidth: true,
-          htmlLabels: true
-        },
-        suppressErrors: false, // We want to see all errors
-        logLevel: 'debug'
-      });
-
-      addDebugLog('✅ Mermaid initialized successfully');
-
-      if (statusElement) {
-        statusElement.textContent = '✅ ANTLR Parser Active';
-        statusElement.style.color = 'green';
-      }
-
-      addDebugLog('🎯 Starting diagram rendering');
-
-      // Render diagrams with detailed error tracking
-      const diagrams = document.querySelectorAll('.mermaid');
-      for (let i = 0; i < diagrams.length; i++) {
-        const diagram = diagrams[i];
-        addDebugLog(`🎨 Rendering diagram ${i + 1}/${diagrams.length}`);
-        
-        try {
-          await mermaid.run({
-            nodes: [diagram],
-            suppressErrors: false
-          });
-          addDebugLog(`✅ Diagram ${i + 1} rendered successfully`);
-        } catch (error) {
-          addDebugLog(`❌ Diagram ${i + 1} failed: ${error.message}`, 'error');
-          addDebugLog(`❌ Stack trace: ${error.stack}`, 'error');
-        }
-      }
-
-      addDebugLog('🎉 All diagrams processed');
-
-    } catch (error) {
-      addDebugLog(`❌ Mermaid initialization failed: ${error.message}`, 'error');
-      addDebugLog(`❌ Stack trace: ${error.stack}`, 'error');
-      
-      if (statusElement) {
-        statusElement.textContent = '❌ ANTLR Parser Failed';
-        statusElement.style.color = 'red';
-      }
-    }
-
-    addDebugLog('🔧 Test initialization complete');
-  </script>
-</body>
-</html>

demos/xychart.html

@@ -16,7 +16,7 @@
   <body>
     <h1>XY Charts demos</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Sales Revenue (in $)"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
     <hr />
     <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
-    xychart horizontal
+    xychart-beta horizontal
     title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
     <hr />
     <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [23, 46, 77, 34]
     line [45, 32, 33, 12]
     line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
     <hr />
     <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
     <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
 
     <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Line chart with many category"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
 
     <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -103,7 +103,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -136,7 +136,7 @@ config:
     chartOrientation: horizontal
     plotReservedSpacePercent: 60
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
       xAxisLineColor: "#87ceeb"
       plotColorPalette: "#008000, #faba63"
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000

docs/config/faq.md

@@ -6,7 +6,7 @@
 
 # Frequently Asked Questions
 
-1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/1433#issuecomment-1991554712)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
 3. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
 4. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)

docs/config/layouts.md

@@ -1,40 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
-
-# Layouts
-
-This page lists the available layout algorithms supported in Mermaid diagrams.
-
-## Supported Layouts
-
-- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
-- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
-- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
-- **dagre**: Dagre layout for layered graphs
-
-## How to Use
-
-You can specify the layout in your diagram's YAML config or initialization options. For example:
-
-```mermaid-example
----
-config:
-  layout: elk
----
-graph TD;
-  A-->B;
-  B-->C;
-```
-
-```mermaid
----
-config:
-  layout: elk
----
-graph TD;
-  A-->B;
-  B-->C;
-```

docs/config/setup/config/README.md

@@ -19,7 +19,6 @@
 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
 - [getSiteConfig](functions/getSiteConfig.md)
-- [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)
 - [sanitize](functions/sanitize.md)
 - [saveConfigFromInitialize](functions/saveConfigFromInitialize.md)

docs/config/setup/config/functions/getUserDefinedConfig.md

@@ -1,19 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Function: getUserDefinedConfig()
-
-> **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
-
-Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)
-
-## Returns
-
-[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)
+Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)

docs/config/setup/mermaid/README.md

@@ -10,6 +10,10 @@
 
 # mermaid
 
+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
 ## Interfaces
 
 - [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
 - [RenderOptions](interfaces/RenderOptions.md)
 - [RenderResult](interfaces/RenderResult.md)
 - [RunOptions](interfaces/RunOptions.md)
-- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
 
 ## Type Aliases
 

docs/config/setup/mermaid/classes/UnknownDiagramError.md

@@ -0,0 +1,159 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Class: UnknownDiagramError
+
+Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
+
+## Extends
+
+- `Error`
+
+## Constructors
+
+### new UnknownDiagramError()
+
+> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
+
+Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+[`UnknownDiagramError`](UnknownDiagramError.md)
+
+#### Overrides
+
+`Error.constructor`
+
+## Properties
+
+### cause?
+
+> `optional` **cause**: `unknown`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+`Error.cause`
+
+---
+
+### message
+
+> **message**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+`Error.message`
+
+---
+
+### name
+
+> **name**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+`Error.name`
+
+---
+
+### stack?
+
+> `optional` **stack**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+`Error.stack`
+
+---
+
+### prepareStackTrace()?
+
+> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
+
+Optional override for formatting stack traces
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`\[]
+
+#### Returns
+
+`any`
+
+#### See
+
+<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
+
+#### Inherited from
+
+`Error.prepareStackTrace`
+
+---
+
+### stackTraceLimit
+
+> `static` **stackTraceLimit**: `number`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
+
+#### Inherited from
+
+`Error.stackTraceLimit`
+
+## Methods
+
+### captureStackTrace()
+
+> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
+
+Create .stack property on a target object
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+`Error.captureStackTrace`

docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)

docs/config/setup/mermaid/interfaces/LayoutData.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutLoaderDefinition
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.co
 
 > **loader**: `LayoutLoader`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.co
 
 > **name**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

docs/config/setup/mermaid/interfaces/Mermaid.md

@@ -32,7 +32,7 @@ page.
 
 ### detectType()
 
-> **detectType**: (`text`, `config?`) => `string`
+> **detectType**: (`text`, `config`?) => `string`
 
 Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
 
@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.
 
 ### ~~init()~~
 
-> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
+> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
 Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
 
@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
 
 [`MermaidConfig`](MermaidConfig.md)
 
-**Deprecated**, please set configuration in [initialize](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
 
 ##### nodes?
 
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 Renders the mermaid diagrams
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 ---
 
@@ -176,7 +176,7 @@ Configuration object for mermaid.
 
 ### ~~mermaidAPI~~
 
-> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
+> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
 Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
@@ -184,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
 
 #### Deprecated
 
-Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
 
 ---
 
 ### parse()
 
-> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
+> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
 Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
-#### Call Signature
-
-> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions
+##### parseOptions
 
 [`ParseOptions`](ParseOptions.md) & `object`
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<`false` | [`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
-#### Call Signature
-
-> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions?
+##### parseOptions?
 
 [`ParseOptions`](ParseOptions.md)
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<[`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
@@ -340,7 +332,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 ### render()
 
-> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
 Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 

docs/config/setup/mermaid/interfaces/MermaidConfig.md

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-
 
 > `optional` **altFontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
+Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid
 
 > `optional` **architecture**: `ArchitectureDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
 
 ---
 
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
 
 > `optional` **arrowMarkerAbsolute**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
 
 Controls whether or arrow markers in html code are absolute paths or anchors.
 This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.
 
 > `optional` **block**: `BlockDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid
 
 > `optional` **c4**: `C4DiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid
 
 > `optional` **class**: `ClassDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
 
 ---
 
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid
 
 > `optional` **darkMode**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
+Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
 
 ---
 
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid
 
 > `optional` **deterministicIds**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
 
 This option controls if the generated ids of nodes in the SVG are
 generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.
 
 > `optional` **deterministicIDSeed**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
 
 This option is the optional seed for deterministic ids.
 If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
 
 > `optional` **dompurifyConfig**: `Config`
 
-Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -115,24 +115,12 @@ Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid
 
 Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
 
-#### considerModelOrder?
-
-> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
-
-Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
-
 #### cycleBreakingStrategy?
 
 > `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`
 
 This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
 
-#### forceNodeModelOrder?
-
-> `optional` **forceNodeModelOrder**: `boolean`
-
-The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
-
 #### mergeEdges?
 
 > `optional` **mergeEdges**: `boolean`
@@ -151,7 +139,7 @@ Elk specific option affecting how nodes are placed.
 
 > `optional` **er**: `ErDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
 
 ---
 
@@ -159,7 +147,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
 
 > `optional` **flowchart**: `FlowchartDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
 
 ---
 
@@ -167,7 +155,7 @@ Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid
 
 > `optional` **fontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
 
 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -179,7 +167,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 > `optional` **fontSize**: `number`
 
-Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -187,7 +175,7 @@ Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid
 
 > `optional` **forceLegacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
+Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
 
 This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
 fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -199,7 +187,7 @@ If set to true, ignores legacyMathML.
 
 > `optional` **gantt**: `GanttDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 ---
 
@@ -207,7 +195,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
 
 > `optional` **gitGraph**: `GitGraphDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -225,7 +213,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 > `optional` **htmlLabels**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
+Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
 
 ---
 
@@ -233,7 +221,7 @@ Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid
 
 > `optional` **journey**: `JourneyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
 
 ---
 
@@ -241,7 +229,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
 
 > `optional` **kanban**: `KanbanDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
@@ -259,7 +247,7 @@ Defines which layout algorithm to use for rendering the diagram.
 
 > `optional` **legacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
+Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
 
 This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
 without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -272,7 +260,7 @@ fall back to legacy rendering for KaTeX.
 
 > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
 
-Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
+Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
 
 This option decides the amount of logging to be used by mermaid.
 
@@ -292,7 +280,7 @@ Defines which main look to use for the diagram.
 
 > `optional` **markdownAutoWrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
 
 ---
 
@@ -320,7 +308,7 @@ The maximum allowed size of the users text diagram
 
 > `optional` **mindmap**: `MindmapDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -328,7 +316,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
 
 > `optional` **packet**: `PacketDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -336,7 +324,7 @@ Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid
 
 > `optional` **pie**: `PieDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
 
 ---
 
@@ -344,7 +332,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
 
 > `optional` **quadrantChart**: `QuadrantChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 ---
 
@@ -352,7 +340,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
 
 > `optional` **radar**: `RadarDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -360,7 +348,7 @@ Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid
 
 > `optional` **requirement**: `RequirementDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -368,7 +356,7 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
 
 > `optional` **sankey**: `SankeyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -376,7 +364,7 @@ Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid
 
 > `optional` **secure**: `string`\[]
 
-Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
+Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
 
 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -388,7 +376,7 @@ This prevents malicious graph directives from overriding a site's default securi
 
 > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
 
-Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 Level of trust for parsed diagram
 
@@ -398,7 +386,7 @@ Level of trust for parsed diagram
 
 > `optional` **sequence**: `SequenceDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
 
 ---
 
@@ -406,7 +394,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
 
 > `optional` **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
+Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
 
 Dictates whether mermaid starts on Page load
 
@@ -416,7 +404,7 @@ Dictates whether mermaid starts on Page load
 
 > `optional` **state**: `StateDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
 
 ---
 
@@ -424,7 +412,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
 
 > `optional` **suppressErrorRendering**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
 
 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -462,7 +450,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-
 
 > `optional` **timeline**: `TimelineDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
 
 ---
 
@@ -470,7 +458,7 @@ Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid
 
 > `optional` **wrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -478,4 +466,4 @@ Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid
 
 > `optional` **xyChart**: `XYChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

docs/config/setup/mermaid/interfaces/ParseOptions.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

docs/config/setup/mermaid/interfaces/RenderOptions.md

@@ -10,7 +10,7 @@
 
 # Interface: RenderOptions
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
 
 ## Properties
 
@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

docs/config/setup/mermaid/interfaces/RenderResult.md

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
 
 The svg code for the rendered graph.

docs/config/setup/mermaid/interfaces/UnknownDiagramError.md

@@ -1,65 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Interface: UnknownDiagramError
-
-Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
-
-## Extends
-
-- `Error`
-
-## Properties
-
-### cause?
-
-> `optional` **cause**: `unknown`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
-
-#### Inherited from
-
-`Error.cause`
-
----
-
-### message
-
-> **message**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
-
-#### Inherited from
-
-`Error.message`
-
----
-
-### name
-
-> **name**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
-
-#### Inherited from
-
-`Error.name`
-
----
-
-### stack?
-
-> `optional` **stack**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
-
-#### Inherited from
-
-`Error.stack`

docs/config/setup/mermaid/type-aliases/InternalHelpers.md

@@ -10,6 +10,6 @@
 
 # Type Alias: InternalHelpers
 
-> **InternalHelpers** = _typeof_ `internalHelpers`
+> **InternalHelpers**: _typeof_ `internalHelpers`
 
 Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)

docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md

@@ -10,7 +10,7 @@
 
 # Type Alias: ParseErrorFunction()
 
-> **ParseErrorFunction** = (`err`, `hash?`) => `void`
+> **ParseErrorFunction**: (`err`, `hash`?) => `void`
 
 Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVG
 
-> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVGGroup
 
-> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

docs/config/tidy-tree.md

@@ -1,89 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
-
-# Tidy-tree Layout
-
-The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
-
-## Features
-
-- Organizes nodes in a tidy, non-overlapping tree
-- Ideal for mindmaps and hierarchical data
-- Automatically adjusts spacing for readability
-
-## Example Usage
-
-```mermaid-example
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-```mermaid
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-```mermaid-example
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-```
-
-```mermaid
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-```
-
-## Note
-
-- Currently, tidy-tree is primarily supported for mindmap diagrams.

docs/ecosystem/integrations-community.md

@@ -73,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
 - [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro)
+  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
@@ -117,7 +117,7 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-- [Tiki Wiki CMS Groupware](https://tiki.org)
+- [Tiki](https://tiki.org)
   - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

docs/news/blog.md

@@ -6,66 +6,6 @@
 
 # Blog
 
-## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
-
-7/15/2025 • 7 mins
-
-Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
-
-## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
-
-7/3/2025 • 4 mins
-
-Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
-
-## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
-
-7/2/2025 • 6 mins
-
-AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
-
-## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
-
-6/26/2025 • 14 mins
-
-AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
-
-## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
-
-6/11/2025 • 10 mins
-
-See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
-
-## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
-
-5/27/2025 • 6 mins
-
-Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
-
-## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
-
-5/22/2025 • 6 mins
-
-Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
-
-## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
-
-5/21/2025 • 9 mins
-
-Would an AI diagram generator make your life easier? We think it would!
-
-## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
-
-3/21/2025 • 5 mins
-
-The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…]
-
-## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
-
-1/30/2025 • 3 mins
-
-Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
-
 ## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
 
 1/17/2025 • 5 mins

docs/syntax/block.md

@@ -9,7 +9,7 @@
 ## Introduction to Block Diagrams
 
 ```mermaid-example
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
 ```
 
 ```mermaid
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -80,12 +80,12 @@ At its core, a block diagram consists of blocks representing different entities
 To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
 
 ```mermaid-example
-block
+block-beta
   a b c
 ```
 
 ```mermaid
-block
+block-beta
   a b c
 ```
 
@@ -101,13 +101,13 @@ While simple block diagrams are linear and straightforward, more complex systems
 In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a b c d
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a b c d
 ```
@@ -130,13 +130,13 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
 To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a["A label"] b:2 c:2 d
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a["A label"] b:2 c:2 d
 ```
@@ -153,7 +153,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
 Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
 
 ```mermaid-example
-block
+block-beta
     block
       D
     end
@@ -161,7 +161,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
     block
       D
     end
@@ -180,7 +180,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
 In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a:3
   block:group1:2
@@ -195,7 +195,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a:3
   block:group1:2
@@ -215,7 +215,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
 In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
 
 ```mermaid-example
-block
+block-beta
   block
     columns 1
     a["A label"] b c d
@@ -223,7 +223,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   block
     columns 1
     a["A label"] b c d
@@ -247,12 +247,12 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
 To create a block with round edges, which can be used to represent a softer or more flexible component:
 
 ```mermaid-example
-block
+block-beta
     id1("This is the text in the box")
 ```
 
 ```mermaid
-block
+block-beta
     id1("This is the text in the box")
 ```
 
@@ -261,12 +261,12 @@ block
 A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
 
 ```mermaid-example
-block
+block-beta
     id1(["This is the text in the box"])
 ```
 
 ```mermaid
-block
+block-beta
     id1(["This is the text in the box"])
 ```
 
@@ -275,12 +275,12 @@ block
 For representing subroutines or contained processes, a block with double vertical lines is useful:
 
 ```mermaid-example
-block
+block-beta
     id1[["This is the text in the box"]]
 ```
 
 ```mermaid
-block
+block-beta
     id1[["This is the text in the box"]]
 ```
 
@@ -289,12 +289,12 @@ block
 The cylindrical shape is ideal for representing databases or storage components:
 
 ```mermaid-example
-block
+block-beta
     id1[("Database")]
 ```
 
 ```mermaid
-block
+block-beta
     id1[("Database")]
 ```
 
@@ -303,12 +303,12 @@ block
 A circle can be used for centralized or pivotal components:
 
 ```mermaid-example
-block
+block-beta
     id1(("This is the text in the circle"))
 ```
 
 ```mermaid
-block
+block-beta
     id1(("This is the text in the circle"))
 ```
 
@@ -319,36 +319,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
 **Asymmetric**
 
 ```mermaid-example
-block
+block-beta
   id1>"This is the text in the box"]
 ```
 
 ```mermaid
-block
+block-beta
   id1>"This is the text in the box"]
 ```
 
 **Rhombus**
 
 ```mermaid-example
-block
+block-beta
     id1{"This is the text in the box"}
 ```
 
 ```mermaid
-block
+block-beta
     id1{"This is the text in the box"}
 ```
 
 **Hexagon**
 
 ```mermaid-example
-block
+block-beta
     id1{{"This is the text in the box"}}
 ```
 
 ```mermaid
-block
+block-beta
     id1{{"This is the text in the box"}}
 ```
 
@@ -357,7 +357,7 @@ block
 Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
 
 ```mermaid-example
-block
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -365,7 +365,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -377,12 +377,12 @@ block
 For highlighting critical or high-priority components, a double circle can be effective:
 
 ```mermaid-example
-block
+block-beta
     id1((("This is the text in the circle")))
 ```
 
 ```mermaid
-block
+block-beta
     id1((("This is the text in the circle")))
 ```
 
@@ -395,7 +395,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
 Block arrows can visually indicate direction or flow within a process:
 
 ```mermaid-example
-block
+block-beta
   blockArrowId<["Label"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
@@ -406,7 +406,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   blockArrowId<["Label"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
@@ -421,14 +421,14 @@ block
 Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a space b
   c   d   e
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a space b
   c   d   e
@@ -437,12 +437,12 @@ block
 or
 
 ```mermaid-example
-block
+block-beta
   ida space:3 idb idc
 ```
 
 ```mermaid
-block
+block-beta
   ida space:3 idb idc
 ```
 
@@ -467,13 +467,13 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
 A simple link with an arrow can be created to show direction or flow from one block to another:
 
 ```mermaid-example
-block
+block-beta
   A space B
   A-->B
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A-->B
 ```
@@ -490,13 +490,13 @@ Example - Text with Links
 To add text to a link, the syntax includes the text within the link definition:
 
 ```mermaid-example
-block
+block-beta
   A space:2 B
   A-- "X" -->B
 ```
 
 ```mermaid
-block
+block-beta
   A space:2 B
   A-- "X" -->B
 ```
@@ -506,7 +506,7 @@ This example show how to add descriptive text to the links, enhancing the inform
 Example - Edges and Styles:
 
 ```mermaid-example
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -523,7 +523,7 @@ columns 1
 ```
 
 ```mermaid
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -552,7 +552,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
 To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
 
 ```mermaid-example
-block
+block-beta
   id1 space id2
   id1("Start")-->id2("Stop")
   style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -560,7 +560,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   id1 space id2
   id1("Start")-->id2("Stop")
   style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -574,7 +574,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
 #### Example - Styling a Single Class
 
 ```mermaid-example
-block
+block-beta
   A space B
   A-->B
   classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -583,7 +583,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A-->B
   classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -608,7 +608,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
 Illustrating a simple software system architecture with interconnected components:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   Frontend blockArrowId6<[" "]>(right) Backend
   space:2 down<[" "]>(down)
@@ -621,7 +621,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   Frontend blockArrowId6<[" "]>(right) Backend
   space:2 down<[" "]>(down)
@@ -640,7 +640,7 @@ This example shows a basic architecture with a frontend, backend, and database.
 Representing a business process flow with decision points and multiple stages:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   Start(("Start")) space:2
   down<[" "]>(down) space:2
@@ -653,7 +653,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   Start(("Start")) space:2
   down<[" "]>(down) space:2
@@ -682,7 +682,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
 A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
 ```
-block
+block-beta
   A - B
 ```
 
@@ -690,13 +690,13 @@ block
 Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
 
 ```mermaid-example
-block
+block-beta
   A space B
   A --> B
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A --> B
 ```
@@ -706,13 +706,13 @@ block
 Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
 
 ```mermaid-example
-  block
+  block-beta
     A
     style A fill#969;
 ```
 
 ```mermaid
-  block
+  block-beta
     A
     style A fill#969;
 ```
@@ -721,14 +721,14 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
 Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
 
 ```mermaid-example
-block
+block-beta
   A
   style A fill:#969,stroke:#333;
 
 ```
 
 ```mermaid
-block
+block-beta
   A
   style A fill:#969,stroke:#333;
 

docs/syntax/flowchart.md

@@ -326,9 +326,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
-| Bang                              | Bang                   | `bang`         | Bang                           | `bang`                                                           |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
-| Cloud                             | Cloud                  | `cloud`        | cloud                          | `cloud`                                                          |
 | Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
 | Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
 | Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |
@@ -985,23 +983,11 @@ flowchart TD
   - `b`
 - **w**: The width of the image. If not defined, this will default to the natural width of the image.
 - **h**: The height of the image. If not defined, this will default to the natural height of the image.
-- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are:
+- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
   - `on`
   - `off`
 
-If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g.
-
-```mermaid-example
-flowchart TD
-  %% My image with a constrained aspect ratio
-  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
-```
-
-```mermaid
-flowchart TD
-  %% My image with a constrained aspect ratio
-  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
-```
+These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
 
 ## Links between nodes
 
@@ -1830,7 +1816,7 @@ config:
 graph LR
 ```
 
-#### Edge level curve style using Edge IDs (v11.10.0+)
+#### Edge level curve style using Edge IDs (v\<MERMAID_RELEASE_VERSION>+)
 
 You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
 

docs/syntax/mindmap.md

@@ -314,22 +314,3 @@ You can also refer the [implementation in the live editor](https://github.com/me
 cspell:locale en,en-gb
 cspell:ignore Buzan
 --->
-
-## Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)

docs/syntax/pie.md

@@ -37,11 +37,6 @@ Drawing a pie chart is really simple in mermaid.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported up to two decimal places)
 
-**Note:**
-
-> Pie chart values must be **positive numbers greater than zero**.
-> **Negative values are not allowed** and will result in an error.
-
 \[pie] \[showData] (OPTIONAL)
 \[title] \[titlevalue] (OPTIONAL)
 "\[datakey1]" : \[dataValue1]

docs/syntax/sankey.md

@@ -23,7 +23,7 @@ config:
   sankey:
     showValues: false
 ---
-sankey
+sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729
 Bio-conversion,Liquid,0.597
@@ -101,7 +101,7 @@ config:
   sankey:
     showValues: false
 ---
-sankey
+sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729
 Bio-conversion,Liquid,0.597
@@ -175,7 +175,7 @@ Wind,Electricity grid,289.366
 
 ## Syntax
 
-The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
+The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
 
 It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
 
@@ -187,7 +187,7 @@ It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.
 It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 %% source,target,value
 Electricity grid,Over generation / exports,104.453
@@ -196,7 +196,7 @@ Electricity grid,H2 conversion,27.14
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 %% source,target,value
 Electricity grid,Over generation / exports,104.453
@@ -209,7 +209,7 @@ Electricity grid,H2 conversion,27.14
 CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Bio-conversion,Losses,26.862
 
@@ -219,7 +219,7 @@ Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Bio-conversion,Losses,26.862
 
@@ -233,14 +233,14 @@ Bio-conversion,Gas,81.144
 If you need to have a comma, wrap it in double quotes:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
@@ -251,14 +251,14 @@ Pumped heat,"Heating and cooling, commercial",70.672
 If you need to have double quote, put a pair of them inside quoted string:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672

docs/syntax/sequenceDiagram.md

@@ -74,126 +74,6 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
-### Boundary
-
-If you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "boundary" }
-    participant Bob
-    Alice->>Bob: Request from boundary
-    Bob->>Alice: Response to boundary
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "boundary" }
-    participant Bob
-    Alice->>Bob: Request from boundary
-    Bob->>Alice: Response to boundary
-```
-
-### Control
-
-If you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "control" }
-    participant Bob
-    Alice->>Bob: Control request
-    Bob->>Alice: Control response
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "control" }
-    participant Bob
-    Alice->>Bob: Control request
-    Bob->>Alice: Control response
-```
-
-### Entity
-
-If you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "entity" }
-    participant Bob
-    Alice->>Bob: Entity request
-    Bob->>Alice: Entity response
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "entity" }
-    participant Bob
-    Alice->>Bob: Entity request
-    Bob->>Alice: Entity response
-```
-
-### Database
-
-If you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "database" }
-    participant Bob
-    Alice->>Bob: DB query
-    Bob->>Alice: DB result
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "database" }
-    participant Bob
-    Alice->>Bob: DB query
-    Bob->>Alice: DB result
-```
-
-### Collections
-
-If you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "collections" }
-    participant Bob
-    Alice->>Bob: Collections request
-    Bob->>Alice: Collections response
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "collections" }
-    participant Bob
-    Alice->>Bob: Collections request
-    Bob->>Alice: Collections response
-```
-
-### Queue
-
-If you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.
-
-```mermaid-example
-sequenceDiagram
-    participant Alice@{ "type" : "queue" }
-    participant Bob
-    Alice->>Bob: Queue message
-    Bob->>Alice: Queue response
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice@{ "type" : "queue" }
-    participant Bob
-    Alice->>Bob: Queue message
-    Bob->>Alice: Queue response
-```
-
 ### Aliases
 
 The actor can have a convenient identifier and a descriptive label.

docs/syntax/xyChart.md

@@ -13,7 +13,7 @@
 ## Example
 
 ```mermaid-example
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -22,7 +22,7 @@ xychart
 ```
 
 ```mermaid
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -40,7 +40,7 @@ xychart
 The chart can be drawn horizontal or vertical, default value is vertical.
 
 ```
-xychart horizontal
+xychart-beta horizontal
 ...
 ```
 
@@ -51,7 +51,7 @@ The title is a short description of the chart and it will always render on top o
 #### Example
 
 ```
-xychart
+xychart-beta
     title "This is a simple example"
     ...
 ```
@@ -98,10 +98,10 @@ A bar chart offers the capability to graphically depict bars.
 
 #### Simplest example
 
-The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
+The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
 
 ```
-xychart
+xychart-beta
     line [+1.3, .6, 2.4, -.34]
 ```
 
@@ -138,7 +138,7 @@ xychart
 
 ## Chart Theme Variables
 
-Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
+Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
 
 ```yaml
 ---
@@ -163,52 +163,6 @@ config:
 | yAxisLineColor   | Color of the y-axis line                                  |
 | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
 
-### Setting Colors for Lines and Bars
-
-To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
-
-```mermaid-example
----
-config:
-  themeVariables:
-    xyChart:
-      plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
----
-xychart
-title "Different Colors in xyChart"
-x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
-y-axis "valuesY" 0 --> 50
-%% Black line
-line [10,20,30,40]
-%% Blue bar
-bar [20,30,25,35]
-%% Green bar
-bar [15,25,20,30]
-%% Red line
-line [5,15,25,35]
-```
-
-```mermaid
----
-config:
-  themeVariables:
-    xyChart:
-      plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
----
-xychart
-title "Different Colors in xyChart"
-x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
-y-axis "valuesY" 0 --> 50
-%% Black line
-line [10,20,30,40]
-%% Blue bar
-bar [20,30,25,35]
-%% Green bar
-bar [15,25,20,30]
-%% Red line
-line [5,15,25,35]
-```
-
 ## Example on config and theme
 
 ```mermaid-example
@@ -222,7 +176,7 @@ config:
         xyChart:
             titleColor: "#ff0000"
 ---
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -241,7 +195,7 @@ config:
         xyChart:
             titleColor: "#ff0000"
 ---
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000

eslint.config.js

@@ -17,7 +17,6 @@ export default tseslint.config(
   ...tseslint.configs.stylisticTypeChecked,
   {
     ignores: [
-      '**/*.d.ts',
       '**/dist/',
       '**/node_modules/',
       '.git/',

package.json

@@ -15,18 +15,13 @@
     "git graph"
   ],
   "scripts": {
-    "build": "pnpm antlr:generate && pnpm build:esbuild && pnpm build:types",
+    "build": "pnpm build:esbuild && pnpm build:types",
     "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts",
-    "antlr:generate": "pnpm --filter mermaid antlr:generate",
     "build:mermaid": "pnpm build:esbuild --mermaid",
     "build:viz": "pnpm build:esbuild --visualize",
     "build:types": "pnpm --filter mermaid types:build-config && tsx .build/types.ts",
     "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "dev": "tsx .esbuild/server.ts",
-    "dev:antlr": "USE_ANTLR_PARSER=true tsx .esbuild/server-antlr.ts",
-    "dev:antlr:visitor": "USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true tsx .esbuild/server-antlr.ts",
-    "dev:antlr:listener": "USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false tsx .esbuild/server-antlr.ts",
-    "dev:antlr:debug": "ANTLR_DEBUG=true USE_ANTLR_PARSER=true tsx .esbuild/server-antlr.ts",
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
     "copy-readme": "cpy './README.*' ./packages/mermaid/ --cwd=.",
@@ -47,10 +42,6 @@
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
-    "test:antlr": "USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true vitest run packages/mermaid/src/diagrams/flowchart/parser/",
-    "test:antlr:visitor": "USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true vitest run packages/mermaid/src/diagrams/flowchart/parser/",
-    "test:antlr:listener": "USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=false vitest run packages/mermaid/src/diagrams/flowchart/parser/",
-    "test:antlr:debug": "ANTLR_DEBUG=true USE_ANTLR_PARSER=true USE_ANTLR_VISITOR=true vitest run packages/mermaid/src/diagrams/flowchart/parser/",
     "test:check:tsc": "tsx scripts/tsc-check.ts",
     "prepare": "husky && pnpm build",
     "pre-commit": "lint-staged"

packages/examples/package.json

@@ -27,6 +27,9 @@
   "devDependencies": {
     "mermaid": "workspace:*"
   },
+  "peerDependencies": {
+    "mermaid": "workspace:~"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/mermaid-layout-elk/CHANGELOG.md

@@ -1,16 +1,5 @@
 # @mermaid-js/layout-elk
 
-## 0.1.9
-
-### Patch Changes
-
-- [#6857](https://github.com/mermaid-js/mermaid/pull/6857) [`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6) Thanks [@knsv](https://github.com/knsv)! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration
-
-- [#6849](https://github.com/mermaid-js/mermaid/pull/6849) [`2260948`](https://github.com/mermaid-js/mermaid/commit/2260948b7bda08f00616c2ce678bed1da69eb96c) Thanks [@anderium](https://github.com/anderium)! - Make elk not force node model order, but strongly consider it instead
-
-- Updated dependencies [[`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6), [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94), [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865), [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652), [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412), [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da), [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1), [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc), [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9), [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6), [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649), [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f), [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3), [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3), [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1), [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932), [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074), [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd), [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49), [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08), [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71), [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff)]:
-  - mermaid@11.10.0
-
 ## 0.1.8
 
 ### Patch Changes

packages/mermaid-layout-elk/README.md

@@ -2,7 +2,7 @@
 
 This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
 
-> [!NOTE]
+> [!NOTE]  
 > The ELK Layout engine will not be available in all providers that support mermaid by default.
 > The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
 
@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
 - `elk.mrtree`: Multi-root tree layout
 - `elk.sporeOverlap`: Spore overlap layout
 
-<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->
+<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->

packages/mermaid-layout-elk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/layout-elk",
-  "version": "0.1.9",
+  "version": "0.1.8",
   "description": "ELK layout engine for mermaid",
   "module": "dist/mermaid-layout-elk.core.mjs",
   "types": "dist/layouts.d.ts",

packages/mermaid-layout-elk/src/__tests__/geometry.spec.ts

@@ -1,67 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-  intersection,
-  ensureTrulyOutside,
-  makeInsidePoint,
-  tryNodeIntersect,
-  replaceEndpoint,
-  type RectLike,
-  type P,
-} from '../geometry.js';
-
-const approx = (a: number, b: number, eps = 1e-6) => Math.abs(a - b) < eps;
-
-describe('geometry helpers', () => {
-  it('intersection: vertical approach hits bottom border', () => {
-    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
-    const h = rect.height / 2; // 25
-    const outside: P = { x: 0, y: 100 };
-    const inside: P = { x: 0, y: 0 };
-    const res = intersection(rect, outside, inside);
-    expect(approx(res.x, 0)).toBe(true);
-    expect(approx(res.y, h)).toBe(true);
-  });
-
-  it('ensureTrulyOutside nudges near-boundary point outward', () => {
-    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
-    // near bottom boundary (y ~ h)
-    const near: P = { x: 0, y: rect.height / 2 - 0.2 };
-    const out = ensureTrulyOutside(rect, near, 10);
-    expect(out.y).toBeGreaterThan(rect.height / 2);
-  });
-
-  it('makeInsidePoint keeps x for vertical and y from center', () => {
-    const rect: RectLike = { x: 10, y: 5, width: 100, height: 50 };
-    const outside: P = { x: 10, y: 40 };
-    const center: P = { x: 99, y: -123 }; // center y should be used
-    const inside = makeInsidePoint(rect, outside, center);
-    expect(inside.x).toBe(outside.x);
-    expect(inside.y).toBe(center.y);
-  });
-
-  it('tryNodeIntersect returns null for wrong-side intersections', () => {
-    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
-    const outside: P = { x: -50, y: 0 };
-    const node = { intersect: () => ({ x: 10, y: 0 }) } as any; // right side of center
-    const res = tryNodeIntersect(node, rect, outside);
-    expect(res).toBeNull();
-  });
-
-  it('replaceEndpoint dedup removes end/start appropriately', () => {
-    const pts: P[] = [
-      { x: 0, y: 0 },
-      { x: 1, y: 1 },
-    ];
-    // remove duplicate end
-    replaceEndpoint(pts, 'end', { x: 1, y: 1 });
-    expect(pts.length).toBe(1);
-
-    const pts2: P[] = [
-      { x: 0, y: 0 },
-      { x: 1, y: 1 },
-    ];
-    // remove duplicate start
-    replaceEndpoint(pts2, 'start', { x: 0, y: 0 });
-    expect(pts2.length).toBe(1);
-  });
-});

packages/mermaid-layout-elk/src/find-common-ancestor.d.ts

@@ -1,9 +0,0 @@
-export interface TreeData {
-  parentById: Record<string, string>;
-  childrenById: Record<string, string[]>;
-}
-export declare const findCommonAncestor: (
-  id1: string,
-  id2: string,
-  { parentById }: TreeData
-) => string;

packages/mermaid-layout-elk/src/geometry.ts

@@ -1,209 +0,0 @@
-/* Geometry utilities extracted from render.ts for reuse and testing */
-
-export interface P {
-  x: number;
-  y: number;
-}
-
-export interface RectLike {
-  x: number; // center x
-  y: number; // center y
-  width: number;
-  height: number;
-  padding?: number;
-}
-
-export interface NodeLike {
-  intersect?: (p: P) => P | null;
-}
-
-export const EPS = 1;
-export const PUSH_OUT = 10;
-
-export const onBorder = (bounds: RectLike, p: P, tol = 0.5): boolean => {
-  const halfW = bounds.width / 2;
-  const halfH = bounds.height / 2;
-  const left = bounds.x - halfW;
-  const right = bounds.x + halfW;
-  const top = bounds.y - halfH;
-  const bottom = bounds.y + halfH;
-
-  const onLeft = Math.abs(p.x - left) <= tol && p.y >= top - tol && p.y <= bottom + tol;
-  const onRight = Math.abs(p.x - right) <= tol && p.y >= top - tol && p.y <= bottom + tol;
-  const onTop = Math.abs(p.y - top) <= tol && p.x >= left - tol && p.x <= right + tol;
-  const onBottom = Math.abs(p.y - bottom) <= tol && p.x >= left - tol && p.x <= right + tol;
-  return onLeft || onRight || onTop || onBottom;
-};
-
-/**
- * Compute intersection between a rectangle (center x/y, width/height) and the line
- * segment from insidePoint -\> outsidePoint. Returns the point on the rectangle border.
- *
- * This version avoids snapping to outsidePoint when certain variables evaluate to 0
- * (previously caused vertical top/bottom cases to miss the border). It only enforces
- * axis-constant behavior for purely vertical/horizontal approaches.
- */
-export const intersection = (node: RectLike, outsidePoint: P, insidePoint: P): P => {
-  const x = node.x;
-  const y = node.y;
-
-  const dx = Math.abs(x - insidePoint.x);
-  const w = node.width / 2;
-  let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
-  const h = node.height / 2;
-
-  const Q = Math.abs(outsidePoint.y - insidePoint.y);
-  const R = Math.abs(outsidePoint.x - insidePoint.x);
-
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
-    // Intersection is top or bottom of rect.
-    const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
-    r = (R * q) / Q;
-    const res = {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
-      y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
-    };
-
-    // Keep axis-constant special-cases only
-    if (R === 0) {
-      res.x = outsidePoint.x;
-    }
-    if (Q === 0) {
-      res.y = outsidePoint.y;
-    }
-    return res;
-  } else {
-    // Intersection on sides of rect
-    if (insidePoint.x < outsidePoint.x) {
-      r = outsidePoint.x - w - x;
-    } else {
-      r = x - w - outsidePoint.x;
-    }
-    const q = (Q * r) / R;
-    let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
-    let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
-
-    // Only handle axis-constant cases
-    if (R === 0) {
-      _x = outsidePoint.x;
-    }
-    if (Q === 0) {
-      _y = outsidePoint.y;
-    }
-
-    return { x: _x, y: _y };
-  }
-};
-
-export const outsideNode = (node: RectLike, point: P): boolean => {
-  const x = node.x;
-  const y = node.y;
-  const dx = Math.abs(point.x - x);
-  const dy = Math.abs(point.y - y);
-  const w = node.width / 2;
-  const h = node.height / 2;
-  return dx >= w || dy >= h;
-};
-
-export const ensureTrulyOutside = (bounds: RectLike, p: P, push = PUSH_OUT): P => {
-  const dx = Math.abs(p.x - bounds.x);
-  const dy = Math.abs(p.y - bounds.y);
-  const w = bounds.width / 2;
-  const h = bounds.height / 2;
-  if (Math.abs(dx - w) < EPS || Math.abs(dy - h) < EPS) {
-    const dirX = p.x - bounds.x;
-    const dirY = p.y - bounds.y;
-    const len = Math.sqrt(dirX * dirX + dirY * dirY);
-    if (len > 0) {
-      return {
-        x: bounds.x + (dirX / len) * (len + push),
-        y: bounds.y + (dirY / len) * (len + push),
-      };
-    }
-  }
-  return p;
-};
-
-export const makeInsidePoint = (bounds: RectLike, outside: P, center: P): P => {
-  const isVertical = Math.abs(outside.x - bounds.x) < EPS;
-  const isHorizontal = Math.abs(outside.y - bounds.y) < EPS;
-  return {
-    x: isVertical
-      ? outside.x
-      : outside.x < bounds.x
-        ? bounds.x - bounds.width / 4
-        : bounds.x + bounds.width / 4,
-    y: isHorizontal ? outside.y : center.y,
-  };
-};
-
-export const tryNodeIntersect = (node: NodeLike, bounds: RectLike, outside: P): P | null => {
-  if (!node?.intersect) {
-    return null;
-  }
-  const res = node.intersect(outside);
-  if (!res) {
-    return null;
-  }
-  const wrongSide =
-    (outside.x < bounds.x && res.x > bounds.x) || (outside.x > bounds.x && res.x < bounds.x);
-  if (wrongSide) {
-    return null;
-  }
-  const dist = Math.hypot(outside.x - res.x, outside.y - res.y);
-  if (dist <= EPS) {
-    return null;
-  }
-  return res;
-};
-
-export const fallbackIntersection = (bounds: RectLike, outside: P, center: P): P => {
-  const inside = makeInsidePoint(bounds, outside, center);
-  return intersection(bounds, outside, inside);
-};
-
-export const computeNodeIntersection = (
-  node: NodeLike,
-  bounds: RectLike,
-  outside: P,
-  center: P
-): P => {
-  const outside2 = ensureTrulyOutside(bounds, outside);
-  return tryNodeIntersect(node, bounds, outside2) ?? fallbackIntersection(bounds, outside2, center);
-};
-
-export const replaceEndpoint = (
-  points: P[],
-  which: 'start' | 'end',
-  value: P | null | undefined,
-  tol = 0.1
-) => {
-  if (!value || points.length === 0) {
-    return;
-  }
-
-  if (which === 'start') {
-    if (
-      points.length > 0 &&
-      Math.abs(points[0].x - value.x) < tol &&
-      Math.abs(points[0].y - value.y) < tol
-    ) {
-      // duplicate start remove it
-      points.shift();
-    } else {
-      points[0] = value;
-    }
-  } else {
-    const last = points.length - 1;
-    if (
-      points.length > 0 &&
-      Math.abs(points[last].x - value.x) < tol &&
-      Math.abs(points[last].y - value.y) < tol
-    ) {
-      // duplicate end remove it
-      points.pop();
-    } else {
-      points[last] = value;
-    }
-  }
-};