3D Sequence Diagram for Mixed Reality
Quick project built with Claude, Luma.ai (person model), and Three.js. I've been exploring 3D generative sequence diagrams for mixed reality.
Quick project built with Claude, Luma.ai (person model), and Three.js. I've been exploring 3D generative sequence diagrams for mixed reality, though this initial mockup uses hardcoded elements.
Github: https://github.com/atx-barnes/3d-sequence-diagram
The concept: navigate complex software systems by physically walking through different layers of abstraction based on queries, with the ability to pull up and modify code directly within the spatial environment.
Features
- 3D rendering of sequence diagram components
- Interactive camera controls for rotating and zooming
- Support for objects, messages, and lifelines
- Customizable colors and styles
- Dashed and solid message lines
- Multi-line text support for labels
Technologies Used
- React 18
- TypeScript
- Three.js
- React Three Fiber (@react-three/fiber)
- React Three Drei (@react-three/drei)
Next steps include implementing generative capabilities and enabling pathway queries. This would allow real-time code retrieval from repositories, with modifications automatically regenerating relevant portions of the diagram.
Working in unbounded virtual spaces leverages our neurological strengths in spatial memory and recall—similar to the method of loci memory technique. By anchoring information to familiar physical locations, we can unlock powerful new approaches to understanding and interacting with complex systems.
