Feat/update node style api#7745
Conversation
Exposes a closure-based API on RenderResult that allows consumers to update individual node SVG styles after render, without fragile DOM queries. The closure captures the internal nodeElems map at render time. API: updateNodeStyle(nodeId: string, style: Record<string, string>) => boolean - Returns true if node found and styled, false if unknown (no throw) - Closure scoped to render instance; re-render invalidates previous closure - Shape fallback order: rect, polygon, circle, ellipse, path - getNodeElements() returns snapshot copy, not live map (re-render safe) Closes mermaid-js#7517 Related: mermaid-js#5883 (highlight interaction), mermaid-js#3241 (programmatic interaction) AI-Assisted-By: Claude (Anthropic) — session 74cab98e
Adds packages/mermaid/src/__tests__/updateNodeStyle.spec.ts covering the public contract surfaced in 938b1f9e5 → amended as f9d69e5: - T1: updateNodeStyle is present on RenderResult and is a function - T2: valid node ID returns true and applies CSS properties - T3: unknown node ID returns false without throwing - T4: re-render produces independent closures — each closure only knows its own node IDs (snapshot semantics invariant) T4 directly exercises the snapshot-vs-live-map design decision from the PR description: getNodeElements() returns `new Map(nodeElems)` so each render's closure has its own frozen view that survives subsequent render()/clear() cycles on the live nodeElems. Cypress E2E counterpart (red-fill imgSnapshotTest) is referenced in the T2 comment but lives in a separate commit when added. Refs mermaid-js#7517 AI-Assisted-By: Claude (Anthropic) — session 74cab98e (original WIP), session 9f7359c9 (capture commit)
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
aloisklink
left a comment
aloisklink
left a comment
There was a problem hiding this comment.
Hi @greydove749, can you please update your PR description and title with what the PR is supposed to be doing?
But, from having a quick look at your code and ticket linked only in your commit, I think it's unlikely a feature like this would be added to Mermaid's API, since:
- We're very careful not to make implementation details like how the diagram renders public, since it might make future updates to mermaid very difficult!
- There are many diagram types that don't use nodes.
- We may in the future introduce rendering methods (e.g. ASCII/canvas) that don't use HTML elements.
- Styling nodes after they're rendered is usually dangerous, as it could potentially break the size/layout of boxes.
You may want to instead open an issue requesting this feature. There could be a better way to do what you want to do (e.g. using themeCSS).
2 participants
Note: first issue submitted; coauthored agentically; project uses mermaid to viz graphs specifying networks of agentic inference/execution.
📑 Summary
Brief description about the content of your PR.
Resolves #
📏 Design Decisions
Describe the way your implementation works or what design decisions you made if applicable.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.