{"id":3105,"date":"2026-01-01T09:36:26","date_gmt":"2026-01-01T09:36:26","guid":{"rendered":"https:\/\/mindfusion.dev\/blog\/?p=3105"},"modified":"2026-01-03T08:23:42","modified_gmt":"2026-01-03T08:23:42","slug":"building-a-real-time-collaborative-diagram-with-javascript-node-js-and-socket-io","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/building-a-real-time-collaborative-diagram-with-javascript-node-js-and-socket-io\/","title":{"rendered":"Building a Real-Time Collaborative Diagram with JavaScript, Node.js, and Socket.IO"},"content":{"rendered":"\n

In a world that thrives on remote work and instant communication, building collaborative tools has become more relevant than ever. Following up on an older post where we built a collaborative mind map with ASP.NET MVC and SignalR<\/a>, this article will guide you through creating a similar real-time, interactive diagramming application using a modern JavaScript stack: Node.js<\/strong>, Express<\/strong>, Socket.IO<\/strong>, and MindFusion’s powerful JavaScript Diagram library<\/a>.<\/p>\n\n\n\n

You can find the complete source code for the project on GitHub: collaborative-mindmap-javascript<\/a>.<\/p>\n\n\n\n

The Core Idea: A Server-Authoritative Model<\/h2>\n\n\n\n

To ensure consistency across all clients, we’ll implement a server-authoritative<\/strong> architecture. This means our Node.js server will maintain a single, master instance of the diagram. This instance acts as the single source of truth.<\/p>\n\n\n\n

The workflow is as follows:<\/p>\n\n\n\n

    \n
  1. A new user connects to the server.<\/li>\n\n\n\n
  2. The server immediately sends a complete snapshot of its current diagram to the new user.<\/li>\n\n\n\n
  3. When a user makes a change (e.g., creates a node), their client sends a small, specific event (a “fine-grained” event) to the server.<\/li>\n\n\n\n
  4. The server updates its master diagram instance based on this event.<\/li>\n\n\n\n
  5. The server then broadcasts the same event to all other<\/em> connected clients, who each update their local diagrams accordingly.<\/li>\n<\/ol>\n\n\n\n

    This model is efficient and robust, preventing clients from falling out of sync.<\/p>\n\n\n\n

    Setting Up the Backend with Node.js and Socket.IO<\/h2>\n\n\n\n

    Our server is built with Express and Socket.IO. The most important part is that we create an instance of the MindFusion Diagram<\/code> object directly on the server. This is possible because the core data model of the library is isomorphic and does not depend on a browser environment.<\/p>\n\n\n\n

    Here’s a look at the key parts of our server.js<\/code> file:<\/p>\n\n\n\n

    \/\/ server.js\nimport { Diagram, Shape } from '@mindfusion\/diagramming';\nimport { Rect } from '@mindfusion\/drawing';\n\n\/\/ 1. Server-side diagram instance is our \"source of truth\"\nconst serverDiagram = new Diagram();\n\n\/\/ 2. We can create a default diagram for the first user\nconst node1 = serverDiagram.factory.createShapeNode(10, 10, 30, 30);\nnode1.text = \"Hello\";\nnode1.id = \"node1\";\n\/\/ ... and so on\n\n\/\/ Helper function to find items in the server's diagram\nfunction findNode(id) {\n    return serverDiagram.nodes.find(n => n.id === id);\n}\n\n\/\/ 3. Handle new connections\nio.on('connection', (socket) => {\n    console.log('A user connected:', socket.id);\n\n    \/\/ 4. Immediately send the full diagram to the new client\n    socket.emit('load', serverDiagram.toJson());\n\n    \/\/ 5. Handle incoming events from clients\n    socket.on('nodeCreated', (data) => {\n        \/\/ Update the server's diagram first\n        const node = serverDiagram.factory.createShapeNode(data.x, data.y, data.width, data.height);\n        node.id = data.id;\n        node.text = data.text;\n        node.shape = Shape.fromId(data.shape);\n\n        \/\/ Then broadcast the event to other clients\n        socket.broadcast.emit('nodeCreated', data);\n    });\n\n    \/\/ ... handlers for nodeModified, linkCreated, etc.\n});<\/code><\/pre>\n\n\n\n
    This setup ensures our server always holds the master state.<\/p>\n\n\n\n
    Building the Frontend with MindFusion’s Diagram Library<\/h2>\n\n\n\n
    On the client-side, our index.js<\/code> file is responsible for rendering the diagram and communicating with the server.<\/p>\n\n\n\n
    1. Connecting and Receiving the Initial State:<\/strong><\/p>\n\n\n\n
    The client connects to the Socket.IO server and listens for the load<\/code> event. When it receives this event, it loads the full diagram JSON sent by the server.<\/p>\n\n\n\n
    \/\/ index.js\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    socket = io(\"http:\/\/localhost:3000\");\n\n    diagram = DiagramView.create(document.getElementById(\"diagram\")).diagram;\n\n    \/\/ Listen for the 'load' event from the server\n    socket.on('load', (data) => {\n        diagram.fromJson(data);\n    });\n\n    \/\/ ... other event listeners\n});<\/code><\/pre>\n\n\n\n
    2. Sending Changes to the Server:<\/strong><\/p>\n\n\n\n
    We attach listeners to the diagram’s events, such as nodeCreated<\/code>. When a user creates a node, the handler fires, packages the relevant data into a simple model, and emits it to the server.<\/p>\n\n\n\n
    \/\/ index.js\n\n\/\/ Attach the event listener\ndiagram.nodeCreated.addEventListener(onNodeCreated);\n\n\/\/ The event handler function\nfunction onNodeCreated(sender, args) {\n\n    const node = args.node;\n    \/\/ Assign a unique ID before sending\n    if (!node.id) {\n        node.id = socket.id + new Date().valueOf();\n    }\n\n    const r = node.bounds;\n    const model = {\n        id: node.id,\n        text: node.text,\n        shape: node.shape.id,\n        x: r.x,\n        y: r.y,\n        width: r.width,\n        height: r.height\n    };\n\n    \/\/ Emit the fine-grained event to the server\n    socket.emit('nodeCreated', model);\n}<\/code><\/pre>\n\n\n\n
    3. Receiving Changes from the Server:<\/strong><\/p>\n\n\n\n
    Finally, the client needs to handle incoming broadcasted events from the server. This is the counterpart to the server’s socket.broadcast.emit<\/code>.<\/p>\n\n\n\n
    \/\/ index.js\nsocket.on('nodeCreated', (model) => {\n\n    const node = diagram.factory.createShapeNode(\n        model.x, model.y, model.width, model.height);\n    node.id = model.id;\n    node.text = model.text;\n    node.shape = Shape.fromId(model.shape);\n});<\/code><\/pre>\n\n\n\n
    This code snippet creates a local ShapeNode programmatically when another client has drawn it interactively. The full sample project contains corresponding handlers for other node and link events.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    By combining the powerful rendering capabilities of the MindFusion.Diagramming for JavaScript library<\/a> with a server-authoritative model using Node.js and Socket.IO, we’ve built a robust and efficient collaborative application. This architecture ensures state consistency while minimizing the amount of data sent over the wire for real-time updates.<\/p>\n\n\n\n
    You can download the full source code and run the project yourself from this GitHub repository: https:\/\/github.com\/MindFusionComponents\/collaborative-mindmap-javascript<\/a>. <\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Wishing you a bug-free 2026. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
    In a world that thrives on remote work and instant communication, building collaborative tools has become more relevant than ever. Following up on an older post where we built a collaborative mind map with ASP.NET MVC and SignalR, this article … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,513,74],"tags":[3,80,44],"class_list":["post-3105","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-javascript","category-sample-code","tag-diagram","tag-javascript","tag-library"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-O5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=3105"}],"version-history":[{"count":5,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3105\/revisions"}],"predecessor-version":[{"id":3116,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3105\/revisions\/3116"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=3105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=3105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=3105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}