Drawnix

Drawnix is a free, open-source whiteboard built for individuals and teams who need to think visually without bouncing between tools. It unifies mind mapping, flowchart diagramming, and freehand sketching in a single browser-based canvas, with automatic local persistence so nothing is ever lost between sessions.

At its core, Drawnix is powered by the Plait drawing framework — an open-source library developed by the PingCode team with extensive experience in knowledge-base products. This foundation gives Drawnix a production-grade plugin architecture that keeps mind map logic, flowchart rendering, freehand strokes, and text editing cleanly separated and independently extensible.

The tool stands out with two conversion features that eliminate manual diagramming: pasting markdown text instantly generates a structured mind map with proper hierarchical nesting, and Mermaid syntax is automatically rendered as fully editable flowchart diagrams. Combined with five-language i18n support, clipboard export to PNG and SVG, and a Docker image for self-hosting, Drawnix covers the full workflow from brainstorming to sharing.

Drawnix runs entirely in the browser with no account required. Canvases are saved to IndexedDB via localforage, and files can be exported as PNG, JPG, or the native .drawnix JSON format for later re-import. A hosted SaaS version is available at drawnix.com for teams that prefer zero infrastructure.

What You Get

• Mind Map Editor - Create hierarchical mind maps with keyboard-driven node expansion, emoji support, and automatic layout algorithms inherited from the Plait mind library.
• Flowchart Diagramming - Draw process diagrams using shapes, connectors, and arrow types (straight, elbow, curve) with snap-to-grid alignment and Mermaid syntax import.
• Freehand Drawing - Sketch freely with a felt-tip pen or eraser tool backed by a stroke-smoothing algorithm, with configurable presets for color, thickness, and brush style.
• Markdown-to-Mindmap Conversion - Paste any markdown outline and Drawnix instantly converts headings and bullet points into a structured, editable mind map diagram.
• Mermaid Syntax Rendering - Import Mermaid flowchart definitions and have them rendered as fully interactive, editable diagram elements on the canvas.
• Multi-format Export - Export your whiteboard as PNG, JPG, SVG copied to clipboard, or the native .drawnix JSON format that preserves all elements and viewport state.
• Auto-save with IndexedDB - All changes are automatically persisted to browser storage via localforage, surviving page refreshes without any manual save action.
• Infinite Canvas - Pan and zoom without limits, with smooth gesture support optimized for both desktop mouse and mobile touch input.
• Five-Language Interface - Full UI internationalization covering English, Chinese (Simplified), Russian, Arabic, and Vietnamese.
• Plugin-Extensible Architecture - Add new drawing primitives or UI behaviors by composing board plugins, with support for Angular and React UI framework targets.

Common Use Cases

• Sprint planning mind maps - Product managers paste a markdown feature list to instantly generate a visual hierarchy of epics, stories, and tasks for whiteboard review sessions.
• API flow documentation - Backend developers write Mermaid sequence diagrams in code, then import them into Drawnix to produce annotated, shareable flowchart visuals for onboarding docs.
• Concept teaching - Educators convert structured markdown course notes into interactive mind maps that students can explore and expand during online lectures.
• Self-hosted team whiteboard - DevOps teams deploy Drawnix via Docker on internal infrastructure to give distributed engineers a shared diagramming canvas without sending data to external SaaS providers.
• UI wireframe sketching - Designers use freehand mode with preset brush styles to quickly sketch interface layouts on a shared canvas before committing to Figma.
• Architecture brainstorming - Engineers combine freehand annotations, geometric shapes, and connectors to explore system architecture options in a single session.

Under The Hood

Architecture Drawnix follows a functional plugin composition architecture built on the Plait framework, where each major capability — mind maps, flowchart shapes, freehand strokes, hotkeys, pencil mode, text links — is implemented as a board-augmenting plugin that wraps and extends the board’s method table rather than subclassing it. This produces a clean pipeline where plugins are composed in a defined order and each feature layer intercepts only the board operations it owns. Application state flows through a React Context holding a typed DrawnixState record, while board mutations happen through Plait’s transform layer to ensure consistent history tracking. The monorepo separates the drawing core (drawnix package), the React view layer (react-board), and text rendering (react-text) from the web shell, allowing the core to be embedded in other applications independently of the hosted product.

Tech Stack Drawnix is built with React 19 as the UI runtime and Plait as the diagram primitive and plugin orchestration layer, with Slate handling all rich-text editing within diagram nodes. Floating-ui manages the dynamic popup toolbars that appear on element selection. Data persistence relies on localforage, which automatically selects IndexedDB with a localStorage fallback. Rough.js provides the sketch-style geometry rendering for shapes. The toolchain runs on Vite for fast development and production builds, Nx for monorepo task orchestration, TypeScript throughout, and oxlint plus oxfmt as the linter and formatter combination. The Docker image exposes a static site served via Node.js, making self-hosting straightforward with a single docker pull command.

Code Quality The codebase maintains consistent TypeScript coverage across all packages with well-typed plugin interfaces and a clear state model. The plugin pattern enforces a clean separation of concerns and makes adding new drawing primitives predictable. Linting with oxlint and formatting with oxfmt are configured project-wide. Test infrastructure is present — vitest configs, tsconfig.spec files, and spec files exist across all packages — but test coverage is largely aspirational: the primary component spec has its render assertion commented out and most other specs are placeholder stubs. Error handling is minimal with no custom error classes, relying on TypeScript’s type system to prevent mistakes rather than runtime guards. The i18n system is well-structured with translation files for five languages and a centralized hook providing type-safe key access.

What Makes It Unique The combination of markdown-to-mindmap and Mermaid-to-flowchart text conversion in a single whiteboard canvas is Drawnix’s clearest differentiator — both conversions produce fully editable diagram elements rather than static images. The Plait plugin architecture enables multi-framework support at the rendering level, so the same drawing core can target Angular or React view layers without forking the logic. The freehand system includes a dedicated stroke smoother that produces physically plausible pressure curves rather than raw pointer coordinates. Five-language internationalization including Arabic (RTL) support was built in early, reflecting the project’s international contributor community. The tutorial overlay uses SVG-based curved arrow pointers that dynamically reference toolbar positions without hardcoded pixel coordinates, demonstrating an attention to maintainability in the onboarding experience.

Self-Hosting

Drawnix is released under the MIT License, which is one of the most permissive open-source licenses available. You are free to use, modify, distribute, and commercially deploy Drawnix without any royalty obligations, attribution requirements beyond preserving the license header, or copyleft restrictions that would affect your own proprietary code. There are no enterprise edition gating mechanisms, license key checks, or feature flags restricting self-hosted deployments — the full codebase as published is what you deploy.

Running Drawnix yourself is operationally lightweight. The official Docker image (pubuzhixing/drawnix:latest) serves a pre-built static site, so the infrastructure requirement is simply a container runtime with a web server — no database, no message queue, no background workers. Canvas data lives entirely in each user’s browser storage via IndexedDB, which means there is no centralized data store to back up, migrate, or secure on the server side. The operational burden is essentially that of serving static files: keep the container updated when new releases ship, expose it behind a reverse proxy or CDN of your choice, and handle TLS termination. Updates require pulling the new image and restarting the container.

The trade-off versus the hosted drawnix.com is primarily around real-time collaboration and managed updates. The current release does not include built-in multi-user real-time sync — each browser maintains its own local canvas state, so collaborative sessions require sharing exported .drawnix files rather than working on a shared live canvas. The drawnix.com hosted service receives updates continuously ahead of tagged releases, so self-hosters may lag behind new features. There are no formal SLAs, dedicated support channels, or high-availability guarantees for self-hosted deployments beyond what the community provides through GitHub Issues and the project’s public repository.