Common Render pipeline 2: DAGRE - phase 1

[knsv-bot]

Summary

• remove the obsolete packages/mermaid/src/dagre-wrapper implementation
• move the remaining block diagram wrapper dependencies onto shared rendering elements
• keep DAGRE wired through the common layout renderer while preserving the current DAGRE core/render behavior

Validation

• pnpm build:types
• pnpm vitest run packages/mermaid/src/diagrams/block/parser/block.spec.ts packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts packages/mermaid/src/rendering-util/rendering-elements/edges.spec.js packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.spec.js packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js
• pnpm lint
• npx fallow audit --changed-since origin/codex/elk-prep-extraction --format json

Stacked on #7803 / codex/elk-prep-extraction.

[changeset-bot]

🦋 Changeset detected

Latest commit: a0449a4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

❌ Patch coverage is 0.58824% with 507 lines in your changes missing coverage. Please review.
✅ Project coverage is 2.93%. Comparing base (9f9566a) to head (a0449a4).
⚠️ Report is 2 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ering-util/rendering-elements/shapes/blockArrow.ts	0.56%	176 Missing ⚠️
...rc/rendering-util/layout-algorithms/dagre/index.js	0.00%	170 Missing ⚠️
packages/mermaid/src/rendering-util/createGraph.ts	0.00%	40 Missing ⚠️
...dering-util/rendering-elements/shapes/composite.ts	3.12%	31 Missing ⚠️
...c/rendering-util/layout-algorithms/common/index.ts	0.00%	30 Missing ⚠️
...ckages/mermaid/src/diagrams/block/renderHelpers.ts	0.00%	18 Missing ⚠️
.../rendering-elements/shapes/handDrawnShapeStyles.ts	0.00%	13 Missing ⚠️
...ckages/mermaid/src/diagrams/block/blockRenderer.ts	0.00%	9 Missing ⚠️
...util/rendering-elements/shapes/rectLeftInvArrow.ts	0.00%	6 Missing ⚠️
...id/src/rendering-util/rendering-elements/shapes.ts	0.00%	4 Missing ⚠️
... and 5 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7807      +/-   ##
==========================================
+ Coverage     2.81%   2.93%   +0.12%     
==========================================
  Files          673     655      -18     
  Lines        72969   69837    -3132     
  Branches       995     978      -17     
==========================================
  Hits          2053    2053              
+ Misses       70916   67784    -3132     

