Need help with klayjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

215 Stars 20 Forks Eclipse Public License 1.0 24 Commits 7 Opened issues


(deprecated) KIELER's layout algorithms for JavaScript

Services available


Need anything else?

Contributors list

Deprecated: Use elkjs

elkjs is now available and klayjs is deprecated. In other words, open bugs will be migrated to elkjs and hopefully fixed there. This repository will persist, however, no fixes or new builds are to be expected. Some words on ELK: The ELK project is the successor of the KIELER project, which formed the basis of klayjs. KIELER didn't die however, we only extracted the parts of the code related to automatic layout and put it into an official Eclipse project.


KLayJS 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.

The algorithm is developed in Java and compiled to JavaScript using GWT. For further information see the KIELER Wiki pages.

In case you want to use the layout in conjunction with D3.js you can take a look at our KLayJS-D3 extension.

Example Layout of a Ptolemy Diagram


Either download the

file or install it using
npm install klayjs
bower install klayjs


The library can be used in the browser, in a WebWorker, and with server-side node.js.

Input graph

We use the JSON KGraph format to specify a graph with its properties. A minimal example looks like this:

var graph = {
  "id": "root",
  "properties": {
      "direction": "RIGHT", "spacing": 40
  "children": [{"id": "n1", "width": 40, "height": 40}, 
               {"id": "n2", "width": 40, "height": 40}],
  "edges": [{"id": "e1", "source": "n1", "target": "n2"}]


Within the browser KLayJS is registered globally with the

variable and can be used as follows. Note the difference between local layout options specified for specific elements in the graph and global layout options that are applied to every graph element.

Web Worker

Depending on the graph size the layout process can take some time possibly freezing your browser (though it should be fast in most cases). Modern browsers support web workers, some kind of threads for the browser. The following code snippet demonstrates how to start and communicate with a web worker performing layout.

var worker = new Worker('klayjs.js');
// send layout request
  graph: [graph],
  options: [options]
worker.addEventListener('message', function (e) {
  var graph =;
  // [ applyLayout(graph) ]
}, false);


For rapid prototyping or headless diagram generation no browser is required and you might want to use node.js.

npm install klayjs
var klay = require('klayjs');
  graph: [graph],
  options: [options],
  success: function(g) { console.log(g); }

Layout Options

A broad variety of layout options is supported. The available options and their effects are discussed here


  • Other than for the original java version of the layouter, the
    option is by default
  • If you intend to use the fixed layouter (
    ) at some point, you have to set


Some examples using the KLayJS-D3 extension are available at: - Ports - Hierarchy - Interactive - Miserables (Data From D3 Force Example)

See the

folder of the klayjs-d3 project.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.