# klayjs

> Automatic graph layout based on Sugiyama's algorithm. Specialized for data flow diagrams and ports.

Latest version **0.4.1** (published 2016-04-13) · EPL-1.0 license · 0 weekly downloads

## Install

```sh
npm install klayjs
pnpm add klayjs
yarn add klayjs
bun add klayjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2016-04-13 |
| First published | 2014-10-08 |
| Weekly downloads | 0 |
| License | EPL-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 239 |
| Author | Ulf Rueegg |
| Maintainers | uruuru |
| Keywords | graph, layout, layered, ports, dataflow |

## Links

- npm: https://www.npmjs.com/package/klayjs
- Repository: https://github.com/OpenKieler/klayjs
- Issues: https://github.com/OpenKieler/klayjs/issues
- npm.io page: https://npm.io/package/klayjs

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2016-04-13
- 0.4.0 — 2016-01-06
- 0.3.2 — 2015-03-26
- 0.3.1 — 2015-03-19
- 0.3.0 — 2015-01-28
- 0.2.1 — 2014-10-08
- 0.2.0 — 2014-10-08

## README

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][wiki-klay]. 

In case you want to use the layout in conjunction with [D3.js][d3js] 
you can take a look at our [KLayJS-D3][klayjs-d3] extension.
gru

Example Layout of a Ptolemy Diagram
===
![Ptolemy Diagram](http://rtsys.informatik.uni-kiel.de/~uru/ptolemy.png)

Installation
===
Either download the `klay.js` file or install it using `npm` or `bower`.
```bash
npm install klayjs
```
```bash
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][jsonkgraph] format to specify a graph with its properties. 
A minimal example looks like this:
```js
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.
```html
<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.

```js
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. 

```bash
npm install klayjs
```

```js
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][wiki-layopts]

### 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][klayjs-d3] extension are available at:
- [Ports](http://openkieler.github.io/klayjs-d3/examples/ports/)
- [Hierarchy](http://openkieler.github.io/klayjs-d3/examples/hierarchy/)
- [Interactive](http://openkieler.github.io/klayjs-d3/examples/interactive/)
- [Miserables](http://openkieler.github.io/klayjs-d3/examples/miserables/) (Data From D3 Force Example)

See the `examples` folder of the klayjs-d3 project.

#### SCChart with Dataflow
![SCChart with Dataflow](http://rtsys.informatik.uni-kiel.de/~uru/scchartsdataflow.png)

#### Sequentially Constructive Graph
![Sequentially Constructive Graph](http://rtsys.informatik.uni-kiel.de/~uru/scg.png)

[wiki-klay]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered
[wiki-layopts]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered+Layout+Options
[jsonkgraph]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/JSON+Graph+Format
[klayjs-d3]: https://github.com/OpenKieler/klayjs-d3
[d3js]: http://d3js.org/

---
_Source: https://npm.io/package/klayjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._