Interweaving Graphical and Textual Modelling using GLSP and Langium

Abstract

Many domain-specific modelling languages (DSMLs) combine graphical and textual elements. While simple textual labels are often sufficient, some situations (e.g., condition expressions in flowchart-like languages) require more complex textual sub-languages with their own grammar and the ability to reference elements defined elsewhere in the model, providing full scoping support for such references. Developing tool support for DSMLs that integrate expressive graphical and textual elements requires combining two distinct paradigms for language processing: projectional editing for graphical elements and a parsing-based approach for textual elements. A purely projectional approach quickly becomes inconvenient , and parsing-based approaches currently do not handle graphical languages well. For modern web-based language workbenches, such integrations are not well supported. We present a reusable framework for integrating text-based grammar support using Langium into the graphical model of GLSP-based languages. The backend maintains a complete abstract syntax graph, regardless of whether a particular part of the model is edited graphically or textually. Langium-managed text elements automatically handle scoping across the entire model, enabling scenarios where a text node’s position in the graphical model can influence which elements are available for linking. The framework is available open source , and we invite the community to integrate it into their own languages.