A sample project demonstrating how to create a real-time collaborative diagramming application. It uses MindFusion's JavaScript Diagram library for the frontend diagramming canvas and Node.js with Socket.IO for the backend synchronization. The project is configured to run with a Vite development server.
Follow these steps to get the development environment running.
-
Clone the repo
git clone https://github.com/MindFusionComponents/collaborative-mindmap-javascript.git
-
Install NPM packages
npm install
-
Run the development servers
This project uses two separate servers: a backend for Socket.IO and a frontend Vite dev server. You will need to run them in two separate terminals.
In your first terminal, run the backend server:
npm start
In your second terminal, run the frontend Vite dev server:
npm run dev
-
Open the application
Open the URL provided by the Vite dev server (usually
http://localhost:5173) in multiple browser tabs to see the real-time collaboration in action.
MindFusion.Diagramming Documentation
Use for free in exchange for a link back to https://mindfusion.dev/ (configuration shown in project).
For commercial use and dedicated technical support see:
Pricing (perpetual license for current version)
License agreement