Drawnix

Drawnix is an open-source, collaborative whiteboard tool and SaaS platform. It provides an infinite canvas for various creative and structured tasks.

Key capabilities include:

• Structured Diagrams: Mind maps, flowcharts (including Mermaid syntax conversion), and Markdown-to-mind-map conversion.
• Creative Tools: Freehand drawing and image support.
• Canvas Controls: Infinite canvas with zoom and pan capabilities.
• File Operations: Export to PNG, JPG, and .drawnix (JSON) formats.
• Editing: Standard features like Undo, Redo, Copy, and Paste.
• Persistence: Auto-save functionality using browser storage.
• Extensibility: A plugin-based architecture that allows for custom functionality and UI framework support (e.g., React, Angular).

Drawnix is an open-source, all-in-one SaaS whiteboard tool. It provides a unified workspace for creating mind maps, flowcharts, and freehand drawings.

Key features include:

• Versatile Creation: Supports mind maps, flowcharts (including Mermaid syntax conversion), and freehand drawing.
• Advanced Editing: Infinite canvas with zoom/scroll, undo/redo, copy/paste, and automatic saving to browser cache.
• Rich Content: Support for inserting images and converting Markdown text into mind maps.
• Extensibility: Built on a plugin-based architecture.
• Export Options: Export work as PNG or JSON (.drawnix) files.
• User Experience: Theme modes, mobile device adaptation, and high-performance editing.

Drawnix is built on top of the Plait drawing framework. It utilizes a plugin-based architecture which provides several advantages:

• UI Framework Agnostic: Can support multiple UI frameworks like Angular or React.
• Rich Text Integration: Currently integrates with the Slate framework for text editing.
• Modular Development: Allows for business logic separation and the creation of fine-grained, reusable plugins to extend whiteboard use cases.

Drawnix is built on the Plait drawing framework and utilizes a plugin-based architecture. This design choice provides several advantages for developers and integrators:

• UI Framework Agnostic: Supports multiple UI frameworks like Angular and React.
• Rich Text Integration: Integrates with rich text frameworks (currently supporting the Slate framework).
• Separation of Concerns: Enables better separation of the business layer during development.
• Granular Reusability: Allows for the development of fine-grained, reusable plugins that can be applied to various whiteboard application scenarios.

The repository is organized into applications and core packages:

• apps/web: The web application source (drawnix.com).
• packages/drawnix: The core whiteboard application logic.
• packages/react-board: The React view layer for the whiteboard.
• packages/react-text: The text rendering module.
• dist/: Build artifacts.

drawnix/
├── apps/
│   ├── web                   # drawnix.com
│   │    └── index.html       # HTML
├── dist/                     # 构建产物
├── packages/
│   └── drawnix/              # 白板应用
│   └── react-board/          # 白板 React 视图层
│   └── react-text/          # 文本渲染模块
├── package.json
└── ...

To deploy the Drawnix web application to Cloudflare Pages, connect your GitHub repository and use the following build configuration:

1. Framework preset: None
2. Build command: npm run build:web
3. Build output directory: dist/apps/web
4. Root directory: Leave empty

Environment Variables: You must set the following environment variable to ensure compatibility:

• NODE_VERSION = 20

After deployment, verify that the site is running and test page refreshes to ensure SPA (Single Page Application) routing works correctly via the included _redirects file.

Framework preset: None
Build command: npm run build:web
Build output directory: dist/apps/web
Root directory: (empty)

Environment variables:
NODE_VERSION = 20

To run the Drawnix project locally for development, ensure you have npm installed, then execute the following commands in the root directory:

1. Install dependencies: npm install
2. Start the development server: npm run start

Once your deployment is successful, you can attach a custom domain to your Drawnix project within the Cloudflare Pages dashboard:

1. Navigate to your project in Cloudflare Pages.
2. Click on the "Custom domains" tab.
3. Click "Set up a custom domain" (or similar) and add your domain.
4. Follow the prompts to configure your DNS settings as required by Cloudflare.

To execute the unit tests for the drawnix package, use the Nx CLI. The tests are powered by Vitest.

nx test drawnix

You can pull the latest Docker image for Drawnix from Docker Hub:

docker pull pubuzhixing/drawnix:latest

To run Drawnix locally for development, use the following commands in the repository root:

1. Install dependencies:

npm install

2. Start the development server:

npm run start

To execute the unit tests for the react-board package, use the Nx CLI with Vitest. This requires Nx to be installed and configured in your workspace.

nx test react-board