TurboDoc

A simple, interactive diagramming tool built with React, Next.js and Konva. Create flowcharts, mind maps, and process diagrams with an intuitive interface and powerful features.

Overview

TurboDoc is an open-source alternative to Miro and other commercial diagramming tools with a local-first approach. No sign-in required — your diagrams are saved directly to your browser's local storage.

With a focus on usability and performance, TurboDoc provides a seamless diagramming experience directly in your browser, with automatic saving to ensure you never lose your work.

Key Features

• Local-First Approach: No account creation or sign-in required
• Intuitive Canvas Interface: Infinite panning and zooming with mouse/keyboard controls
• Multiple Shape Types: Create diagrams with circles, rectangles, triangles, diamonds, and stars
• Smart Connections: Connect nodes with automatically routed connector lines
• Multi-selection and Batch Operations: Select multiple nodes to move, copy, delete or modify them together
• Keyboard Shortcuts: Productivity-focused keyboard shortcuts for all common operations
• Customization Options: Change colors, resize and rotate shapes
• Persistent Storage: Automatic saving to local storage
• Responsive Design: Works on desktop and tablet devices

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Usage Guide

Basic Controls

• Select: Click on a node to select it, or Shift+Click to select multiple nodes
• Move: Drag a node to move it around the canvas
• Add Node: Click the + button and select a shape, then click on the canvas
• Connect Nodes: Click the arrow button, then click source node followed by target node
• Delete: Select node(s) and press Delete key or use the toolbar
• Zoom: Use Ctrl+Mouse Wheel to zoom in and out
• Pan: Click and drag on empty canvas area to pan around

Keyboard Shortcuts

Press ? to view all available keyboard shortcuts within the application.

Common shortcuts:

• V - Selection mode
• A - Add node mode
• C - Connect mode
• D - Delete mode
• Ctrl+C / Ctrl+X / Ctrl+V - Copy, cut, paste
• Delete - Delete selected node(s)
• Ctrl+Z / Ctrl+Y - Undo/Redo (coming soon)

Contributing

TurboDoc is an open source project and contributions are welcome!

Development Setup

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR-USERNAME/turbodoc.git
3. Install dependencies: npm install or yarn install
4. Start the development server: npm run dev or yarn dev
5. Make your changes
6. Submit a pull request

Contribution Guidelines

• Follow the project's coding style and conventions
• Write meaningful commit messages
• Open issues for bugs or feature requests

Technical Details

TurboDoc is built with:

• Next.js - React framework
• React Konva - Canvas rendering library
• TypeScript - For type safety
• react-hotkeys-hook - Keyboard shortcuts management

License

TurboDoc is licensed under the MIT License.