Structura is a powerful, interactive web application designed to help students and educators visualize data structures and generate corresponding code in real-time. Built with a focus on simplicity and educational value, it allows you to build complex diagrams visually and see the implementation logic instantly.
- Interactive Canvas: Seamlessly drag and drop nodes to build your data structures.
- Dual Support: Full support for both Singly Linked Lists and Doubly Linked Lists.
- Live Code Generation: Instantly view and copy code in Java and Python as you modify your diagram.
- State Management:
- Undo/Redo: Never worry about mistakes with a robust history system.
- Save/Load: Export your work to JSON and resume later.
- Smart Tools:
- Auto GC (Garbage Collection): Clean up orphaned nodes with one click.
- Zoom & Pan: Navigate through large structures with ease.
- User Experience:
- Keyboard Shortcuts: Power-user friendly with a built-in shortcut guide.
- Toast Notifications: Real-time feedback for all your actions.
- Responsive Splitter: Customizable workspace for coding and designing.
You can access the live version at: rendicahya.github.io/structura
- Clone the repository:
git clone https://github.com/rendicahya/structura.git cd structura - Install dependencies:
npm install
- Start development server:
npm run dev
- Build for production:
npm run build
- Add Nodes: Right-click anywhere on the canvas.
- Connect: Click a source node, then click a target node to create a link.
- Edit Data: Double-click any node to change its value.
- Delete: Use the context menu (right-click) or keyboard shortcuts.
- Shortcuts: Press
?to open the Keyboard Shortcut Guide.
Future plans for Structura include supporting more data structures:
- Stack visualization and code generation.
- Queue visualization and code generation.
- Tree (Binary Search Tree, AVL, etc.) visualization.
Contributions make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️ by Randy Cahya Wihandika