• Stars
    star
    230
  • Rank 174,053 (Top 4 %)
  • Language
    JavaScript
  • License
    Eclipse Public Li...
  • Created about 10 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

(deprecated) KIELER's layout algorithms for JavaScript

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

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

Installation

Either download the klay.js file or install it using npm or bower.

npm install klayjs
bower install klayjs

Usage

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"}]
};

Browser

Within the browser KLayJS is registered globally with the $klay 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.

<script type="text/javascript" src="klayjs.js"></script>
<script>
$klay.layout({
  graph: graph,
  options: { spacing: 20 },
  success: function(layouted) { console.log(layouted); },
  error: function(error) { console.log(error); }
});
</script>

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
worker.postMessage({
  graph: [graph],
  options: [options]
});
// 
worker.addEventListener('message', function (e) {
  var graph = e.data;
  // [ applyLayout(graph) ]
}, false);

node.js

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');
klay.layout({
  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

Differences

  • Other than for the original java version of the layouter, the layoutHierarchy option is by default true.
  • If you intend to use the fixed layouter (de.cau.cs.kieler.fixed) at some point, you have to set layoutHierarchy to false.

Examples

Some examples using the KLayJS-D3 extension are available at:

See the examples folder of the klayjs-d3 project.

More Repositories

1

elkjs

ELK's layout algorithms for JavaScript
JavaScript
1,764
star
2

elk-live

A web page with a text editor for ELK Graph and a synchronized graphical view
TypeScript
78
star
3

klayjs-d3

Bridge for KLayJS and D3.js
JavaScript
61
star
4

KLighD

KIELER Lightweight Diagams
Java
29
star
5

klassviz

Visualization of class diagrams using KIELER Lightweight Diagrams (KLighD)
Java
22
star
6

stpa

TypeScript
16
star
7

debukviz

Visualization of memory states for debugging using KIELER Lightweight Diagrams (KLighD)
Java
11
star
8

semantics

Java
9
star
9

osgiviz

Visualization of OSGi projects using KIELER Lightweight Diagrams (KlighD)
Java
8
star
10

klighd-vscode

TypeScript
8
star
11

kieler-vscode

TypeScript
5
star
12

ecoreviz

Ecore visualization using KIELER Lightweight Diagrams (KlighD)
Xtend
4
star
13

ptbrowser

An interactive browser for Ptolemy 2 models.
Xtend
4
star
14

kiesl

A textual language for UML sequence diagrams, along with a visualization based on automatic layout.
Java
3
star
15

klayjs-svg

JavaScript
2
star
16

pragmatics

Java
2
star
17

config

Configuration files and Oomph setup for Kieler development.
HTML
2
star
18

elk-cli

A commandline wrapper for elkjs.
JavaScript
2
star
19

JutilS

Util packages for JavaScript
TypeScript
1
star
20

elk-speed

Execution time comparison between ELK (Java) and elkjs
JavaScript
1
star
21

RailTrail

Code repository for the REAKT RailTrail App and related server/management code.
TypeScript
1
star
22

models

Shell
1
star
23

SoftwareProjectViz

Interactive visualization and documentation for software projects, automatically generated from DSLs
Java
1
star
24

sccharts-playground

Dockerfile
1
star