A modern, local-first React application for creating interactive system architecture diagrams. Built with a Sci-Fi/Glassmorphism aesthetic, Synapse provides an intuitive drag-and-drop interface for designing and visualizing complex systems.
- Infinite Canvas: Pan and zoom freely across an unlimited workspace.
- Glassmorphism Design: Sleek dark mode UI with neon accents and blur effects.
- Customizable Themes: Toggle between Light and Dark modes (Coming Soon).
- Group Containers: Organize nodes into labeled, comprehensive groups with dashed borders.
- Drag-and-Drop Library: 60+ categorized icons (Cloud, Database, Security, etc.).
- Smart Nodes: Each node supports inputs/outputs, status indicators, and detailed metadata.
- Flexible Connections: Choose between Bezier, Straight, Step, or Smooth Step paths.
- Templates: Instantly load pre-built architectures (AWS, Azure, GCP, Microservices).
- Context Menu: Right-click to Duplicate, Delete, or control Z-Index (Bring to Front/Send to Back).
- Undo/Redo: Full history management with
Ctrl+Z/Ctrl+Y. - Property Panel: Real-time editing of node/edge properties side-by-side.
- Auto-Save: Automatic persistence to IndexedDB so you never lose work.
- File Management: Export and Import diagrams via
.synJSON files.
| Category | Technology | Description |
|---|---|---|
| Core | React 18 | Component-based UI library |
| Build | Vite | Next-generation frontend tooling |
| Canvas | React Flow | Interactive node-based diagramming |
| State | Zustand | Minimalist state management |
| Icons | Lucide React | Beautiful & consistent open-source icons |
| Styling | Tailwind CSS v4 | Utility-first CSS framework |
| Storage | idb-keyval | Promise-based IndexedDB wrapper |
- Node.js 18+
- npm or yarn
# 1. Clone the repository
git clone https://github.com/yourusername/synapse.git
cd synapse
# 2. Install dependencies
npm install
# 3. Start development server
npm run devThe application will be available at http://localhost:5173
npm run build
# Output will be in the `dist` folder- Add Nodes: Drag icons from the Assets sidebar onto the canvas.
- Group Items: Drag a Group Container and place nodes inside it.
- Connect: Drag from one node's handle (circle) to another.
- Customize: Click a node or line to open the Property Panel on the right.
- Nodes: Change labels, descriptions, and status (Active/Warning/Error).
- Edges: Change color, style (Bezier/Step), and flow animation.
Right-click any node/group to:
- Duplicate: Clone the node and its data.
- Bring to Front / Send to Back: Adjust visual layering.
- Delete: Remove from canvas.
| Shortcut | Action |
|---|---|
Ctrl + Z |
Undo |
Ctrl + Y |
Redo |
Ctrl + S |
Save / Export File |
Ctrl + O |
Open / Import File |
Delete |
Remove Selected |
src/
├── components/ # React components
│ ├── edges/ # Custom connection lines (CustomEdge)
│ ├── nodes/ # Node types (ServiceNode, GroupNode)
│ ├── Canvas.tsx # Main drawing area
│ ├── ContextMenu.tsx # Right-click menu
│ └── ...
├── config/ # Static configurations (templates, icons)
├── hooks/ # Custom hooks (useAutoSave)
├── lib/ # Utilities & persistence logic
├── store/ # Global state (Zustand + Temporal)
└── types.ts # TypeScript definitionsContributions are welcome!
- Fork the repo
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ by Synapse Contributors