Graphy

A Flutter-based interactive graph visualization and visual programming tool designed to help learn and understand graph algorithms through hands-on exploration.

Graphy is an educational application that combines graph theory with visual programming. It provides a split-screen interface where users can create and manipulate graphs while simultaneously building custom algorithms using a node-based visual programming system.

• Visual Graph Creation: Create vertices and edges with intuitive mouse interactions
• Direct Manipulation: Click to create vertices, Shift+Click to connect them with edges
• Pan and Zoom: Interactive viewer with zoom (0.1x - 5x) and pan capabilities
• Delete Elements: Select and remove vertices or edges with keyboard shortcuts
• Color Visualization: Vertices and edges support color properties for algorithm visualization

• Node-Based Programming: Build custom graph algorithms using a visual programming paradigm
• Drag-and-Drop: Create programs by dragging and connecting logical nodes
• Real-Time Execution: Run programs directly on the graph data structure
• Connection Manager: Visual connection system with type checking and validation

Graph System (lib/graph.dart)

• Graph: Main data structure containing vertices and edges
• Vertex: Graph nodes with position, color, and numbering
• Edge: Connections between vertices with color properties
• Colorable: Interface for visual styling
• Update notification system for real-time UI synchronization

Visual Programming (lib/visual_programmer/)

• Program: Execution engine for visual programs
• LogicalNode: Abstract interface for all visual programming nodes
• NodeManager: Manages node lifecycle and connections
• ConnectionManager: Handles connections between nodes
• ResourceManager: Provides access to graph data within programs
• Type System: Strong typing with support for generics and class hierarchies

UI Components (lib/ui/)

• Graph Screen: Interactive graph editor with transformation controls
• Programming Screen: Visual programming workspace
• Split Screen: Divides the interface between graph view and programming view
• Custom Widgets: Specialized widgets for vertices, nodes, and connections

lib/
├── algorithms/         # Graph algorithm implementations
│   └── dfs.dart        # Depth-first search
├── ui/
│   ├── screens/        # Main application screens
│   └── widgets/        # Reusable UI components
├── utils/              # Utility classes (vectors, drag helpers, etc.)
├── visual_programmer/  # Visual programming system
│   └── nodes/          # Available programming nodes
├── algorithms.dart     # Algorithm registry
├── graph.dart          # Core graph data structures
└── main.dart           # Application entry point

• Flutter SDK (>=3.4.4 <4.0.0)
• Dart SDK

1. Clone the repository
2. Install dependencies:

flutter pub get

3. Run the application:

flutter run

1. Click anywhere in the Graph View to create a vertex
2. Hold Shift and click another vertex to create an edge between them
3. Click a vertex to select it
4. Press Delete to remove the selected vertex

1. Right-click in the Programming View to open the node context menu
2. Select and place nodes from the available categories
3. Connect nodes by dragging from output to input connectors
4. Use the Start node to access graph vertices and edges
5. Build your algorithm logic using loops, conditionals, and data operations

• Observer Pattern: Update notifiers for reactive UI updates
• Strategy Pattern: Pluggable algorithm implementations
• Composite Pattern: Hierarchical node structure in visual programs
• Interface Segregation: Clean abstractions for LogicalNode, Colorable, etc.

Creating New Nodes

1. Create a new file in lib/visual_programmer/nodes/
2. Implement the LogicalNode interface
3. Define input/output variables with appropriate types
4. Implement the generateSteps() method for program execution

Graphy is designed as a learning tool for:

• Understanding graph data structures
• Visualizing graph algorithms
• Learning visual programming concepts
• Exploring algorithm design through experimentation

Potential areas for expansion:

• Graph import/export functionality
• More programming nodes for complex operations
• Algorithm animation and step-by-step execution
• Tutorial system for beginners
• Save/load graph and program configurations

This project is a personal / educational project.

Lukas