Design
Recipe Mindmap UI
Visual architecture for the interactive recipe dependency graph.
Node Hierarchy
Root Recipe
Primary craft target
Sub-recipe
Intermediate dependency
Base Material
Leaf node — raw resource
Layout Strategy
Dagre Rank-Dir TB
Top-to-bottom layered graph. Root at top, leaves at bottom. Minimizes edge crossings via network-simplex.
Collapsible Subtrees
Sub-recipes fold into summary chips. Tap to expand inline without re-layouting the full graph.
Edge Routing
Smooth step-paths with rounded corners. Color-coded by dependency type: required (violet), optional (pink dashed).
Mini-map Overlay
Bottom-right thumbnail showing full graph extent. Drag viewport rectangle for fast navigation.
Interaction Model
- 1Pinch-zoom and pan via mouse wheel + drag on canvas background.
- 2Single-tap node opens detail drawer with ingredient breakdown and craft time.
- 3Double-tap leaf material marks it as “acquired” — node pulses pink and propagates readiness upward.
- 4Long-press any node to pin it; pinned nodes survive filter resets.