Aitu - Open-source whiteboard tool (SaaS), an all-in-one collaborative canvas that includes mind mapping, flowcharts, freehand and more.

Whiteboard with mind mapping, flowcharts, freehand drawing and more

中文

Features

• 💯 Free and Open Source
• ⚒️ Mind Maps and Flowcharts
• 🖌 Freehand
• 😀 Image Support
• 🚀 Plugin-based Architecture - Extensible
• 🖼️ 📃 Export to PNG, JPG, JSON(.drawnix)
• 💾 Auto-save (Browser Storage)
• ⚡ Edit Features: Undo, Redo, Copy, Paste, etc.
• 🌌 Infinite Canvas: Zoom, Pan
• 🎨 Theme Support
• 📱 Mobile-friendly
• 📈 Support mermaid syntax conversion to flowchart
• ✨ Support markdown text conversion to mind map（New 🔥🔥🔥）

About the Name

Aitu is born from the love of creation and the pursuit of visual expression.

Ai represents passion and dedication to creation, while tu symbolizes the infinite possibilities of visual expression. Here, each creation is a pursuit of beauty, every stroke an extension of imagination.

Creativity stems from inner love, and Aitu is committed to being a powerful assistant for every creator.

Love Creation, Visualize the Future.

About Plait Drawing Framework

Aitu is positioned as an out-of-the-box, open-source, and free tool product. It is built on top of the Plait framework, which is an open-source drawing framework representing significant technical accumulation in knowledge visualization products.

Aitu uses a plugin architecture, which is technically more complex than traditional open-source tools. However, this plugin architecture has its advantages: it supports multiple UI frameworks (Angular, React), integrates with different rich text frameworks (currently only supporting Slate framework), enables better business layer separation in development, allows development of various fine-grained reusable plugins, and can expand to more whiteboard application scenarios.

Repository Structure

aitu/
├── apps/
│   ├── web                   # Aitu web application
│   │    └── index.html       # HTML
├── dist/                     # Build artifacts
├── packages/
│   └── drawnix/              # Whiteboard application core
│   └── react-board/          # Whiteboard react view layer
│   └── react-text/           # Text rendering module
├── package.json
├── ...
└── README.md
└── README_en.md

Try It Out

https://aitu.chat is the online application of Aitu.

We will be iterating frequently on application features to continuously optimize user experience.

🚀 Quick Start

Online Experience

Visit aitu.chat directly to start using it immediately, no installation required.

Local Development

Requirements

• Node.js >= 16.0.0
• npm >= 8.0.0

Installation Steps

# Clone the repository
git clone https://github.com/ljquan/aitu.git
cd aitu

# Install dependencies
npm install

# Start development server
npm start

After successful startup, visit http://localhost:4200 to see the application.

Available Commands

# Development
npm start                    # Start development server
npm test                     # Run tests
npm run build                # Build all packages
npm run build:web            # Build web app only

# Version Management
npm run version:patch        # Version +0.0.1
npm run version:minor        # Version +0.1.0  
npm run version:major        # Version +1.0.0

# Release
npm run release             # Release patch version
npm run release:minor       # Release minor version
npm run release:major       # Release major version

📚 Documentation

Detailed development documentation is located in the docs/ directory:

• Version Control - Version management and release process
• Deployment Guide - Cloudflare Pages deployment
• PWA Configuration - PWA icon generation guide

🧪 Testing

# Run all tests
npm test

# Run specific project tests
nx test drawnix
nx test react-board

📖 Usage Guide

Basic Features

Creating Content

• Mind Maps: Click the mind map icon in the toolbar to start creating branch nodes
• Flowcharts: Select flowchart tools to drag and create shapes and connectors
• Freehand Drawing: Use brush tools for hand-drawn creations
• Text Editing: Double-click anywhere to add text

Import/Export

• Export Formats: Supports PNG, JPG, JSON(.drawnix) formats
• Text Conversion:
  • Support Markdown text to mind map conversion
  • Support Mermaid syntax to flowchart conversion

Shortcuts

• Ctrl/Cmd + Z: Undo
• Ctrl/Cmd + Y: Redo
• Ctrl/Cmd + C: Copy
• Ctrl/Cmd + V: Paste
• Mouse wheel: Zoom canvas
• Drag: Move canvas

🔧 Plugin Development

