This paper introduces the first major release of the bigER modeling tool. bigER ofers various features for lfexibly specifying and visualizing Entity Relationship (ER) data models. Within the Visual Studio (VS) Code IDE, the tool enables hybrid modeling through a textual editor and a graphical editor to display and modify the textual and graphical ER model, respectively. Both editors are realized with a custom language to specify ER elements and allow multi-notation support (currently Bachman, Chen, Crow's Foot, Min-Max, and UML). The bigER modeling tool incorporates the Language Server Protocol and is based on web technologies, which makes the tool platform-independent and easily extensible. We present the newest extensions of bigER , i.e., multi-notation support and improved edge routing.
In the following, we first describe the architecture of the tool and provide a demonstration of its main features. We then elaborate the above-mentioned extensions in more detail before we conclude this paper.
Tool Architecture bigER is based on the Language Server Protocol (LSP) and the
diagramming framework Sprotty1 with a client and a server component. The server is implemented as
a language server with Xtext2 that communicates through the LSP to the extension (client) to
enable rich-text editing support. The server is further enhanced with Sprotty to support
graphical language features, e.g., with a diagram generator for the graphical model. The client-side
contains a language client that communicates with the server and integrates Sprotty with VS
Code to render the diagram in a web view. A web view manager is responsible for managing
the web view where Sprotty-specific components are located, such as, e.g., SVG views or CSS
styling. Fig. 1 shows a high-level view of the bigER architecture – for a detailed view, see [
Toolbar Sprotty Diagram CSS Styles Actions / Commands
Model SVG Views Sprotty Actions
Webview Manager Extension Manifest Language Client Syntax Highlight (TextMate) Language Configuration
LSP / Sprotty LSP Diagram Module (Sprotty) Language IDE Module (Xtext)
Diagram Generator Layout Engine
(ELK)
Language Runtime Module (Xtext)
Tool Demonstration ER models are created in text files ending with .erd which, when opened in VS Code, automatically activate the extension. The tool mainly consists of three components for modeling: ) the textual editor (Fig. 2 left) to specify the ER models through a textual Domain-specific Language including rich-text editing support (e.g., syntax highlighting, code completion, validation), ) the diagram view (Fig. 2 center) that renders an ER diagram corresponding to the specification in the textual file that is also synchronized on text changes and can be partly used as a graphical editor, and ) the code generator (Fig. 2 right) for transforming the conceptual ER models into a logical schema for a relation database by generating SQL tables. The ER model in the figure features a basic example of a university database, where students take exams of courses that include multiple lectures and are graded by instructors. As can be seen in the textual editor, various keywords are used to classify model elements, a complete specification of the language can be seen in the language guide on GitHub 3.
Multi-Notation Support The first major extension to the tool is multi-notation support to enable modeling in diferent ER variations. The notation can be changed textually or graphically and if not specified, a default notation is used (see Figure 2). Besides the default notation, bigER supports many popular ER notations including Bachman, Chen, Crow’s Foot, Min-Max, and UML. To only allow the characteristics of one notation at a time, the language server validates the textual model and informs the user whether the model contains an error or the specified cardinality does not match the notation. If the model is valid, a new diagram representation that 1Sprotty: https://github.com/eclipse/sprotty 2Xtext: https://www.eclipse.org/Xtext/ 3bigER language guide: https://github.com/borkdominik/bigER/wiki/Language
A[0], A[0+], A[
A[
A[min, max] or A[min, *]
A[num], A[min..max] or A[min..*]
entails notation-specific data is generated and sent to the client for rendering. In the web view on the client, the data is extracted, the cardinalities interpreted, and additional SVG elements are rendered on the edge if required by the specified notation and cardinality. An overview of the diferent notations and how they are rendered in bigER can be seen in Table 1 including the textual syntax that is used to specify the cardinalities of relationships.
Improved Edge Router An additional extension to the tool is the improved routing of edges
in the diagram. Previously, the default router provided by Sprotty was used, which worked
well in most cases, but had the disadvantage of routing each edge independent of other model
elements, resulting in intersections between nodes and other edges (see University entity in
Fig. 3 left). This problem was solved by replacing the router with a Libavoid router from the
sprotty-libavoid-routing package4. The libavoid library is a well-known open-source solution
for diagram routing including a feature for avoiding obstacles (i.e., other model elements). With
the new router, manual changes of edges are not needed anymore and the routing of edges is
completely automated. Two further benefits of the replacement include the use of orthogonal
edges as opposed to more inconsistent polyline edges, and an overall improved behavior when
nodes are being manually moved in the diagram (see Fig. 3 right).
2. Conclusion
We have presented the centerpieces of the bigER modeling tool, proceeding our work in [