You’ve probably heard about draw.io which is one of the best free, open-source diagramming software. The tool is powerful. It supports many storage backends and could be integrated into other apps. But the one crucial feature is still missing – it has lack of collaborative editing.

Remote collaboration is something we need these days. Last time, Visual Studio Code announced extension called Live Share, allowing developers to share their workspace with other people. In consequences, it opens a bunch of new possibilities!

Thanks to the VSCode, LiveShare and draw.io integration, you can bring the power of collaboration into draw.io.

Draw.io collaborative editing in VSCode

  1. Install Visual Studio Code.
  2. Find and install aditional extensions: Live Share and draw.io integration.
  3. Sign in to Live Share.
  4. Create a new workspace and share the session with your friend.
  5. Create new .drawio file.
  6. Enjoy!

How does it work?

Live Share in Visual Studio Code allows you to create a collaboration session. Depending on the settings, you can share your workspace in write or read-only mode. Anyone, who connects to your session will see your project in its own, customized editor.

Diagrams produced by draw.io are XML files. Thanks to draw.io integration extension, you can edit them directly in the VSCode using the visual editor. If you have .drawio files stored in your workspace, others also have access to them. Each participant who has draw.io integration will see diagram instead of the XML file.

In Live Share, every change made by collaborators is sent immediately to all participants. Because diagrams are just XML files, every change in the visual editor are reflected in the file and sent to all participants. You’ll see everything in real-time!

Limitation of collaboration in draw.io using VSCode

  • You will not see the cursors of other participants in the visual editor.
  • You will see only the performed changes. It means that you won’t see the move of block but only its final position.
  • You may experience issues when more than one collaborator is working on the same element.

Do you know any other limitations or problems? Please let me know!

Summary

Draw.io (or should I use diagrams.net?) is one of the best tools for creating diagrams. Real-time collaboration feature would be just the cherry on top. According to the documentation, this tool offers collaboration when you use a Google Drive storage, but I’m not sure if it’s a real-time collaboration – I haven’t tested it. Anyway, the need is real. By using a combination of VSCode, Live Share and draw.io you can reach the collaborative experience with relatively low cost.