Aitu is built on a plugin architecture and supports custom extensions:

import { withFreehand, withMind, withDraw } from '@aitu/core';

// Create editor instance with specific plugins
const editor = withFreehand(
  withMind(
    withDraw(createEditor())
  )
);

🐳 Docker Deployment

# Pull image
docker pull ljquan/aitu:latest

# Run container
docker run -d -p 8080:80 ljquan/aitu:latest

Visit http://localhost:8080 to use.

🏗️ Technical Architecture

Tech Stack

• Frontend Framework: React 18.3+ with TypeScript
• Build Tools: Vite + Nx (Monorepo)
• UI Component Library: TDesign React
• Drawing Engine: Plait Framework
• Rich Text Editor: Slate.js
• State Management: React Context + Hooks
• Styling: Sass + CSS Module

Core Modules

packages/
├── drawnix/           # Core whiteboard application
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── plugins/       # Feature plugins  
│   │   ├── transforms/    # Data transformations
│   │   └── utils/         # Utility functions
├── react-board/       # Plait React adapter layer
├── react-text/        # Text rendering components

Plugin System

Uses a composable plugin architecture where each plugin handles specific functionality:

• withFreehand: Freehand drawing capabilities
• withMind: Mind mapping functionality
• withDraw: Basic shape drawing
• withHotkey: Keyboard shortcut support
• withTextLink: Text link functionality

📦 Dependencies

Core Dependencies

• plait - Open source drawing framework providing underlying drawing capabilities
• slate - Rich text editor framework handling text editing logic
• floating-ui - Floating layer positioning library for toolbars and popups
• tdesign-react - Enterprise-class UI component library
• localforage - Browser storage solution supporting auto-save

Development Dependencies

• Nx: Monorepo management tool
• Vite: Modern build tool providing fast development experience
• TypeScript: Type-safe JavaScript superset
• ESLint + Prettier: Code quality and formatting tools

🤝 Contributing Guide

We welcome and appreciate any form of contribution!

Ways to Contribute

🐛 Report Issues

• Use GitHub Issues to report bugs
• Please provide detailed reproduction steps and environment information
• Screenshots or screen recordings would be very helpful

💡 Feature Requests

• Mark as enhancement in Issues
• Describe use cases and expected behavior
• Discuss technical implementation approaches

🔧 Code Contributions

1. Fork the Project

   git clone https://github.com/your-username/aitu.git
   

2. Create Feature Branch

   git checkout -b feature/your-feature-name
   

3. Local Development

   npm install
   npm start
   

4. Code Standards

   • Follow existing code style
   • Run nx lint to check code quality
   • Run nx test to ensure tests pass
   • Add necessary test cases

5. Commit Changes

   git add .
   git commit -m "feat: add your feature description"
   

6. Push and Create PR

   git push origin feature/your-feature-name
   

📝 Documentation Contributions

• Improve README documentation
• Enhance code comments
• Write usage tutorials

Development Conventions

• Commit Message Format: Follow Conventional Commits
• Branch Naming: feature/feature-name, fix/issue-description, docs/documentation-update
• Code Style: Use ESLint + Prettier for consistency

🚨 Troubleshooting

Common Issues

Installation Problems

# Clear cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Development Server Startup Failure

# Check port occupation
lsof -i :4200

# Specify another port
npm start -- --port 3000

Build Failures

# Check TypeScript type errors
nx typecheck drawnix

# Check code style
nx lint drawnix

Performance Issues

• Large whiteboard files may cause slow rendering
• Recommend splitting into multiple smaller files
• Disable unnecessary plugin features

Getting Help

• 📖 Check Documentation
• 💬 Submit Issue
• 🗣️ Join Discussions

🗺️ Roadmap

Completed ✅

• ✅ Basic whiteboard functionality
• ✅ Mind maps and flowcharts
• ✅ Freehand drawing and image insertion
• ✅ Markdown/Mermaid conversion
• ✅ Mobile adaptation

In Development 🚧

• 🚧 Collaboration features (real-time multi-user editing)
• 🚧 More export formats (PDF, SVG)
• 🚧 Template system
• 🚧 Plugin marketplace

Planned 📅

• 📅 Cloud sync storage
• 📅 Version history management
• 📅 Open API platform
• 📅 Desktop client

Follow Releases for release plans.

License

MIT License