Flag	Coverage Δ
unit	2.93% <0.58%> (+0.12%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/defaultConfig.ts	49.39% <100.00%> (+0.20%)	⬆️
...til/rendering-elements/shapes/invertedTrapezoid.ts	0.00% <0.00%> (ø)
...ndering-util/rendering-elements/shapes/leanLeft.ts	0.00% <0.00%> (ø)
...dering-util/rendering-elements/shapes/leanRight.ts	0.00% <0.00%> (ø)
...ering-util/rendering-elements/shapes/subroutine.ts	0.00% <0.00%> (ø)
...dering-util/rendering-elements/shapes/trapezoid.ts	0.00% <0.00%> (ø)
...id/src/rendering-util/rendering-elements/shapes.ts	0.22% <0.00%> (-0.01%)	⬇️
...util/rendering-elements/shapes/rectLeftInvArrow.ts	0.00% <0.00%> (ø)
...ckages/mermaid/src/diagrams/block/blockRenderer.ts	0.00% <0.00%> (ø)
.../rendering-elements/shapes/handDrawnShapeStyles.ts	0.00% <0.00%> (ø)
... and 6 more

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	193 changed, 1 added	Jun 15, 2026, 8:55 AM

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7807

mermaid

npm i https://pkg.pr.new/mermaid@7807

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7807

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7807

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7807

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7807

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7807

commit: a0449a4

[knsv-bot]

[sisyphus-bot]

Reviewing as a draft, so this is direction/early-red-flags rather than line-polish — posting as a comment, no blocking asks. This is phase 1 of the common-render-pipeline migration: removing the deprecated dagre-wrapper/ and routing block diagrams through the shared rendering-elements. Net +378 / −4801 — a satisfying amount of red.

What's working well

🎉 The removal is clean and complete. The whole dagre-wrapper/ tree (22 files) is gone with zero dangling imports — I grepped the tree on this branch and there are no remaining import … from '…/dagre-wrapper/…' statements (the surviving 'dagre-wrapper' hits are the defaultRenderer config string enum, which is correct to keep). renderHelpers.ts is cleanly re-pointed to rendering-util/rendering-elements/{edges,nodes}.js, and CI is fully green (unit-test, e2e 5/5, build-docs, lint).

🎉 classRenderer-v2.ts deletion is correctly identified as dead code. Nothing references it on either develop or this branch — the class detectors already route to classRenderer-v3-unified. Good call removing it rather than carrying it forward.

🎉 The blockArrowHelper.ts → shapes/blockArrow.ts rename improves typing on the way over — node: any becomes a proper BlockArrowNode, return types are annotated, and getArrowPoints is correctly de-exported (no external users). Nice to see a move that also tightens the types instead of just relocating them.

🎉 Schema change is honest housekeeping. The only config.schema.yaml edit removes stale comments that pointed at now-deleted classRenderer-v2.ts line numbers — no field change, so config.type.ts correctly didn't need regenerating, and types:verify-config stays green.

🎉 Tech debt is acknowledged, not hidden — e.g. the @ts-expect-error on the ellipse case links to #5976 rather than silently papering over it.

Heads up for when you mark this ready

💡 The PR bundles a shared-shape behavior change into a "preserve render behavior" removal. Beyond the mechanical move, six shared flowchart shapes (trapezoid, leanLeft, leanRight, subroutine, invertedTrapezoid, rectLeftInvArrow) all get the same sizing change — from node.height ?? bbox.height to Math.max(bbox.height + pad, node.height ?? 0) (and the analogous width). renderHelpers.ts also changes the block default shape '' → 'rect' and adds cssCompiledStyles. That consistent Math.max min-size pattern looks intentional (likely needed so block diagrams respect explicitly-set node dimensions now that they route through the unified shapes) — and it's almost certainly the source of the 36 changed Argos snapshots.

Two things would help land this safely:

1. Call the visual change out explicitly in the PR description — the summary currently says "preserving the current DAGRE core/render behavior," but these are shared flowchart shapes, so the diff isn't behavior-neutral.
2. If the shape-sizing change is separable from the dagre-wrapper removal, splitting it into its own PR keeps phase 1 mechanically pure and makes the 36 visual diffs reviewable on their own merits (and any regression bisectable). If it's not separable (i.e. block-via-unified-shapes requires it), then a quick maintainer eyeball confirming those 36 diffs are intended min-size improvements — not clipping/overflow regressions on existing flowcharts — is the thing to do before merge.

Security

🎉 XSS/injection scan: No XSS or injection issues identified. This is a deletion-heavy refactor that preserves the prior sanitization path — the moved block_arrow render fn's .attr('style', node.style ?? null) is byte-identical to the old dagre-wrapper version (the ?? null is a minor safety improvement), labels still flow through the shared labelHelper/sanitizeText pipeline (untouched), and the deleted classRenderer-v2.ts lost no live sanitization (dead code). No new DOM/SVG sinks in any added line.

Verification I ran

Checked out the PR, confirmed no dangling dagre-wrapper file imports and that classRenderer-v2.ts is gone, verified renderHelpers.ts imports rewired + still in use, confirmed the Math.max sizing change is consistent across all six shapes, confirmed getArrowPoints has no external importers, and confirmed the schema edit is comment-only. CI: unit-test / e2e (5/5) / build / lint all green; Argos 36 changed, approved.

Severity tally: 🔴 0 / 🟡 0 / 🟢 0 / 💡 1 / 🎉 5

Really clean phase 1 — the only thing I'd want before it goes non-draft is clarity on those 36 visual diffs. Nice work paying down dagre-wrapper.

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a0449a4
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a2fba8e870fd30008bfd546
😎 Deploy Preview	https://deploy-preview-7807--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.