Schematic Pro ⚡

A futuristic, interactive schematic editor for creating beautiful node-based diagrams with ortholinear routing, reroute waypoints, and visual connection controls.

✨ Features

🎨 Visual Design

• Futuristic UI with Space Grotesk font and cyberpunk aesthetics
• Infinite canvas with smooth pan and zoom
• Grid background with dynamic scaling
• Customizable colors for nodes and connections

🔗 Smart Connections

• Ortholinear routing - Clean L-shaped and Z-shaped paths
• Visual connection controls - Click edges to see handles
• Rotation controls - Cycle through top/right/bottom/left directions
• Reroute waypoints - Double-click edges to add control points
• Auto-routing - Intelligent path calculation

📦 Node System

• Drag and drop nodes
• Quick child creation - '+' button on each node
• Live text editing - Double-click to edit
• Color customization - Right-click for context menu
• Uppercase text with enhanced readability

💾 Save & Export

• LocalStorage persistence - Auto-save schemes
• Standalone HTML export - Share diagrams as single files
• Multiple schemes - Manage different projects
• Load/save shortcuts - Quick access

🚀 Quick Start

Installation

# Clone the repository
git clone https://github.com/yourusername/schematic-pro.git
cd schematic-pro

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to start creating!

Build for Production

npm run build
npm run preview

🎮 Controls

Canvas Navigation

• Pan: Click and drag on empty canvas
• Zoom: Mouse wheel
• Reset View: Click "Reset View" button

Node Operations

• Create Node: Click "Add Node" button
• Move Node: Drag node
• Edit Text: Double-click node
• Add Child: Click '+' button on node
• Delete Node: Right-click → Delete

Edge Operations

• Create Edge: Shift+Click on two nodes
• Select Edge: Click on connection
• Rotate Connection: Click handle → Click rotate button (↻)
• Add Reroute Point: Double-click edge
• Delete Reroute Point: Right-click reroute dot

Scheme Management

• Save: Ctrl+S (or toolbar button)
• Load: Click "Load Scheme" button
• Export HTML: Click "Export as HTML"

📐 Architecture

schematic-pro/
├── src/
│   ├── engine.js          # Canvas transform and viewport
│   ├── node-manager.js    # Node creation and management
│   ├── edge-manager.js    # Edge routing and rendering
│   ├── reroute-manager.js # Waypoint system
│   ├── edge-controls.js   # Visual connection controls
│   ├── color-manager.js   # Color picker
│   ├── context-menu.js    # Right-click menu
│   ├── scheme-manager.js  # Save/load/export
│   └── ui-manager.js      # UI interactions
├── style.css              # Futuristic styling
├── main.js               # App initialization
├── viewer.html           # Standalone viewer
└── index.html            # Main application

🎨 Customization

Colors

Edit CSS variables in style.css:

:root {
  --bg-color: #050505;
  --accent-color: #00f2ff;
  --accent-glow: rgba(0, 242, 255, 0.5);
}

Fonts

Change the font in style.css:

--font-futuristic: 'Space Grotesk', sans-serif;

🛠️ Technology Stack

• Vite - Fast build tool
• Vanilla JavaScript - No framework dependencies
• SVG - Crisp edge rendering
• CSS Grid - Responsive layout
• LocalStorage - Data persistence

📝 License

MIT License - see LICENSE file for details

🤝 Contributing

Contributions welcome! Please feel free to submit a Pull Request.

🐛 Known Issues

• None currently tracked

📮 Contact

Created with ⚡ by [Your Name]

---

Enjoy creating beautiful schematics! ✨