Eclipse GLSP 1.0: Leading-edge diagram editor support

In this article, we will highlight an area of improvement for the Eclipse GLSP 1.0 release: The leading edge support for diagram editors on the web. For a general overview of the GLSP 1.0 release and other notable features, please see the GLSP 1.0 release announcement.

Eclipse GLSP is a framework for efficiently building web-based diagram editors and makes it easy to embed them into Eclipse Theia, VS Code, Eclipse desktop or even an arbitrary web page. Please visit the Eclipse GLSP website to learn more.

Maybe the most important discipline for a diagramming framework is the support for user visible features in diagram editors. This is where Eclipse GLSP truly shines. The 1.0 release contains a huge variety of features including:

• Basic support for common edge and node shapes, such as rectangles, diamonds, etc.
• Support for custom shapes built with SVG or HTML, or both
• Diagram animations
• Ports, compartment and composite layouts
• Basic and advanced editing options including copy/paste and undo/redo
• Flexible diagram tool palette
• Advanced routing support
• Auto-layouting and auto-alignment (e.g. via ELK)
• Zooming and panning
• Advanced and customizable inline editing
• Context actions and custom UI controls
• Diagram navigation
• Validation and Validation markers

… and many more. See the screenshots below as an example for some of these features.

Feature Overview

Ports and advanced routing (© logi.cals GmbH)

Compartments, animation, and custom UI controls

As details on all these features would go beyond the scope of this article, please also refer to this article about the diagram editor features of GLSP, the official feature overview of GLSP and the GLSP gallery for more screenshots.

Two particular features that were improved during the last year of development for the 1.0 release are advanced rooting support including “bridges” for edges and improved support for compartment layouts.

The diagram editor features, supported by GLSP, go way beyond the scope of a simple drawing tool. GLSP is therefore the perfect basis for domain specific diagram editors of all kinds. When migrating from well established desktop alternatives such as GEF or GMF, you will likely not miss any relevant features with the 1.0 release.

And: If you do miss anything, the framework is created to be highly extensible. As an example, you very easily define custom shapes on the client using SVG, HTML and CSS (see screenshot below). Both, the client and the diagram server are designed in a modular way to easily add, remove or replace any features you like.

If you have any questions about Eclipse GLSP or need specific features, please get in touch with us! EclipseSource provides support for building custom diagram editors using Eclipse GLSP, for adding custom features to GLSP and for building custom IDEs or tools based on VS Code or Eclipse Theia.