Diagram Editors with GLSP: Why flexibility is key

Are you wondering how you should nowadays develop diagram editors to be durable, given the innovative and fast moving world of web-based technologies and cloud IDEs? The answer is clear: build them to be open for adaptation from top to bottom and make it easy to change certain parts without impacting all other parts. In this article, we describe how to build diagram editors which are loosely coupled and how to stay agile to adapt and benefit from the innovations of the new age of tool development.

Eclipse GLSP is a web-based, next generation diagram editor framework that has made this strategy one of its core principles and hence puts special focus on enabling full flexibility and openness for diagram editor development. Especially with its recent 1.0 release, GLSP has not only added several new features and components, but has even become more versatile.

We recently presented a talk at EclipseCon in which highlighted, based on real-world scenarios, why this flexibility is nowadays crucial for modern diagram editors and how it is supported with GLSP. In case you missed it, you can watch it below.

In particular we focus on the following four areas of flexibility:

Flexibility in diagram visualization and user interaction

Based on Sprotty and SVG, GLSP provides cutting edge rendering capabilities and gives you full control over one of the most crucial aspects of your diagram: look and feel. Without putting restrictions or abstractions on the great underlying web technologies, you can either use GLSP’s default implementations or take command over rendering, layouting, edge routing, editing behavior, and user interface components, such as the palette.

Flexibility in integrating your editor with application frames

Whether you aim at integrating with modern tool platforms, such as VS Code or Eclipse Theia, still want to support traditional rich clients based on Eclipse, or build a diagram editor for a plain web application, GLSP has got you covered with ready-to-use integration components and even facilitates an architecture that supports all of them with minimal integration glue code for each application frame.

Flexibility in model management

GLSP doesn’t put any restrictions on where your underlying data model that drives your diagrams comes from. Are you using EMF, JSON, a custom file format, or even a proprietary database? While GLSP provides pre-configured modules for the most popular choices, such as EMF and JSON, the strict separation of concerns enables freedom of choice when it comes to model management, even facilitating to change that in the future without impacting the diagram frontend at all, and the backend only where really necessary.

Flexibility in language and runtime

Via a defined protocol, GLSP allows you to use the programming language of your choice in the backend, very much like the language server protocol. Moreover, with dedicated frameworks for Java and, more recently, also for Typescript, building a diagram server is easier than ever for these most common language choices.

If you want to integrate a GLSP diagram editor into your custom environment, we provide you with professional support for GLSP. Further, if you have any questions about Eclipse GLSP, please get in touch with us! EclipseSource provides support and training for building custom diagram editors using Eclipse GLSP and for building custom IDEs or tools based on VS Code or Eclipse Theia.