The workflow diagram example for Eclipse GLSP

Do you want to see Eclipse GLSP, a framework for web-based diagram editors in action? In this article, we present a full-fledged example of a diagram editor implemented with GLSP that is available open source and on all supported platforms including VS Code, Eclipse Theia, Eclipse desktop and plain websites. You can even try the example in an online demonstration.

Eclipse GLSP is an open source framework to build diagram editors based on web technologies. It works pretty similar to the language server protocol (LSP), but for graphical languages represented in diagrams. To support a new diagram type, you only need to implement a respective diagram server defining the business logic of the editing functionality and configure the client framework with instructions on how your shapes should look like - the rest, such as the client-server communication, performing diagram updates after changes, client-side editing tools, etc. is taken care of by the framework.

To demonstrate the capabilities of Eclipse GLSP and also to provide a good coding example to learn from, the project maintains several example diagram editors, including a minimal example, which we will introduce in a follow-up article.

In this article, we introduce a reference example diagram editor called the “workflow diagram example”. The represented graphical language is very close to a UML activity diagram. It allows you to create a flow of tasks to be described (manual or automated) with some logic such as decision nodes, fork nodes and join nodes. The capture below shows the creation of a simple workflow (in VS Code). As you can see, the example supports two types of tasks (automated and manual); decision, join, fork and merge nodes, as well as two edge types. The example is inspired by the use case to model the behavioral workflow of a hardware device, e.g. a coffee machine.

The workflow example diagram itself is part of the GLSP open source project, which allows it to be used as a consistent reference example for all available components of GLSP. More precisely, GLSP provides the following components:

• A diagram server for the workflow example implementing the business logic of the diagram editor
• A client for Eclipse Theia
• A client for VS Code
• A client for Eclipse desktop
• A client to be embedded into a plain website

Please visit the GLSP website for a full overview of available parts of the workflow example including links to the source code repositories.

Furthermore, the workflow example diagram editor is integrated into the coffee editor, which is a full-fledged example of a web-based domain-specific tool. The coffee editor integrates the example workflow diagram with other tool components such as a textual DSL, a form-based, data-centric UI, a code generator and a model analysis engine. The coffee editor, embedding the workflow example, is also available open source as part of the EMF.cloud project (see the EMF.cloud project page). Even better, you can try the coffee editor online. Launch the demonstration and click on “Diagram Editor” in the overview to the right to see the workflow example diagram editor in action.

Conclusion

The workflow example editor serves as a consistent reference example for all components of Eclipse GLSP. It is used to test and demonstrate new features. As the diagram server and all clients are available open source as part of the project, it can serve as a blueprint for the implementation of your own, domain-specific editor. Also, due to its comprehensive feature set, you can use it to look up how specific parts of it were implemented. These features include, among others, copy & paste, intra- and inter-diagram navigation, validation markers, context actions, etc. We will go into detail about those features in future blog posts.

Of course, the workflow diagram is just one of many available GLSP diagrams. Please visit the GLSP website to find more publicly available examples. In case you want support to implement your own custom diagram editor please get in contact with us. Please note that - also beyond-diagram solutions - we provide comprehensive consulting and services for developing tools for the browser or on the desktop, please get in contact with us and have a look at our service offering for web-based tools or tools in general.