Diagram Editors in Cloud IDEs

The support for textual programming languages is excellent in modern, web-based IDEs, such as Eclipse Theia and VS Code. The hugely popular language server protocol (LSP) and its integration with the Monaco code editor enabled lifting great code editing experience to the web. However, what about diagram editors and graphical languages? Such diagram editors play a key role in domain-specific tools, modeling suites, and low-code platforms. How can a modern diagramming experience be achieved in cloud-based tools?

Eclipse GLSP transfers the successful architecture pattern of LSP to graphical languages, including a diagram editor client (“Monaco for diagrams’’) and the ability to implement the diagram logic as a server component, which can be hooked up to any data source. While GLSP provides generic support for many diagram aspects, such as shapes, routing, a tool palette, animations, etc. out of the box, the framework is built to be extensible and open for customization to allow for developing truly domain-specific editors with the full flexibility of the underlying modern web-technologies, such as TypeScript, HTML5, CSS3 and SVG. For a seamless integration into a tool platform, GLSP provides ready-to-be-used glue components for VS Code and Eclipse Theia. Eclipse GLSP is one of the most active projects in the Eclipse Cloud development tools ecosystem and is increasingly adopted by key players of various domains lifting their rich diagram editors to the web.

In the following talk, we give a demonstration of the capabilities of Eclipse GLSP and provide an overview of its architecture, especially from the viewpoint of a diagram developer. Moreover, we highlight the conceptual similarities and differences between LSP and GLSP and why they are crucial for a successful adoption of the LSP approach for diagrams. Based on that, we dive into an open Q&A and interactive discussion with the audience.

If you have any questions about Eclipse GLSP or if you want to implement a diagram editor, 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.