To help you get started, we've collected the most common ways that elkjs is being used within popular public projects.

eclipse / winery / org.eclipse.winery.frontends / app / topologymodeler / src / app / layout / layout.directive.ts View on Github

// also get their current positions and apply them to the internal list
            const left = node.elRef.nativeElement.firstChild.offsetLeft;
            const top = node.elRef.nativeElement.firstChild.offsetTop;
            node.nodeTemplate.x = left;
            node.nodeTemplate.y = top;
        });

        // get source and targets of relationships
        relationshipTemplates.forEach((rel, index) => {
            const sourceElement = rel.sourceElement.ref;
            const targetElement = rel.targetElement.ref;
            edges.push({id: index.toString(), sources: [sourceElement], targets: [targetElement]});
        });

        // initialize elk object which will layout the graph
        const elk = new ELK({});
        const graph = {
            id: 'root',
            properties: {
                'elk.algorithm': 'layered',
                'elk.spacing.nodeNode': '80',
                'elk.direction': 'DOWN',
                'elk.layered.spacing.nodeNodeBetweenLayers': '100'
            },
            children: children,
            edges: edges,
        };
        return new Promise(resolve => {

            const promise = elk.layout(graph);
            promise.then((data) => {
                this.applyPositions(data, nodeChildrenArray).then(() => {

View more ways to use elkjs

The Eclipse Layout Kernel (ELK) implements an infrastructure to connect diagram editors or viewers to automatic layout algorithms. This library takes the layout-relevant part of ELK and makes it available to the JavaScript world. ELK's flagship is a layer-based layout algorithm that is particularly suited for node-link diagrams with an inherent direction and ports (explicit attachment points on a node's border). It is based on the ideas originally introduced by Sugiyama et al. An example can be seen in the screenshot below.

Note that elkjs is not a diagramming framework itself - it computes positions for the elements of a diagram.

elkjs is the successor of klayjs.

Demonstrator

You can see elkjs live in action in conjunction with TypeFox's sprotty diagramming framework.

FAQs and Recurring Issues

The following list includes some recurring topics that may have been addressed in issues already:

• #100, elk#355, elk#627 - How to consider previous layout results, including

  • dynamic layout, and
  • incrementally adding nodes and edges to an existing layout.

• elk#315: Standalone edge routing.

• #85 elkjs itself is a graph layout engine only. In other words, no rendering, styling, etc. is provided.

• #127, #141, #142 - Issues due to the underlying code transpilation by GWT and/or due to the outdated usage of js modules:

  • g is not defined,
  • Can't resolve web-worker, and
  • general usage as part of react, webpack, etc.
  • #6 Poor modularization
  • Contributions here are welcome!

Installation

The latest released version:

npm install elkjs

Development version based on ELK's master branch.

npm install elkjs@next

Releases and Versioning

Releases are partly synchronized with ELK's versions: the minor version number is always the same but the revision number may diverge. For instance, elkjs 0.3.0 equals the functionality of ELK 0.3.0 but elkjs 0.3.2 may be different from ELK 0.3.2. This is necessary as there may be fixes that solely concern elkjs and should be released independently of ELK.

Files

The library consists of two main files:

• elk-api.js: Provides the API and only the API.
• elk-worker.js: Provides the code that actually knows how to lay out a graph. This is the file that is generated from ELK's Java code base using GWT.

Two further files are provided:

• elk.bundled.js: A bundled version of the two previous files, ready to be dropped into a browser's `

```html

   
  

Typescript

import ELK from 'elkjs/lib/elk.bundled.js'
const elk = new ELK()


import ELK from 'elkjs/lib/elk-api'
const elk = new ELK({
  workerUrl: './elk-worker.min.js'
})

Debugging

For debugging purposes you may want to use the non-minified versions that are available as well. In this case the non-minified webworker version can be configured like so:

const ELK = require('elkjs/lib/elk-api.js')
const elk = new ELK({
    workerFactory: function(url) { // the value of 'url' is irrelevant here
        const { Worker } = require('elkjs/lib/elk-worker.js') // non-minified
        return new Worker(url)
    }
})

API

The elkjs library provides a single object: the ELK. The ELK has a constructor that can be used to construct it:

• new ELK(options) - the ELK can be fed with options, all of which are optional:
  • defaultLayoutOptions - an object with default layout options specified as key/value pairs that are used if no further layout options are passed to the layout(graph, options) method (see below). Default: {}.
  • algorithms - an array of algorithm ids (only the suffix). Default: [ 'layered', 'stress', 'mrtree', 'radial', 'force', 'disco' ]. Note that the box, fixed, and random layouters are always included.
  • workerUrl - a path to the elk-worker.js script. As a consequence the ELK will use a Web Worker to execute the layout. Default: undefined.

Apart from that the ELK offers the following methods:

• layout(graph, options)
  • graph - the graph to be laid out in ELK JSON. Mandatory!
  • options - a configuration object. Optional.
    • layoutOptions: its most important purpose is to pass global layout options. That is, layout options that are applied to every graph element unless the element specifies the option itself.
    • logging: boolean (since 0.6.0). Whether logging information shall be passed back as part of the laid out graph. false by default.
    • measureExecutionTime: boolean (since 0.6.0). Whether execution time (in seconds) information shall be passed back as part of the laid out graph. false by default.
  • returns a Promise, which passes either the laid out graph on success or a (hopefully helpful) error on failure.
• knownLayoutOptions()
  • returns an array of of known layout options. For each option additional information such as its id and group is given.
• knownLayoutAlgorithms()
  • returns an array of registered layout algorithms (see above) alongside further information about each algorithm.
• knownLayoutCategories()
  • returns an array of registered layout categories.
• terminateWorker() - in case a Web Worker is used, the worker's terminate() method is called.

The three methods starting with known basically return information that, in the Java world, would be retrieved from the LayoutMetaDataService.

Logging and Execution Times

(Since 0.6.0)

ELK provides some means to log debug information during layout algorithm execution. The details can be found in the Algorithm Debugging section of ELK's documentation. Not all of it is available in elkjs though, for instance, it is not possible to save intermediate results of the laid out graphs. Furthermore, while internally execution time is measured in nanoseconds on the Java side, in elkjs we have to resort to milliseconds. Note that the returned execution times are in seconds. For small graphs this may often result in execution times being reported as 0.

See below an example call and the example output.

elk.layout(simpleGraph, {
    layoutOptions: {
        'algorithm': 'layered'
    },
    logging: true,
    measureExecutionTime: true
})

{
  "id": "root",
  "children": [ ... ],
  "edges": [ ... ],
  "logging": {
    "name": "Recursive Graph Layout",
    "executionTime": 0.000096,
    "children": [ {
      "name": "Layered layout",
      "logs": [
        "ELK Layered uses the following 17 modules:",
        "   Slot 01: org.eclipse.elk.alg.layered.p1cycles.GreedyCycleBreaker",
            [ ... ]
        "   Slot 16: org.eclipse.elk.alg.layered.intermediate.ReversedEdgeRestorer"
      ],
      "executionTime": 0.000072,
      "children": [ { "name": "Greedy cycle removal", "executionTime": 0.000002 },
                      [ ... ]
                    { "name": "Restoring reversed edges", "executionTime": 0 } ]
    } ]
  }
}

Building

For building, a checkout of the ELK repository is required and should be located in the same directory as the checkout of this repository. Like so:

some_dir/
 ├── elkjs
 └── elk

npm install
npm run build

For a new release, the following version numbers have to be changed:

• version in package.json,
• melk in build.gradle, and
• don't forget to checkout the correct release tag of ELK's repository.

Afterwards you can find the created files in the lib folder.

Current procedure

git checkout -b releases/0.x.x
# Check that the version numbers are correct, if necessary update versions and commit the changes
npm install
npm run build
npm run test
# Add ./lib/ directory and commit
git tag 0.x.x
# Push release branch and tags to remote
# Create a new release on Github for the new tag and afterwards publish to npm 
npm publish --tag=latest

Afterwards the following version numbers have to be changed to the next release number:

• version in package.json,
• melk in build.gradle.

Incorrect npm tags

Incorrectly tagged versions on npm can be updated with npm dist-tag add elkjs@ .

Links

In the following a list of asorted links to other projects and sites that may prove helpful:

• Execution time comparison to Java ELK
• How to specify node label placement
• How to enforce certain node positioning (topological)

Example Users of elkjs

• Schematics
  • netlistsvg - electronic and gate level schematics as SVG
  • d3-hwschematic - interactive digital circuit analysis and documentation, particularly for FPGA-based designs
• Cytoscape adapter
• reaflow - Node-based editor built on elkjs in React
• reactflow - React component for building node-based editors and interactive diagrams
• Wrapping elkjs into a docker-based microservice
• sprotty - A diagramming framework
• Eclipse 4diac
• capellambse-context-diagrams - Generating systems engineering context diagrams for Capella in Python

Note: We are happy to extend this list further, so please contact us if you have a project to add

Thanks

• @automata for the very first klayjs version
• @aranega for making emfgwt work for us
• @EyMaddis for valuable API discussions
• The team working on the layout algorithms
  • @spoenemann
  • @le-cds
  • @uruuru
  • @eNBeWe
  • the vast number of students that contributed to ELK