Drawnix is an open-source, all-in-one whiteboard tool designed for teams and individuals who need a flexible canvas to create mind maps, flowcharts, and freehand sketches. Built on the Plait drawing framework and leveraging Slate for rich text editing, it combines intuitive visual editing with a plugin-based architecture to support extensibility and future integrations. Unlike basic drawing tools, Drawnix offers structured diagramming with automatic saving, export capabilities, and mobile responsiveness—all while remaining free and open-source. It targets developers, product teams, educators, and creatives who want a powerful yet lightweight alternative to commercial whiteboard platforms like Miro or FigJam, without vendor lock-in.
The project is maintained by the team behind PingCode Wiki and serves as a public-facing application built on their internal Plait framework. This makes Drawnix not just a standalone product but also a showcase of robust, modular frontend architecture that supports multiple UI frameworks and rich text integrations. Its focus on local-first storage via browser cache ensures reliability without requiring a backend, making it ideal for offline use or low-bandwidth environments.
What You Get
- Mind maps & flowcharts - Create structured diagrams with nodes and connectors, supporting Mermaid syntax for automatic flowchart generation and Markdown-to-mindmap conversion.
- Freehand drawing with brush tools - Use a customizable paint tool for sketching, annotations, or unstructured ideation directly on an infinite canvas.
- Plugin-based architecture - Extensible design allows for future integration of new editors, shapes, or collaboration features via modular plugins.
- Export to PNG and .drawnix (JSON) - Save your work as a shareable image or as a reusable JSON file to preserve all elements and structure for later editing.
- Auto-save with browser cache - Changes are automatically saved locally in the browser, eliminating data loss without requiring an account or server.
- Undo/Redo, copy/paste, zoom & pan - Full editing suite with infinite canvas support for detailed diagrams and large-scale visual workflows.
- Mobile-optimized interface - Responsive design works seamlessly on tablets and smartphones for on-the-go brainstorming.
- Dark/light theme support - Adjustable color themes to reduce eye strain and match user preferences.
Common Use Cases
- Building a knowledge base for product teams - Teams use Drawnix to visually map user journeys, feature dependencies, or sprint retrospectives without needing a SaaS subscription.
- Creating educational diagrams for remote learning - Instructors draw mind maps of complex topics (e.g., system architecture) and export them as PNGs for student handouts.
- Problem → Solution flow: Need a free alternative to Miro? - Organizations with budget constraints use Drawnix to replace paid whiteboard tools, leveraging its local-first storage and plugin system for long-term customization.
- DevOps teams documenting infrastructure - Engineers sketch service dependencies or deployment pipelines using flowcharts with Mermaid syntax, then export to share in documentation repositories.
Under The Hood
Drawnix is a sophisticated whiteboarding framework built on top of the Plait and Slate libraries, designed to enable rich, collaborative drawing experiences with a modular and extensible architecture. It emphasizes component reusability and developer-friendly design patterns to support scalable UI development.
Architecture
Drawnix follows a layered architecture that promotes clear separation of concerns and modularity.
- The project adopts a monorepo structure with distinct packages for the web application and core library, enabling plugin support and extensibility.
- UI components and core logic are organized into well-defined modules that interact through shared interfaces and abstractions.
- Component composition and state management are key design patterns that support scalable and maintainable development practices.
Tech Stack
The project leverages modern web technologies to deliver a responsive and feature-rich drawing interface.
- Built with TypeScript and React, using Vite for fast development and Nx for monorepo management.
- Integrates Plait framework components as the foundation for whiteboarding features, alongside utilities like localforage and classnames.
- Employs Playwright for end-to-end testing and Jest for unit tests, complemented by ESLint and Prettier for code quality.
Code Quality
The codebase reflects a balanced approach to testing and consistency, with room for improvement in some areas.
- A comprehensive test suite includes both unit and end-to-end testing configurations, demonstrating a strong commitment to validation.
- Error handling is consistently implemented across components using structured try/catch blocks and custom error propagation.
- The codebase adheres to TypeScript and SCSS conventions, with consistent naming and modular organization enhancing maintainability.
- While the structure supports scalability, some generic error handling patterns indicate potential technical debt in core logic.
What Makes It Unique
Drawnix distinguishes itself through its modular architecture and extensibility model tailored for drawing tools.
- It introduces a plugin-based approach to interactive whiteboarding, allowing developers to build and integrate custom features.
- The framework emphasizes reusable UI components and a clean separation between core logic and presentation layers.
- Its integration with Plait and Slate provides a powerful foundation for rich, collaborative drawing experiences.