Skip to content

WIP Reactflow interactive diagrams#2954

Draft
anegg0 wants to merge 15 commits intomasterfrom
reactflow-interactive-diagrams
Draft

WIP Reactflow interactive diagrams#2954
anegg0 wants to merge 15 commits intomasterfrom
reactflow-interactive-diagrams

Conversation

@anegg0
Copy link
Copy Markdown
Contributor

@anegg0 anegg0 commented Dec 17, 2025

No description provided.

@vercel
Copy link
Copy Markdown

vercel bot commented Dec 17, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
arbitrum-docs Ready Ready Preview Apr 8, 2026 10:59pm

Request Review

anegg0 added 5 commits April 2, 2026 22:03
Draw.io XML to ReactFlow converter with manifest-driven navigation.
Parses .drawio files into interactive node graphs with zoom-to-node
transitions, cross-fade between diagrams, and back navigation.

Components: NavigableDiagram (orchestrator), ClickableNode (interactive
nodes with zoom), SubgraphNode (group containers), ImageNode (embedded
SVG/base64). Utilities: drawioToReactFlow (XML parser), parseManifest
(transition config). Adds reactflow, dagre, and motion dependencies.
Draw.io source files for transaction lifecycle and ticket submission
flows. Manifest XML for multi-diagram story navigation with zoom and
transition config. Background SVG with Arbitrum circuit-board pattern.
Includes Mermaid diagram sources for Stylus learning paths.
Diagram node styles using translucent glass fills with backdrop blur,
sharp corners (border-radius: 0), and Arbitrum brand colors. Includes
shape-specific colors, subgraph containers with navy/teal labels,
glass blue back button, dark mode support, animated edge flow,
blink animation, and accessibility media queries.
Replace static PNG/SVG images with DrawioReactFlow components on
transaction lifecycle and Inside Arbitrum Nitro pages. Add test page
for diagram development. Include design spec and implementation plan
for the manifest system.
Updated and removed static images brought in from master branch
merges during development.
@anegg0 anegg0 force-pushed the reactflow-interactive-diagrams branch from 06b02cc to d004f5b Compare April 3, 2026 05:10
anegg0 added 2 commits April 2, 2026 22:18
Delete 20 .mmd files from the original Mermaid-based approach,
fully replaced by Draw.io interactive diagrams.
Delete 3 .md files containing embedded Mermaid diagrams, unreferenced
anywhere in the codebase.
anegg0 added 5 commits April 7, 2026 21:48
Use !important to override theme-specific .react-flow__node
box-shadow that was bleeding onto image nodes (person icon,
envelope icons).
Use border-width: 1px 3px instead of separate border-left/right
to properly inherit border-style and border-color from base node.
Remove thicker left/right borders from process shapes — they
created a visible gap. Uniform 1px border from base node style.
Strip fillColor, strokeColor, and fontColor from converter output.
CSS now owns all visual styling via shape classes. Remove colors
from NodeData type and ClickableNode inline styles. Remove unused
extractFontColor helper.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant