Drawnix is a free, MIT-licensed, all-in-one open-source whiteboard tool written in TypeScript that combines mind mapping, flowcharts, and freehand drawing on a single infinite canvas, built for individuals and teams who want a self-hostable or browser-based alternative to commercial whiteboard SaaS.

What it is

Drawnix is a whiteboard application, not a library or a component kit. It lives in the TypeScript and React ecosystem and sits on top of Plait, an open-source drawing framework originally developed by the same company and described in the README as a significant technical output of its knowledge-base product, PingCode Wiki. The application is split into apps/web for the drawnix.com front end, packages/drawnix for the whiteboard application, plus react-board and react-text for the React view and text rendering layers. Supporting dependencies include Slate for rich text editing and floating-ui for popover and overlay primitives.

The concrete problem it solves is fragmentation in diagramming. Mind mapping, flowcharting, and freehand sketching usually require separate tools with separate file formats and separate export paths. Drawnix puts all three modes on one infinite canvas and exports a single artifact: PNG for sharing, or JSON with the .drawnix extension for round-tripping. The README states it is free and open source, and the project describes itself as an out-of-the-box, open-source, free tool product, which is the position it takes against paid whiteboard SaaS offerings.

Key capabilities

• Combined mind map, flowchart, and freehand brush modes on one infinite canvas with zoom and scroll.
• Conversion of Mermaid syntax into flowcharts, and conversion of Markdown text into mind maps.
• Export to PNG and to JSON in the .drawnix format.
• Automatic saving to browser cache, with no server persistence step documented in the README.
• Standard editing operations including undo, redo, copy, and paste.
• Plugin architecture built on the Plait framework, supporting multiple UI frameworks such as Angular and React, and rich text integration currently limited to Slate.
• Image insertion, theme modes, and mobile device adaptation.

Who uses it and how

• Product and engineering teams that already keep knowledge in PingCode Wiki and want diagrams produced by the same underlying drawing framework.
• Writers and planners who draft outlines as Markdown and convert them into mind maps rather than drawing nodes by hand.
• Developers who want the whiteboard embedded rather than visited, pulling in packages/drawnix, react-board, and react-text as a React view layer.
• Self-hosters who pull the published container and run the whiteboard inside their own environment.
• Mobile users, since the README explicitly covers adaptation for mobile devices.

Getting started

For development, install dependencies with npm install and start the app with npm run start. For container deployment, run docker pull pubuzhixing/drawnix:latest; a hosted minimal application is also available at drawnix.com.

How it compares

No list of paid products this project replaces is provided in the facts, and no comparable whiteboard tools are named, so Drawnix stands alone in this registry. The only relationship the facts establish is vertical rather than competitive: Drawnix is an application built on the Plait drawing framework, which remains separately open source.

When to use it — and when not to

A self-hoster should note that the README documents no database, object storage, SMTP, or server-side persistence layer; the only storage described is automatic saving to browser cache, and the repository exposes a single Docker image rather than a compose file with backing services. The README also lists no real-time multi-user editing, so teams that need concurrent collaborative sessions with durable server-side history should not pick it on the strength of the collaboration topic tag alone. The project is also explicitly pre-Dawn (破晓): the README calls drawnix.com a minimized application and states it will be iterated frequently until that version ships, and the primary documentation is Chinese with a linked English README.

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

npm install

npm run start

docker pull pubuzhixing/drawnix:latest