Diagram Editor

You will build a collaborative diagram editor, that allows people to build different types of diagrams together.

Here’s an example of draw.io, a drawing application that be used directly from their website, or as an installed application [ed. Note that draw.io supports more shapes than you would be expected to support in your project].

drawio.net drawio.net

Required Features

There are four specific deliverables for this project:

  • Core infrastructure
  • Console application
  • GUI application
  • Web service

Core Infrastructure

  • Your source code should be stored in your team’s GitLab repository.
  • You must use issues in GitLab to track your work.
  • You must use a Gradle project, with the project structure provided in-class.
  • You are expected to write unit tests for all of your code, and add appropriate code comments.
  • You are also expected to produce some form of installer, so that a user (or TA) could install and run your application without needing to build it from source!
  • We will examine your source code! You should strive for well-structured and readable code.

Console Launcher

Your first application should be a console application which can launch the diagram editor with the document indicated on the command line.

Usage: diagram [filename]

GUI Application

Your main application is a desktop application. You are expected to implement the following standard desktop functionality:

  • A top-level menu bar that lists major functions, and indicates the hotkeys for each feature (e.g. File, Edit, View menu and submenus).
  • Hotkeys/keyboard shortcuts for major functionality.
  • Window resizing, so that the user can resize and reposition the application. You should save the window size and position on exit, and restore that size and position when they relaunch it.
  • Minimize/mazimize buttons function as expected.
  • Undo-redo support for actions in the user interface.
  • Cut-copy-paste text.

In addition to the platform requirements, you should support the following features:

  • Allow creation of different types of diagrams, including simple UML diagrams (e.g. class diagrams), flowcharts or other box diagrams.
  • Users can add/remove/edit shapes; shapes should be selectable, movable and resizable.
  • Visual properties of shapes can be modified (e.g. border width, colour).
  • Intuitive hotkeys that handle mode-switching well.
  • Support saving, loading the diagram from a file (using a format that you create).
  • Additionally, save local application data (for window size and position).
  • Save application settings in the cloud so that they are preserved across sessions. See below.
  • Your application should work equally well on Windows, Linux or macOS.

Service

You will need to build a web service so that shared data can be served remotely.

  • A user should be able to launch multiple instances of the application, and have the instances load and use remote data.
  • Your application should communicate with the web service using HTTP protocol.
  • Data should be saved so that if the web service is stopped and restarted, the data will persist.

Additional Features

The requirements above represent the minimal set of requirements for this project. Here we’ve listed some other ideas that might be interesting to implement! Pick-and-choose, or brainstorm your own.

  • Connectors snap-to the shapes, so that you can connect them, move them and the connections follow.
  • Add different types of diagrams e.g. floorplans.
  • Allow users to build their own templates and populate these with shapes.
  • Support full collaborative editing, so that users can edit a diagram together.
  • Save files in the cloud, instead of just settings. [ed. this would likely mean the ability to import files, browse, and delete from the cloud as well].

Examples