Skip to content

Upgrade beautiful-mermaid from @theletterf fork to lukilabs v1.1.3#2771

Closed
theletterf wants to merge 2 commits intomainfrom
upgrade/beautiful-mermaid-1.0.1
Closed

Upgrade beautiful-mermaid from @theletterf fork to lukilabs v1.1.3#2771
theletterf wants to merge 2 commits intomainfrom
upgrade/beautiful-mermaid-1.0.1

Conversation

@theletterf
Copy link
Contributor

@theletterf theletterf commented Feb 23, 2026

Summary

  • Replaces the scoped fork @theletterf/[email protected] with the upstream [email protected] published by lukilabs (Craft Docs).
  • Since v1.0.0+ ships TypeScript source only (no dist/ folder), the copy:mermaid step is replaced by a build:mermaid step using esbuild, which bundles src/browser.ts into an IIFE browser global.
  • Adds [email protected] as a dev dependency.
  • Updates the window.__mermaid call from the deprecated renderMermaid alias to renderMermaidSVGAsync, and extends the type declaration with the new layout options (nodeSpacing, layerSpacing, componentSpacing, thoroughness, padding).
  • Replaces the complex flowchart example in docs/syntax/diagrams.md with a multi-tenant Azure architecture diagram showcasing nested subgraphs, per-subgraph direction overrides, and the hidden spacer node pattern.

⚠️ Size change

The embedded mermaid.min.js grows from ~134 KB → ~1.5 MB (uncompressed, embedded as EmbeddedResource in the binary). The increase is entirely due to v1.0.0 replacing dagre with elkjs (elk.bundled.js, ~1.6 MB). This is a deliberate upstream trade-off for better layout quality and synchronous rendering.

The file is lazy-loaded — only fetched by users who visit pages that contain Mermaid diagrams.

Test plan

  • Run npm run build:mermaid in src/Elastic.Documentation.Site/ and confirm _static/mermaid.min.js is produced.
  • Run dotnet build to confirm the asset embeds cleanly.
  • Spot-check a page with a Mermaid diagram renders correctly.

Replaces the scoped fork `@theletterf/[email protected]` with the
upstream `[email protected]` published by lukilabs/Craft Docs.

Key changes:
- Switch package name and update to v1.0.1
- Replace `copy:mermaid` (cp of pre-built bundle) with `build:mermaid`
  using esbuild, since v1.0.0+ ships TypeScript source only (no dist/)
- Add [email protected] as a dev dependency for the bundle step
- Update `window.__mermaid` call from deprecated `renderMermaid` to
  `renderMermaidSVGAsync`, and extend the type declaration with the new
  layout options (nodeSpacing, layerSpacing, componentSpacing, thoroughness)

Notable size change: the bundle grows from ~134 KB to ~1.5 MB because
v1.0.0 replaced dagre with elkjs (elk.bundled.js, ~1.6 MB uncompressed).
The file is lazy-loaded and only downloaded by users viewing pages with
Mermaid diagrams.

Co-authored-by: Claude <[email protected]>
Co-authored-by: Cursor <[email protected]>
@theletterf theletterf requested a review from a team as a code owner February 23, 2026 16:47
@theletterf theletterf requested a review from reakaleek February 23, 2026 16:47
@theletterf theletterf self-assigned this Feb 23, 2026
@theletterf theletterf added the fix label Feb 23, 2026
- Bumps beautiful-mermaid from 1.0.1 to 1.1.3.
- Replaces the Painless Operators complex flowchart with a multi-tenant
  Azure architecture diagram showcasing nested subgraphs, per-subgraph
  direction overrides, and the hidden spacer node pattern.

Co-authored-by: Claude <[email protected]>
Made-with: Cursor
@theletterf theletterf requested a review from a team as a code owner March 3, 2026 09:07
@theletterf theletterf changed the title Upgrade beautiful-mermaid from @theletterf fork to lukilabs v1.0.1 Upgrade beautiful-mermaid from @theletterf fork to lukilabs v1.1.3 Mar 3, 2026
@theletterf theletterf closed this Mar 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant