docs: Replace mermaid with reactflow-based diagram components#11770
Open
anthonyshew wants to merge 4 commits intomainfrom
Open
docs: Replace mermaid with reactflow-based diagram components#11770anthonyshew wants to merge 4 commits intomainfrom
anthonyshew wants to merge 4 commits intomainfrom
Conversation
Remove the mermaid dependency (~20 transitive deps including vulnerable lodash-es) and replace it with custom diagram components built on top of the reactflow library already in use by the devtools page. New components: - Flowchart parser supporting graph LR/TD, nodes, edges, labels, subgraphs - Sequence diagram parser supporting participants, messages, notes, blocks - FlowDiagram: reactflow-based renderer with auto-layout - SequenceDiagram: SVG-based renderer with theme support - Custom remark plugin replacing fumadocs remarkMdxMermaid Also upgrades streamdown from v1 to v2, which drops its mermaid transitive dependency (net -91 packages from lockfile). Resolves TURBO-5267 (lodash-es prototype pollution vulnerability).
vercel
bot
temporarily deployed
to
Preview – turborepo-test-coverage
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Edges were connecting to top/bottom handles regardless of graph direction, causing ugly curved arcs in LR layouts. Now each edge specifies the correct sourceHandle/targetHandle based on direction (LR uses right->left, TD uses bottom->top, etc.).
vercel
bot
temporarily deployed
to
Preview – turborepo-test-coverage
vercel
bot
temporarily deployed
to
Preview – turborepo-test-coverage
vercel
bot
temporarily deployed
to
Preview – turborepo-test-coverage
anthonyshew
changed the title
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.
Summary
mermaidnpm package and its ~20 transitive dependencies (including the vulnerablelodash-es@4.17.21)reactflow, which is already a dependency used by the devtools pagestreamdownfrom v1 to v2, which drops its mermaid transitive dependency (net -91 packages from the lockfile)What changed
The old
<Mermaid>component dynamically imported the full mermaid library to render SVGs client-side. The new implementation:reactflowwith auto-layout (DAG depth-based positioning) and direction-aware edge handles```mermaidcode block headerremarkMdxMermaidfrom fumadocs-core with a custom one that produces the same<Mermaid chart="..." />JSX outputSupported mermaid syntax:
graph LR/TD/TB/RL/BT, node shapes (rect, round, circle, diamond, stadium, subroutine), edge styles (arrow, plain, dotted, thick), edge labels, subgraphsHow to test
A demo page is included at
/docs/diagram-exampleswith flowcharts (simple, branching, node shapes, subgraphs, task graph) and sequence diagrams (request/response, cache flow with alt blocks, auth flow). Runpnpm dev --filter=docsand visit the page.Closes TURBO-5267