Drawnix: an open source whiteboard tool with integrated mind mapping and flowcharting

Drawnix is a powerful open source online whiteboard tool that integrates mind mapping, flowcharting, and hand-drawing functionality on an infinite canvas, providing users with a free space to create. The tool is free and can be used directly in the browser without complex installation and deployment.Drawnix is developed based on a plug-in architecture, which makes it highly extensible and capable of supporting different front-end frameworks and rich text editors. The tool supports autosave, which stores data in the browser cache, effectively preventing data loss. In addition, it supports exporting content to multiple formats and provides a consistently good experience on both desktop and mobile devices. For users who are used to generating diagrams using code, Drawnix also supports direct conversion to flowcharts and mind maps via Mermaid syntax and Markdown text.

Function List

• free and open source:: Users have free access to all features, as well as the possibility of secondary development and private deployment according to their needs.
• multifunctional integration: Support mind mapping, flowcharting, hand drawing, shape drawing, line and text tools to meet diverse drawing needs.
• Plug-in Architecture: The underlying is based on the Plait framework, which supports the integration of a variety of UI frameworks (e.g. Angular, React) and rich-text frameworks.
• Infinite Canvas: Offering unlimited creative space, users can zoom and scroll the canvas at will.
• autosave: Plotting content is automatically saved in the browser cache to avoid data loss due to unforeseen circumstances.
• Multiple export formats: Support exporting works to image formats such as PNG, JPG, or.drawnixof the JSON file.
• Theme Mode: A variety of themes are built-in, including Default, Colorful, Soft, Retro, Dark Night and Starry Night modes, which users can switch between according to their preferences.
• Cross-platform use: Responsive design ensures a great operating experience on both desktop and mobile devices.
• Code Generated Charts: Support for converting code blocks to flowcharts using the Mermaid syntax, and for converting Markdown text to a mind map (new support 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥).
• Rich Editing Functions: Provides basic editing functions such as undo, redo, copy, and paste.

Using Help

Drawnix is designed to provide an "out-of-the-box" experience, allowing users to go directly to its official website at https://drawnix.com to get started without having to download or install any software.

Local Installation and Deployment

For users who wish to do secondary development or private deployment, you can follow the steps below to install Drawnix in your local environment.

Environmental requirements.
Before you begin, make sure your computer has theNode.jsThe

Installation steps.

1. Download source code:
   Visit Drawnix's GitHub repository page (https://github.com/plait-board/drawnix), click the "Code" button on the page, and then select "Download ZIP "to download the project source code locally.
2. Unzip the file:
   Extract the downloaded ZIP file into any folder of your choice.
3. Installation of dependencies:
   Open a command line tool (e.g. Terminal or CMD) and go to the root directory of the extracted project. Run the following command to install the dependency packages required by the project:

npm install

This process may take some time as it will download and install all the necessary dependencies.

4. Initiation of projects:
   Once the dependency installation is complete, go ahead and run the following command from the command line to start the Drawnix application:

npm run start

After the command is successfully executed, you will see on the command line that the application has been successfully launched and you will be prompted to visit thehttp://localhost:4200(or other port as specified).

5. Access to applications:
   Open your browser and enter the above address to start using the full functionality of Drawnix in your local environment.

Core Functions Operation Guide

1. Thinking maps

• Creating Nodes: Double-click the mouse in a blank space on the canvas to create a root node.
• Adding child nodes: Select a node and you will see a "+" icon around the node, click on it to create a child node below the node.
• Edit Text: Double-click any node to enter the text editing mode, you can modify the text content in the node.
• drag-and-drop (computing): Holding down the left mouse button and dragging a node changes its position in the mind map. Dragging it to another node changes its parent-child relationship.

2. Flowcharts

• Creating Graphics: Select your desired flowchart shape (e.g., rectangle, diamond, circle, etc.) from the toolbar on the left, then drag and drop it on the canvas to draw it.
• connection line: Select a graph and hover the mouse over the edges of the graph and connection points will appear. Hold down the left mouse button and drag from the connection point of one graph to the connection point of another graph to create a connection line.
• Adding Arrows: When dragging a line from the edge of a drawing, you can create arrows with directions to indicate the direction of the flow.

3. Freehand drawing and shape tools

• paintbrush tool: Select the Brush tool in the left toolbar for freehand drawing directly on the canvas, suitable for sketching and quick labeling.
• Shape Tools: The toolbar provides a variety of basic shapes such as rectangles, circles, triangles, etc., which can be selected and drawn directly on the canvas.
• Insert picture: By clicking the Picture icon in the toolbar, you can upload a local picture and insert it anywhere on the canvas.

4. Mermaid and Markdown syntax support

• Markdown to Mind Map: Select the Markdown tool in the toolbar, paste the written Markdown text, and Drawnix will automatically convert it into a structured mind map.
• Mermaid to Flowchart: Similarly, selecting the Mermaid tool and pasting the code for the Mermaid syntax can quickly generate the corresponding flowchart.

5. Canvas operations

• panning: Hold down the middle mouse button or press the left mouse button while holding down the space bar to drag the canvas for panning.
• resizing: Use the mouse wheel to easily zoom in and out of the canvas for infinite canvas navigation.

application scenario

1. Teamwork and Brainstorming
   In team meetings, members can use Drawnix to brainstorm together on an infinite canvas, recording ideas in real time, drawing mind maps, and organizing the results of the discussion into a flowchart, which greatly improves collaboration efficiency.
2. Project planning and management
   Project managers can use Drawnix to create project flowcharts, mind maps of the task breakdown structure (WBS), and clearly show the linkages and dependencies between the various phases of the project, making it easy for team members to understand and execute.
3. Learning and knowledge organization
   Students and researchers can use Drawnix to organize class notes, construct mind maps of their body of knowledge, or draw complex scientific flow charts to make abstract knowledge visually accessible.
4. Software Design and Architecture
   Software developers and architects can use Drawnix to draw system architecture diagrams, UML diagrams, and data flow diagrams to help teams better understand software design and interaction logic between modules.

QA

1. Is Drawnix completely free?
   Yes, Drawnix is a completely free and open source tool. You can use all of its features for free, and you are also free to deploy it for secondary development or privatization.
2. Is my data safe?
   Drawnix automatically saves your drawing data in your browser's local cache by default. This means that the data is stored on your own device and is not uploaded to a cloud server, keeping it private.
3. What export formats does Drawnix support?
   Currently, you can export the contents of the canvas to common image formats such as PNG, JPG, and so on, as well as to.drawnixFormatted JSON file for easy subsequent import and editing.
4. Do I need to register for an account to use it?
   No. Drawnix is designed to work "out of the box", so all you need to do is open the official website and start creating immediately, without any registration or login process.