diff --git a/.build/common.ts b/.build/common.ts index 2497d443f78..53c43f3911a 100644 --- a/.build/common.ts +++ b/.build/common.ts @@ -31,7 +31,9 @@ export const packageOptions = { 'mermaid-layout-elk': { name: 'mermaid-layout-elk', packageName: 'mermaid-layout-elk', - file: 'layouts.ts', + // Built from mermaid's own ELK source (path is relative to the package's + // `src`) so the plugin and the bundled layout are the same implementation. + file: '../../mermaid/src/rendering-util/layout-algorithms/elk/plugin.ts', }, 'mermaid-layout-tidy-tree': { name: 'mermaid-layout-tidy-tree', diff --git a/.changeset/cluster-label-measurement.md b/.changeset/cluster-label-measurement.md index 44a035b1f29..52d9a7cbd60 100644 --- a/.changeset/cluster-label-measurement.md +++ b/.changeset/cluster-label-measurement.md @@ -6,4 +6,4 @@ feat: `defaultMeasureLayout` accepts a `unwrapGroupLabels` option so a layout en `insertCluster` paints a plain cluster label with an infinite width while the measurement pass wrapped it at 200px, so a layout that sizes compound nodes from the measured label sized them too narrow. Layouts now opt in explicitly; core no longer inspects the layout's name. Markdown cluster labels stay wrapped, since those are painted wrapped. -`@mermaid-js/layout-elk` opts in, which changes the size of labelled subgraphs in ELK-laid-out diagrams. Diagrams laid out with dagre are unaffected. +The bundled ELK layout opts in, which changes the size of labelled subgraphs in ELK-laid-out diagrams. Diagrams laid out with dagre are unaffected. diff --git a/.changeset/elk-composite-edge-anchor.md b/.changeset/elk-composite-edge-anchor.md new file mode 100644 index 00000000000..bf2aff92d68 --- /dev/null +++ b/.changeset/elk-composite-edge-anchor.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: keep ELK subgraph frames out to the border anchor of edges that terminate on the group, so transitions to composite states no longer run along the cluster border diff --git a/.changeset/elk-container-algorithms.md b/.changeset/elk-container-algorithms.md index 17dcd4cfb71..3e437056072 100644 --- a/.changeset/elk-container-algorithms.md +++ b/.changeset/elk-container-algorithms.md @@ -1,5 +1,5 @@ --- -'@mermaid-js/layout-elk': minor +'mermaid': minor --- feat: let a container pick its own ELK algorithm with `@{ algorithm: … }`, and add `elk.box` and `elk.rectpacking` to the selectable `layout` values. diff --git a/.changeset/elk-container-cycle-breaking.md b/.changeset/elk-container-cycle-breaking.md new file mode 100644 index 00000000000..004d607141a --- /dev/null +++ b/.changeset/elk-container-cycle-breaking.md @@ -0,0 +1,19 @@ +--- +'mermaid': patch +--- + +fix(elk): a composite state or subgraph containing a loop now opens on its own start node. + +Cycle breaking was resolved for the root graph but never passed to containers, so a +container laid out on its own fell back to ELK's default, `GREEDY`, while the root ran +whatever `elk.preset` asked for. The two then reversed different edges of the same cycle. + +In a composite state that loops, greedy reverses the edge that turns an ordinary state +into a source, and sources sit on the first layer — so the diagram opened on that state +alongside its start circle instead of on the start circle alone. Dagre reverses the other +edge, which is why the two layout engines disagreed on the same diagram. + +Containers now resolve cycle breaking from the preset exactly as the root does. Only +containers that actually contain a cycle change; an acyclic subgraph gives a cycle-breaking +strategy nothing to do. `preset: legacy` still reaches containers with `GREEDY`, so it keeps +reproducing the earlier rendering inside frames as well as outside them. diff --git a/.changeset/elk-default-layout.md b/.changeset/elk-default-layout.md new file mode 100644 index 00000000000..59c23a34fd4 --- /dev/null +++ b/.changeset/elk-default-layout.md @@ -0,0 +1,28 @@ +--- +'mermaid': major +--- + +feat!: **ELK is now bundled with mermaid and is the default layout algorithm.** + +ELK previously shipped as a separate `@mermaid-js/layout-elk` package that sites had to install and register. It is now part of mermaid itself and registered automatically, so `layout: elk` — and the `elk.stress`, `elk.force`, `elk.mrtree`, `elk.sporeOverlap`, `elk.box` and `elk.rectpacking` variants — work with no setup. + +**This changes how existing diagrams look.** Flowchart, state, class, entity-relationship, requirement, use-case and agentflow diagrams that do not specify a `layout` are now laid out by ELK instead of dagre. To keep the previous layout, set dagre explicitly: + +```yaml +--- +config: + layout: dagre +--- +``` + +or globally, `mermaid.initialize({ layout: 'dagre' })`. + +Mindmap is unchanged: it keeps laying out with cose-bilkent unless a layout is explicitly requested (in the tiny build, which ships neither ELK nor cose-bilkent, it falls back to dagre). + +Other notes: + +- ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (`mermaid.min.js`) inlines it and grows by roughly 500 kB gzipped. +- The **tiny** build deliberately omits ELK to stay small, and falls back to dagre for diagrams that ask for an ELK layout. Its size is unchanged. +- `@mermaid-js/layout-elk` is no longer needed on normal builds — existing `mermaid.registerLayoutLoaders(elkLayouts)` calls keep working and can be removed. It is still published, and remains the way to add ELK to the tiny build. +- `dist/mermaid.esm.min.mjs` now contains syntax that `es-module-lexer` (used by Vite) rejects with `content contains invalid JS syntax`. Bundler users are unaffected as long as they import the `mermaid` package specifier, which resolves to the core build; only builds that point Vite directly at that dist file need to switch to the package specifier or the core build. +- State diagrams now resolve their layout through the same registration check as every other diagram, so an unavailable layout falls back instead of failing to render. diff --git a/.changeset/elk-small-node-vertical-edges.md b/.changeset/elk-small-node-vertical-edges.md new file mode 100644 index 00000000000..9bad101d286 --- /dev/null +++ b/.changeset/elk-small-node-vertical-edges.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: keep ELK edges vertical at small nodes — the node now moves onto the routed line instead of the edge bending toward the node's off-centre position diff --git a/.changeset/er-elk-edges-above-clusters.md b/.changeset/er-elk-edges-above-clusters.md new file mode 100644 index 00000000000..8eb50b6d4be --- /dev/null +++ b/.changeset/er-elk-edges-above-clusters.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: render ER relationship edges above subgraph backgrounds under the ELK layout instead of hiding them behind the cluster rect diff --git a/.changeset/layout-elk-built-from-core.md b/.changeset/layout-elk-built-from-core.md new file mode 100644 index 00000000000..20239066e8b --- /dev/null +++ b/.changeset/layout-elk-built-from-core.md @@ -0,0 +1,13 @@ +--- +'@mermaid-js/layout-elk': minor +--- + +feat: this package is now built from mermaid's own ELK implementation instead of carrying its own copy, and is only needed for Mermaid builds that ship without ELK. + +`mermaid` bundles ELK and registers it automatically, so most projects can drop the dependency and the `registerLayoutLoaders` call. The package remains published and fully functional for the **tiny** build (`mermaid.tiny.js`), which omits ELK to stay small and where registering this is the only way to get an ELK layout. + +Because it is compiled from mermaid's ELK source rather than importing the whole `mermaid` entry point, the published bundle no longer drags in every diagram type, parser and KaTeX: the minified ESM payload drops from roughly **1.58 MB to 728 kB gzipped**. It stays self-contained, so it still loads from a CDN next to any Mermaid build with no import map. + +The rendering utilities the ELK source reaches (`dompurify`, `katex`, `dayjs`, `dagre-d3-es`) are now declared in the package's `dependencies`, so the npm build (`.core.mjs`) resolves them through your package manager — they dedupe against the host's copies and show up in audits — instead of carrying invisible inlined copies. + +> **Maintainers:** `peerDependencies.mermaid` still reads `^11.0.2`. It should be raised to the major that bundles ELK as part of the release. diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 0d568972234..7a53f4f915c 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -105,7 +105,8 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { if (core) { // Core build is used to generate file without bundled dependencies. // This is used by downstream projects to bundle dependencies themselves. - // Ignore dependencies and any dependencies of dependencies + // Ignore dependencies and any dependencies of dependencies. + // A package may legitimately have none at all. // // peerDependencies must be external too. The consumer is the one that // supplies them, so inlining one ships a second copy of that package — diff --git a/docs/config/layouts.md b/docs/config/layouts.md index 18e9c9423b8..5a29aa2842f 100644 --- a/docs/config/layouts.md +++ b/docs/config/layouts.md @@ -10,19 +10,27 @@ 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 +- **elk** (default): [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/). Bundled with Mermaid; no setup required. Specific ELK algorithms can be selected as `elk.stress`, `elk.force`, `elk.mrtree`, `elk.sporeOverlap`, `elk.box`, and `elk.rectpacking`. - **dagre**: Dagre layout for layered graphs +- **cose-bilkent**: Cose Bilkent layout for force-directed graphs +- **tidy-tree**: Tidy tree layout for hierarchical diagrams, from the [`@mermaid-js/layout-tidy-tree`](https://www.npmjs.com/package/@mermaid-js/layout-tidy-tree) package [Tidy Tree Configuration](/config/tidy-tree) + +Mindmaps are the one diagram type not laid out with ELK by default; they use +cose-bilkent unless you ask for something else. + +The **tiny** build omits ELK to stay small, and falls back to Dagre for +diagrams that request it. ## How to Use -You can specify the layout in your diagram's YAML config or initialization options. For example: +Since `elk` is the default, a diagram needs no configuration to use it. To pick +a different layout, set it in your diagram's YAML config or initialization +options. For example: ```mermaid-example --- config: - layout: elk + layout: dagre --- graph TD; A-->B; @@ -32,7 +40,7 @@ graph TD; ```mermaid --- config: - layout: elk + layout: dagre --- graph TD; A-->B; diff --git a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md b/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md index 789e62045e1..e9866171c63 100644 --- a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md +++ b/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:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25) ## 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:28](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L28) --- @@ -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:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27) --- @@ -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:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26) diff --git a/docs/config/setup/mermaid/interfaces/MermaidConfig.md b/docs/config/setup/mermaid/interfaces/MermaidConfig.md index fbb1c3703cc..7db03bf3c61 100644 --- a/docs/config/setup/mermaid/interfaces/MermaidConfig.md +++ b/docs/config/setup/mermaid/interfaces/MermaidConfig.md @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:66](https://github.com/mermaid- > `optional` **agentflow**: `AgentflowDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:322](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L322) +Defined in: [packages/mermaid/src/config.type.ts:325](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L325) --- @@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:322](https://github.com/mermaid > `optional` **altFontFamily**: `string` -Defined in: [packages/mermaid/src/config.type.ts:260](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L260) +Defined in: [packages/mermaid/src/config.type.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L263) --- @@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:260](https://github.com/mermaid > `optional` **architecture**: `ArchitectureDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:334](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L334) +Defined in: [packages/mermaid/src/config.type.ts:337](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L337) --- @@ -42,7 +42,7 @@ Defined in: [packages/mermaid/src/config.type.ts:334](https://github.com/mermaid > `optional` **arrowMarkerAbsolute**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L279) +Defined in: [packages/mermaid/src/config.type.ts:282](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L282) Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings. @@ -53,7 +53,7 @@ This matters if you are using base tag settings. > `optional` **block**: `BlockDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:342](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L342) +Defined in: [packages/mermaid/src/config.type.ts:345](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L345) --- @@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:342](https://github.com/mermaid > `optional` **c4**: `C4DiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:339](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L339) +Defined in: [packages/mermaid/src/config.type.ts:342](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L342) --- @@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:339](https://github.com/mermaid > `optional` **class**: `ClassDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L327) +Defined in: [packages/mermaid/src/config.type.ts:330](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L330) --- @@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:327](https://github.com/mermaid > `optional` **cynefin**: `CynefinDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L349) +Defined in: [packages/mermaid/src/config.type.ts:352](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L352) --- @@ -85,7 +85,7 @@ Defined in: [packages/mermaid/src/config.type.ts:349](https://github.com/mermaid > `optional` **darkMode**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:244](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L244) +Defined in: [packages/mermaid/src/config.type.ts:247](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L247) --- @@ -93,7 +93,7 @@ Defined in: [packages/mermaid/src/config.type.ts:244](https://github.com/mermaid > `optional` **deterministicIds**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L312) +Defined in: [packages/mermaid/src/config.type.ts:315](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L315) This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed. @@ -109,7 +109,7 @@ should not change unless content is changed. > `optional` **deterministicIDSeed**: `string` -Defined in: [packages/mermaid/src/config.type.ts:319](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L319) +Defined in: [packages/mermaid/src/config.type.ts:322](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L322) This option is the optional seed for deterministic ids. If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. @@ -121,7 +121,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:351](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L351) +Defined in: [packages/mermaid/src/config.type.ts:354](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L354) --- @@ -129,7 +129,7 @@ Defined in: [packages/mermaid/src/config.type.ts:351](https://github.com/mermaid > `optional` **elk**: `object` -Defined in: [packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111) +Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114) #### considerModelOrder? @@ -268,7 +268,7 @@ port, or would introduce a crossing. > `optional` **er**: `ErDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:329](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L329) +Defined in: [packages/mermaid/src/config.type.ts:332](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L332) --- @@ -276,7 +276,7 @@ Defined in: [packages/mermaid/src/config.type.ts:329](https://github.com/mermaid > `optional` **eventmodeling**: `EventModelingDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L343) +Defined in: [packages/mermaid/src/config.type.ts:346](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L346) --- @@ -284,7 +284,7 @@ Defined in: [packages/mermaid/src/config.type.ts:343](https://github.com/mermaid > `optional` **flowchart**: `FlowchartDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:320](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L320) +Defined in: [packages/mermaid/src/config.type.ts:323](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L323) --- @@ -292,7 +292,7 @@ Defined in: [packages/mermaid/src/config.type.ts:320](https://github.com/mermaid > `optional` **fontFamily**: `string` -Defined in: [packages/mermaid/src/config.type.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L259) +Defined in: [packages/mermaid/src/config.type.ts:262](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L262) Specifies the font to be used in the rendered diagrams. Can be any possible CSS `font-family`. @@ -304,7 +304,7 @@ See > `optional` **fontSize**: `number` -Defined in: [packages/mermaid/src/config.type.ts:353](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L353) +Defined in: [packages/mermaid/src/config.type.ts:356](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L356) --- @@ -312,7 +312,7 @@ Defined in: [packages/mermaid/src/config.type.ts:353](https://github.com/mermaid > `optional` **forceLegacyMathML**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:301](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L301) +Defined in: [packages/mermaid/src/config.type.ts:304](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L304) 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. @@ -324,7 +324,7 @@ If set to true, ignores legacyMathML. > `optional` **gantt**: `GanttDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:324](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L324) +Defined in: [packages/mermaid/src/config.type.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L327) --- @@ -332,7 +332,7 @@ Defined in: [packages/mermaid/src/config.type.ts:324](https://github.com/mermaid > `optional` **gitGraph**: `GitGraphDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:338](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L338) +Defined in: [packages/mermaid/src/config.type.ts:341](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L341) --- @@ -350,7 +350,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:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L252) +Defined in: [packages/mermaid/src/config.type.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L255) Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. **Note:** Diagram-specific `htmlLabels` settings (e.g., `flowchart.htmlLabels`) are deprecated. @@ -363,7 +363,7 @@ over any diagram-specific settings. > `optional` **ishikawa**: `IshikawaDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L336) +Defined in: [packages/mermaid/src/config.type.ts:339](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L339) --- @@ -371,7 +371,7 @@ Defined in: [packages/mermaid/src/config.type.ts:336](https://github.com/mermaid > `optional` **journey**: `JourneyDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:325](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L325) +Defined in: [packages/mermaid/src/config.type.ts:328](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L328) --- @@ -379,7 +379,7 @@ Defined in: [packages/mermaid/src/config.type.ts:325](https://github.com/mermaid > `optional` **kanban**: `KanbanDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:337](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L337) +Defined in: [packages/mermaid/src/config.type.ts:340](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L340) --- @@ -387,17 +387,20 @@ Defined in: [packages/mermaid/src/config.type.ts:337](https://github.com/mermaid > `optional` **layout**: `string` -Defined in: [packages/mermaid/src/config.type.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L101) +Defined in: [packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104) Defines which layout algorithm to use for rendering the diagram. +Defaults to `elk`, which is bundled with mermaid. The `tiny` build omits +ELK to stay small and falls back to `dagre`. + --- ### legacyMathML? > `optional` **legacyMathML**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:294](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L294) +Defined in: [packages/mermaid/src/config.type.ts:297](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L297) 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 @@ -410,7 +413,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:265](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L265) +Defined in: [packages/mermaid/src/config.type.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L268) This option decides the amount of logging to be used by mermaid. @@ -430,7 +433,7 @@ Defines which main look to use for the diagram. > `optional` **markdownAutoWrap**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:354](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L354) +Defined in: [packages/mermaid/src/config.type.ts:357](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L357) --- @@ -438,7 +441,7 @@ Defined in: [packages/mermaid/src/config.type.ts:354](https://github.com/mermaid > `optional` **maxEdges**: `number` -Defined in: [packages/mermaid/src/config.type.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L110) +Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113) Defines the maximum number of edges that can be drawn in a graph. @@ -448,7 +451,7 @@ Defines the maximum number of edges that can be drawn in a graph. > `optional` **maxTextSize**: `number` -Defined in: [packages/mermaid/src/config.type.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L105) +Defined in: [packages/mermaid/src/config.type.ts:108](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L108) The maximum allowed size of the users text diagram @@ -458,7 +461,7 @@ The maximum allowed size of the users text diagram > `optional` **mindmap**: `MindmapDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:335](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L335) +Defined in: [packages/mermaid/src/config.type.ts:338](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L338) --- @@ -466,7 +469,7 @@ Defined in: [packages/mermaid/src/config.type.ts:335](https://github.com/mermaid > `optional` **packet**: `PacketDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:341](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L341) +Defined in: [packages/mermaid/src/config.type.ts:344](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L344) --- @@ -474,7 +477,7 @@ Defined in: [packages/mermaid/src/config.type.ts:341](https://github.com/mermaid > `optional` **pie**: `PieDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:330](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L330) +Defined in: [packages/mermaid/src/config.type.ts:333](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L333) --- @@ -482,7 +485,7 @@ Defined in: [packages/mermaid/src/config.type.ts:330](https://github.com/mermaid > `optional` **quadrantChart**: `QuadrantChartConfig` -Defined in: [packages/mermaid/src/config.type.ts:331](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L331) +Defined in: [packages/mermaid/src/config.type.ts:334](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L334) --- @@ -490,7 +493,7 @@ Defined in: [packages/mermaid/src/config.type.ts:331](https://github.com/mermaid > `optional` **radar**: `RadarDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:345](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L345) +Defined in: [packages/mermaid/src/config.type.ts:348](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L348) --- @@ -498,7 +501,7 @@ Defined in: [packages/mermaid/src/config.type.ts:345](https://github.com/mermaid > `optional` **railroad**: `RailroadDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:350](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L350) +Defined in: [packages/mermaid/src/config.type.ts:353](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L353) --- @@ -506,7 +509,7 @@ Defined in: [packages/mermaid/src/config.type.ts:350](https://github.com/mermaid > `optional` **requirement**: `RequirementDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:333](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L333) +Defined in: [packages/mermaid/src/config.type.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L336) --- @@ -514,7 +517,7 @@ Defined in: [packages/mermaid/src/config.type.ts:333](https://github.com/mermaid > `optional` **sankey**: `SankeyDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:340](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L340) +Defined in: [packages/mermaid/src/config.type.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L343) --- @@ -522,7 +525,7 @@ Defined in: [packages/mermaid/src/config.type.ts:340](https://github.com/mermaid > `optional` **secure**: `string`\[] -Defined in: [packages/mermaid/src/config.type.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L286) +Defined in: [packages/mermaid/src/config.type.ts:289](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L289) This option controls which `currentConfig` keys are considered secure and can only be changed via call to `mermaid.initialize`. @@ -534,7 +537,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:269](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L269) +Defined in: [packages/mermaid/src/config.type.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L272) Level of trust for parsed diagram @@ -544,7 +547,7 @@ Level of trust for parsed diagram > `optional` **sequence**: `SequenceDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:323](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L323) +Defined in: [packages/mermaid/src/config.type.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L326) --- @@ -552,7 +555,7 @@ Defined in: [packages/mermaid/src/config.type.ts:323](https://github.com/mermaid > `optional` **startOnLoad**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:273](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L273) +Defined in: [packages/mermaid/src/config.type.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L276) Dictates whether mermaid starts on Page load @@ -562,7 +565,7 @@ Dictates whether mermaid starts on Page load > `optional` **state**: `StateDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:328](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L328) +Defined in: [packages/mermaid/src/config.type.ts:331](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L331) --- @@ -570,7 +573,7 @@ Defined in: [packages/mermaid/src/config.type.ts:328](https://github.com/mermaid > `optional` **suppressErrorRendering**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L360) +Defined in: [packages/mermaid/src/config.type.ts:363](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L363) Suppresses inserting 'Syntax error' diagram in the DOM. This is useful when you want to control how to handle syntax errors in your application. @@ -581,7 +584,7 @@ This is useful when you want to control how to handle syntax errors in your appl > `optional` **swimlane**: `SwimlaneDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:321](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L321) +Defined in: [packages/mermaid/src/config.type.ts:324](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L324) --- @@ -616,7 +619,7 @@ Defined in: [packages/mermaid/src/config.type.ts:85](https://github.com/mermaid- > `optional` **timeline**: `TimelineDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L326) +Defined in: [packages/mermaid/src/config.type.ts:329](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L329) --- @@ -624,7 +627,7 @@ Defined in: [packages/mermaid/src/config.type.ts:326](https://github.com/mermaid > `optional` **treeView**: `TreeViewDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:344](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L344) +Defined in: [packages/mermaid/src/config.type.ts:347](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L347) --- @@ -632,7 +635,7 @@ Defined in: [packages/mermaid/src/config.type.ts:344](https://github.com/mermaid > `optional` **usecase**: `UsecaseDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:346](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L346) +Defined in: [packages/mermaid/src/config.type.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L349) --- @@ -640,7 +643,7 @@ Defined in: [packages/mermaid/src/config.type.ts:346](https://github.com/mermaid > `optional` **venn**: `VennDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:347](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L347) +Defined in: [packages/mermaid/src/config.type.ts:350](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L350) --- @@ -648,7 +651,7 @@ Defined in: [packages/mermaid/src/config.type.ts:347](https://github.com/mermaid > `optional` **wardley-beta**: `WardleyDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:348](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L348) +Defined in: [packages/mermaid/src/config.type.ts:351](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L351) --- @@ -656,7 +659,7 @@ Defined in: [packages/mermaid/src/config.type.ts:348](https://github.com/mermaid > `optional` **wrap**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:352](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L352) +Defined in: [packages/mermaid/src/config.type.ts:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L355) --- @@ -664,4 +667,4 @@ Defined in: [packages/mermaid/src/config.type.ts:352](https://github.com/mermaid > `optional` **xyChart**: `XYChartConfig` -Defined in: [packages/mermaid/src/config.type.ts:332](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L332) +Defined in: [packages/mermaid/src/config.type.ts:335](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L335) diff --git a/docs/config/setup/mermaid/interfaces/RenderOptions.md b/docs/config/setup/mermaid/interfaces/RenderOptions.md index a9091206984..61693176702 100644 --- a/docs/config/setup/mermaid/interfaces/RenderOptions.md +++ b/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:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11) ## 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:12](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L12) diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md index 13ef3c44d20..32877d30624 100644 --- a/docs/intro/syntax-reference.md +++ b/docs/intro/syntax-reference.md @@ -130,7 +130,7 @@ An application of using Directives to change [Themes](../config/theming.md). `Th ### Layout and look -We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types. +We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowchart, state, class, entity relationship, requirement, use case, and agentflow diagrams**, with plans to extend support to all diagram types. Mindmaps are the exception: they keep their own `cose-bilkent` layout unless a layout is explicitly set (the tiny build, which ships neither ELK nor cose-bilkent, falls back to Dagre). ### Selecting Diagram Looks @@ -178,8 +178,12 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y #### Supported Layout Algorithms: -- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. -- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. +- ELK (default): The ELK (Eclipse Layout Kernel) layout offers more sophisticated layout capabilities, especially for large or intricate diagrams, producing a more optimized arrangement with fewer overlaps. It is bundled with Mermaid and needs no setup. +- Dagre: The classic layout algorithm used by Mermaid for a long time. It provides a good balance of simplicity and visual clarity, and remains available with `layout: dagre`. + +> **Note** +> The `mermaid` **tiny** build omits ELK to stay small. Diagrams asking for an +> ELK layout there fall back to Dagre. #### How to Select a Layout Algorithm: @@ -270,4 +274,13 @@ B -->|Option 2| D[Path 2] These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow. -When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk. +When integrating Mermaid, you can include look and layout configuration with the initialize call: + +```js +mermaid.initialize({ look: 'handDrawn', layout: 'elk' }); +``` + +ELK ships with Mermaid, so no separate package or registration is needed — the +`@mermaid-js/layout-elk` dependency and its `registerLayoutLoaders` call can be +removed. That package is still published for builds that omit ELK, which today +means the **tiny** build. diff --git a/docs/syntax/agentflow.md b/docs/syntax/agentflow.md index 2c14c28c72f..1d3af574e9e 100644 --- a/docs/syntax/agentflow.md +++ b/docs/syntax/agentflow.md @@ -391,13 +391,13 @@ fetch@{ Mermaid itself acts on a small, fixed set of keys: -| Key | Applies to | Effect | -| ------------------------------- | ---------- | ---------------------------------------------------------- | -| `shape` | nodes | Selects the node shape (see the table above) | -| `label`, `labelType` | nodes | Overrides the node's label and how it is parsed | -| `view` | containers | `collapsed` folds the container down to a summary node | -| `algorithm` | containers | Per-container ELK algorithm, with `@mermaid-js/layout-elk` | -| `curve`, `animate`, `animation` | edges | Edge interpolation and animation | +| Key | Applies to | Effect | +| ------------------------------- | ---------- | ------------------------------------------------------ | +| `shape` | nodes | Selects the node shape (see the table above) | +| `label`, `labelType` | nodes | Overrides the node's label and how it is parsed | +| `view` | containers | `collapsed` folds the container down to a summary node | +| `algorithm` | containers | Per-container ELK algorithm | +| `curve`, `animate`, `animation` | edges | Edge interpolation and animation | Everything else is carried through untouched and surfaced to consumers, so the vocabulary below is a convention rather than a closed list — an unknown key is preserved, never rejected. @@ -536,7 +536,7 @@ agentflow diagram uses the standard node, edge, and cluster theme variables. ### Layout -Agentflow renders through the unified renderer, so it works with any registered layout engine. With `@mermaid-js/layout-elk` installed, an individual container can also select its own ELK algorithm: +Agentflow renders through the unified renderer, so it works with any registered layout engine. ELK is the default, and an individual container can also select its own ELK algorithm: ```mermaid-example --- diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 5798307e0cf..ccabffba6d4 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -974,14 +974,14 @@ erDiagram ### Layout -The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre. +The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is the ELK (Eclipse Layout Kernel) layout, which suits larger and more-complex diagrams. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout). -For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout). +To use the classic Dagre layout instead, set it in your YAML frontmatter's `config`: ```yaml --- config: - layout: elk + layout: dagre --- ``` @@ -991,7 +991,7 @@ Your Mermaid code should be similar to the following: --- title: Order example config: - layout: elk + layout: dagre --- erDiagram CUSTOMER ||--o{ ORDER : places @@ -1003,7 +1003,7 @@ erDiagram --- title: Order example config: - layout: elk + layout: dagre --- erDiagram CUSTOMER ||--o{ ORDER : places @@ -1011,7 +1011,4 @@ erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -> **Note** -> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. - diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 3432bb0caaa..458fa5b1492 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -2250,21 +2250,20 @@ flowchart LR ### Renderer -The layout of the diagram is done with the renderer. The default renderer is dagre. +The layout of the diagram is done with the layout algorithm. The default is +[ELK](https://www.eclipse.org/elk/), which handles larger and more complex +diagrams well and is bundled with Mermaid. -Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. - -The _elk_ renderer is an experimental feature. -You can change the renderer to elk by adding this directive: +To use the classic Dagre layout instead: ``` config: - flowchart: - defaultRenderer: "elk" + layout: dagre ``` -> **Note** -> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. +The older `flowchart.defaultRenderer: "elk"` directive and the `flowchart-elk` +diagram type still work, but are no longer needed — they predate `layout` and +selected a renderer that is now the default. ### Width diff --git a/e2e/diagrams/class-diagram/elk/elk-0-should-render-a-simple-class-diagram.mmd b/e2e/diagrams/class-diagram/dagre/dagre-0-should-render-a-simple-class-diagram.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/elk-0-should-render-a-simple-class-diagram.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-0-should-render-a-simple-class-diagram.mmd index ea95c4bbf14..bf917afb2a2 100644 --- a/e2e/diagrams/class-diagram/elk/elk-0-should-render-a-simple-class-diagram.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-0-should-render-a-simple-class-diagram.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram diff --git a/e2e/diagrams/class-diagram/elk/elk-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd similarity index 97% rename from e2e/diagrams/class-diagram/elk/elk-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd index db696d6d6d0..f64ad064431 100644 --- a/e2e/diagrams/class-diagram/elk/elk-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-1-1-should-render-a-simple-class-diagram-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-1-should-render-a-simple-class-diagram.mmd b/e2e/diagrams/class-diagram/dagre/dagre-1-should-render-a-simple-class-diagram.mmd similarity index 97% rename from e2e/diagrams/class-diagram/elk/elk-1-should-render-a-simple-class-diagram.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-1-should-render-a-simple-class-diagram.mmd index fbab0f2ccf6..54fecbbdb5c 100644 --- a/e2e/diagrams/class-diagram/elk/elk-1-should-render-a-simple-class-diagram.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-1-should-render-a-simple-class-diagram.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd b/e2e/diagrams/class-diagram/dagre/dagre-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd index ceefb9c94ab..bbd8b0120b0 100644 --- a/e2e/diagrams/class-diagram/elk/elk-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-10-should-render-a-simple-class-diagram-with-clickable-callback.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01~T~ <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd similarity index 89% rename from e2e/diagrams/class-diagram/elk/elk-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd index a6455ef72bd..2df95af731d 100644 --- a/e2e/diagrams/class-diagram/elk/elk-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-11-1-should-render-a-simple-class-diagram-with-return-type-on-method-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class10~T~ { diff --git a/e2e/diagrams/class-diagram/elk/elk-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd b/e2e/diagrams/class-diagram/dagre/dagre-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd similarity index 89% rename from e2e/diagrams/class-diagram/elk/elk-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd index 0fde2fa5dc3..88148c75892 100644 --- a/e2e/diagrams/class-diagram/elk/elk-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-11-should-render-a-simple-class-diagram-with-return-type-on-method.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10~T~ { diff --git a/e2e/diagrams/class-diagram/elk/elk-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/elk-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd index 909753af06c..7537cddb51a 100644 --- a/e2e/diagrams/class-diagram/elk/elk-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-12-1-should-render-a-simple-class-diagram-with-generic-types-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class10~T~ { diff --git a/e2e/diagrams/class-diagram/elk/elk-12-should-render-a-simple-class-diagram-with-generic-types.mmd b/e2e/diagrams/class-diagram/dagre/dagre-12-should-render-a-simple-class-diagram-with-generic-types.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/elk-12-should-render-a-simple-class-diagram-with-generic-types.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-12-should-render-a-simple-class-diagram-with-generic-types.mmd index 2cafe3335cb..482614b9eea 100644 --- a/e2e/diagrams/class-diagram/elk/elk-12-should-render-a-simple-class-diagram-with-generic-types.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-12-should-render-a-simple-class-diagram-with-generic-types.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10~T~ { diff --git a/e2e/diagrams/class-diagram/elk/elk-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd b/e2e/diagrams/class-diagram/dagre/dagre-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd index 2296d1c0331..b424d465e29 100644 --- a/e2e/diagrams/class-diagram/elk/elk-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-13-should-render-a-simple-class-diagram-with-css-classes-applied.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 { diff --git a/e2e/diagrams/class-diagram/elk/elk-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd b/e2e/diagrams/class-diagram/dagre/dagre-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/elk-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd index 6602ec38653..bd55bf307da 100644 --- a/e2e/diagrams/class-diagram/elk/elk-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10:::exClass2 { diff --git a/e2e/diagrams/class-diagram/elk/elk-1433-should-render-a-simple-class-with-a-title.mmd b/e2e/diagrams/class-diagram/dagre/dagre-1433-should-render-a-simple-class-with-a-title.mmd similarity index 82% rename from e2e/diagrams/class-diagram/elk/elk-1433-should-render-a-simple-class-with-a-title.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-1433-should-render-a-simple-class-with-a-title.mmd index 3c7586a7757..44e8dc68f65 100644 --- a/e2e/diagrams/class-diagram/elk/elk-1433-should-render-a-simple-class-with-a-title.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-1433-should-render-a-simple-class-with-a-title.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd b/e2e/diagrams/class-diagram/dagre/dagre-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd similarity index 89% rename from e2e/diagrams/class-diagram/elk/elk-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd index 6f5a3a7a55e..8295665f56c 100644 --- a/e2e/diagrams/class-diagram/elk/elk-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-16a-should-render-a-simple-class-diagram-with-static-field.mmd b/e2e/diagrams/class-diagram/dagre/dagre-16a-should-render-a-simple-class-diagram-with-static-field.mmd similarity index 85% rename from e2e/diagrams/class-diagram/elk/elk-16a-should-render-a-simple-class-diagram-with-static-field.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-16a-should-render-a-simple-class-diagram-with-static-field.mmd index 9c4a480c0eb..383cbfbdda4 100644 --- a/e2e/diagrams/class-diagram/elk/elk-16a-should-render-a-simple-class-diagram-with-static-field.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-16a-should-render-a-simple-class-diagram-with-static-field.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Foo { diff --git a/e2e/diagrams/class-diagram/elk/elk-16b-should-handle-the-direction-statement-with-tb.mmd b/e2e/diagrams/class-diagram/dagre/dagre-16b-should-handle-the-direction-statement-with-tb.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-16b-should-handle-the-direction-statement-with-tb.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-16b-should-handle-the-direction-statement-with-tb.mmd index b825dea991b..1d5c3fff26d 100644 --- a/e2e/diagrams/class-diagram/elk/elk-16b-should-handle-the-direction-statement-with-tb.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-16b-should-handle-the-direction-statement-with-tb.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram direction TB diff --git a/e2e/diagrams/class-diagram/elk/elk-17a-should-handle-the-direction-statement-with-bt.mmd b/e2e/diagrams/class-diagram/dagre/dagre-17a-should-handle-the-direction-statement-with-bt.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-17a-should-handle-the-direction-statement-with-bt.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-17a-should-handle-the-direction-statement-with-bt.mmd index 7ecad5069f0..2baf8933e01 100644 --- a/e2e/diagrams/class-diagram/elk/elk-17a-should-handle-the-direction-statement-with-bt.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-17a-should-handle-the-direction-statement-with-bt.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram direction BT diff --git a/e2e/diagrams/class-diagram/elk/elk-17b-should-handle-the-direction-statement-with-rl.mmd b/e2e/diagrams/class-diagram/dagre/dagre-17b-should-handle-the-direction-statement-with-rl.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-17b-should-handle-the-direction-statement-with-rl.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-17b-should-handle-the-direction-statement-with-rl.mmd index 718af934eac..97e2ea04eba 100644 --- a/e2e/diagrams/class-diagram/elk/elk-17b-should-handle-the-direction-statement-with-rl.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-17b-should-handle-the-direction-statement-with-rl.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram direction RL diff --git a/e2e/diagrams/class-diagram/elk/elk-18a-should-handle-the-direction-statement-with-lr.mmd b/e2e/diagrams/class-diagram/dagre/dagre-18a-should-handle-the-direction-statement-with-lr.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-18a-should-handle-the-direction-statement-with-lr.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-18a-should-handle-the-direction-statement-with-lr.mmd index 2caa8a01a0a..0e95249e0d0 100644 --- a/e2e/diagrams/class-diagram/elk/elk-18a-should-handle-the-direction-statement-with-lr.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-18a-should-handle-the-direction-statement-with-lr.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram direction LR diff --git a/e2e/diagrams/class-diagram/elk/elk-18b-should-render-a-simple-class-diagram-with-notes.mmd b/e2e/diagrams/class-diagram/dagre/dagre-18b-should-render-a-simple-class-diagram-with-notes.mmd similarity index 93% rename from e2e/diagrams/class-diagram/elk/elk-18b-should-render-a-simple-class-diagram-with-notes.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-18b-should-render-a-simple-class-diagram-with-notes.mmd index 565e741f6f9..b1c775bcbbd 100644 --- a/e2e/diagrams/class-diagram/elk/elk-18b-should-render-a-simple-class-diagram-with-notes.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-18b-should-render-a-simple-class-diagram-with-notes.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram note "I love this diagram! diff --git a/e2e/diagrams/class-diagram/elk/elk-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd similarity index 97% rename from e2e/diagrams/class-diagram/elk/elk-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd index 4334a3d744f..2813c3e83d0 100644 --- a/e2e/diagrams/class-diagram/elk/elk-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-2-1-should-render-a-simple-class-diagrams-with-cardinality-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram Class01 "1" <|--|> "*" AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd b/e2e/diagrams/class-diagram/dagre/dagre-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd index 2cdfcd4450e..9d8e2c8303c 100644 --- a/e2e/diagrams/class-diagram/elk/elk-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-2-2-should-render-a-simple-class-diagram-with-different-visibilities.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd index 5a96bfc40f7..e541244c3f4 100644 --- a/e2e/diagrams/class-diagram/elk/elk-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-2-3-should-render-a-simple-class-diagram-with-different-visibilities-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-2-should-render-a-simple-class-diagrams-with-cardinality.mmd b/e2e/diagrams/class-diagram/dagre/dagre-2-should-render-a-simple-class-diagrams-with-cardinality.mmd similarity index 97% rename from e2e/diagrams/class-diagram/elk/elk-2-should-render-a-simple-class-diagrams-with-cardinality.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-2-should-render-a-simple-class-diagrams-with-cardinality.mmd index 3efa4ab4bcc..1ca36368380 100644 --- a/e2e/diagrams/class-diagram/elk/elk-2-should-render-a-simple-class-diagrams-with-cardinality.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-2-should-render-a-simple-class-diagrams-with-cardinality.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01 "1" <|--|> "*" AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-4-should-render-a-simple-class-diagram-with-comments.mmd b/e2e/diagrams/class-diagram/dagre/dagre-4-should-render-a-simple-class-diagram-with-comments.mmd similarity index 96% rename from e2e/diagrams/class-diagram/elk/elk-4-should-render-a-simple-class-diagram-with-comments.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-4-should-render-a-simple-class-diagram-with-comments.mmd index df5580b7eb6..e254b103ba4 100644 --- a/e2e/diagrams/class-diagram/elk/elk-4-should-render-a-simple-class-diagram-with-comments.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-4-should-render-a-simple-class-diagram-with-comments.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram %% this is a comment diff --git a/e2e/diagrams/class-diagram/elk/elk-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd index 4ee8ed6bae5..3f122a89f8f 100644 --- a/e2e/diagrams/class-diagram/elk/elk-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-5-1-should-render-a-simple-class-diagram-with-abstract-method-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-5-should-render-a-simple-class-diagram-with-abstract-method.mmd b/e2e/diagrams/class-diagram/dagre/dagre-5-should-render-a-simple-class-diagram-with-abstract-method.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-5-should-render-a-simple-class-diagram-with-abstract-method.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-5-should-render-a-simple-class-diagram-with-abstract-method.mmd index 8b174583a09..f0e2c5c4a03 100644 --- a/e2e/diagrams/class-diagram/elk/elk-5-should-render-a-simple-class-diagram-with-abstract-method.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-5-should-render-a-simple-class-diagram-with-abstract-method.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd index 6ecee5ac672..c06c57d0b37 100644 --- a/e2e/diagrams/class-diagram/elk/elk-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-6-1-should-render-a-simple-class-diagram-with-static-method-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-6-should-render-a-simple-class-diagram-with-static-method.mmd b/e2e/diagrams/class-diagram/dagre/dagre-6-should-render-a-simple-class-diagram-with-static-method.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-6-should-render-a-simple-class-diagram-with-static-method.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-6-should-render-a-simple-class-diagram-with-static-method.mmd index 774755eb9dd..ccd325007d8 100644 --- a/e2e/diagrams/class-diagram/elk/elk-6-should-render-a-simple-class-diagram-with-static-method.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-6-should-render-a-simple-class-diagram-with-static-method.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01 <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd index b9de19a685a..8eee9858412 100644 --- a/e2e/diagrams/class-diagram/elk/elk-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-7-1-should-render-a-simple-class-diagram-with-generic-class-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class01~T~ diff --git a/e2e/diagrams/class-diagram/elk/elk-7-should-render-a-simple-class-diagram-with-generic-class.mmd b/e2e/diagrams/class-diagram/dagre/dagre-7-should-render-a-simple-class-diagram-with-generic-class.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-7-should-render-a-simple-class-diagram-with-generic-class.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-7-should-render-a-simple-class-diagram-with-generic-class.mmd index f9f0b4010a7..ee6b341f632 100644 --- a/e2e/diagrams/class-diagram/elk/elk-7-should-render-a-simple-class-diagram-with-generic-class.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-7-should-render-a-simple-class-diagram-with-generic-class.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class01~T~ diff --git a/e2e/diagrams/class-diagram/elk/elk-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd b/e2e/diagrams/class-diagram/dagre/dagre-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd similarity index 94% rename from e2e/diagrams/class-diagram/elk/elk-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd index e52f2363dc2..53833b1fc1e 100644 --- a/e2e/diagrams/class-diagram/elk/elk-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-8-should-render-a-simple-class-diagram-with-generic-class-and-relations.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01~T~ <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-9-should-render-a-simple-class-diagram-with-clickable-link.mmd b/e2e/diagrams/class-diagram/dagre/dagre-9-should-render-a-simple-class-diagram-with-clickable-link.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-9-should-render-a-simple-class-diagram-with-clickable-link.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-9-should-render-a-simple-class-diagram-with-clickable-link.mmd index eba811152d1..18f473c0070 100644 --- a/e2e/diagrams/class-diagram/elk/elk-9-should-render-a-simple-class-diagram-with-clickable-link.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-9-should-render-a-simple-class-diagram-with-clickable-link.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Class01~T~ <|-- AveryLongClass : Cool diff --git a/e2e/diagrams/class-diagram/elk/elk-should-add-classes-namespaces.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-add-classes-namespaces.mmd similarity index 90% rename from e2e/diagrams/class-diagram/elk/elk-should-add-classes-namespaces.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-add-classes-namespaces.mmd index 09fe365f54c..52dafa4bad6 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-add-classes-namespaces.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-add-classes-namespaces.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram namespace Namespace1 { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-a-text-label-members-and-annotation.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-a-text-label-members-and-annotation.mmd similarity index 90% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-a-text-label-members-and-annotation.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-a-text-label-members-and-annotation.mmd index 08c8840ef07..57197520498 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-a-text-label-members-and-annotation.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-a-text-label-members-and-annotation.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class C1["Class 1 with text label"] { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-text-label.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-text-label.mmd similarity index 87% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-text-label.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-text-label.mmd index 3246a61990a..449f9a74fde 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-class-with-text-label.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-class-with-text-label.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class C1["Class 1 with text label"] diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-full-class-diagram-using-elk.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-full-class-diagram-using-dagre.mmd similarity index 98% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-full-class-diagram-using-elk.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-full-class-diagram-using-dagre.mmd index 038190ce2f7..fef312710ba 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-full-class-diagram-using-elk.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-full-class-diagram-using-dagre.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram note "I love this diagram! diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-namespace-with-a-custom-label.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-namespace-with-a-custom-label.mmd similarity index 93% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-namespace-with-a-custom-label.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-namespace-with-a-custom-label.mmd index f0f7bc8b261..39819f4e737 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-namespace-with-a-custom-label.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-namespace-with-a-custom-label.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram namespace Auth["Authentication Service"] { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-a-custom-theme.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-a-custom-theme.mmd similarity index 98% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-a-custom-theme.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-a-custom-theme.mmd index c17675f652d..debee91a5a4 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-a-custom-theme.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-a-custom-theme.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- %%{ init: { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdef-definitions.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdef-definitions.mmd similarity index 90% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdef-definitions.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdef-definitions.mmd index 1f11dabfde3..7b7ea11e37e 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdef-definitions.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdef-definitions.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd index 0b459238348..f8588cd744c 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class10:::pink diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd index f90089a9802..62072b5428c 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-classdefs-being-applied.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10:::pink diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd index 5bc303b88fe..d6f153fb47f 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class10 { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling.mmd index cfe96a1178a..448e870db66 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-markdown-styling.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-markdown-styling.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd similarity index 86% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd index 6a72e6f3e11..30756627d82 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-attributes-only-methods.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Duck { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd index c54f49ae261..218c6694514 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members-if-hideemptymembersbox-is-enabled.mmd @@ -4,7 +4,7 @@ config: class: htmlLabels: true hideEmptyMembersBox: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members.mmd similarity index 82% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members.mmd index 3c7586a7757..44e8dc68f65 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-members.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-members.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd index d5f5803eedb..ff3cd401060 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-no-methods-only-attributes.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Duck { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd similarity index 89% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd index 1eef670e07f..72b20d48bd3 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition-without-htmllabels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: false - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition.mmd similarity index 89% rename from e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition.mmd index 09359c913a7..571465a59fa 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-a-simple-class-diagram-with-style-definition.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-a-simple-class-diagram-with-style-definition.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-classes-with-different-text-labels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-classes-with-different-text-labels.mmd similarity index 96% rename from e2e/diagrams/class-diagram/elk/elk-should-render-classes-with-different-text-labels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-classes-with-different-text-labels.mmd index d25543cf356..0da00290c40 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-classes-with-different-text-labels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-classes-with-different-text-labels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class C1["OneWord"] diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd similarity index 88% rename from e2e/diagrams/class-diagram/elk/elk-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd index 8ca9dd69c1f..559dd03ff5e 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-classlabel-if-class-has-already-been-defined-earlier.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram Animal <|-- Duck diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-compact-mode-with-hierarchicalnamespaces-false.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-compact-mode-with-hierarchicalnamespaces-false.mmd similarity index 100% rename from e2e/diagrams/class-diagram/elk/elk-should-render-compact-mode-with-hierarchicalnamespaces-false.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-compact-mode-with-hierarchicalnamespaces-false.mmd diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-multiple-classes-with-same-text-labels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-multiple-classes-with-same-text-labels.mmd similarity index 92% rename from e2e/diagrams/class-diagram/elk/elk-should-render-multiple-classes-with-same-text-labels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-multiple-classes-with-same-text-labels.mmd index c5ab645d0d8..23aca2fff38 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-multiple-classes-with-same-text-labels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-multiple-classes-with-same-text-labels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class C1["Class with text label"] diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-nested-namespaces-with-dot-notation.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-nested-namespaces-with-dot-notation.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-should-render-nested-namespaces-with-dot-notation.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-nested-namespaces-with-dot-notation.mmd index 6f517bfe866..6174cbe2ca3 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-nested-namespaces-with-dot-notation.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-nested-namespaces-with-dot-notation.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram namespace Company.Engineering.Backend { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-syntactically-nested-namespaces.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-syntactically-nested-namespaces.mmd similarity index 95% rename from e2e/diagrams/class-diagram/elk/elk-should-render-syntactically-nested-namespaces.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-syntactically-nested-namespaces.mmd index b1c43d57eec..087a7a2e8b9 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-syntactically-nested-namespaces.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-syntactically-nested-namespaces.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram namespace Platform { diff --git a/e2e/diagrams/class-diagram/elk/elk-should-render-two-classes-with-text-labels.mmd b/e2e/diagrams/class-diagram/dagre/dagre-should-render-two-classes-with-text-labels.mmd similarity index 90% rename from e2e/diagrams/class-diagram/elk/elk-should-render-two-classes-with-text-labels.mmd rename to e2e/diagrams/class-diagram/dagre/dagre-should-render-two-classes-with-text-labels.mmd index 763e97e3b91..46498ab3a93 100644 --- a/e2e/diagrams/class-diagram/elk/elk-should-render-two-classes-with-text-labels.mmd +++ b/e2e/diagrams/class-diagram/dagre/dagre-should-render-two-classes-with-text-labels.mmd @@ -2,7 +2,7 @@ config: logLevel: 1 htmlLabels: true - layout: elk + layout: dagre --- classDiagram class C1["Class 1 with text label"] diff --git a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd similarity index 98% rename from e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd rename to e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd index 5f3ff94b1e0..8e6b5c65608 100644 --- a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd +++ b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-full-class-diagram-with-the-handdrawn-look.mmd @@ -3,7 +3,7 @@ config: logLevel: 1 htmlLabels: true look: handDrawn - layout: elk + layout: dagre --- classDiagram note "I love this diagram! diff --git a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd similarity index 98% rename from e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd rename to e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd index 11eecb13af4..209e0b95d55 100644 --- a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd +++ b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-a-custom-theme-and-the-handdrawn-look.mmd @@ -3,7 +3,7 @@ config: logLevel: 1 htmlLabels: true look: handDrawn - layout: elk + layout: dagre --- %%{ init: { diff --git a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd rename to e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd index 3f8f2223314..acdf1296a7f 100644 --- a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd +++ b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look-without-htmllabels.mmd @@ -3,7 +3,7 @@ config: logLevel: 1 htmlLabels: false look: handDrawn - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd similarity index 91% rename from e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd rename to e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd index 44946e4f219..6b7796f5094 100644 --- a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd +++ b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-styles-and-the-handdrawn-look.mmd @@ -3,7 +3,7 @@ config: logLevel: 1 htmlLabels: true look: handDrawn - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd similarity index 85% rename from e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd rename to e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd index 8e9f1df2802..fc5fc409e1e 100644 --- a/e2e/diagrams/class-diagram/elk/handdrawn/elk-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd +++ b/e2e/diagrams/class-diagram/dagre/handdrawn/dagre-should-render-a-simple-class-diagram-with-the-handdrawn-look.mmd @@ -3,7 +3,7 @@ config: logLevel: 1 htmlLabels: true look: handDrawn - layout: elk + layout: dagre --- classDiagram class Class10 diff --git a/e2e/diagrams/flowchart/elk/1433-elk-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd b/e2e/diagrams/flowchart/dagre/1433-dagre-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd similarity index 67% rename from e2e/diagrams/flowchart/elk/1433-elk-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd rename to e2e/diagrams/flowchart/dagre/1433-dagre-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd index 851d243adce..34f598856c3 100644 --- a/e2e/diagrams/flowchart/elk/1433-elk-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd +++ b/e2e/diagrams/flowchart/dagre/1433-dagre-should-render-a-titled-flowchart-with-titletopmargin-set-to-0.mmd @@ -1,7 +1,8 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- -flowchart-elk TD +flowchart TD A --> B diff --git a/e2e/diagrams/flowchart/elk/2-elk-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd b/e2e/diagrams/flowchart/dagre/2-dagre-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd similarity index 88% rename from e2e/diagrams/flowchart/elk/2-elk-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd rename to e2e/diagrams/flowchart/dagre/2-dagre-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd index be813a11834..ac1b744c09d 100644 --- a/e2e/diagrams/flowchart/elk/2-elk-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd +++ b/e2e/diagrams/flowchart/dagre/2-dagre-should-render-a-simple-flowchart-with-diagrampadding-set-to-0.mmd @@ -1,9 +1,10 @@ --- config: + layout: dagre flowchart: diagramPadding: 0 --- -flowchart-elk TD +flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} %% this is a comment diff --git a/e2e/diagrams/flowchart/elk/2050-elk-handling-of-different-rendering-direction-in-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/2050-dagre-handling-of-different-rendering-direction-in-subgraphs.mmd similarity index 90% rename from e2e/diagrams/flowchart/elk/2050-elk-handling-of-different-rendering-direction-in-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/2050-dagre-handling-of-different-rendering-direction-in-subgraphs.mmd index 0cabc8c70bd..b85aa217864 100644 --- a/e2e/diagrams/flowchart/elk/2050-elk-handling-of-different-rendering-direction-in-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/2050-dagre-handling-of-different-rendering-direction-in-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR subgraph TOP direction TB diff --git a/e2e/diagrams/flowchart/elk/2388-elk-handling-default-in-the-node-name.mmd b/e2e/diagrams/flowchart/dagre/2388-dagre-handling-default-in-the-node-name.mmd similarity index 84% rename from e2e/diagrams/flowchart/elk/2388-elk-handling-default-in-the-node-name.mmd rename to e2e/diagrams/flowchart/dagre/2388-dagre-handling-default-in-the-node-name.mmd index 821e73e89b9..2b8195ecfe2 100644 --- a/e2e/diagrams/flowchart/elk/2388-elk-handling-default-in-the-node-name.mmd +++ b/e2e/diagrams/flowchart/dagre/2388-dagre-handling-default-in-the-node-name.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR default-index.js --> dot.template.js index.js --> module-utl.js diff --git a/e2e/diagrams/flowchart/elk/2824-elk-clipping-of-edges.mmd b/e2e/diagrams/flowchart/dagre/2824-dagre-clipping-of-edges.mmd similarity index 80% rename from e2e/diagrams/flowchart/elk/2824-elk-clipping-of-edges.mmd rename to e2e/diagrams/flowchart/dagre/2824-dagre-clipping-of-edges.mmd index a1d239637cf..f6b14ebe3a7 100644 --- a/e2e/diagrams/flowchart/elk/2824-elk-clipping-of-edges.mmd +++ b/e2e/diagrams/flowchart/dagre/2824-dagre-clipping-of-edges.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD A --> B A --> C B --> C diff --git a/e2e/diagrams/flowchart/elk/3-elk-a-link-with-correct-arrowhead-to-a-subgraph.mmd b/e2e/diagrams/flowchart/dagre/3-dagre-a-link-with-correct-arrowhead-to-a-subgraph.mmd similarity index 69% rename from e2e/diagrams/flowchart/elk/3-elk-a-link-with-correct-arrowhead-to-a-subgraph.mmd rename to e2e/diagrams/flowchart/dagre/3-dagre-a-link-with-correct-arrowhead-to-a-subgraph.mmd index 2b72b1eae20..4c7a7efb612 100644 --- a/e2e/diagrams/flowchart/elk/3-elk-a-link-with-correct-arrowhead-to-a-subgraph.mmd +++ b/e2e/diagrams/flowchart/dagre/3-dagre-a-link-with-correct-arrowhead-to-a-subgraph.mmd @@ -1,4 +1,8 @@ -flowchart-elk TD +--- +config: + layout: dagre +--- +flowchart TD P1 P1 -->P1.5 subgraph P1.5 diff --git a/e2e/diagrams/flowchart/elk/4-elk-length-of-edges.mmd b/e2e/diagrams/flowchart/dagre/4-dagre-length-of-edges.mmd similarity index 76% rename from e2e/diagrams/flowchart/elk/4-elk-length-of-edges.mmd rename to e2e/diagrams/flowchart/dagre/4-dagre-length-of-edges.mmd index 4636e1efad9..dca7c70aad9 100644 --- a/e2e/diagrams/flowchart/elk/4-elk-length-of-edges.mmd +++ b/e2e/diagrams/flowchart/dagre/4-dagre-length-of-edges.mmd @@ -1,4 +1,8 @@ -flowchart-elk TD +--- +config: + layout: dagre +--- +flowchart TD L1 --- L2 L2 --- C M1 ---> C diff --git a/e2e/diagrams/flowchart/elk/5-elk-should-render-escaped-without-html-labels.mmd b/e2e/diagrams/flowchart/dagre/5-dagre-should-render-escaped-without-html-labels.mmd similarity index 78% rename from e2e/diagrams/flowchart/elk/5-elk-should-render-escaped-without-html-labels.mmd rename to e2e/diagrams/flowchart/dagre/5-dagre-should-render-escaped-without-html-labels.mmd index dd16712cdb9..ce10a715a37 100644 --- a/e2e/diagrams/flowchart/elk/5-elk-should-render-escaped-without-html-labels.mmd +++ b/e2e/diagrams/flowchart/dagre/5-dagre-should-render-escaped-without-html-labels.mmd @@ -1,8 +1,9 @@ --- config: + layout: dagre htmlLabels: false flowchart: htmlLabels: false --- -flowchart-elk TD +flowchart TD a["Haiya"]---->b diff --git a/e2e/diagrams/flowchart/elk/50-elk-handle-nested-subgraphs-in-reverse-order.mmd b/e2e/diagrams/flowchart/dagre/50-dagre-handle-nested-subgraphs-in-reverse-order.mmd similarity index 83% rename from e2e/diagrams/flowchart/elk/50-elk-handle-nested-subgraphs-in-reverse-order.mmd rename to e2e/diagrams/flowchart/dagre/50-dagre-handle-nested-subgraphs-in-reverse-order.mmd index 3ce3ec4068b..3c9a03dda84 100644 --- a/e2e/diagrams/flowchart/elk/50-elk-handle-nested-subgraphs-in-reverse-order.mmd +++ b/e2e/diagrams/flowchart/dagre/50-dagre-handle-nested-subgraphs-in-reverse-order.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR a -->b subgraph A B diff --git a/e2e/diagrams/flowchart/elk/51-elk-handle-nested-subgraphs-in-reverse-order.mmd b/e2e/diagrams/flowchart/dagre/51-dagre-handle-nested-subgraphs-in-reverse-order.mmd similarity index 83% rename from e2e/diagrams/flowchart/elk/51-elk-handle-nested-subgraphs-in-reverse-order.mmd rename to e2e/diagrams/flowchart/dagre/51-dagre-handle-nested-subgraphs-in-reverse-order.mmd index 3ce3ec4068b..3c9a03dda84 100644 --- a/e2e/diagrams/flowchart/elk/51-elk-handle-nested-subgraphs-in-reverse-order.mmd +++ b/e2e/diagrams/flowchart/dagre/51-dagre-handle-nested-subgraphs-in-reverse-order.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR a -->b subgraph A B diff --git a/e2e/diagrams/flowchart/elk/52-elk-handle-nested-subgraphs-in-several-levels.mmd b/e2e/diagrams/flowchart/dagre/52-dagre-handle-nested-subgraphs-in-several-levels.mmd similarity index 86% rename from e2e/diagrams/flowchart/elk/52-elk-handle-nested-subgraphs-in-several-levels.mmd rename to e2e/diagrams/flowchart/dagre/52-dagre-handle-nested-subgraphs-in-several-levels.mmd index 59f88ea2328..d8748b7f519 100644 --- a/e2e/diagrams/flowchart/elk/52-elk-handle-nested-subgraphs-in-several-levels.mmd +++ b/e2e/diagrams/flowchart/dagre/52-dagre-handle-nested-subgraphs-in-several-levels.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB b-->B a-->c subgraph O diff --git a/e2e/diagrams/flowchart/elk/53-elk-handle-nested-subgraphs-with-edges-in-and-out.mmd b/e2e/diagrams/flowchart/dagre/53-dagre-handle-nested-subgraphs-with-edges-in-and-out.mmd similarity index 92% rename from e2e/diagrams/flowchart/elk/53-elk-handle-nested-subgraphs-with-edges-in-and-out.mmd rename to e2e/diagrams/flowchart/dagre/53-dagre-handle-nested-subgraphs-with-edges-in-and-out.mmd index 9eeed695bb3..b1e9339231b 100644 --- a/e2e/diagrams/flowchart/elk/53-elk-handle-nested-subgraphs-with-edges-in-and-out.mmd +++ b/e2e/diagrams/flowchart/dagre/53-dagre-handle-nested-subgraphs-with-edges-in-and-out.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB internet nat router diff --git a/e2e/diagrams/flowchart/elk/54-elk-handle-nested-subgraphs-with-outgoing-links.mmd b/e2e/diagrams/flowchart/dagre/54-dagre-handle-nested-subgraphs-with-outgoing-links.mmd similarity index 88% rename from e2e/diagrams/flowchart/elk/54-elk-handle-nested-subgraphs-with-outgoing-links.mmd rename to e2e/diagrams/flowchart/dagre/54-dagre-handle-nested-subgraphs-with-outgoing-links.mmd index c459cf5b957..54eff4cdeb3 100644 --- a/e2e/diagrams/flowchart/elk/54-elk-handle-nested-subgraphs-with-outgoing-links.mmd +++ b/e2e/diagrams/flowchart/dagre/54-dagre-handle-nested-subgraphs-with-outgoing-links.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD subgraph main subgraph subcontainer subcontainer-child diff --git a/e2e/diagrams/flowchart/elk/55-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd b/e2e/diagrams/flowchart/dagre/55-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd similarity index 91% rename from e2e/diagrams/flowchart/elk/55-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd rename to e2e/diagrams/flowchart/dagre/55-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd index f6cb05c9ede..a13858b22df 100644 --- a/e2e/diagrams/flowchart/elk/55-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd +++ b/e2e/diagrams/flowchart/dagre/55-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD subgraph one[One] subgraph sub_one[Sub One] diff --git a/e2e/diagrams/flowchart/elk/56-elk-handle-nested-subgraphs-with-outgoing-links-3.mmd b/e2e/diagrams/flowchart/dagre/56-dagre-handle-nested-subgraphs-with-outgoing-links-3.mmd similarity index 90% rename from e2e/diagrams/flowchart/elk/56-elk-handle-nested-subgraphs-with-outgoing-links-3.mmd rename to e2e/diagrams/flowchart/dagre/56-dagre-handle-nested-subgraphs-with-outgoing-links-3.mmd index a3c83f8d065..699e42eecb8 100644 --- a/e2e/diagrams/flowchart/elk/56-elk-handle-nested-subgraphs-with-outgoing-links-3.mmd +++ b/e2e/diagrams/flowchart/dagre/56-dagre-handle-nested-subgraphs-with-outgoing-links-3.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB subgraph container_Beta process_C-->Process_D end diff --git a/e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd b/e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd similarity index 89% rename from e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd rename to e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd index 7662a72bb76..981da0034a8 100644 --- a/e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-2.mmd +++ b/e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-2.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB c1-->a2 subgraph one a1-->a2 diff --git a/e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-4.mmd b/e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-4.mmd similarity index 83% rename from e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-4.mmd rename to e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-4.mmd index b33308dfa47..4817b0833eb 100644 --- a/e2e/diagrams/flowchart/elk/57-elk-handle-nested-subgraphs-with-outgoing-links-4.mmd +++ b/e2e/diagrams/flowchart/dagre/57-dagre-handle-nested-subgraphs-with-outgoing-links-4.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR subgraph A a -->b end diff --git a/e2e/diagrams/flowchart/elk/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd b/e2e/diagrams/flowchart/dagre/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd similarity index 91% rename from e2e/diagrams/flowchart/elk/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd rename to e2e/diagrams/flowchart/dagre/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd index 57fc3bf60d0..8cbfd3a9ed1 100644 --- a/e2e/diagrams/flowchart/elk/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd +++ b/e2e/diagrams/flowchart/dagre/57-x-handle-nested-subgraphs-with-outgoing-links-5.mmd @@ -1,12 +1,13 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- %% this does not produce the desired result - flowchart-elk TB + flowchart TB subgraph container_Beta process_C-->Process_D end diff --git a/e2e/diagrams/flowchart/elk/58-elk-handle-styling-with-style-expressions.mmd b/e2e/diagrams/flowchart/dagre/58-dagre-handle-styling-with-style-expressions.mmd similarity index 89% rename from e2e/diagrams/flowchart/elk/58-elk-handle-styling-with-style-expressions.mmd rename to e2e/diagrams/flowchart/dagre/58-dagre-handle-styling-with-style-expressions.mmd index b14011d87e6..5197dc3a0ba 100644 --- a/e2e/diagrams/flowchart/elk/58-elk-handle-styling-with-style-expressions.mmd +++ b/e2e/diagrams/flowchart/dagre/58-dagre-handle-styling-with-style-expressions.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 diff --git a/e2e/diagrams/flowchart/elk/59-elk-handle-styling-of-subgraphs-and-links.mmd b/e2e/diagrams/flowchart/dagre/59-dagre-handle-styling-of-subgraphs-and-links.mmd similarity index 93% rename from e2e/diagrams/flowchart/elk/59-elk-handle-styling-of-subgraphs-and-links.mmd rename to e2e/diagrams/flowchart/dagre/59-dagre-handle-styling-of-subgraphs-and-links.mmd index 88204af0230..2a25a59b021 100644 --- a/e2e/diagrams/flowchart/elk/59-elk-handle-styling-of-subgraphs-and-links.mmd +++ b/e2e/diagrams/flowchart/dagre/59-dagre-handle-styling-of-subgraphs-and-links.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD A[Christmas] ==> D A[Christmas] -->|Get money| B(Go shopping) A[Christmas] ==> C diff --git a/e2e/diagrams/flowchart/elk/6-elk-should-render-non-escaped-with-html-labels.mmd b/e2e/diagrams/flowchart/dagre/6-dagre-should-render-non-escaped-with-html-labels.mmd similarity index 81% rename from e2e/diagrams/flowchart/elk/6-elk-should-render-non-escaped-with-html-labels.mmd rename to e2e/diagrams/flowchart/dagre/6-dagre-should-render-non-escaped-with-html-labels.mmd index da6c959e097..ac7492aabae 100644 --- a/e2e/diagrams/flowchart/elk/6-elk-should-render-non-escaped-with-html-labels.mmd +++ b/e2e/diagrams/flowchart/dagre/6-dagre-should-render-non-escaped-with-html-labels.mmd @@ -1,9 +1,10 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD a["Haiya"]===>b diff --git a/e2e/diagrams/flowchart/elk/60-elk-handle-styling-for-all-node-shapes-v2.mmd b/e2e/diagrams/flowchart/dagre/60-dagre-handle-styling-for-all-node-shapes-v2.mmd similarity index 97% rename from e2e/diagrams/flowchart/elk/60-elk-handle-styling-for-all-node-shapes-v2.mmd rename to e2e/diagrams/flowchart/dagre/60-dagre-handle-styling-for-all-node-shapes-v2.mmd index 88eb68ba320..e3646f8abcb 100644 --- a/e2e/diagrams/flowchart/elk/60-elk-handle-styling-for-all-node-shapes-v2.mmd +++ b/e2e/diagrams/flowchart/dagre/60-dagre-handle-styling-for-all-node-shapes-v2.mmd @@ -1,12 +1,13 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose logLevel: 2 --- -flowchart-elk LR +flowchart LR A[red text] -->|default style| B(blue text) C([red text]) -->|default style| D[[blue text]] E[(red text)] -->|default style| F((blue text)) diff --git a/e2e/diagrams/flowchart/elk/6080-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6080-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6080-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6080-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-1-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-1-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-1-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-1-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-2-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-2-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-2-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-2-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-3-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-3-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-3-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-3-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-4-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-4-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-4-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-4-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-5-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-5-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-5-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-5-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/6088-6-should-handle-diamond-shape-intersections.mmd b/e2e/diagrams/flowchart/dagre/6088-6-should-handle-diamond-shape-intersections.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6088-6-should-handle-diamond-shape-intersections.mmd rename to e2e/diagrams/flowchart/dagre/6088-6-should-handle-diamond-shape-intersections.mmd diff --git a/e2e/diagrams/flowchart/elk/61-elk-fontawesome-icons-in-edge-labels.mmd b/e2e/diagrams/flowchart/dagre/61-dagre-fontawesome-icons-in-edge-labels.mmd similarity index 81% rename from e2e/diagrams/flowchart/elk/61-elk-fontawesome-icons-in-edge-labels.mmd rename to e2e/diagrams/flowchart/dagre/61-dagre-fontawesome-icons-in-edge-labels.mmd index 25114fe0e87..6466c861d4f 100644 --- a/e2e/diagrams/flowchart/elk/61-elk-fontawesome-icons-in-edge-labels.mmd +++ b/e2e/diagrams/flowchart/dagre/61-dagre-fontawesome-icons-in-edge-labels.mmd @@ -1,9 +1,10 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TD +flowchart TD C -->|fa:fa-car Car| F[fa:fa-car Car] diff --git a/e2e/diagrams/flowchart/elk/62-elk-should-render-styled-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/62-dagre-should-render-styled-subgraphs.mmd similarity index 93% rename from e2e/diagrams/flowchart/elk/62-elk-should-render-styled-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/62-dagre-should-render-styled-subgraphs.mmd index 7994ef06793..44fdc55a9a5 100644 --- a/e2e/diagrams/flowchart/elk/62-elk-should-render-styled-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/62-dagre-should-render-styled-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB A B subgraph foo[Foo SubGraph] diff --git a/e2e/diagrams/flowchart/elk/63-elk-title-on-subgraphs-should-be-themeable.mmd b/e2e/diagrams/flowchart/dagre/63-dagre-title-on-subgraphs-should-be-themeable.mmd similarity index 90% rename from e2e/diagrams/flowchart/elk/63-elk-title-on-subgraphs-should-be-themeable.mmd rename to e2e/diagrams/flowchart/dagre/63-dagre-title-on-subgraphs-should-be-themeable.mmd index 05b7f8d2f44..36475665f78 100644 --- a/e2e/diagrams/flowchart/elk/63-elk-title-on-subgraphs-should-be-themeable.mmd +++ b/e2e/diagrams/flowchart/dagre/63-dagre-title-on-subgraphs-should-be-themeable.mmd @@ -1,12 +1,13 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% -flowchart-elk LR +flowchart LR subgraph A a --> b end diff --git a/e2e/diagrams/flowchart/elk/65-elk-text-color-from-classes.mmd b/e2e/diagrams/flowchart/dagre/65-dagre-text-color-from-classes.mmd similarity index 87% rename from e2e/diagrams/flowchart/elk/65-elk-text-color-from-classes.mmd rename to e2e/diagrams/flowchart/dagre/65-dagre-text-color-from-classes.mmd index e715fc00c5e..82ab1bb171c 100644 --- a/e2e/diagrams/flowchart/elk/65-elk-text-color-from-classes.mmd +++ b/e2e/diagrams/flowchart/dagre/65-dagre-text-color-from-classes.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart LR classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff Lorem --> Ipsum --> Dolor class Lorem,Dolor dark diff --git a/e2e/diagrams/flowchart/elk/66-elk-more-nested-subgraph-cases-tb.mmd b/e2e/diagrams/flowchart/dagre/66-dagre-more-nested-subgraph-cases-tb.mmd similarity index 85% rename from e2e/diagrams/flowchart/elk/66-elk-more-nested-subgraph-cases-tb.mmd rename to e2e/diagrams/flowchart/dagre/66-dagre-more-nested-subgraph-cases-tb.mmd index 30ddb1d6dee..a5c70a228c4 100644 --- a/e2e/diagrams/flowchart/elk/66-elk-more-nested-subgraph-cases-tb.mmd +++ b/e2e/diagrams/flowchart/dagre/66-dagre-more-nested-subgraph-cases-tb.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB subgraph two b1 end diff --git a/e2e/diagrams/flowchart/elk/6647-elk-should-keep-node-order-when-using-elk-layout-unless-it-would-add-crossings.mmd b/e2e/diagrams/flowchart/dagre/6647-dagre-should-keep-node-order-when-using-dagre-layout-unless-it-would-add-crossings.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/6647-elk-should-keep-node-order-when-using-elk-layout-unless-it-would-add-crossings.mmd rename to e2e/diagrams/flowchart/dagre/6647-dagre-should-keep-node-order-when-using-dagre-layout-unless-it-would-add-crossings.mmd diff --git a/e2e/diagrams/flowchart/elk/69-elk-more-nested-subgraph-cases-lr.mmd b/e2e/diagrams/flowchart/dagre/67-dagre-more-nested-subgraph-cases-rl.mmd similarity index 85% rename from e2e/diagrams/flowchart/elk/69-elk-more-nested-subgraph-cases-lr.mmd rename to e2e/diagrams/flowchart/dagre/67-dagre-more-nested-subgraph-cases-rl.mmd index 2ac1a05c62e..696b12543ad 100644 --- a/e2e/diagrams/flowchart/elk/69-elk-more-nested-subgraph-cases-lr.mmd +++ b/e2e/diagrams/flowchart/dagre/67-dagre-more-nested-subgraph-cases-rl.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk LR +flowchart RL subgraph two b1 end diff --git a/e2e/diagrams/flowchart/elk/67-elk-more-nested-subgraph-cases-rl.mmd b/e2e/diagrams/flowchart/dagre/68-dagre-more-nested-subgraph-cases-bt.mmd similarity index 85% rename from e2e/diagrams/flowchart/elk/67-elk-more-nested-subgraph-cases-rl.mmd rename to e2e/diagrams/flowchart/dagre/68-dagre-more-nested-subgraph-cases-bt.mmd index d97ae2ca02f..722e13eb74b 100644 --- a/e2e/diagrams/flowchart/elk/67-elk-more-nested-subgraph-cases-rl.mmd +++ b/e2e/diagrams/flowchart/dagre/68-dagre-more-nested-subgraph-cases-bt.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk RL +flowchart BT subgraph two b1 end diff --git a/e2e/diagrams/flowchart/elk/68-elk-more-nested-subgraph-cases-bt.mmd b/e2e/diagrams/flowchart/dagre/69-dagre-more-nested-subgraph-cases-lr.mmd similarity index 85% rename from e2e/diagrams/flowchart/elk/68-elk-more-nested-subgraph-cases-bt.mmd rename to e2e/diagrams/flowchart/dagre/69-dagre-more-nested-subgraph-cases-lr.mmd index efa3d8da3c7..b1636579625 100644 --- a/e2e/diagrams/flowchart/elk/68-elk-more-nested-subgraph-cases-bt.mmd +++ b/e2e/diagrams/flowchart/dagre/69-dagre-more-nested-subgraph-cases-lr.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk BT +flowchart LR subgraph two b1 end diff --git a/e2e/diagrams/flowchart/elk/70-elk-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/70-dagre-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd similarity index 86% rename from e2e/diagrams/flowchart/elk/70-elk-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/70-dagre-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd index 927cdfcc9b6..a650cc723b5 100644 --- a/e2e/diagrams/flowchart/elk/70-elk-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/70-dagre-handle-nested-subgraph-cases-tb-link-out-and-link-between-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB subgraph S1 sub1 -->sub2 end diff --git a/e2e/diagrams/flowchart/elk/71-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/71-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd similarity index 86% rename from e2e/diagrams/flowchart/elk/71-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/71-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd index 67d6bc4d080..da78088b7f8 100644 --- a/e2e/diagrams/flowchart/elk/71-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/71-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk RL +flowchart RL subgraph S1 sub1 -->sub2 end diff --git a/e2e/diagrams/flowchart/elk/72-elk-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/72-dagre-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd similarity index 86% rename from e2e/diagrams/flowchart/elk/72-elk-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/72-dagre-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd index d28bdc9ca81..a8391c670ab 100644 --- a/e2e/diagrams/flowchart/elk/72-elk-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/72-dagre-handle-nested-subgraph-cases-bt-link-out-and-link-between-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk BT +flowchart BT subgraph S1 sub1 -->sub2 end diff --git a/e2e/diagrams/flowchart/elk/7213-should-render-elk-edges-with-right-angles-not-curves.mmd b/e2e/diagrams/flowchart/dagre/7213-should-render-dagre-edges-with-right-angles-not-curves.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/7213-should-render-elk-edges-with-right-angles-not-curves.mmd rename to e2e/diagrams/flowchart/dagre/7213-should-render-dagre-edges-with-right-angles-not-curves.mmd diff --git a/e2e/diagrams/flowchart/elk/74-elk-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd b/e2e/diagrams/flowchart/dagre/74-dagre-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd similarity index 83% rename from e2e/diagrams/flowchart/elk/74-elk-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd rename to e2e/diagrams/flowchart/dagre/74-dagre-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd index 8e6f7bda192..1d8b0eaab0f 100644 --- a/e2e/diagrams/flowchart/elk/74-elk-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd +++ b/e2e/diagrams/flowchart/dagre/74-dagre-handle-labels-for-multiple-edges-from-and-to-the-same-couple-of-nodes.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk RL +flowchart RL subgraph one a1 -- l1 --> a2 a1 -- l2 --> a2 diff --git a/e2e/diagrams/flowchart/elk/74-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd b/e2e/diagrams/flowchart/dagre/74-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd similarity index 86% rename from e2e/diagrams/flowchart/elk/74-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd rename to e2e/diagrams/flowchart/dagre/74-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd index 67d6bc4d080..da78088b7f8 100644 --- a/e2e/diagrams/flowchart/elk/74-elk-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd +++ b/e2e/diagrams/flowchart/dagre/74-dagre-handle-nested-subgraph-cases-rl-link-out-and-link-between-subgraphs.mmd @@ -1,11 +1,12 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk RL +flowchart RL subgraph S1 sub1 -->sub2 end diff --git a/e2e/diagrams/flowchart/elk/76-elk-handle-unicode-encoded-character-with-html-labels-true.mmd b/e2e/diagrams/flowchart/dagre/76-dagre-handle-unicode-encoded-character-with-html-labels-true.mmd similarity index 90% rename from e2e/diagrams/flowchart/elk/76-elk-handle-unicode-encoded-character-with-html-labels-true.mmd rename to e2e/diagrams/flowchart/dagre/76-dagre-handle-unicode-encoded-character-with-html-labels-true.mmd index acd1f2c73d7..7e01dc85320 100644 --- a/e2e/diagrams/flowchart/elk/76-elk-handle-unicode-encoded-character-with-html-labels-true.mmd +++ b/e2e/diagrams/flowchart/dagre/76-dagre-handle-unicode-encoded-character-with-html-labels-true.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre htmlLabels: true flowchart: htmlLabels: true securityLevel: loose --- -flowchart-elk TB +flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}} diff --git a/e2e/diagrams/flowchart/elk/elk-recursive-flow-with-elk-keepentrynodeontop-false-keeps-the-default-layout-7827.mmd b/e2e/diagrams/flowchart/dagre/dagre-recursive-flow-with-dagre-keepentrynodeontop-false-keeps-the-default-layout-7827.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/elk-recursive-flow-with-elk-keepentrynodeontop-false-keeps-the-default-layout-7827.mmd rename to e2e/diagrams/flowchart/dagre/dagre-recursive-flow-with-dagre-keepentrynodeontop-false-keeps-the-default-layout-7827.mmd diff --git a/e2e/diagrams/flowchart/elk/elk-should-keep-the-entry-node-on-top-of-a-recursive-flow-nested-in-a-subgraph-with-elk-keepentrynodeontop-true-7827.mmd b/e2e/diagrams/flowchart/dagre/dagre-should-keep-the-entry-node-on-top-of-a-recursive-flow-nested-in-a-subgraph-with-dagre-keepentrynodeontop-true-7827.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/elk-should-keep-the-entry-node-on-top-of-a-recursive-flow-nested-in-a-subgraph-with-elk-keepentrynodeontop-true-7827.mmd rename to e2e/diagrams/flowchart/dagre/dagre-should-keep-the-entry-node-on-top-of-a-recursive-flow-nested-in-a-subgraph-with-dagre-keepentrynodeontop-true-7827.mmd diff --git a/e2e/diagrams/flowchart/elk/elk-should-keep-the-entry-node-on-top-when-a-flow-recurses-with-elk-keepentrynodeontop-true-7827.mmd b/e2e/diagrams/flowchart/dagre/dagre-should-keep-the-entry-node-on-top-when-a-flow-recurses-with-dagre-keepentrynodeontop-true-7827.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/elk-should-keep-the-entry-node-on-top-when-a-flow-recurses-with-elk-keepentrynodeontop-true-7827.mmd rename to e2e/diagrams/flowchart/dagre/dagre-should-keep-the-entry-node-on-top-when-a-flow-recurses-with-dagre-keepentrynodeontop-true-7827.mmd diff --git a/e2e/diagrams/flowchart/elk/elk-should-keep-the-true-entry-on-top-when-a-back-edge-feeds-it-79.mmd b/e2e/diagrams/flowchart/dagre/dagre-should-keep-the-true-entry-on-top-when-a-back-edge-feeds-it-79.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/elk-should-keep-the-true-entry-on-top-when-a-back-edge-feeds-it-79.mmd rename to e2e/diagrams/flowchart/dagre/dagre-should-keep-the-true-entry-on-top-when-a-back-edge-feeds-it-79.mmd diff --git a/e2e/diagrams/flowchart/elk/elk-should-merge-edges-within-subgraphs-when-elk-mergeedges-is-true-7659.mmd b/e2e/diagrams/flowchart/dagre/dagre-should-merge-edges-within-subgraphs-when-dagre-mergeedges-is-true-7659.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/elk-should-merge-edges-within-subgraphs-when-elk-mergeedges-is-true-7659.mmd rename to e2e/diagrams/flowchart/dagre/dagre-should-merge-edges-within-subgraphs-when-dagre-mergeedges-is-true-7659.mmd diff --git a/e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label-2.mmd b/e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label-2.mmd similarity index 85% rename from e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label-2.mmd rename to e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label-2.mmd index 1e651ab631b..d778466048b 100644 --- a/e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label-2.mmd +++ b/e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label-2.mmd @@ -1,9 +1,10 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": false}} }%% -flowchart-elk LR +flowchart LR b("`The dog in **the** hog.(1) NL`") --"`1o **bold**`"--> c diff --git a/e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label.mmd b/e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label.mmd similarity index 84% rename from e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label.mmd rename to e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label.mmd index 3ebd0ba48af..1887675d92d 100644 --- a/e2e/diagrams/flowchart/elk/new-line-in-node-and-formatted-edge-label.mmd +++ b/e2e/diagrams/flowchart/dagre/new-line-in-node-and-formatted-edge-label.mmd @@ -1,9 +1,10 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": true}} }%% -flowchart-elk LR +flowchart LR b("`The dog in **the** hog.(1) NL`") --"`1o **bold**`"--> c diff --git a/e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings-2.mmd b/e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings-2.mmd similarity index 91% rename from e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings-2.mmd rename to e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings-2.mmd index 167acbe8240..573292bc316 100644 --- a/e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings-2.mmd +++ b/e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings-2.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": false}} }%% -flowchart-elk LR +flowchart LR subgraph "One" a("`The **cat** in the hat`") -- "1o" --> b{{"`The **dog** in the hog`"}} diff --git a/e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings.mmd b/e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings.mmd similarity index 91% rename from e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings.mmd rename to e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings.mmd index 0c813d6c94e..cb82c556dee 100644 --- a/e2e/diagrams/flowchart/elk/sub-graphs-and-markdown-strings.mmd +++ b/e2e/diagrams/flowchart/dagre/sub-graphs-and-markdown-strings.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": true}} }%% -flowchart-elk LR +flowchart LR subgraph "One" a("`The **cat** in the hat`") -- "1o" --> b{{"`The **dog** in the hog`"}} diff --git a/e2e/diagrams/flowchart/elk/sub-graphs.mmd b/e2e/diagrams/flowchart/dagre/sub-graphs.mmd similarity index 100% rename from e2e/diagrams/flowchart/elk/sub-graphs.mmd rename to e2e/diagrams/flowchart/dagre/sub-graphs.mmd diff --git a/e2e/diagrams/flowchart/elk/v2-elk-16-render-stadium-shape.mmd b/e2e/diagrams/flowchart/dagre/v2-dagre-16-render-stadium-shape.mmd similarity index 94% rename from e2e/diagrams/flowchart/elk/v2-elk-16-render-stadium-shape.mmd rename to e2e/diagrams/flowchart/dagre/v2-dagre-16-render-stadium-shape.mmd index 21c32b60b22..6d4cb9ae69a 100644 --- a/e2e/diagrams/flowchart/elk/v2-elk-16-render-stadium-shape.mmd +++ b/e2e/diagrams/flowchart/dagre/v2-dagre-16-render-stadium-shape.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: htmlLabels: false fontFamily: courier --- -flowchart-elk TD +flowchart TD A([stadium shape test]) A -->|Get money| B([Go shopping]) B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]) diff --git a/e2e/diagrams/flowchart/elk/with-formatting-in-a-node-2.mmd b/e2e/diagrams/flowchart/dagre/with-formatting-in-a-node-2.mmd similarity index 89% rename from e2e/diagrams/flowchart/elk/with-formatting-in-a-node-2.mmd rename to e2e/diagrams/flowchart/dagre/with-formatting-in-a-node-2.mmd index b0b6a46148a..043042a89c1 100644 --- a/e2e/diagrams/flowchart/elk/with-formatting-in-a-node-2.mmd +++ b/e2e/diagrams/flowchart/dagre/with-formatting-in-a-node-2.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": false}} }%% -flowchart-elk LR +flowchart LR a{"`The **cat** in the hat`"} -- 1o --> b a -- 2o --> c a -- 3o --> d diff --git a/e2e/diagrams/flowchart/elk/with-formatting-in-a-node.mmd b/e2e/diagrams/flowchart/dagre/with-formatting-in-a-node.mmd similarity index 89% rename from e2e/diagrams/flowchart/elk/with-formatting-in-a-node.mmd rename to e2e/diagrams/flowchart/dagre/with-formatting-in-a-node.mmd index b0e6d701981..1552abae161 100644 --- a/e2e/diagrams/flowchart/elk/with-formatting-in-a-node.mmd +++ b/e2e/diagrams/flowchart/dagre/with-formatting-in-a-node.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": true}} }%% -flowchart-elk LR +flowchart LR a{"`The **cat** in the hat`"} -- 1o --> b a -- 2o --> c a -- 3o --> d diff --git a/e2e/diagrams/flowchart/elk/with-styling-and-classes-2.mmd b/e2e/diagrams/flowchart/dagre/with-styling-and-classes-2.mmd similarity index 92% rename from e2e/diagrams/flowchart/elk/with-styling-and-classes-2.mmd rename to e2e/diagrams/flowchart/dagre/with-styling-and-classes-2.mmd index 094bb6c3990..8763cc648ff 100644 --- a/e2e/diagrams/flowchart/elk/with-styling-and-classes-2.mmd +++ b/e2e/diagrams/flowchart/dagre/with-styling-and-classes-2.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": false}} }%% -flowchart-elk LR +flowchart LR A:::someclass --> B["`The **cat** in the hat`"]:::someclass id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px diff --git a/e2e/diagrams/flowchart/elk/with-styling-and-classes.mmd b/e2e/diagrams/flowchart/dagre/with-styling-and-classes.mmd similarity index 92% rename from e2e/diagrams/flowchart/elk/with-styling-and-classes.mmd rename to e2e/diagrams/flowchart/dagre/with-styling-and-classes.mmd index 6bc5d6766b7..7eb973cecae 100644 --- a/e2e/diagrams/flowchart/elk/with-styling-and-classes.mmd +++ b/e2e/diagrams/flowchart/dagre/with-styling-and-classes.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": true}} }%% -flowchart-elk LR +flowchart LR A:::someclass --> B["`The **cat** in the hat`"]:::someclass id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px diff --git a/e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line-2.mmd b/e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line-2.mmd similarity index 94% rename from e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line-2.mmd rename to e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line-2.mmd index afba7852987..f4c36f1803d 100644 --- a/e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line-2.mmd +++ b/e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line-2.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": false}} }%% -flowchart-elk LR +flowchart LR b("`The dog in **the** hog.(1).. a a a a *very long text* about it Word! diff --git a/e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line.mmd b/e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line.mmd similarity index 94% rename from e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line.mmd rename to e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line.mmd index 03a0f775ff3..410958a64ae 100644 --- a/e2e/diagrams/flowchart/elk/wrapping-long-text-with-a-new-line.mmd +++ b/e2e/diagrams/flowchart/dagre/wrapping-long-text-with-a-new-line.mmd @@ -1,10 +1,11 @@ --- config: + layout: dagre flowchart: titleTopMargin: 0 --- %%{init: {"flowchart": {"htmlLabels": true}} }%% -flowchart-elk LR +flowchart LR b("`The dog in **the** hog.(1).. a a a a *very long text* about it Word! diff --git a/e2e/diagrams/state-diagram-v2/composite-with-a-loop-starts-on-its-start-state.mmd b/e2e/diagrams/state-diagram-v2/composite-with-a-loop-starts-on-its-start-state.mmd new file mode 100644 index 00000000000..78295e6660f --- /dev/null +++ b/e2e/diagrams/state-diagram-v2/composite-with-a-loop-starts-on-its-start-state.mmd @@ -0,0 +1,13 @@ +--- +config: + layout: elk +--- +stateDiagram-v2 +state apa { + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +} diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-06-flowchart-elk-ogdc-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-06-flowchart-dagre-ogdc-tb-subgraphs.mmd similarity index 100% rename from e2e/platform/dev-diagrams/knsv/knsv2-06-flowchart-elk-ogdc-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-06-flowchart-dagre-ogdc-tb-subgraphs.mmd diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-elk-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-dagre-tb-subgraphs.mmd similarity index 93% rename from e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-elk-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-dagre-tb-subgraphs.mmd index b6f02ddf946..4bb6aab88bf 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-elk-tb-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-07-flowchart-dagre-tb-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart TB diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-elk-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-dagre-tb-subgraphs.mmd similarity index 94% rename from e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-elk-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-dagre-tb-subgraphs.mmd index 87a2f1aef34..59867636b0f 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-elk-tb-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-08-flowchart-dagre-tb-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart TB subgraph container_Beta diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-elk-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-dagre-tb-subgraphs.mmd similarity index 87% rename from e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-elk-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-dagre-tb-subgraphs.mmd index 8d14d46cc3d..d0dacc3871a 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-elk-tb-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-09-flowchart-dagre-tb-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart TB subgraph container_Beta diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-elk-elk-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-dagre-tb-subgraphs.mmd similarity index 85% rename from e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-elk-elk-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-dagre-tb-subgraphs.mmd index 06a7b460573..a52b216ad80 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-elk-elk-tb-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-12-flowchart-dagre-tb-subgraphs.mmd @@ -1,8 +1,8 @@ --- config: - layout: elk + layout: dagre --- -flowchart-elk TB +flowchart TB internet nat router diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-elk-elk-tb-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-dagre-tb-subgraphs.mmd similarity index 89% rename from e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-elk-elk-tb-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-dagre-tb-subgraphs.mmd index 606693b8bcc..d984fb88a5b 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-elk-elk-tb-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-13-flowchart-dagre-tb-subgraphs.mmd @@ -1,8 +1,8 @@ --- config: - layout: elk + layout: dagre --- -flowchart-elk TB +flowchart TB internet nat router diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-elk-tb.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-dagre-tb.mmd similarity index 59% rename from e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-elk-tb.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-dagre-tb.mmd index 2249935c407..e8280d7f770 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-elk-tb.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-14-flowchart-dagre-tb.mmd @@ -1,11 +1,6 @@ --- config: - layout: elk - elk: - mergeEdges: false - forceNodeModelOrder: false - considerModelOrder: NONE - + layout: dagre --- flowchart TB a --> a1 & a2 & a3 & a4 diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-elk-lr-shapes.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-dagre-lr-shapes.mmd similarity index 92% rename from e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-elk-lr-shapes.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-dagre-lr-shapes.mmd index 29f7cd389ff..a4dcbf8c0b9 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-elk-lr-shapes.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-15-flowchart-dagre-lr-shapes.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre flowchart: curve: rounded --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-elk-lr-shapes.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-dagre-lr-shapes.mmd similarity index 90% rename from e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-elk-lr-shapes.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-dagre-lr-shapes.mmd index e23d22ac244..28f94bfcc30 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-elk-lr-shapes.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-17-flowchart-dagre-lr-shapes.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre flowchart: curve: linear --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-elk-lr-shapes.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-dagre-lr-shapes.mmd similarity index 91% rename from e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-elk-lr-shapes.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-dagre-lr-shapes.mmd index 23a9b5c27fc..45231cec227 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-elk-lr-shapes.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-18-flowchart-dagre-lr-shapes.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre flowchart: curve: linear --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-elk-lr-shapes.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-dagre-lr-shapes.mmd similarity index 92% rename from e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-elk-lr-shapes.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-dagre-lr-shapes.mmd index e6d41e7033a..2a8fab707c4 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-elk-lr-shapes.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-19-flowchart-dagre-lr-shapes.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre flowchart: curve: rounded --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-elk-lr-shapes-node-placement.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-dagre-lr-shapes-node-placement.mmd similarity index 75% rename from e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-elk-lr-shapes-node-placement.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-dagre-lr-shapes-node-placement.mmd index c23268cecb3..245c60c9366 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-elk-lr-shapes-node-placement.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-20-flowchart-dagre-lr-shapes-node-placement.mmd @@ -1,10 +1,8 @@ --- config: - layout: elk + layout: dagre flowchart: curve: rounded - elk: - nodePlacementStrategy: NETWORK_SIMPLEX --- flowchart LR D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"] diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-elk-lr-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-dagre-lr-subgraphs.mmd similarity index 87% rename from e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-elk-lr-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-dagre-lr-subgraphs.mmd index d7739b6927a..200396197d7 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-elk-lr-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-21-flowchart-dagre-lr-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-elk-lr.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-dagre-lr.mmd similarity index 88% rename from e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-elk-lr.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-dagre-lr.mmd index 291a7a56bbd..8002d412345 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-elk-lr.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-22-flowchart-dagre-lr.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre flowchart: //curve: linear --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-elk-lr-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-dagre-lr-subgraphs.mmd similarity index 93% rename from e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-elk-lr-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-dagre-lr-subgraphs.mmd index c870b87c31d..a7127f241ad 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-elk-lr-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-23-flowchart-dagre-lr-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre theme: default look: classic --- diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-elk-lr-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-dagre-lr-subgraphs.mmd similarity index 95% rename from e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-elk-lr-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-dagre-lr-subgraphs.mmd index cb98091eb35..58c09cf9e50 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-elk-lr-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-24-flowchart-dagre-lr-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR a diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-elk-lr.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-dagre-lr.mmd similarity index 89% rename from e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-elk-lr.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-dagre-lr.mmd index dc3b9fe11c3..7944ef51a12 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-elk-lr.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-25-flowchart-dagre-lr.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR a diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-elk-lr-shapes-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-dagre-lr-shapes-subgraphs.mmd similarity index 98% rename from e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-elk-lr-shapes-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-dagre-lr-shapes-subgraphs.mmd index 4b863e0dcc1..93da06e964f 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-elk-lr-shapes-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-26-flowchart-dagre-lr-shapes-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR subgraph s1["Untitled subgraph"] diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-elk-lr-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-dagre-lr-subgraphs.mmd similarity index 89% rename from e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-elk-lr-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-dagre-lr-subgraphs.mmd index 52cb1a3b213..fbdc39cf6a5 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-elk-lr-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-27-flowchart-dagre-lr-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR subgraph s1["Untitled subgraph"] diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-elk-lr.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-dagre-lr.mmd similarity index 75% rename from e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-elk-lr.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-dagre-lr.mmd index 1b7772b15fe..7de249bb655 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-elk-lr.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-28-flowchart-dagre-lr.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR A{A} --> B & C diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-elk-lr-subgraphs.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-dagre-lr-subgraphs.mmd similarity index 84% rename from e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-elk-lr-subgraphs.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-dagre-lr-subgraphs.mmd index 5dffd4758c5..29076afb0b1 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-elk-lr-subgraphs.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-29-flowchart-dagre-lr-subgraphs.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR A{A} --> B & C diff --git a/e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-elk-lr-shapes.mmd b/e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-dagre-lr-shapes.mmd similarity index 94% rename from e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-elk-lr-shapes.mmd rename to e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-dagre-lr-shapes.mmd index 9d7b8beba87..4d00c269db9 100644 --- a/e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-elk-lr-shapes.mmd +++ b/e2e/platform/dev-diagrams/knsv/knsv2-30-flowchart-dagre-lr-shapes.mmd @@ -1,6 +1,6 @@ --- config: - layout: elk + layout: dagre --- flowchart LR n2@{ shape: rect} diff --git a/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/elk-legacy-preset-regression.mmd b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/elk-legacy-preset-regression.mmd new file mode 100644 index 00000000000..d27c9b8da2e --- /dev/null +++ b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/elk-legacy-preset-regression.mmd @@ -0,0 +1,87 @@ +--- +config: + theme: redux-color + look: neo + flowchart: + wrappingWidth: 125 + layout: elk + elk: + preset: legacy +--- +flowchart LR + org["GitHub org: Mermaid Chart"] + subgraph product["Product experience"] + app["mermaid-chart-app\nMain web application"] + editor["editor\nDiagram creation and editing"] + ai["ai-assistant\nPrompting, generation, repair, editing"] + visual["visual-editor\nCanvas and visual diagram controls"] + end + subgraph core["Core diagram engine"] + mermaidjs["mermaid-js / mermaid\nOpen-source rendering engine"] + renderer["renderer-service\nServer-side diagram rendering"] + parser["diagram-parser\nSyntax validation and transformation"] + end + subgraph collaboration["Collaboration and accounts"] + auth["auth-service\nLogin, SSO, workspace access"] + teams["workspace-service\nTeams, permissions, org settings"] + comments["comments-service\nFeedback and review flows"] + sharing["sharing-service\nLinks, embeds, exports"] + end + subgraph content["Content and growth"] + marketing["marketing-site\nNew public website"] + docs["docs\nProduct docs and Mermaid syntax guides"] + templates["templates\nDiagram examples and starter content"] + blog["blog-content\nLaunches, guides, SEO content"] + end + subgraph integrations["Integrations"] + github["github-integration\nRepo, PR, and markdown workflows"] + slack["slack-integration\nSharing and notifications"] + jira["jira-integration\nIssue and workflow diagrams"] + api["public-api\nExternal diagram generation API"] + end + subgraph platform["Platform and infrastructure"] + design["design-system\nUI components, tokens, icons"] + analytics["analytics-pipeline\nProduct usage and funnel events"] + billing["billing-service\nPlans, seats, invoices"] + infra["infrastructure\nIaC, CI/CD, environments"] + end + org --> product + org --> core + org --> collaboration + org --> content + org --> integrations + org --> platform + app --> editor + app --> visual + app --> ai + editor --> mermaidjs + visual --> parser + ai --> parser + renderer --> mermaidjs + sharing --> renderer + docs --> mermaidjs + marketing --> templates + app --> auth + app --> teams + app --> billing + app --> analytics + github --> publicapi["public-api"] + slack --> sharing + jira --> templates + design --> app + design --> marketing + infra --> app + infra --> renderer + infra --> auth + classDef org fill:#111827,color:#ffffff,stroke:#111827 + classDef group fill:#f9fafb,stroke:#d1d5db,color:#111827 + classDef repo fill:#ffffff,stroke:#6b7280,color:#111827 + class org org + class app,editor,ai,visual,mermaidjs,renderer,parser,auth,teams,comments,sharing,marketing,docs,templates,blog,github,slack,jira,api,design,analytics,billing,infra,publicapi repo + style org fill:#111827,color:#ffffff,stroke:#111827 + style product fill:#eeeefb,stroke:#d1d5db,color:#111827 + style core fill:#eeeefb,stroke:#d1d5db,color:#111827 + style collaboration fill:#eeeefb,stroke:#d1d5db,color:#111827 + style content fill:#eeeefb,stroke:#d1d5db,color:#111827 + style integrations fill:#eeeefb,stroke:#d1d5db,color:#111827 + style platform fill:#eeeefb,stroke:#d1d5db,color:#111827 diff --git a/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/oldShapes.mmd b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/oldShapes.mmd new file mode 100644 index 00000000000..c3530e6a8f3 --- /dev/null +++ b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/oldShapes.mmd @@ -0,0 +1,4 @@ +flowchart LR + C["Text block"]@{ shape: text } + D["Lined rectangle"]@{ shape: fork } + C --> D diff --git a/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram-handdrawn.mmd b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram-handdrawn.mmd new file mode 100644 index 00000000000..2294eed046a --- /dev/null +++ b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram-handdrawn.mmd @@ -0,0 +1,13 @@ +--- +config: + layout: elk + theme: redux-color + look: handDrawn +--- + erDiagram + subgraph customers + CUSTOMER + ORDER + end + + CUSTOMER ||--o{ ORDER : places diff --git a/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram.mmd b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram.mmd new file mode 100644 index 00000000000..d9757420ead --- /dev/null +++ b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/should-render-a-simple-ER-diagram.mmd @@ -0,0 +1,12 @@ +--- +config: + layout: elk + theme: redux-color +--- + erDiagram + subgraph customers + CUSTOMER + ORDER + end + + CUSTOMER ||--o{ ORDER : places diff --git a/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/state-diagram.mmd b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/state-diagram.mmd new file mode 100644 index 00000000000..a47a836535b --- /dev/null +++ b/e2e/platform/dev-diagrams/tmp-v12.0.0-faulty-diags/state-diagram.mmd @@ -0,0 +1,26 @@ +--- +config: + fontFamily: courier +--- +stateDiagram-v2 + [*]-->TV + + state TV { + [*] --> Off: Off to start with + On --> Off : Turn off + Off --> On : Turn on + } + + TV--> Console + + state Console { + [*] --> Off2: Off to start with + On2--> Off2 : Turn off + Off2 --> On2 : Turn on + On2-->Playing + + state Playing { + Alive --> Dead + Dead-->Alive + } + } \ No newline at end of file diff --git a/e2e/platform/viewer.js b/e2e/platform/viewer.js index 5910fdb49d8..341a8f90f95 100644 --- a/e2e/platform/viewer.js +++ b/e2e/platform/viewer.js @@ -1,5 +1,4 @@ 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'; @@ -90,7 +89,10 @@ const contentLoaded = async function () { await mermaid.registerExternalDiagrams([externalExample, zenUml]); - mermaid.registerLayoutLoaders(layouts); + // ELK is bundled with mermaid and registered automatically. Registering the + // standalone package here would override that with a second, self-contained + // copy, so the suite would be exercising the plugin build rather than the + // layout users actually get. mermaid.registerLayoutLoaders(tidyTree); mermaid.initialize(graphObj.mermaid); /** diff --git a/e2e/rendering/class/classDiagram-elk-v3.spec.js b/e2e/rendering/class/classDiagram-elk-v3.spec.js index 94b8a0b9bed..e9cb9c6ea09 100644 --- a/e2e/rendering/class/classDiagram-elk-v3.spec.js +++ b/e2e/rendering/class/classDiagram-elk-v3.spec.js @@ -1,7 +1,7 @@ import { test } from '@playwright/test'; import { imgSnapshotTest } from '../../helpers/util.ts'; -test.describe('Class diagram V3 ELK', () => { +test.describe('Class diagram V3 Dagre', () => { test('ELK-3: should render multiple class diagrams', async ({ page }, testInfo) => { await imgSnapshotTest( page, @@ -52,7 +52,7 @@ test.describe('Class diagram V3 ELK', () => { } `, ], - { logLevel: 1, htmlLabels: true, layout: 'elk' } + { logLevel: 1, htmlLabels: true, layout: 'dagre' } ); }); }); diff --git a/e2e/rendering/flowchart/flowchart-elk.spec.js b/e2e/rendering/flowchart/flowchart-dagre.spec.js similarity index 82% rename from e2e/rendering/flowchart/flowchart-elk.spec.js rename to e2e/rendering/flowchart/flowchart-dagre.spec.js index 506bf6a6e3f..8f16e7c1dc4 100644 --- a/e2e/rendering/flowchart/flowchart-elk.spec.js +++ b/e2e/rendering/flowchart/flowchart-dagre.spec.js @@ -1,19 +1,19 @@ import { test, expect } from '@playwright/test'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; -test.describe('Flowchart ELK', () => { - test('1-elk: should render a simple flowchart', async ({ page }, testInfo) => { +test.describe('Flowchart Dagre', () => { + test('1-dagre: should render a simple flowchart', async ({ page }, testInfo) => { await imgSnapshotTest( page, testInfo, - `flowchart-elk TD + `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] `, - {} + { flowchart: { defaultRenderer: 'dagre' } } ); await imgSnapshotTest( page, @@ -25,24 +25,24 @@ test.describe('Flowchart ELK', () => { C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] `, - { flowchart: { defaultRenderer: 'elk' } } + { flowchart: { defaultRenderer: 'dagre' } } ); }); - test('7-elk: should render a flowchart when useMaxWidth is true (default)', async ({ + test('7-dagre: should render a flowchart when useMaxWidth is true (default)', async ({ page, }, testInfo) => { await renderGraph( page, testInfo, - `flowchart-elk TD + `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] `, - { flowchart: { useMaxWidth: true } } + { flowchart: { useMaxWidth: true, defaultRenderer: 'dagre' } } ); const svg = page.locator('svg'); await expect(svg).toHaveAttribute('width', '100%'); @@ -58,18 +58,20 @@ test.describe('Flowchart ELK', () => { expect(viewBoxWidth).toBeGreaterThan(0); expect(maxWidthValue).toBeCloseTo(viewBoxWidth, 1); }); - test('8-elk: should render a flowchart when useMaxWidth is false', async ({ page }, testInfo) => { + test('8-dagre: should render a flowchart when useMaxWidth is false', async ({ + page, + }, testInfo) => { await renderGraph( page, testInfo, - `flowchart-elk TD + `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] `, - { flowchart: { useMaxWidth: false } } + { flowchart: { useMaxWidth: false, defaultRenderer: 'dagre' } } ); const svg = page.locator('svg'); const width = parseFloat((await svg.getAttribute('width')) ?? '0'); @@ -82,14 +84,14 @@ test.describe('Flowchart ELK', () => { await expect(svg).not.toHaveAttribute('style'); }); - test('elk: should include classes on the edges', async ({ page }, testInfo) => { + test('dagre: should include classes on the edges', async ({ page }, testInfo) => { await renderGraph( page, testInfo, - `flowchart-elk TD + `flowchart TD A --> B --> C --> D `, - {} + { flowchart: { defaultRenderer: 'dagre' } } ); await page.locator('svg').evaluate((svg) => { const edges = svg.querySelectorAll('.edges > path'); @@ -114,7 +116,7 @@ test.describe('Title and arrow styling #4813', () => { flowchart LR A-->B A-->C`, - { layout: 'elk' } + { flowchart: { defaultRenderer: 'dagre' } } ); const titleText = await page.locator('svg text').first().textContent(); expect(titleText).toContain(titleString); @@ -130,7 +132,7 @@ test.describe('Title and arrow styling #4813', () => { B-.-oC C==xD D ~~~ A`, - { layout: 'elk' } + { flowchart: { defaultRenderer: 'dagre' } } ); await page.locator('svg').evaluate((svg) => { const edges = svg.querySelectorAll('.edges path'); diff --git a/packages/mermaid-layout-elk/README.md b/packages/mermaid-layout-elk/README.md index eec287263a7..8f9bc7b977b 100644 --- a/packages/mermaid-layout-elk/README.md +++ b/packages/mermaid-layout-elk/README.md @@ -1,42 +1,36 @@ # @mermaid-js/layout-elk -This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine. - -> [!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. - -## Usage - -``` -flowchart-elk TD - A --> B - A --> C -``` - -``` ---- -config: - layout: elk ---- - -flowchart TD - A --> B - A --> C +The [ELK](https://www.eclipse.org/elk/) layout engine for Mermaid. + +> [!IMPORTANT] +> **Most projects no longer need this package.** ELK is bundled with `mermaid` +> and registered automatically, and it is the default layout — a plain +> `flowchart` is laid out with ELK without any configuration. +> +> This package exists for Mermaid builds that ship without ELK, which today +> means the **tiny** build (`mermaid.tiny.js`). There, registering it is the +> only way to get an ELK layout. + +## Do I need it? + +| Using | Need this package? | +| --------------------------------------- | --------------------------------------- | +| `mermaid` (any normal build, incl. CDN) | No — ELK is built in and is the default | +| `mermaid.tiny.js` | Yes, if you want ELK | + +If you are on a normal build, delete the dependency and the registration call: + +```diff + import mermaid from 'mermaid'; +- import elkLayouts from '@mermaid-js/layout-elk'; +- +- mermaid.registerLayoutLoaders(elkLayouts); ``` -``` ---- -config: - layout: elk.stress ---- - -flowchart TD - A --> B - A --> C -``` +Registering it anyway is harmless — it re-registers the same layouts — but it +loads a second copy of the layout code for no benefit. -### With bundlers +## Usage ```sh npm install @mermaid-js/layout-elk @@ -62,11 +56,26 @@ mermaid.registerLayoutLoaders(elkLayouts); ## Supported layouts -- `elk`: The default layout, which is `elk.layered`. -- `elk.layered`: Layered layout -- `elk.stress`: Stress layout -- `elk.force`: Force layout -- `elk.mrtree`: Multi-root tree layout -- `elk.sporeOverlap`: Spore overlap layout +- `elk` — the default, which is `elk.layered` +- `elk.stress` — stress layout +- `elk.force` — force layout +- `elk.mrtree` — multi-root tree layout +- `elk.sporeOverlap` — spore overlap layout +- `elk.box` — box packing +- `elk.rectpacking` — rectangle packing + +``` +--- +config: + layout: elk.stress +--- + +flowchart TD + A --> B + A --> C +``` + +A single container can also select its own algorithm with `@{ algorithm: … }`, +which additionally accepts `elk.layered` and `elk.radial`. diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index 304cb5fa4e7..06a252d90c4 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,14 +1,14 @@ { "name": "@mermaid-js/layout-elk", "version": "0.2.3", - "description": "ELK layout engine for mermaid", + "description": "ELK layout engine for mermaid builds that do not bundle it (e.g. mermaid.tiny.js)", "module": "dist/mermaid-layout-elk.core.mjs", - "types": "dist/layouts.d.ts", + "types": "./types.d.ts", "type": "module", "exports": { ".": { "import": "./dist/mermaid-layout-elk.core.mjs", - "types": "./dist/layouts.d.ts" + "types": "./types.d.ts" }, "./*": "./*" }, @@ -30,10 +30,6 @@ "Sidharth Vinod" ], "license": "MIT", - "dependencies": { - "d3": "^7.9.0", - "elkjs": "^0.9.3" - }, "devDependencies": { "@types/d3": "^7.4.3", "mermaid": "workspace:^" @@ -42,6 +38,15 @@ "mermaid": "^11.0.2" }, "files": [ - "dist" - ] + "dist", + "types.d.ts" + ], + "dependencies": { + "d3": "^7.9.0", + "dagre-d3-es": "7.0.14", + "dayjs": "^1.11.21", + "dompurify": "^3.4.12", + "elkjs": "^0.9.3", + "katex": "^0.16.47" + } } diff --git a/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts b/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts deleted file mode 100644 index db94f42c94f..00000000000 --- a/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface TreeData { - parentById: Record; - childrenById: Record; -} -export declare const findCommonAncestor: ( - id1: string, - id2: string, - { parentById }: TreeData -) => string; diff --git a/packages/mermaid-layout-elk/src/layouts.ts b/packages/mermaid-layout-elk/src/layouts.ts deleted file mode 100644 index ab687990d9f..00000000000 --- a/packages/mermaid-layout-elk/src/layouts.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { LayoutLoaderDefinition } from 'mermaid'; - -const loader = async () => await import(`./render.js`); -const algos = [ - 'elk.stress', - 'elk.force', - 'elk.mrtree', - 'elk.sporeOverlap', - 'elk.box', - 'elk.rectpacking', -]; - -const layouts: LayoutLoaderDefinition[] = [ - { - name: 'elk', - loader, - algorithm: 'elk.layered', - }, - ...algos.map((algo) => ({ - name: algo, - loader, - algorithm: algo, - })), -]; - -export default layouts; diff --git a/packages/mermaid-layout-elk/types.d.ts b/packages/mermaid-layout-elk/types.d.ts new file mode 100644 index 00000000000..3528a8c5093 --- /dev/null +++ b/packages/mermaid-layout-elk/types.d.ts @@ -0,0 +1,12 @@ +import type { LayoutLoaderDefinition } from 'mermaid'; + +/** + * ELK layouts for Mermaid builds that do not bundle ELK, notably + * `mermaid.tiny.js`. Pass to `mermaid.registerLayoutLoaders`. + * + * Hand-written rather than generated: this package's implementation lives in + * mermaid itself (`rendering-util/layout-algorithms/elk/plugin.ts`), so there + * is no local source for `tsc` to emit declarations from. + */ +declare const layouts: LayoutLoaderDefinition[]; +export default layouts; diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 5e48c6afd75..aa6f9193f0f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -82,6 +82,7 @@ "dagre-d3-es": "7.0.14", "dayjs": "^1.11.21", "dompurify": "^3.4.12", + "elkjs": "^0.9.3", "es-toolkit": "^1.45.1", "katex": "^0.16.47", "khroma": "^2.1.0", diff --git a/packages/mermaid/src/config.appearance.spec.ts b/packages/mermaid/src/config.appearance.spec.ts index 0dcf6fb96d8..166177968d7 100644 --- a/packages/mermaid/src/config.appearance.spec.ts +++ b/packages/mermaid/src/config.appearance.spec.ts @@ -98,9 +98,9 @@ describe('per-diagram appearance defaults', () => { expect(pie.themeVariables.primaryColor).toBe(theme.default.getThemeVariables().primaryColor); }); - it('leaves the layout on dagre except where a diagram type names its own', async () => { - expect((await configFor(REDESIGNED_DIAGRAMS.class)).layout).toBe('dagre'); - expect((await configFor(UNCHANGED_DIAGRAMS.pie)).layout).toBe('dagre'); + it('leaves the layout on elk except where a diagram type names its own', async () => { + expect((await configFor(REDESIGNED_DIAGRAMS.class)).layout).toBe('elk'); + expect((await configFor(UNCHANGED_DIAGRAMS.pie)).layout).toBe('elk'); // The one type that names its own -- see `swimlanesDiagram.spec.ts`. expect((await configFor(REDESIGNED_DIAGRAMS.swimlane)).layout).toBe('swimlane'); }); @@ -138,9 +138,9 @@ describe('per-diagram appearance defaults', () => { }); it('opts a diagram type into a layout', async () => { - mermaidAPI.initialize({ er: { layout: 'elk' } }); - expect((await configFor(REDESIGNED_DIAGRAMS.er)).layout).toBe('elk'); - expect((await configFor(REDESIGNED_DIAGRAMS.class)).layout).toBe('dagre'); + mermaidAPI.initialize({ er: { layout: 'dagre' } }); + expect((await configFor(REDESIGNED_DIAGRAMS.er)).layout).toBe('dagre'); + expect((await configFor(REDESIGNED_DIAGRAMS.class)).layout).toBe('elk'); }); }); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 35e5234c5a4..8c7942983a9 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -97,6 +97,9 @@ export interface MermaidConfig { /** * Defines which layout algorithm to use for rendering the diagram. * + * Defaults to `elk`, which is bundled with mermaid. The `tiny` build omits + * ELK to stay small and falls back to `dagre`. + * */ layout?: string; /** @@ -1173,6 +1176,11 @@ export interface StateDiagramConfig extends BaseDiagramConfig { * */ look?: 'classic' | 'handDrawn' | 'neo'; + /** + * Defines which layout algorithm to use for rendering the diagram. + * + */ + layout?: string; /** * Margin top for the text over the diagram */ diff --git a/packages/mermaid/src/diagrams/er/erRenderer-unified.ts b/packages/mermaid/src/diagrams/er/erRenderer-unified.ts index 0807f230950..17b80c4ecb3 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer-unified.ts +++ b/packages/mermaid/src/diagrams/er/erRenderer-unified.ts @@ -41,10 +41,12 @@ export const draw = async function (text: string, id: string, _version: string, } data4Layout.diagramId = id; await render(data4Layout, svg); - // Elk layout algorithm displays markers above nodes, so move edges to top so they are "painted" over by the nodes. - if (data4Layout.layoutAlgorithm === 'elk') { - svg.select('.edges').lower(); - } + // Note: the layout render inserts the edge group between the cluster and node + // groups (clusters < edges < nodes in paint order), so edge markers are + // covered by the nodes they touch while edges still paint above cluster + // backgrounds. The old external ELK renderer painted edges above nodes and + // needed `svg.select('.edges').lower()` here — that call must not come back: + // lowering the edge group drops edges below cluster backgrounds. // Sets the background nodes to the same position as their original counterparts. // Background nodes are created when the look is handDrawn so the ER diagram markers do not show underneath. diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-elk-default.spec.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-elk-default.spec.ts new file mode 100644 index 00000000000..14ee39de1d6 --- /dev/null +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-elk-default.spec.ts @@ -0,0 +1,74 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import * as configApi from '../../config.js'; +import type * as RenderModule from '../../rendering-util/render.js'; +import type * as UtilsModule from '../../utils.js'; + +// Deliberately does NOT mock `getRegisteredLayoutAlgorithm`: the point of this +// spec is the real resolution of the default `layout` config through the real +// loader registry, so it would be meaningless against a stub. +const renderMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined)); + +vi.mock('../../rendering-util/render.js', async (importOriginal) => ({ + ...(await importOriginal()), + render: renderMock, +})); + +vi.mock('../../rendering-util/insertElementsForSize.js', () => ({ + getDiagramElement: vi.fn().mockReturnValue({ + attr: vi.fn().mockReturnThis(), + select: vi.fn().mockReturnThis(), + node: vi.fn().mockReturnValue(null), + }), +})); + +vi.mock('../../rendering-util/setupViewPortForSVG.js', () => ({ + setupViewPortForSVG: vi.fn(), +})); + +// Partial: the real `render.js` pulls in `internals.ts`, which needs the rest of +// utils; only `insertTitle` is stubbed because it would touch the fake svg. +vi.mock('../../utils.js', async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + default: { ...actual.default, insertTitle: vi.fn() }, + }; +}); + +const drawFlowchart = async () => { + const { draw } = await import('./flowRenderer-v3-unified.js'); + const diag = { + type: 'flowchart-v2', + db: { + setDiagramId: vi.fn(), + getData: vi.fn().mockReturnValue({ nodes: [], edges: [], config: { flowchart: {} } }), + getDirection: vi.fn().mockReturnValue('TB'), + getDiagramTitle: vi.fn().mockReturnValue(''), + }, + }; + await draw('graph TB; A', 'test-id', '1.0.0', diag); + return renderMock.mock.calls.at(-1)![0] as { layoutAlgorithm: string }; +}; + +describe('flowchart default layout', () => { + beforeEach(() => { + renderMock.mockClear(); + configApi.reset(); + configApi.setSiteConfig({}); + configApi.saveConfigFromInitialize({}); + }); + + it('lays out with elk when nothing was configured', async () => { + expect((await drawFlowchart()).layoutAlgorithm).toBe('elk'); + }); + + it('still honours an explicit dagre', async () => { + configApi.addDirective({ layout: 'dagre' }); + expect((await drawFlowchart()).layoutAlgorithm).toBe('dagre'); + }); + + it('still honours an explicit elk algorithm variant', async () => { + configApi.addDirective({ layout: 'elk.mrtree' }); + expect((await drawFlowchart()).layoutAlgorithm).toBe('elk.mrtree'); + }); +}); diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts index 5f923be5164..df376218f59 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts @@ -33,11 +33,6 @@ export const draw = async function (text: string, id: string, _version: string, data4Layout.type = diag.type; data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout); - if (data4Layout.layoutAlgorithm === 'dagre' && layout === 'elk') { - log.warn( - 'flowchart-elk was moved to an external package in Mermaid v11. Please refer [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0) for more details. This diagram will be rendered using `dagre` layout as a fallback.' - ); - } data4Layout.direction = direction; data4Layout.nodeSpacing = conf?.nodeSpacing || 50; data4Layout.rankSpacing = conf?.rankSpacing || 50; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapLayout.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmapLayout.spec.ts new file mode 100644 index 00000000000..094ddc33a4a --- /dev/null +++ b/packages/mermaid/src/diagrams/mindmap/mindmapLayout.spec.ts @@ -0,0 +1,37 @@ +import { describe, expect, it, beforeEach } from 'vitest'; +import * as configApi from '../../config.js'; +import { MindmapDB } from './mindmapDb.js'; + +/** + * Mindmap picks `cose-bilkent` for itself when the user has not asked for a + * layout, which `mindmapDb.getData()` decides. ELK is now the global default, + * so without these the diagram would quietly start laying out with ELK. + */ +describe('mindmap layout selection', () => { + beforeEach(() => { + configApi.reset(); + configApi.setSiteConfig({}); + configApi.saveConfigFromInitialize({}); + }); + + const resolvedLayout = () => { + const db = new MindmapDB(); + db.getMindmap = () => null; + return db.getData().config.layout; + }; + + it('uses cose-bilkent when no layout was requested, despite the elk default', () => { + expect(configApi.getConfig().layout).toBe('elk'); + expect(resolvedLayout()).toBe('cose-bilkent'); + }); + + it('honours a layout the diagram explicitly asks for', () => { + configApi.addDirective({ layout: 'elk' }); + expect(resolvedLayout()).toBe('elk'); + }); + + it('honours an explicit dagre', () => { + configApi.addDirective({ layout: 'dagre' }); + expect(resolvedLayout()).toBe('dagre'); + }); +}); diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.ts b/packages/mermaid/src/diagrams/state/dataFetcher.ts index d35ec952742..707710986e7 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.ts +++ b/packages/mermaid/src/diagrams/state/dataFetcher.ts @@ -389,8 +389,14 @@ export const dataFetcher = ( cssCompiledStyles: [], id: itemId + NOTE_ID + '-' + graphItemCount, domId: stateDomId(itemId, graphItemCount, NOTE), - type: newNode.type, - isGroup: newNode.type === 'group', + // A note is a leaf: it is placed inside the note group below, alongside + // the state it annotates. Inheriting `type`/`isGroup` from that state + // marked the note as a container when annotating a composite state, + // and the renderer then looked for a `note` *cluster* shape, which does + // not exist. dagre only reads `isGroup` for edge hints so it survived; + // the shared paint path uses it to decide cluster-ness and threw. + type: 'node', + isGroup: false, padding: config.flowchart?.padding, look, position: parsedItem.note.position, diff --git a/packages/mermaid/src/diagrams/state/stateNoteNode.spec.js b/packages/mermaid/src/diagrams/state/stateNoteNode.spec.js new file mode 100644 index 00000000000..98c9b861752 --- /dev/null +++ b/packages/mermaid/src/diagrams/state/stateNoteNode.spec.js @@ -0,0 +1,45 @@ +import stateDiagram, { parser } from './parser/stateDiagram.jison'; +import { StateDB } from './stateDb.js'; + +/** + * A note is a leaf placed inside a note group, never a container. It used to + * inherit `type`/`isGroup` from the state it annotates, so annotating a + * composite state marked the note as a group. The shared paint path then looked + * for a `note` *cluster* shape, which does not exist, and the whole diagram + * failed to render. dagre only reads `isGroup` for edge hints, so this stayed + * hidden until ELK became the default for state diagrams. + */ +describe('state diagram note nodes', function () { + const src = ` + stateDiagram-v2 + state Composite { + A --> B + } + note right of Composite : hello + `; + + /** @type {StateDB} */ + let stateDb; + let nodes; + + beforeEach(function () { + stateDb = new StateDB(2); + parser.yy = stateDb; + stateDiagram.parser.yy = stateDb; + stateDiagram.parser.yy.clear(); + parser.parse(src); + nodes = stateDb.getData().nodes; + }); + + it('does not mark a note on a composite state as a group', function () { + const note = nodes.find((n) => n.shape === 'note'); + expect(note, 'a note node should be produced').toBeDefined(); + expect(note.isGroup).toBe(false); + }); + + it('still produces the note group that contains the note', function () { + const noteGroup = nodes.find((n) => n.shape === 'noteGroup'); + expect(noteGroup, 'a noteGroup should still wrap the note').toBeDefined(); + expect(noteGroup.isGroup).toBe(true); + }); +}); diff --git a/packages/mermaid/src/diagrams/swimlanes/swimlanesDiagram.spec.ts b/packages/mermaid/src/diagrams/swimlanes/swimlanesDiagram.spec.ts index 697ade39795..f097557ef45 100644 --- a/packages/mermaid/src/diagrams/swimlanes/swimlanesDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/swimlanes/swimlanesDiagram.spec.ts @@ -43,7 +43,7 @@ describe('swimlanesDiagram', () => { }); it('leaves plain flowcharts on the global default layout', async () => { - expect(await layoutFor(FLOWCHART)).toBe('dagre'); + expect(await layoutFor(FLOWCHART)).toBe('elk'); }); it('keeps an explicit global layout override', async () => { diff --git a/packages/mermaid/src/diagrams/usecase/usecase.docs.spec.ts b/packages/mermaid/src/diagrams/usecase/usecase.docs.spec.ts index 8c047aec319..dc9885f8e37 100644 --- a/packages/mermaid/src/diagrams/usecase/usecase.docs.spec.ts +++ b/packages/mermaid/src/diagrams/usecase/usecase.docs.spec.ts @@ -46,8 +46,9 @@ describe('usecase public documentation examples', () => { } }, // Renders every example on the page in one test, so the cost grows with the page and the - // default 5s was already marginal on CI. Generous rather than tuned: the point is that - // adding an example to the docs must not turn into a timeout here. + // default 5s was already marginal on CI — and ELK as the default layout does considerably + // more work than dagre, plus a one-off cost to load elkjs. Generous rather than tuned: the + // point is that adding an example to the docs must not turn into a timeout here. 60_000 ); }); diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 24dbc39355c..9af7887e95a 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -1,11 +1,9 @@ import mermaid, { type MermaidConfig } from 'mermaid'; import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs'; import tidyTreeLayout from '../../../../../mermaid-layout-tidy-tree/dist/mermaid-layout-tidy-tree.core.mjs'; -import layouts from '../../../../../mermaid-layout-elk/dist/mermaid-layout-elk.core.mjs'; const init = Promise.all([ mermaid.registerExternalDiagrams([zenuml]), - mermaid.registerLayoutLoaders(layouts), mermaid.registerLayoutLoaders(tidyTreeLayout), ]); mermaid.registerIconPacks([ diff --git a/packages/mermaid/src/docs/config/layouts.md b/packages/mermaid/src/docs/config/layouts.md index 56f5072f661..afbc9657a22 100644 --- a/packages/mermaid/src/docs/config/layouts.md +++ b/packages/mermaid/src/docs/config/layouts.md @@ -4,19 +4,27 @@ 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 +- **elk** (default): [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/). Bundled with Mermaid; no setup required. Specific ELK algorithms can be selected as `elk.stress`, `elk.force`, `elk.mrtree`, `elk.sporeOverlap`, `elk.box`, and `elk.rectpacking`. - **dagre**: Dagre layout for layered graphs +- **cose-bilkent**: Cose Bilkent layout for force-directed graphs +- **tidy-tree**: Tidy tree layout for hierarchical diagrams, from the [`@mermaid-js/layout-tidy-tree`](https://www.npmjs.com/package/@mermaid-js/layout-tidy-tree) package [Tidy Tree Configuration](/config/tidy-tree) + +Mindmaps are the one diagram type not laid out with ELK by default; they use +cose-bilkent unless you ask for something else. + +The **tiny** build omits ELK to stay small, and falls back to Dagre for +diagrams that request it. ## How to Use -You can specify the layout in your diagram's YAML config or initialization options. For example: +Since `elk` is the default, a diagram needs no configuration to use it. To pick +a different layout, set it in your diagram's YAML config or initialization +options. For example: ```mermaid --- config: - layout: elk + layout: dagre --- graph TD; A-->B; diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md index d8ef91c6aba..553823b75f2 100644 --- a/packages/mermaid/src/docs/intro/syntax-reference.md +++ b/packages/mermaid/src/docs/intro/syntax-reference.md @@ -96,7 +96,7 @@ An application of using Directives to change [Themes](../config/theming.md). `Th ### Layout and look -We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types. +We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowchart, state, class, entity relationship, requirement, use case, and agentflow diagrams**, with plans to extend support to all diagram types. Mindmaps are the exception: they keep their own `cose-bilkent` layout unless a layout is explicitly set (the tiny build, which ships neither ELK nor cose-bilkent, falls back to Dagre). ### Selecting Diagram Looks @@ -132,8 +132,12 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y #### Supported Layout Algorithms: -- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. -- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. +- ELK (default): The ELK (Eclipse Layout Kernel) layout offers more sophisticated layout capabilities, especially for large or intricate diagrams, producing a more optimized arrangement with fewer overlaps. It is bundled with Mermaid and needs no setup. +- Dagre: The classic layout algorithm used by Mermaid for a long time. It provides a good balance of simplicity and visual clarity, and remains available with `layout: dagre`. + +> **Note** +> The `mermaid` **tiny** build omits ELK to stay small. Diagrams asking for an +> ELK layout there fall back to Dagre. #### How to Select a Layout Algorithm: @@ -211,4 +215,13 @@ B -->|Option 2| D[Path 2] These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow. -When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk. +When integrating Mermaid, you can include look and layout configuration with the initialize call: + +```js +mermaid.initialize({ look: 'handDrawn', layout: 'elk' }); +``` + +ELK ships with Mermaid, so no separate package or registration is needed — the +`@mermaid-js/layout-elk` dependency and its `registerLayoutLoaders` call can be +removed. That package is still published for builds that omit ELK, which today +means the **tiny** build. diff --git a/packages/mermaid/src/docs/syntax/agentflow.md b/packages/mermaid/src/docs/syntax/agentflow.md index 5b5314f3eee..851cd623a5e 100644 --- a/packages/mermaid/src/docs/syntax/agentflow.md +++ b/packages/mermaid/src/docs/syntax/agentflow.md @@ -248,13 +248,13 @@ fetch@{ Mermaid itself acts on a small, fixed set of keys: -| Key | Applies to | Effect | -| ------------------------------- | ---------- | ---------------------------------------------------------- | -| `shape` | nodes | Selects the node shape (see the table above) | -| `label`, `labelType` | nodes | Overrides the node's label and how it is parsed | -| `view` | containers | `collapsed` folds the container down to a summary node | -| `algorithm` | containers | Per-container ELK algorithm, with `@mermaid-js/layout-elk` | -| `curve`, `animate`, `animation` | edges | Edge interpolation and animation | +| Key | Applies to | Effect | +| ------------------------------- | ---------- | ------------------------------------------------------ | +| `shape` | nodes | Selects the node shape (see the table above) | +| `label`, `labelType` | nodes | Overrides the node's label and how it is parsed | +| `view` | containers | `collapsed` folds the container down to a summary node | +| `algorithm` | containers | Per-container ELK algorithm | +| `curve`, `animate`, `animation` | edges | Edge interpolation and animation | Everything else is carried through untouched and surfaced to consumers, so the vocabulary below is a convention rather than a closed list — an unknown key is preserved, never rejected. @@ -346,7 +346,7 @@ agentflow diagram uses the standard node, edge, and cluster theme variables. ### Layout -Agentflow renders through the unified renderer, so it works with any registered layout engine. With `@mermaid-js/layout-elk` installed, an individual container can also select its own ELK algorithm: +Agentflow renders through the unified renderer, so it works with any registered layout engine. ELK is the default, and an individual container can also select its own ELK algorithm: ```mermaid --- diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index adc78241b6b..f0519dd6949 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -615,14 +615,14 @@ erDiagram ### Layout -The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre. +The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is the ELK (Eclipse Layout Kernel) layout, which suits larger and more-complex diagrams. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout). -For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout). +To use the classic Dagre layout instead, set it in your YAML frontmatter's `config`: ```yaml --- config: - layout: elk + layout: dagre --- ``` @@ -632,7 +632,7 @@ Your Mermaid code should be similar to the following: --- title: Order example config: - layout: elk + layout: dagre --- erDiagram CUSTOMER ||--o{ ORDER : places @@ -640,8 +640,4 @@ erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -```note -Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. -``` - diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 6a09cee2dc7..32015cecf2d 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1457,22 +1457,20 @@ flowchart LR ### Renderer -The layout of the diagram is done with the renderer. The default renderer is dagre. +The layout of the diagram is done with the layout algorithm. The default is +[ELK](https://www.eclipse.org/elk/), which handles larger and more complex +diagrams well and is bundled with Mermaid. -Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. - -The _elk_ renderer is an experimental feature. -You can change the renderer to elk by adding this directive: +To use the classic Dagre layout instead: ``` config: - flowchart: - defaultRenderer: "elk" + layout: dagre ``` -```note -Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. -``` +The older `flowchart.defaultRenderer: "elk"` directive and the `flowchart-elk` +diagram type still work, but are no longer needed — they predate `layout` and +selected a renderer that is now the default. ### Width diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts index 9738c83310c..85c3c08d3ea 100644 --- a/packages/mermaid/src/docs/vite.config.ts +++ b/packages/mermaid/src/docs/vite.config.ts @@ -77,7 +77,11 @@ export default defineConfig({ ], resolve: { alias: { - mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build + // Deliberately not the minified build: esbuild's syntax minification + // leaves the ELK chunk in a form that `es-module-lexer`, which Vite uses + // for import analysis, fails to lex. VitePress minifies its own output + // anyway, so feeding it a pre-minified bundle bought nothing. + mermaid: path.join(__dirname, '../../dist/mermaid.esm.mjs'), // Use this one to build '@mermaid-js/mermaid-example-diagram': path.join( __dirname, '../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs' diff --git a/packages/mermaid/src/rendering-util/createGraph.spec.ts b/packages/mermaid/src/rendering-util/createGraph.spec.ts index b8f21ce420d..9d080a68c8d 100644 --- a/packages/mermaid/src/rendering-util/createGraph.spec.ts +++ b/packages/mermaid/src/rendering-util/createGraph.spec.ts @@ -23,6 +23,14 @@ const labelHelper = vi.hoisted(() => vi.mock('./rendering-elements/shapes/util.js', () => ({ labelHelper })); +const insertNode = vi.hoisted(() => + vi.fn((_parent: unknown, _node: unknown, _renderOptions: { dir?: string }) => + Promise.resolve({ node: () => null }) + ) +); + +vi.mock('./rendering-elements/nodes.js', () => ({ insertNode })); + const { createGraphWithElements } = await import('./createGraph.js'); const { select } = await import('d3'); @@ -73,3 +81,62 @@ describe('createGraphWithElements — cluster label measurement', () => { expect(labelHelper.mock.calls[0][1].width).toBeUndefined(); }); }); + +/** + * Direction-sensitive shapes (fork/join bars) must know the flow direction to + * orient themselves perpendicular to it. The dagre path passes each subgraph's + * rankdir during its recursive render; this generic path resolves the same + * information from the node, its ancestor groups, or the diagram direction. + */ +describe('createGraphWithElements — node direction resolution', () => { + const data = (nodes: object[], direction?: string) => + ({ + nodes, + edges: [], + config: {}, + direction, + type: 'flowchart-v2', + }) as never; + + jsdomIt('falls back to the diagram-level direction', async ({ svg }) => { + insertNode.mockClear(); + await createGraphWithElements(select(svg.node()!) as never, data([{ id: 'a' }], 'LR')); + + expect(insertNode).toHaveBeenCalledTimes(1); + expect(insertNode.mock.calls[0][2].dir).toBe('LR'); + }); + + jsdomIt('prefers the node’s own dir over the diagram direction', async ({ svg }) => { + insertNode.mockClear(); + await createGraphWithElements( + select(svg.node()!) as never, + data([{ id: 'a', dir: 'RL' }], 'TB') + ); + + expect(insertNode.mock.calls[0][2].dir).toBe('RL'); + }); + + jsdomIt('inherits the nearest ancestor group’s dir', async ({ svg }) => { + insertNode.mockClear(); + await createGraphWithElements( + select(svg.node()!) as never, + data( + [ + { id: 'grp', isGroup: true, dir: 'LR', label: '', labelType: 'text' }, + { id: 'a', parentId: 'grp' }, + ], + 'TB' + ) + ); + + expect(insertNode).toHaveBeenCalledTimes(1); + expect(insertNode.mock.calls[0][2].dir).toBe('LR'); + }); + + jsdomIt('leaves dir undefined when nothing declares one', async ({ svg }) => { + insertNode.mockClear(); + await createGraphWithElements(select(svg.node()!) as never, data([{ id: 'a' }])); + + expect(insertNode.mock.calls[0][2].dir).toBeUndefined(); + }); +}); diff --git a/packages/mermaid/src/rendering-util/createGraph.ts b/packages/mermaid/src/rendering-util/createGraph.ts index 519fd40f314..0717bb4f2ac 100644 --- a/packages/mermaid/src/rendering-util/createGraph.ts +++ b/packages/mermaid/src/rendering-util/createGraph.ts @@ -92,6 +92,34 @@ export interface CreateGraphOptions { unwrapGroupLabels?: boolean; } +/** + * Resolves the flow direction that applies to a node: the `dir` of the nearest + * ancestor group that declares one (a subgraph or composite state with its own + * direction), falling back to the diagram-level direction. Direction-sensitive + * shapes (e.g. fork/join bars, which must run perpendicular to the flow) rely + * on this — the dagre path gets the same information via each subgraph's + * `rankdir` during its recursive render. + */ +function resolveNodeDir( + node: NonClusterNode, + nodeById: Map, + diagramDir?: string +): string | undefined { + let current: LayoutData['nodes'][number] | undefined = node; + const seen = new Set(); + while (current) { + if (current.dir) { + return current.dir; + } + if (!current.parentId || seen.has(current.parentId)) { + break; + } + seen.add(current.parentId); + current = nodeById.get(current.parentId); + } + return diagramDir; +} + export async function createGraphWithElements( element: D3Selection, data4Layout: LayoutData, @@ -118,6 +146,8 @@ export async function createGraphWithElements( const { edgeLabels, nodes: nodesGroup } = groups; const nodeElements = new Map>(); + const nodeById = new Map(data4Layout.nodes.map((node) => [node.id, node])); + const diagramDir = (data4Layout as { direction?: string }).direction; // When the container element is detached (no real DOM — e.g. headless unit // tests that exercise the layout engine without rendering), `insertNode` @@ -146,7 +176,7 @@ export async function createGraphWithElements( if (hasDom) { const childNodeEl = await insertMeasuredNode(nodesGroup, node, { config, - dir: node.dir, + dir: resolveNodeDir(node, nodeById, diagramDir), }); nodeElements.set(node.id, childNodeEl); } diff --git a/packages/mermaid-layout-elk/src/elkOptionCatalogue.spec.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/elkOptionCatalogue.spec.ts similarity index 96% rename from packages/mermaid-layout-elk/src/elkOptionCatalogue.spec.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/elkOptionCatalogue.spec.ts index 9e398fe5bd8..a4d979d252e 100644 --- a/packages/mermaid-layout-elk/src/elkOptionCatalogue.spec.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/elkOptionCatalogue.spec.ts @@ -4,7 +4,7 @@ import { PLACEMENT_OPTIONS, ROOT_EXPERIMENT_OVERRIDES, SUBGRAPH_EXPERIMENT_OVERRIDES, -} from './elkOptionCatalogue.js'; +} from '../elkOptionCatalogue.js'; /** * Every catalogue block is merged last over the shipping layout options, so an diff --git a/packages/mermaid-layout-elk/src/__tests__/geometry.spec.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/geometry.spec.ts similarity index 100% rename from packages/mermaid-layout-elk/src/__tests__/geometry.spec.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/geometry.spec.ts diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/hostConfigSync.spec.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/hostConfigSync.spec.ts new file mode 100644 index 00000000000..d252fcd2482 --- /dev/null +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/hostConfigSync.spec.ts @@ -0,0 +1,78 @@ +import { describe, expect, it, vi, beforeEach } from 'vitest'; +import type * as DiagramApi from '../../../../diagram-api/diagramAPI.js'; + +// Mocked so the assertion is about the CALL, not the resulting value. Compiled +// into mermaid, the host's config module and this one are the same module, so a +// value-level assertion would pass whether or not the sync runs — the whole +// point of `syncHostConfig` is the standalone `@mermaid-js/layout-elk` bundle, +// where they are two copies, and that duplication cannot be reproduced +// in-process. Asserting the call is what actually pins the behaviour. +const setConfigMock = vi.hoisted(() => vi.fn()); +vi.mock('../../../../diagram-api/diagramAPI.js', async (importOriginal) => ({ + ...(await importOriginal()), + setConfig: setConfigMock, +})); + +const { prepareLayoutForElk } = await import('../render.js'); + +const log = { + debug: () => undefined, + error: () => undefined, + info: () => undefined, + warn: () => undefined, +}; + +// No secure keys (`securityLevel`, `maxTextSize`, ...) in this fixture: the +// real `setConfig` sanitizes them away, so asserting one here would document a +// propagation that does not happen (the mock skips `sanitize()`). +const HOST_CONFIG = { + htmlLabels: false, + arrowMarkerAbsolute: true, + flowchart: { wrappingWidth: 200 }, + curve: undefined, +}; + +const contextWithHostConfig = { + helpers: { + common: { lineBreakRegex: //gi }, + getConfig: () => HOST_CONFIG, + interpolateToCurve: (curve: unknown) => curve, + log, + }, + options: { algorithm: 'elk.layered' }, +} as any; + +describe('prepareLayoutForElk host config sync', () => { + beforeEach(() => { + setConfigMock.mockReset(); + }); + + it("pushes the host's config into this bundle's config module", () => { + // Without this, the plugin bundle reads schema defaults: a host setting + // `htmlLabels: false` as hardening still gets HTML labels, and markers are + // painted without `arrowMarkerAbsolute`. + prepareLayoutForElk({ nodes: [], edges: [] } as any, contextWithHostConfig); + + expect(setConfigMock).toHaveBeenCalledWith(HOST_CONFIG); + }); + + it('syncs before the layout data is read, not after', () => { + // Labels are built by `measureLayoutFn` after `prepareLayout` returns, so a + // sync that ran later would be too late to affect how they are measured. + const order: string[] = []; + setConfigMock.mockImplementation(() => order.push('setConfig')); + // Instrument `edges`, the property `applyElkEdgeRenderData` actually reads. + const data = { + nodes: [], + get edges() { + order.push('data-read'); + return []; + }, + } as any; + + prepareLayoutForElk(data, contextWithHostConfig); + + expect(order).toContain('data-read'); + expect(order.indexOf('setConfig')).toBeLessThan(order.indexOf('data-read')); + }); +}); diff --git a/packages/mermaid-layout-elk/src/__tests__/render.spec.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/render.spec.ts similarity index 68% rename from packages/mermaid-layout-elk/src/__tests__/render.spec.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/render.spec.ts index 40a54473ae9..c00c99bd369 100644 --- a/packages/mermaid-layout-elk/src/__tests__/render.spec.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/__tests__/render.spec.ts @@ -150,6 +150,43 @@ describe('buildSubgraphLayoutOptions', () => { expect(opts['elk.layered.nodePlacement.strategy']).toBe('SIMPLE'); }); + it('takes the cycle breaking strategy from the named preset', () => { + const breaking = (preset?: string) => + buildSubgraphLayoutOptions({}, preset ? { preset } : undefined, 'layered')[ + 'elk.layered.cycleBreaking.strategy' + ]; + + // Containers used to receive no cycle-breaking option at all and silently + // ran ELK's own default, GREEDY, while the root ran the preset's. The two + // sides then broke different edges of the same cycle, so a composite + // containing a loop opened on whichever node greedy promoted to a source. + expect(breaking()).toBe('DEPTH_FIRST'); + expect(breaking('default')).toBe('DEPTH_FIRST'); + expect(breaking('modelOrder')).toBe('GREEDY_MODEL_ORDER'); + // `legacy` reproduces what earlier versions rendered, so it has to keep + // reaching containers with GREEDY rather than inheriting the new default. + expect(breaking('legacy')).toBe('GREEDY'); + }); + + it('lets an explicit cycleBreakingStrategy beat the preset in a container', () => { + const opts = buildSubgraphLayoutOptions( + {}, + { preset: 'legacy', cycleBreakingStrategy: 'MODEL_ORDER' }, + 'layered' + ); + expect(opts['elk.layered.cycleBreaking.strategy']).toBe('MODEL_ORDER'); + }); + + it('resolves container cycle breaking to the same value as the root', () => { + // The bug was the two disagreeing. Pin that they agree rather than pinning + // each side's value separately, which is what let them drift. + for (const preset of ['default', 'legacy', 'modelOrder', 'depthFirst']) { + expect( + buildSubgraphLayoutOptions({}, { preset }, 'layered')['elk.layered.cycleBreaking.strategy'] + ).toBe(resolveElkPreset(preset).cycleBreaking); + } + }); + it('takes the container placement strategy from the named preset', () => { const placement = (preset: string) => buildSubgraphLayoutOptions({}, { preset }, 'layered')['elk.layered.nodePlacement.strategy']; @@ -172,7 +209,9 @@ describe('buildSubgraphLayoutOptions', () => { // `nodePlacementStrategy`. const opts = buildSubgraphLayoutOptions({}, { nodePlacementStrategy: 'SIMPLE' }, 'layered'); - expect(opts).not.toHaveProperty('nodePlacement.strategy'); + // Array form: the flat key contains a dot, which the string form would + // misread as a nested path and pass vacuously. + expect(opts).not.toHaveProperty(['nodePlacement.strategy']); expect(opts['elk.layered.nodePlacement.strategy']).toBe('SIMPLE'); }); @@ -644,6 +683,41 @@ describe('small-node edge anchoring', () => { } }); + // ELK routes the edge straight down the big node's port line and, with + // `nodeFlexibility: PORT_POSITION`, has already placed the small node so its + // (degenerately clamped) port sits ON that line — meaning the node is what is + // off-centre, not the edge. Repointing the edge at the node centre bends a + // straight line diagonal. The fix must move the NODE onto the line instead, + // so the edge stays exactly vertical and the node is centred on it. + it('moves a small node onto the routed line instead of bending the edge', async () => { + const data = { + direction: 'TB', + config: { elk: {} }, + nodes: [ + { id: 'start', isGroup: false, width: 14, height: 14, label: 'start', shape: 'stateStart' }, + { id: 'still', isGroup: false, width: 60, height: 40, label: 'Still', shape: 'rect' }, + { id: 'end', isGroup: false, width: 14.013, height: 14, label: 'end', shape: 'stateEnd' }, + ], + edges: [ + { id: 'e1', start: 'start', end: 'still', type: 'arrow_barb' }, + { id: 'e2', start: 'still', end: 'end', type: 'arrow_barb' }, + ], + } as any; + + await runElkLayoutCore(data, elkRenderContext); + + for (const edge of data.edges as any[]) { + const xs = edge.points.map((p: any) => p.x); + for (const x of xs) { + expect(x, `edge ${edge.id} must be exactly vertical`).toBeCloseTo(xs[0], 3); + } + } + const start = data.nodes.find((node: any) => node.id === 'start'); + const end = data.nodes.find((node: any) => node.id === 'end'); + expect(start.x, 'start dot centred on its edge').toBeCloseTo(data.edges[0].points[0].x, 3); + expect(end.x, 'end dot centred on its edge').toBeCloseTo(data.edges[1].points.at(-1).x, 3); + }); + // The drop is side-specific: a fork/join bar is thin but long, and the side // its anchors spread along (the width, for a top/bottom attachment) is well // above the margin threshold. Its anchors carry real information — two @@ -874,297 +948,338 @@ describe('clearContainerAlgorithmOptions', () => { expect(options['elk.layered.nodePlacement.strategy']).toBe('BRANDES_KOEPF'); expect(options['nodeLabels.placement']).toBe('[H_CENTER V_TOP, INSIDE]'); }); +}); - describe('evenGroupFrames', () => { - /** - * Build the two structures the pass reads: the ELK tree (for `isGroup` and - * `children`) and `nodeDb`, whose entries carry the absolute box that - * `applyElkNodePositions` has already written. - */ - function scene(groupBox: { x: number; y: number; w: number; h: number }, kids: number[][]) { - const nodeDb: Record = { - g: { - id: 'g', - isGroup: true, - offset: { posX: groupBox.x, posY: groupBox.y }, - width: groupBox.w, - height: groupBox.h, - }, - }; - const children = kids.map(([x, y, w, h], i) => { - nodeDb[`n${i}`] = { id: `n${i}`, offset: { posX: x, posY: y }, width: w, height: h }; - return { id: `n${i}` }; - }); - const elk = [{ id: 'g', isGroup: true, children, labelData: { width: 0 }, labels: [] }]; - return { elk, nodeDb, layoutState: { nodeDb } as any }; - } - - it('pulls a frame in to even padding when a routing lane inflated one side', () => { - // The reported shape: nodes 100 wide sitting 24 from the left of the frame, - // with the frame running 76 past their right because ELK held a lane there - // for an edge routed back around the outside. - const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 200, h: 148 }, [ - [24, 48, 100, 76], - ]); - - evenGroupFrames(elk, layoutState, new Map()); - - const g = nodeDb.g; - expect(g.offset.posX).toBe(0); - expect(g.width).toBe(148); // 24 + 100 + 24 - // Top is deliberately untouched: it carries the subgraph's title strip. - expect(g.offset.posY).toBe(0); - expect(g.height).toBe(148); // 48 title strip + 76 + 24 +describe('evenGroupFrames', () => { + /** + * Build the two structures the pass reads: the ELK tree (for `isGroup` and + * `children`) and `nodeDb`, whose entries carry the absolute box that + * `applyElkNodePositions` has already written. + */ + function scene(groupBox: { x: number; y: number; w: number; h: number }, kids: number[][]) { + const nodeDb: Record = { + g: { + id: 'g', + isGroup: true, + offset: { posX: groupBox.x, posY: groupBox.y }, + width: groupBox.w, + height: groupBox.h, + }, + }; + const children = kids.map(([x, y, w, h], i) => { + nodeDb[`n${i}`] = { id: `n${i}`, offset: { posX: x, posY: y }, width: w, height: h }; + return { id: `n${i}` }; }); + const elk = [{ id: 'g', isGroup: true, children, labelData: { width: 0 }, labels: [] }]; + return { elk, nodeDb, layoutState: { nodeDb } as any }; + } + + it('pulls a frame in to even padding when a routing lane inflated one side', () => { + // The reported shape: nodes 100 wide sitting 24 from the left of the frame, + // with the frame running 76 past their right because ELK held a lane there + // for an edge routed back around the outside. + const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 200, h: 148 }, [[24, 48, 100, 76]]); + + evenGroupFrames(elk, layoutState, new Map()); + + const g = nodeDb.g; + expect(g.offset.posX).toBe(0); + expect(g.width).toBe(148); // 24 + 100 + 24 + // Top is deliberately untouched: it carries the subgraph's title strip. + expect(g.offset.posY).toBe(0); + expect(g.height).toBe(148); // 48 title strip + 76 + 24 + }); - it('leaves a frame alone when its padding is already even', () => { - const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 148, h: 148 }, [ - [24, 48, 100, 76], - ]); + it('leaves a frame alone when its padding is already even', () => { + const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 148, h: 148 }, [[24, 48, 100, 76]]); - evenGroupFrames(elk, layoutState, new Map()); + evenGroupFrames(elk, layoutState, new Map()); - expect(nodeDb.g.width).toBe(148); - expect(nodeDb.g.height).toBe(148); - }); + expect(nodeDb.g.width).toBe(148); + expect(nodeDb.g.height).toBe(148); + }); - it('never squeezes a frame narrower than its own title', () => { - // A one-node group under a long title. Pulling in to the node would cut - // the title off, so the floor wins it back. - const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 300, h: 148 }, [ - [24, 48, 40, 76], - ]); - elk[0].labelData = { width: 200 }; - - evenGroupFrames(elk, layoutState, new Map()); - - expect(nodeDb.g.width).toBe(200); - // Centring on the node's midpoint at x=44 would want to start at -56, but - // the frame is clamped to what ELK gave. Pulling a frame IN is the only - // thing this pass may do — a title too wide for its own frame is ELK's to - // size, and widening it here would paper over that. - expect(nodeDb.g.offset.posX).toBe(0); - }); + it('never squeezes a frame narrower than its own title', () => { + // A one-node group under a long title. Pulling in to the node would cut + // the title off, so the floor wins it back. + const { elk, nodeDb, layoutState } = scene({ x: 0, y: 0, w: 300, h: 148 }, [[24, 48, 40, 76]]); + elk[0].labelData = { width: 200 }; - it('measures a parent against children it has already pulled in', () => { - // Nested groups: the inner frame is inflated by 76 on the right and the - // outer one wraps it. Going deepest-first means the outer frame measures - // the tightened inner box, not the original. - const nodeDb: Record = { - outer: { - id: 'outer', - isGroup: true, - offset: { posX: 0, posY: 0 }, - width: 300, - height: 220, - }, - inner: { - id: 'inner', - isGroup: true, - offset: { posX: 24, posY: 48 }, - width: 200, - height: 148, - }, - leaf: { id: 'leaf', offset: { posX: 48, posY: 96 }, width: 100, height: 76 }, - }; - const elk = [ + evenGroupFrames(elk, layoutState, new Map()); + + expect(nodeDb.g.width).toBe(200); + // Centring on the node's midpoint at x=44 would want to start at -56, but + // the frame is clamped to what ELK gave. Pulling a frame IN is the only + // thing this pass may do — a title too wide for its own frame is ELK's to + // size, and widening it here would paper over that. + expect(nodeDb.g.offset.posX).toBe(0); + }); + + it('measures a parent against children it has already pulled in', () => { + // Nested groups: the inner frame is inflated by 76 on the right and the + // outer one wraps it. Going deepest-first means the outer frame measures + // the tightened inner box, not the original. + const nodeDb: Record = { + outer: { + id: 'outer', + isGroup: true, + offset: { posX: 0, posY: 0 }, + width: 300, + height: 220, + }, + inner: { + id: 'inner', + isGroup: true, + offset: { posX: 24, posY: 48 }, + width: 200, + height: 148, + }, + leaf: { id: 'leaf', offset: { posX: 48, posY: 96 }, width: 100, height: 76 }, + }; + const elk = [ + { + id: 'outer', + isGroup: true, + labelData: { width: 0 }, + labels: [], + children: [ + { + id: 'inner', + isGroup: true, + labelData: { width: 0 }, + labels: [], + children: [{ id: 'leaf' }], + }, + ], + }, + ]; + + evenGroupFrames(elk, { nodeDb } as any, new Map()); + + expect(nodeDb.inner.width).toBe(148); // 24 + 100 + 24 + expect(nodeDb.outer.width).toBe(196); // 24 + 148 + 24 + }); + + it("keeps a frame around a lane belonging to the group's own interior", () => { + // The nested case. An edge from inside C to a sibling of C is routed around + // C: that lane is OUTSIDE C, so C is pulled in past it, but it is INSIDE P + // and P must stay drawn around it. Measuring P from child boxes alone left + // the edge running outside a group it never leaves. + const nodeDb: Record = { + P: { id: 'P', isGroup: true, offset: { posX: 0, posY: 0 }, width: 400, height: 220 }, + C: { id: 'C', isGroup: true, offset: { posX: 24, posY: 48 }, width: 200, height: 148 }, + leaf: { id: 'leaf', offset: { posX: 48, posY: 96 }, width: 100, height: 76 }, + sib: { id: 'sib', offset: { posX: 260, posY: 96 }, width: 60, height: 76 }, + }; + const elk = [ + { + id: 'P', + isGroup: true, + labelData: { width: 0 }, + labels: [], + children: [ + { + id: 'C', + isGroup: true, + labelData: { width: 0 }, + labels: [], + children: [{ id: 'leaf' }], + }, + { id: 'sib' }, + ], + }, + ]; + // Routed out of `leaf`, around C at x=350, and back to `sib`. Sections sit + // in P's coordinate space, so `calcOffset` resolves them against P. + const graph = { + edges: [ { - id: 'outer', - isGroup: true, - labelData: { width: 0 }, - labels: [], - children: [ + id: 'e', + sources: ['leaf'], + targets: ['sib'], + sections: [ { - id: 'inner', - isGroup: true, - labelData: { width: 0 }, - labels: [], - children: [{ id: 'leaf' }], + startPoint: { x: 148, y: 134 }, + bendPoints: [ + { x: 350, y: 134 }, + { x: 350, y: 60 }, + ], + endPoint: { x: 260, y: 134 }, }, ], }, - ]; - - evenGroupFrames(elk, { nodeDb } as any, new Map()); - - expect(nodeDb.inner.width).toBe(148); // 24 + 100 + 24 - expect(nodeDb.outer.width).toBe(196); // 24 + 148 + 24 - }); + ], + }; + const layoutState = { + nodeDb, + parentLookupDb: { parentById: { leaf: 'C', C: 'P', sib: 'P' } }, + }; + + evenGroupFrames(elk, layoutState as any, new Map(), graph as any); + + // C ignores the lane — it leaves C — and pulls in to its one child. + expect(nodeDb.C.width).toBe(148); + // P keeps it: the lane reaches x=350, so the frame runs to 350 + 24. + expect(nodeDb.P.offset.posX + nodeDb.P.width).toBe(374); + }); - it("keeps a frame around a lane belonging to the group's own interior", () => { - // The nested case. An edge from inside C to a sibling of C is routed around - // C: that lane is OUTSIDE C, so C is pulled in past it, but it is INSIDE P - // and P must stay drawn around it. Measuring P from child boxes alone left - // the edge running outside a group it never leaves. - const nodeDb: Record = { - P: { id: 'P', isGroup: true, offset: { posX: 0, posY: 0 }, width: 400, height: 220 }, - C: { id: 'C', isGroup: true, offset: { posX: 24, posY: 48 }, width: 200, height: 148 }, - leaf: { id: 'leaf', offset: { posX: 48, posY: 96 }, width: 100, height: 76 }, - sib: { id: 'sib', offset: { posX: 260, posY: 96 }, width: 60, height: 76 }, - }; - const elk = [ + it('never pulls a frame past the anchor of an edge that terminates on the group', () => { + // A state diagram's `[*] --> Composite` (or a flowchart's `a --> subgraph`) + // is anchored by ELK ON the frame's border. Pulling the frame in past that + // anchor leaves it floating outside the drawn frame; the on-border check in + // `sanitizeElkEdgePoints` then fails and `cutter2` re-clips the edge along + // a ray to the group's centre — a long shallow diagonal hugging the frame's + // side, which is the reported defect. + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 200, height: 148 }, + n: { id: 'n', offset: { posX: 60, posY: 48 }, width: 100, height: 76 }, + ext: { id: 'ext', offset: { posX: 5, posY: -60 }, width: 14, height: 14 }, + }; + const graph = { + edges: [ { - id: 'P', - isGroup: true, - labelData: { width: 0 }, - labels: [], - children: [ + id: 'e', + sources: ['ext'], + targets: ['g'], + sections: [ { - id: 'C', - isGroup: true, - labelData: { width: 0 }, - labels: [], - children: [{ id: 'leaf' }], + // Only the endpoint sits on the group; the start and the bend + // belong to the layout outside and must NOT hold the frame open. + startPoint: { x: 500, y: -40 }, + bendPoints: [{ x: 500, y: -10 }], + endPoint: { x: 12, y: 0 }, }, - { id: 'sib' }, ], }, - ]; - // Routed out of `leaf`, around C at x=350, and back to `sib`. Sections sit - // in P's coordinate space, so `calcOffset` resolves them against P. - const graph = { - edges: [ - { - id: 'e', - sources: ['leaf'], - targets: ['sib'], - sections: [ - { - startPoint: { x: 148, y: 134 }, - bendPoints: [ - { x: 350, y: 134 }, - { x: 350, y: 60 }, - ], - endPoint: { x: 260, y: 134 }, - }, - ], - }, - ], - }; - const layoutState = { - nodeDb, - parentLookupDb: { parentById: { leaf: 'C', C: 'P', sib: 'P' } }, - }; - - evenGroupFrames(elk, layoutState as any, new Map(), graph as any); - - // C ignores the lane — it leaves C — and pulls in to its one child. - expect(nodeDb.C.width).toBe(148); - // P keeps it: the lane reaches x=350, so the frame runs to 350 + 24. - expect(nodeDb.P.offset.posX + nodeDb.P.width).toBe(374); - }); - - it("leaves ELK's own origin readable after moving a frame", () => { - // Edge sections resolve against the container's ORIGINAL origin, so moving - // a frame must not overwrite it or every edge inside would shift with it. - const nodeDb: Record = { - g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 200, height: 148 }, - n: { id: 'n', offset: { posX: 40, posY: 48 }, width: 100, height: 76 }, - }; - - evenGroupFrames( - [{ id: 'g', isGroup: true, labelData: { width: 0 }, labels: [], children: [{ id: 'n' }] }], - { nodeDb } as any, - new Map() - ); - - expect(nodeDb.g.offset.posX).toBe(16); // frame moved in to 40 - 24 - expect(nodeDb.g.elkOrigin).toEqual({ posX: 0, posY: 0 }); - }); + ], + }; + const layoutState = { nodeDb, parentLookupDb: { parentById: {} } }; + + evenGroupFrames( + [{ id: 'g', isGroup: true, labelData: { width: 0 }, labels: [], children: [{ id: 'n' }] }], + layoutState as any, + new Map(), + graph as any + ); - it('never grows a frame beyond what ELK sized it to', () => { - // ELK sized the container around everything it put inside, so a measurement - // here that wants MORE room means this pass got something wrong. Clamp - // rather than trust it. - const nodeDb: Record = { - g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 120, height: 148 }, - n: { id: 'n', offset: { posX: 10, posY: 48 }, width: 100, height: 76 }, - }; + // The left border stays where ELK put it — the anchor at x=12 is on the top + // border and pulling the left edge to 60 - 24 = 36 would strand it. + expect(nodeDb.g.offset.posX).toBe(0); + // The right side still evens up to the child (160 + 24): the section's far + // start point at x=500 was ignored, or the frame would have stayed at 200. + expect(nodeDb.g.width).toBe(184); + }); - evenGroupFrames( - [{ id: 'g', isGroup: true, labelData: { width: 0 }, labels: [], children: [{ id: 'n' }] }], - { nodeDb } as any, - new Map() - ); + it("leaves ELK's own origin readable after moving a frame", () => { + // Edge sections resolve against the container's ORIGINAL origin, so moving + // a frame must not overwrite it or every edge inside would shift with it. + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 200, height: 148 }, + n: { id: 'n', offset: { posX: 40, posY: 48 }, width: 100, height: 76 }, + }; + + evenGroupFrames( + [{ id: 'g', isGroup: true, labelData: { width: 0 }, labels: [], children: [{ id: 'n' }] }], + { nodeDb } as any, + new Map() + ); - // 10 - 24 would put the left edge at -14 and 110 + 24 the right at 134; - // both are clamped back to the frame ELK gave. - expect(nodeDb.g.offset.posX).toBe(0); - expect(nodeDb.g.width).toBe(120); - }); + expect(nodeDb.g.offset.posX).toBe(16); // frame moved in to 40 - 24 + expect(nodeDb.g.elkOrigin).toEqual({ posX: 0, posY: 0 }); + }); - it('paints the clamped frame, not the wider title, into the layout node', () => { - // Every other test here passes an empty `nodeById`, so the branch that - // writes the node the renderer actually paints from went uncovered — and - // that is where the clamp was being undone. - // - // A 100-wide frame under a 200-wide title. The clamp refuses to widen the - // frame, so the layout node must not report 200 either: `clusters.js` - // sizes the painted rect from `node.width`, so a 200 here paints a frame - // 100 units wider than ELK reserved. - const nodeDb: Record = { - g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 100, height: 148 }, - n: { id: 'n', offset: { posX: 10, posY: 48 }, width: 40, height: 76 }, - }; - const layoutNode = { id: 'g', x: 0, y: 0, width: 0, height: 0 } as any; + it('never grows a frame beyond what ELK sized it to', () => { + // ELK sized the container around everything it put inside, so a measurement + // here that wants MORE room means this pass got something wrong. Clamp + // rather than trust it. + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 120, height: 148 }, + n: { id: 'n', offset: { posX: 10, posY: 48 }, width: 100, height: 76 }, + }; + + evenGroupFrames( + [{ id: 'g', isGroup: true, labelData: { width: 0 }, labels: [], children: [{ id: 'n' }] }], + { nodeDb } as any, + new Map() + ); - evenGroupFrames( - [ - { - id: 'g', - isGroup: true, - labelData: { width: 200 }, - labels: [], - children: [{ id: 'n' }], - }, - ], - { nodeDb } as any, - new Map([['g', layoutNode]]) - ); + // 10 - 24 would put the left edge at -14 and 110 + 24 the right at 134; + // both are clamped back to the frame ELK gave. + expect(nodeDb.g.offset.posX).toBe(0); + expect(nodeDb.g.width).toBe(120); + }); - expect(nodeDb.g.width).toBe(100); - expect(layoutNode.width).toBe(100); - expect(layoutNode.width).toBe(nodeDb.g.width); - }); + it('paints the clamped frame, not the wider title, into the layout node', () => { + // Every other test here passes an empty `nodeById`, so the branch that + // writes the node the renderer actually paints from went uncovered — and + // that is where the clamp was being undone. + // + // A 100-wide frame under a 200-wide title. The clamp refuses to widen the + // frame, so the layout node must not report 200 either: `clusters.js` + // sizes the painted rect from `node.width`, so a 200 here paints a frame + // 100 units wider than ELK reserved. + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 100, height: 148 }, + n: { id: 'n', offset: { posX: 10, posY: 48 }, width: 40, height: 76 }, + }; + const layoutNode = { id: 'g', x: 0, y: 0, width: 0, height: 0 } as any; + + evenGroupFrames( + [ + { + id: 'g', + isGroup: true, + labelData: { width: 200 }, + labels: [], + children: [{ id: 'n' }], + }, + ], + { nodeDb } as any, + new Map([['g', layoutNode]]) + ); - it('still reports the honoured title floor when ELK left room for it', () => { - // The other side of the same branch: here the 200-wide title fits inside - // the 300 ELK gave, so the floor is honoured and the layout node carries - // it. Without this the fix above could pass by always shrinking. - const nodeDb: Record = { - g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 300, height: 148 }, - n: { id: 'n', offset: { posX: 24, posY: 48 }, width: 40, height: 76 }, - }; - const layoutNode = { id: 'g', x: 0, y: 0, width: 0, height: 0 } as any; + expect(nodeDb.g.width).toBe(100); + expect(layoutNode.width).toBe(100); + expect(layoutNode.width).toBe(nodeDb.g.width); + }); - evenGroupFrames( - [ - { - id: 'g', - isGroup: true, - labelData: { width: 200 }, - labels: [], - children: [{ id: 'n' }], - }, - ], - { nodeDb } as any, - new Map([['g', layoutNode]]) - ); + it('still reports the honoured title floor when ELK left room for it', () => { + // The other side of the same branch: here the 200-wide title fits inside + // the 300 ELK gave, so the floor is honoured and the layout node carries + // it. Without this the fix above could pass by always shrinking. + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 300, height: 148 }, + n: { id: 'n', offset: { posX: 24, posY: 48 }, width: 40, height: 76 }, + }; + const layoutNode = { id: 'g', x: 0, y: 0, width: 0, height: 0 } as any; + + evenGroupFrames( + [ + { + id: 'g', + isGroup: true, + labelData: { width: 200 }, + labels: [], + children: [{ id: 'n' }], + }, + ], + { nodeDb } as any, + new Map([['g', layoutNode]]) + ); - expect(nodeDb.g.width).toBe(200); - expect(layoutNode.width).toBe(200); - }); + expect(nodeDb.g.width).toBe(200); + expect(layoutNode.width).toBe(200); + }); - it('skips a group with no children rather than collapsing it', () => { - const nodeDb: Record = { - g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 200, height: 100 }, - }; + it('skips a group with no children rather than collapsing it', () => { + const nodeDb: Record = { + g: { id: 'g', isGroup: true, offset: { posX: 0, posY: 0 }, width: 200, height: 100 }, + }; - evenGroupFrames([{ id: 'g', isGroup: true, children: [] }], { nodeDb } as any, new Map()); + evenGroupFrames([{ id: 'g', isGroup: true, children: [] }], { nodeDb } as any, new Map()); - expect(nodeDb.g.width).toBe(200); - expect(nodeDb.g.height).toBe(100); - }); + expect(nodeDb.g.width).toBe(200); + expect(nodeDb.g.height).toBe(100); }); }); diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/algorithms.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/algorithms.ts new file mode 100644 index 00000000000..25f80352660 --- /dev/null +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/algorithms.ts @@ -0,0 +1,16 @@ +/** + * ELK algorithms selectable as `layout: `, in addition to the plain `elk` + * name which maps to `elk.layered`. + * + * Shared by mermaid's own registration and by the standalone + * `@mermaid-js/layout-elk` plugin entry, which each declare their own loader so + * that neither drags the other's dynamic import into its bundle. + */ +export const ELK_ALGORITHMS = [ + 'elk.stress', + 'elk.force', + 'elk.mrtree', + 'elk.sporeOverlap', + 'elk.box', + 'elk.rectpacking', +] as const; diff --git a/packages/mermaid-layout-elk/src/elkOptionCatalogue.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/elkOptionCatalogue.ts similarity index 96% rename from packages/mermaid-layout-elk/src/elkOptionCatalogue.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/elkOptionCatalogue.ts index 954f57b216a..93e58ea1b86 100644 --- a/packages/mermaid-layout-elk/src/elkOptionCatalogue.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/elkOptionCatalogue.ts @@ -232,10 +232,12 @@ export const EDGE_ROUTING_OPTIONS: Record = { /* ──────────────────────────────────────────────────────────────────────────── * THE SWITCH * - * Everything above is reference material — inert, imported by nothing, there to - * be read and copied from. The two objects below are the opposite: they ARE - * imported, and whatever they contain is merged over the shipping layout - * options as the last word. That is the on/off switch. + * Everything above is reference material to read and copy from — but it is not + * inert: `render.ts` imports `PLACEMENT_OPTIONS` and `EDGE_ROUTING_OPTIONS` too + * and merges them over the ROOT graph's layout options, so uncommenting a line + * up there switches it on just as surely. The two objects below are the + * per-scope scratch pads, merged as the last word over the root and subgraph + * options. All four objects together are the on/off switch. * * To try an option: copy its line out of the catalogue above into the matching * object below and uncomment it. To switch back off: re-comment it. Nothing in @@ -243,8 +245,9 @@ export const EDGE_ROUTING_OPTIONS: Record = { * behind as a stray edit in production code — which is how the previous round * of these ended up deleted rather than kept. * - * Both MUST be empty on `develop`. `elkOptionCatalogue.spec.ts` asserts exactly - * that, so an override left switched on fails the build instead of shipping. + * All four MUST be empty on `develop`. `elkOptionCatalogue.spec.ts` asserts + * exactly that, so an override left switched on fails the build instead of + * shipping. * * Which object to use matters more than it looks: options set on the ROOT graph * do NOT reach subgraphs — containers get their own set — so `spacing.*`, diff --git a/packages/mermaid-layout-elk/src/find-common-ancestor.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/find-common-ancestor.ts similarity index 100% rename from packages/mermaid-layout-elk/src/find-common-ancestor.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/find-common-ancestor.ts diff --git a/packages/mermaid-layout-elk/src/geometry.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/geometry.ts similarity index 100% rename from packages/mermaid-layout-elk/src/geometry.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/geometry.ts diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.ts new file mode 100644 index 00000000000..4ad9038bb6e --- /dev/null +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.ts @@ -0,0 +1 @@ +export { render } from './render.js'; diff --git a/packages/mermaid-layout-elk/src/lineHops.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/lineHops.ts similarity index 91% rename from packages/mermaid-layout-elk/src/lineHops.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/lineHops.ts index 4d7f8bc94c4..c554fd94b11 100644 --- a/packages/mermaid-layout-elk/src/lineHops.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/lineHops.ts @@ -1,9 +1,6 @@ -import { - applyLineJumpsToSvg, - type CommonLayoutPaintContext, - type EdgeGeom, - type LayoutData, -} from 'mermaid'; +import { applyLineJumpsToSvg, type EdgeGeom } from '../../rendering-elements/lineJump.js'; +import type { CommonLayoutPaintContext } from '../common/index.js'; +import type { LayoutData } from '../../types.js'; /** * Radius of the arc drawn where one edge hops another. * diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/plugin.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/plugin.ts new file mode 100644 index 00000000000..ed68dc34277 --- /dev/null +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/plugin.ts @@ -0,0 +1,20 @@ +import type { LayoutLoaderDefinition } from '../../render.js'; +import { ELK_ALGORITHMS } from './algorithms.js'; + +// Type-only import above, so nothing from core's render module is pulled into +// the plugin bundle. +const loader = async () => await import('./index.js'); + +/** + * Entry point for the standalone `@mermaid-js/layout-elk` package, which is + * built from this file so there is exactly one ELK implementation. + * + * mermaid registers these layouts itself, so the package is only needed for + * builds that ship without ELK — notably `mermaid.tiny.js`. + */ +const layouts: LayoutLoaderDefinition[] = [ + { name: 'elk', loader, algorithm: 'elk.layered' }, + ...ELK_ALGORITHMS.map((algorithm) => ({ name: algorithm, loader, algorithm })), +]; + +export default layouts; diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid/src/rendering-util/layout-algorithms/elk/render.ts similarity index 91% rename from packages/mermaid-layout-elk/src/render.ts rename to packages/mermaid/src/rendering-util/layout-algorithms/elk/render.ts index c4ca5658193..8cef4721680 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/render.ts @@ -1,9 +1,10 @@ -import mermaid, { +import { createCommonLayoutRenderer, defaultMeasureLayout, type CommonLayoutRenderContext, - type LayoutData, -} from 'mermaid'; +} from '../common/index.js'; +import type { LayoutData } from '../../types.js'; +import { setConfig } from '../../../diagram-api/diagramAPI.js'; // @ts-ignore TODO: Investigate D3 issue import { curveLinear } from 'd3'; import ELK from 'elkjs/lib/elk.bundled.js'; @@ -78,6 +79,7 @@ interface ElkSubgraphConfig { layeringLayerBound?: number; nodePlacementAlignment?: string; nodePlacementStrategy?: string; + cycleBreakingStrategy?: string; } interface ElkPreparedLayout { @@ -145,9 +147,9 @@ const DEFAULT_NODE_PLACEMENT_ALIGNMENT = 'NONE'; /** * Margin reserved at the ends of each side of a node, so that a port cannot be - * placed on a corner. `anchorOnDegenerateSide` treats a side shorter than twice - * this as having no usable anchor span, so the option string below is built - * from it — the two must not be able to disagree. + * placed on a corner. `alignDegenerateNodeToAnchor` treats a side shorter than + * twice this as having no usable anchor span, so the option string below is + * built from it — the two must not be able to disagree. */ const PORTS_SURROUNDING_MARGIN = 12; /** The margin spelled as an ELK margin, because `spacing.portsSurrounding` takes one. */ @@ -321,6 +323,10 @@ export function buildSubgraphLayoutOptions( const pad = node.padding ?? 0; const minWidth = labelW + 2 * pad; const labelH = node.labelData?.height ?? 0; + // Hoisted, as in `createRootElkGraph`: the two functions resolve the same + // preset for the same reasons, and reading alike is most of what keeps them + // from drifting apart again. + const preset = resolveElkPreset(elkConfig?.preset); const layoutOptions: Record = { 'spacing.baseValue': DEFAULT_SUBGRAPH_SPACING_BASE_VALUE, @@ -371,7 +377,14 @@ export function buildSubgraphLayoutOptions( // — as this did — leaves the container holding two values for it with no // say in which wins, and quietly ignores an explicit `nodePlacementStrategy`. 'elk.layered.nodePlacement.strategy': - elkConfig?.nodePlacementStrategy ?? resolveElkPreset(elkConfig?.preset).containerPlacement, + elkConfig?.nodePlacementStrategy ?? preset.containerPlacement, + // Resolved here as well as at the root, because a container laid out on its + // own never sees the root's value and falls back to ELK's default, GREEDY. + // That reverses a different edge than the preset asked for, so a composite + // containing a loop opens on whichever node greedy promoted to a source + // rather than on its own start node. Same key and same resolution as the + // root, so `legacy` reproduces the old rendering inside frames too. + 'elk.layered.cycleBreaking.strategy': elkConfig?.cycleBreakingStrategy ?? preset.cycleBreaking, // PORT_POSITION lets a node shift so an edge can leave straight rather than // bending immediately off the port. 'elk.layered.nodePlacement.networkSimplex.nodeFlexibility': 'PORT_POSITION', @@ -607,7 +620,7 @@ export function prepareLayoutForElk( context: CommonLayoutRenderContext ): ElkPreparedLayout { const elkContext = getElkLayoutContext(context); - syncElkPackageConfig(elkContext); + syncHostConfig(elkContext); applyElkEdgeRenderData(data4Layout, elkContext); return { algorithm: elkContext.algorithm }; } @@ -669,8 +682,28 @@ export const render = createCommonLayoutRenderer()): Se /** * Absolute points of every edge ELK routed INSIDE this group — meaning both of - * its endpoints are descendants of the group. + * its endpoints are descendants of the group — plus the attachment point of + * every edge that terminates ON the group itself. * * An edge with one endpoint outside is the case this whole pass exists for: its * lane belongs to the layout around the group, not to the group, so the frame * should not be drawn around it. An edge with both endpoints inside is the * opposite — its lane is part of the group's interior, and a frame pulled in * past it would leave the edge running outside a group it never leaves. + * + * An edge whose endpoint IS the group (a state diagram's `[*] --> Composite`, + * a flowchart's `node --> subgraph`) sits between the two: ELK anchored it on + * the frame's border, so the border must not be pulled past that anchor. When + * it was, the stale anchor ended up floating outside the drawn frame, the + * on-border check in `sanitizeElkEdgePoints` no longer recognised it, and + * `cutter2` re-clipped the edge along a ray to the group's centre — painting a + * long shallow diagonal that hugged the frame's side. Only the terminal point + * on the group is added, never the edge's other points: those belong to the + * layout outside the frame. */ function internalEdgePoints( graph: ElkLayoutResult, descendants: Set, - layoutState: ElkLayoutState + layoutState: ElkLayoutState, + groupId: string ): P[] { const points: P[] = []; for (const edge of graph.edges ?? []) { const source = edge.sources?.[0] ?? edge.start; const target = edge.targets?.[0] ?? edge.end; - if (!descendants.has(source) || !descendants.has(target)) { + const isInternal = descendants.has(source) && descendants.has(target); + const attachesAtStart = source === groupId; + const attachesAtEnd = target === groupId; + if (!isInternal && !attachesAtStart && !attachesAtEnd) { continue; } const offset = calcOffset(source, target, layoutState.parentLookupDb, layoutState.nodeDb); for (const section of edge.sections ?? []) { - for (const p of [section.startPoint, ...(section.bendPoints ?? []), section.endPoint]) { + const sectionPoints = isInternal + ? [section.startPoint, ...(section.bendPoints ?? []), section.endPoint] + : [attachesAtStart ? section.startPoint : null, attachesAtEnd ? section.endPoint : null]; + for (const p of sectionPoints) { if (p) { points.push({ x: p.x + offset.x, y: p.y + offset.y }); } @@ -1296,7 +1347,7 @@ export function evenGroupFrames( continue; } - const lane = internalEdgePoints(graph, collectDescendantIds(elkNode), layoutState); + const lane = internalEdgePoints(graph, collectDescendantIds(elkNode), layoutState, elkNode.id); const xs = [ ...boxes.map((b: NodeWithVertex) => b.offset!.posX), ...boxes.map((b: NodeWithVertex) => b.offset!.posX + b.width!), @@ -1650,6 +1701,44 @@ function applyElkEdgeLayout( // Opt-out rather than opt-in: the step this removes is never intentional. const straightenEdges = data4Layout.config.elk?.straightenEdges !== false; + // Alignment pre-pass: move degenerately-anchored small nodes onto their routed + // lines BEFORE any edge points are built, so every edge — whichever side of the + // node it attaches to, in whatever order the loop visits it — sees the node at + // its final position. See `alignDegenerateNodeToAnchor` for why the node moves + // and the edge does not. + const layoutNodeById = new Map(data4Layout.nodes.map((node) => [node.id, node])); + const alignedNodes = new Set(); + graph.edges?.forEach((edge) => { + if (!edge.sections?.length) { + return; + } + const startNode = layoutState.nodeDb[edge.sources?.[0] ?? edge.start]; + const endNode = layoutState.nodeDb[edge.targets?.[0] ?? edge.end]; + if (!startNode || !endNode) { + return; + } + const sourceId = edge.start ?? edge.sourceId ?? edge.sources?.[0]; + const targetId = edge.end ?? edge.targetId ?? edge.targets?.[0]; + const offset = calcOffset(sourceId, targetId, layoutState.parentLookupDb, layoutState.nodeDb); + const section = edge.sections[0]; + if (startNode.shape !== 'rect33') { + alignDegenerateNodeToAnchor( + startNode, + { x: section.startPoint.x + offset.x, y: section.startPoint.y + offset.y }, + layoutNodeById, + alignedNodes + ); + } + if (endNode.shape !== 'rect33') { + alignDegenerateNodeToAnchor( + endNode, + { x: section.endPoint.x + offset.x, y: section.endPoint.y + offset.y }, + layoutNodeById, + alignedNodes + ); + } + }); + graph.edges?.forEach((edge) => { const layoutEdge = edgeById.get(edge.id); if (!layoutEdge) { @@ -1714,16 +1803,10 @@ function applyElkEdgeLayout( endNode.y = endNode.offset!.posY + endNode.height! / 2; if (startNode.shape !== 'rect33') { - if (points.length > 1 && anchorOnDegenerateSide(startNode, points[0])) { - points.shift(); - } points.unshift({ x: startNode.x, y: startNode.y }); } if (endNode.shape !== 'rect33') { - if (points.length > 1 && anchorOnDegenerateSide(endNode, points[points.length - 1])) { - points.pop(); - } points.push({ x: endNode.x, y: endNode.y }); } @@ -1751,27 +1834,66 @@ function applyElkEdgeLayout( /** * ELK reserves `PORTS_SURROUNDING_MARGIN` at both ends of a node side before * distributing edge anchors along it (see `PORTS_SURROUNDING`). On a side - * shorter than twice that margin the usable span is negative, and ELK's - * clamping parks the anchor off-centre — a 14px start/end state circle got - * its only edge attached 3px off the dot's centre, and no node-level option - * overrides it (the spacing is only read per hierarchy level). Such an anchor - * carries no information, so the caller drops it and lets the edge aim at the - * node centre instead; the border clip then lands it dead centre, the same - * way the dagre pipeline attaches edges. + * shorter than twice that margin the usable span is negative and ELK's clamping + * parks the anchor off-centre — a 14px start/end state circle gets its edge + * attached ~3px off the dot's centre, and no node-level option overrides it + * (the spacing is only read per hierarchy level). + * + * The anchor's position along the side is garbage, but its LINE is not: with + * `nodeFlexibility: PORT_POSITION` ELK has already placed the node so this + * clamped port sits on a straight route — so it is the node that stands + * off-centre, not the edge. An earlier fix repointed the edge at the node's + * centre, which bent ELK's straight verticals visibly diagonal (every fixture + * with `[*] --> SomeState` showed it). Move the NODE instead: shift it along + * the side's axis until its centre sits on the anchor line. The edge stays + * exactly as routed, and the appended centre point is collinear with it. + * + * The shift is at most half the side (≲4px on a state dot), first anchor wins + * (later anchors on a degenerate side land on the same clamped point), and both + * the nodeDb entry and the layout node move so painting and clipping agree. */ -function anchorOnDegenerateSide(node: NodeWithVertex, anchor: P): boolean { +function alignDegenerateNodeToAnchor( + node: NodeWithVertex, + anchor: P, + layoutNodeById: Map, + alignedNodes: Set +): void { const width = node.width ?? 0; const height = node.height ?? 0; const top = node.offset!.posY; const bottom = top + height; // ELK puts the anchor exactly on the border; the slack only absorbs float - // error from the offset arithmetic above. Same tolerance `onBorder` uses. + // error from the offset arithmetic. Same tolerance `onBorder` uses. const tol = 0.5; // An anchor on the top or bottom border spreads along the width; one on the // left or right border spreads along the height. const alongWidth = Math.abs(anchor.y - top) <= tol || Math.abs(anchor.y - bottom) <= tol; - const side = alongWidth ? width : height; - return side < 2 * PORTS_SURROUNDING_MARGIN; + if ((alongWidth ? width : height) >= 2 * PORTS_SURROUNDING_MARGIN) { + return; + } + if (alignedNodes.has(node.id)) { + return; + } + alignedNodes.add(node.id); + + const delta = alongWidth + ? anchor.x - (node.offset!.posX + width / 2) + : anchor.y - (node.offset!.posY + height / 2); + if (Math.abs(delta) < 0.01) { + return; + } + if (alongWidth) { + node.offset!.posX += delta; + node.x = node.offset!.posX + width / 2; + } else { + node.offset!.posY += delta; + node.y = node.offset!.posY + height / 2; + } + const layoutNode = layoutNodeById.get(node.id); + if (layoutNode) { + layoutNode.x = node.offset!.posX + width / 2; + layoutNode.y = node.offset!.posY + height / 2; + } } function createEdgePointsFromSection(section: any, offset: { x: number; y: number }): P[] { diff --git a/packages/mermaid/src/rendering-util/layoutFallback.spec.ts b/packages/mermaid/src/rendering-util/layoutFallback.spec.ts index 8ed5d53d6ef..2dbd9b8011e 100644 --- a/packages/mermaid/src/rendering-util/layoutFallback.spec.ts +++ b/packages/mermaid/src/rendering-util/layoutFallback.spec.ts @@ -1,7 +1,7 @@ /** - * A diagram type may name a layout as its default, but `elk` ships as a separate package - * and `cose-bilkent` only in large-feature builds, so the resolution every renderer runs - * before `render()` has to terminate at something always registered. + * A diagram type may name a layout as its default, but `elk` and `cose-bilkent` ship only + * in large-feature builds (the tiny build omits them), so the resolution every renderer + * runs before `render()` has to terminate at something always registered. */ import { describe, expect, it, vi, beforeEach } from 'vitest'; import { getRegisteredLayoutAlgorithm, registerLayoutLoaders } from './render.js'; @@ -15,26 +15,30 @@ describe('layout fallback', () => { it('returns a registered layout unchanged', () => { expect(getRegisteredLayoutAlgorithm('dagre')).toBe('dagre'); expect(getRegisteredLayoutAlgorithm('swimlane')).toBe('swimlane'); + // Bundled by default now; only the tiny build omits it. + expect(getRegisteredLayoutAlgorithm('elk')).toBe('elk'); }); it('falls back to dagre for a layout nobody registered', () => { const warn = vi.spyOn(log, 'warn').mockImplementation(() => undefined); - expect(getRegisteredLayoutAlgorithm('elk')).toBe('dagre'); - expect(warn).toHaveBeenCalledWith(expect.stringContaining('elk')); + expect(getRegisteredLayoutAlgorithm('no-such-layout')).toBe('dagre'); + expect(warn).toHaveBeenCalledWith(expect.stringContaining('no-such-layout')); }); it('prefers the caller-supplied fallback when it is registered', () => { vi.spyOn(log, 'warn').mockImplementation(() => undefined); - expect(getRegisteredLayoutAlgorithm('elk', { fallback: 'swimlane' })).toBe('swimlane'); + expect(getRegisteredLayoutAlgorithm('no-such-layout', { fallback: 'swimlane' })).toBe( + 'swimlane' + ); }); it('falls through to dagre when the caller-supplied fallback is absent too', () => { // Mindmap's fallback is `cose-bilkent`, absent from tiny. Before the chain ended at - // dagre this threw, so a `mindmap.layout` of `elk` would have taken tiny down. + // dagre this threw, so an unregistered `mindmap.layout` would have taken tiny down. vi.spyOn(log, 'warn').mockImplementation(() => undefined); - expect(getRegisteredLayoutAlgorithm('elk', { fallback: 'not-registered-either' })).toBe( - 'dagre' - ); + expect( + getRegisteredLayoutAlgorithm('no-such-layout', { fallback: 'not-registered-either' }) + ).toBe('dagre'); }); it.each(['__proto__', 'constructor', 'toString'])( diff --git a/packages/mermaid/src/rendering-util/render.spec.ts b/packages/mermaid/src/rendering-util/render.spec.ts new file mode 100644 index 00000000000..24496de1838 --- /dev/null +++ b/packages/mermaid/src/rendering-util/render.spec.ts @@ -0,0 +1,55 @@ +import { describe, expect, it } from 'vitest'; +import { getLayoutLoaderDefinition, getRegisteredLayoutAlgorithm } from './render.js'; +import { ELK_ALGORITHMS } from './layout-algorithms/elk/algorithms.js'; + +// `injected.includeLargeFeatures` is defined as `true` for the unit-test build +// (see vite.config.ts), so the ELK loaders are registered here. The tiny build +// flips that flag and is covered by the bundle assertions in .esbuild. +describe('default layout loaders', () => { + it('registers elk alongside the built-in layouts', () => { + expect(getRegisteredLayoutAlgorithm('elk')).toBe('elk'); + expect(getRegisteredLayoutAlgorithm('dagre')).toBe('dagre'); + expect(getRegisteredLayoutAlgorithm('swimlane')).toBe('swimlane'); + }); + + it.each(ELK_ALGORITHMS)('registers the %s algorithm under its own name', (algorithm) => { + expect(getRegisteredLayoutAlgorithm(algorithm)).toBe(algorithm); + }); + + it('falls back to dagre for a layout that was never registered', () => { + expect(getRegisteredLayoutAlgorithm('does-not-exist')).toBe('dagre'); + }); + + // Registration only records a name; this proves the lazy import behind it + // resolves to a real layout module now that ELK lives inside the package. + it('lazily loads a renderable elk module', async () => { + const elk = await getLayoutLoaderDefinition('elk').loader(); + expect(typeof elk.render).toBe('function'); + }); + + it('points every elk algorithm at the same loader', () => { + const loaders = new Set( + ['elk', 'elk.stress', 'elk.force', 'elk.mrtree'].map( + (name) => getLayoutLoaderDefinition(name).loader + ) + ); + expect(loaders.size).toBe(1); + }); + + // The standalone plugin entry declares its own loader so the tiny build can + // compile core's away, which means the two lists could drift apart. They must + // register exactly the same layout names. + it('registers the same elk layouts as the standalone plugin entry', async () => { + const pluginLayouts = (await import('./layout-algorithms/elk/plugin.js')).default; + const expected = ['elk', ...ELK_ALGORITHMS]; + expect(pluginLayouts.map((layout) => layout.name)).toEqual(expected); + for (const { name, algorithm } of pluginLayouts) { + expect(getLayoutLoaderDefinition(name).algorithm).toBe(algorithm); + } + }); + + it('maps the bare elk name to the layered algorithm', () => { + expect(getLayoutLoaderDefinition('elk').algorithm).toBe('elk.layered'); + expect(getLayoutLoaderDefinition('elk.mrtree').algorithm).toBe('elk.mrtree'); + }); +}); diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index 6ee77667b88..cd28f2a87a0 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -3,6 +3,7 @@ import type { InternalHelpers } from '../internals.js'; import { internalHelpers } from '../internals.js'; import { log } from '../logger.js'; import type { LayoutData } from './types.js'; +import { ELK_ALGORITHMS } from './layout-algorithms/elk/algorithms.js'; // console.log('MUST be removed, this only for keeping dev server working'); // import tmp from './layout-algorithms/dagre/index.js'; @@ -37,6 +38,36 @@ export const registerLayoutLoaders = (loaders: LayoutLoaderDefinition[]) => { } }; +/** + * Look up a registered layout by name. + * + * @internal Not part of the public API; it exists so the registration of the + * built-in layouts can be asserted on directly. + */ +export const getLayoutLoaderDefinition = (name: string): LayoutLoaderDefinition => { + const definition = layoutAlgorithms[name]; + if (!definition) { + throw new Error(`Unknown layout algorithm: ${name}`); + } + return definition; +}; + +/** + * Every ELK entry shares one loader, so all of them resolve to the same lazily + * imported chunk and elkjs is fetched at most once. + * + * The loader is declared here rather than imported from the ELK plugin entry so + * that the tiny build, which compiles this branch away, does not retain a + * dynamic import of elkjs. + */ +const elkLayoutLoaders = (): LayoutLoaderDefinition[] => { + const loader = async () => await import('./layout-algorithms/elk/index.js'); + return [ + { name: 'elk', loader, algorithm: 'elk.layered' }, + ...ELK_ALGORITHMS.map((algorithm) => ({ name: algorithm, loader, algorithm })), + ]; +}; + // TODO: Should we load dagre without lazy loading? const registerDefaultLayoutLoaders = () => { registerLayoutLoaders([ @@ -48,12 +79,16 @@ const registerDefaultLayoutLoaders = () => { name: 'swimlane', loader: async () => await import('./layout-algorithms/swimlanes/index.js'), }, + // elkjs is ~1.6 MB of source, so it is excluded from the tiny build along + // with the other large features. `getRegisteredLayoutAlgorithm` then falls + // back to dagre for diagrams that ask for an ELK layout there. ...(injected.includeLargeFeatures ? [ { name: 'cose-bilkent', loader: async () => await import('./layout-algorithms/cose-bilkent/index.js'), }, + ...elkLayoutLoaders(), ] : []), ]); @@ -141,9 +176,9 @@ export const render = async (data4Layout: LayoutData, svg: SVG) => { const LAST_RESORT_LAYOUT = 'dagre'; /** - * Get the registered layout algorithm, falling back when it is not available -- `elk` ships - * as a separate package and `cose-bilkent` only in large-feature builds, so a diagram type - * may name either as its default. `fallback` may itself be absent, so `dagre` closes the chain. + * Get the registered layout algorithm, falling back when it is not available -- `elk` and + * `cose-bilkent` ship only in large-feature builds (the tiny build omits them), so a diagram + * type may name either as its default. `fallback` may itself be absent, so `dagre` closes the chain. */ export const getRegisteredLayoutAlgorithm = ( algorithm = '', diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 9ae587618e6..b54791e8fab 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -21,7 +21,9 @@ export function forkJoin( let width = Math.max(70, node?.width ?? 0); let height = Math.max(10, node?.height ?? 0); - if (dir === 'LR') { + // The bar must run perpendicular to the flow: with a horizontal flow the + // long side faces the incoming/outgoing edges, so the bar is drawn vertical. + if (dir === 'LR' || dir === 'RL') { width = Math.max(10, node?.width ?? 0); height = Math.max(70, node?.height ?? 0); } diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index e12cc515f42..ad7cd314cdb 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -78,7 +78,12 @@ properties: default: 0 layout: $ref: '#/$defs/BaseDiagramConfig/properties/layout' - default: 'dagre' + description: | + Defines which layout algorithm to use for rendering the diagram. + + Defaults to `elk`, which is bundled with mermaid. The `tiny` build omits + ELK to stay small and falls back to `dagre`. + default: 'elk' maxTextSize: description: The maximum allowed size of the users text diagram type: number @@ -1654,6 +1659,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) look: $ref: '#/$defs/BaseDiagramConfig/properties/look' default: 'neo' + layout: + $ref: '#/$defs/BaseDiagramConfig/properties/layout' + default: 'elk' titleTopMargin: $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin' default: 25 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93d30f8343f..610a099d9a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -315,6 +315,9 @@ importers: dompurify: specifier: 3.4.12 version: 3.4.12 + elkjs: + specifier: ^0.9.3 + version: 0.9.3 es-toolkit: specifier: ^1.45.1 version: 1.45.1 @@ -488,9 +491,21 @@ importers: d3: specifier: ^7.9.0 version: 7.9.0 + dagre-d3-es: + specifier: 7.0.14 + version: 7.0.14 + dayjs: + specifier: ^1.11.21 + version: 1.11.21 + dompurify: + specifier: 3.4.12 + version: 3.4.12 elkjs: specifier: ^0.9.3 version: 0.9.3 + katex: + specifier: ^0.16.47 + version: 0.16.47 devDependencies: '@types/d3': specifier: ^7.4.3 diff --git a/scripts/screenshot-sheets.spec.ts b/scripts/screenshot-sheets.spec.ts index e0e3079483c..74baa6061aa 100644 --- a/scripts/screenshot-sheets.spec.ts +++ b/scripts/screenshot-sheets.spec.ts @@ -46,7 +46,9 @@ describe('deriveGroupKey', () => { }); it('keeps each spec file in its own group, even within one folder', () => { expect(deriveGroupKey(`${FC_MAIN}/x.png`)).toBe(FC_MAIN); - expect(deriveGroupKey(`${FC}/flowchart-elk.spec.js/y.png`)).toBe(`${FC}/flowchart-elk.spec.js`); + expect(deriveGroupKey(`${FC}/flowchart-dagre.spec.js/y.png`)).toBe( + `${FC}/flowchart-dagre.spec.js` + ); }); it('groups folder-structured mmd snapshots by their diagram folder', () => { // mmd screenshots mirror the fixture path (diagrams//), so they