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,
both supporting content assist (Ctrl+Space) and formatting (Shift+Alt+F):
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.
- 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. 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.