ELK Demonstrators

Automatic layout algorithms compute layouts for diagrams. Never tried them? Well, here's your chance. Choose one of the thingies below and start playing!

Interactive Editor

Interactively edit a textual description of a graph while a corresponding diagram is generated on-the-fly. Basically, build your own graphs and see what automatic layout does with them. You can choose out of the following two formats:

elkt

ELK's textual graph DSL. Layout is performed on the server using Java.

json

ELK's json format. Layout is performed within your browser using elkjs.

Examples

An annotated collection of example graphs. Their main purpose is to illustrate various configuration possibilities, in particular those that are often-used.

The source of the examples can be found in ELK's models repository. Pull-requests with concise and new examples are very welcome.

Model Browser

An interactive browser for the Eclipse Layout Kernel's repository of test models. See what automatic layout does to diagrams that we have created for you (well, mainly for us, but you may look at them, too).

Layout is performed within your browser using elkjs (latest).

Graph Format Conversion

A side-by-side view of two graph formats. Allows to interactively convert one graph format into another. It's possible to invoke the conversion programmatically, see the site for details.

Supports ELK's Xtext-based elkt, json, and elkg (XMI) formats.

Used Technologies
Eclipse Layout Kernel (ELK)
Java-based implementations of automatic layout algorithms. This is what computes layouts for the diagrams so you don't have to.
elkjs
JavaScript-based version of ELK, automatically transpiled from the Java sources.
sprotty
A next-gen web-based graphics framework primarily developed by TypeFox. This is what shows the diagrams.
Monaco Editor
The code editor that powers Visual Studio Code. The thing that lets you specify your graphs.
LSP4J
A Java binding for the Language Server Protocol. This adds code completion and error markers to the editor.
Xtext
A framework for development of programming languages and domain-specific languages. Our textual languages were built with this.