Drawnix is an open-source, browser-based whiteboard platform designed for teams and individuals who need to visually organize ideas through mind maps, flowcharts, and freehand sketches—all in one unified canvas. It solves the fragmentation problem of using separate tools for diagramming, note-taking, and brainstorming by integrating these workflows into a single, persistent, and collaborative environment.
Built on the Plait drawing framework and powered by Slate for rich text, Drawnix uses a plugin-based architecture to support extensible drawing primitives, markdown-to-mindmap conversion, and Mermaid syntax rendering. It runs entirely in the browser with automatic local saving, supports dark/light themes, and can be self-hosted via Docker or deployed as a SaaS at drawnix.com.
What You Get
- Mind Map Creation - Convert markdown text into structured mind maps with automatic node generation and hierarchical nesting.
- Flowchart Drawing - Visually design process diagrams using drag-and-drop nodes and connectors, with native Mermaid syntax import support.
- Freehand Drawing - Use a customizable brush tool to sketch ideas directly on the infinite canvas with pressure-sensitive stroke support.
- Markdown-to-Mindmap Conversion - Paste markdown headings and bullet points to instantly generate structured mind maps without manual dragging.
- PNG & .drawnix Export - Export your whiteboard as a PNG image or a native .drawnix JSON file to preserve all layers and interactivity.
- Plugin-Based Architecture - Extend functionality via modular plugins, enabling future integration with other UI frameworks like React and Angular.
- Automatic Local Saving - All edits are auto-saved to browser localStorage, ensuring no loss of work even without internet connectivity.
- Infinite Canvas with Zoom & Pan - Navigate unlimited drawing space with smooth zooming and panning, ideal for large diagrams and complex visualizations.
- Mobile-Optimized Interface - Fully responsive design that works on touch devices, allowing drawing and editing on tablets and smartphones.
Common Use Cases
- Brainstorming product features - Product managers use Drawnix to map out user journeys and feature dependencies using mind maps and freehand sketches during sprint planning.
- Teaching complex systems - Educators convert textbook markdown content into interactive mind maps to help students visualize relationships between concepts.
- Documenting API workflows - Developers draw flowcharts using Mermaid syntax to visualize HTTP request flows and microservice interactions for team documentation.
- Remote team ideation sessions - Distributed teams collaborate in real-time on a shared whiteboard to sketch product ideas, annotate screenshots, and link ideas with text notes.
Under The Hood
Architecture
- Monorepo structure managed by Nx with strict module boundaries enforced via ESLint rules, ensuring clear separation between core drawing logic, layout systems, and UI components
- Layered design with distinct packages for primitives, text editing (Slate), and plugins, orchestrated by a central App component
- Dependency injection achieved through path aliases and package-level exports, decoupling UI from core functionality
- Build and test pipelines standardized across projects using shared Nx configurations to maintain consistency
Tech Stack
- React 19 with Slate for rich-text and diagram editing, enhanced by custom Plait libraries for collaborative drawing
- Vite as the primary build and dev server, integrated with Nx for multi-app management and type declaration generation
- Nx orchestrates a unified toolchain including ESLint, Jest, Playwright, and Vite plugins for consistent linting, testing, and building
- TypeScript enforces type safety across all modules with comprehensive type definitions and path aliases
- Docker-based deployment using Node.js 20 and a static site image, with CI/CD-ready scripts for versioning and publishing
- Comprehensive testing frameworks (Jest, Playwright, @testing-library/react) are configured but underutilized in practice
Code Quality
- Clean, modular code organization with consistent naming conventions aligned with React and TypeScript best practices
- Strong type safety across the codebase due to rigorous TypeScript configuration
- Linting and build tooling are well-integrated and standardized, though test coverage is largely inactive or incomplete
- Minimal structured error handling; no custom error classes despite the presence of try/catch blocks in configuration
What Makes It Unique
- Native vector-based drawing engine with physics-aware line routing and dynamic arrowheads that auto-adjust to element movement
- Declarative property transform system enabling atomic, undoable diagram changes without direct DOM manipulation
- Context-aware popup toolbars that dynamically adapt to selected elements via a unified plugin architecture
- Tutorial system with intelligent, CSS-in-JS-powered feature pointers that auto-align to UI elements without hardcoded coordinates
- Intelligent font size control with draft state management that preserves user intent while enforcing design constraints
- Unified theming and i18n system that synchronizes visual language and localization across all components without duplication