Compact organic force layout + Mermaid diagram fix#5
Merged
Conversation
Mermaid reuses {{…}} (hexagon) and [[…]] (subroutine) for node shapes — e.g. the
Transport story's `T3{{"Middlebox"}}`. stripRichTextMarkup (which also cleans
Mermaid node labels) was turning that into invalid Mermaid, so the diagram
failed to render. Now only slug-shaped ids are resolved; non-slug {{…}}/[[…]]
(Mermaid syntax) pass through untouched — which also restores labels that were
previously dropped. Regression tests added.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Rework createSimulation to anchor each node to its hierarchical slice — every subcategory gets its own weighted angular wedge and protocols fan under it — so categories no longer collapse into a single spoke (the Web/API tangle and the Utilities vertical line). Nodes seed near their anchor; local charge (capped distanceMax) + short, firm links keep the graph about as dense as the radial layout while staying organic. Settles at ~510px max radius vs the old tangle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Consolidates the two outstanding changes into one PR (supersedes #4).
1. Force layout — compact, organic, clearly-fanned branches
The old force layout pulled every node of a category toward one anchor angle, so
categories collapsed into a spoke — the Web/API tangle and the Utilities/Security
vertical line. Reworked
createSimulationto anchor each node to itshierarchical slice: every subcategory gets its own weighted angular wedge and
protocols fan under it. Nodes seed near their anchor (not all at 0,0), and local
charge (capped
distanceMax) plus short, firm links keep the graph about asdense as the radial layout (~510px max radius) while staying organic.
Net effect: same readable density as before, but each branch is now clearly
separated. Verified in-browser — initial bloom, force↔radial↔mesh↔timeline
round-trips, and detail panels all clean.
2. Mermaid diagram fix (was #4)
stripRichTextMarkupmangled Mermaid's{{…}}/[[…]]node-shape syntax (theTransport story's
T3{{"Middlebox"}}), breaking that diagram. Now onlyslug-shaped ids resolve; Mermaid syntax passes through untouched — which also
restores labels that were silently dropped before.
All gates green: lint, svelte-check (0/0), 44 unit tests, 17 e2e.
🤖 Generated with Claude Code