elkjs-svg

NOTE: This is not tested with any advanced layouts. Please test and fix bugs as PR:s if you can!

A SVG generator for JSON graphs laid out with elkjs that requires no further dependencies. ELK handles the conversion of ELK JSON to "layouted JSON". Elkjs-svg converts the layouted JSON to SVG.

Usage

If you want to use it in the browser, consider using browserify.

To use it from node.js:

1npm install elkjs-svg

Put this code into example.js:

1const ELK = require('elkjs')
2const elksvg = require('elkjs-svg');
3
4var graph = {
5  "id": "root",
6  "layoutOptions": {
7    "elk.algorithm": "layered"
8  },
9  "children": [
10    {"id": "n1", "width": 30, "height": 30},
11    {"id": "n2", "width": 30, "height": 30},
12    {"id": "n3", "width": 30, "height": 30}
13  ],
14  "edges": [
15    {"id": "e1", "sources": ["n1"], "targets": ["n2"]},
16    {"id": "e2", "sources": ["n1"], "targets": ["n3"]}
17  ]
18}
19
20const elk = new ELK()
21elk.layout(graph)
22  .then(data => {
23    var renderer = new elksvg.Renderer();
24    var svg = renderer.toSvg(data);
25    console.log(svg);
26  })

Run the code with:

1node example.js

This will be the output in the terminal:

1<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="104" height="104">
2  <defs>
3    <style type="text/css">
4      ...
5    </style>
6    <marker>...</marker>
7  </defs>
8  <g>
9    <polyline points="42,27 62,27" id="e1" class="edge" />
10    <polyline points="42,37 52,37 52,77 62,77" id="e2" class="edge" />
11    <rect id="n1" class="node" x="12" y="17" width="30" height="30" />
12    <rect id="n2" class="node" x="62" y="12" width="30" height="30" />
13    <rect id="n3" class="node" x="62" y="62" width="30" height="30" />
14  </g>
15</svg>

Which when copied to a file called example.svg and opened in a browser looks like this:

Customizing CSS and defs

The generated SVG elements can be styled using css. A simple style definition is already included and used as default. Each SVG element's id equals the id in the json graph. Additionally, nodes, edges, ports and labels receive a class attribute equal to their type (e.g. .node).

Custom styles and svg definitions can be specified as follows:

1const ELK = require('elkjs')
2const elksvg = require('elkjs-svg');
3
4var graph = {
5  "id": "root",
6  "layoutOptions": {
7    "elk.algorithm": "layered"
8  },
9  "children": [
10    {"id": "n1", "width": 30, "height": 30},
11    {"id": "n2", "width": 30, "height": 30},
12    {"id": "n3", "width": 30, "height": 30}
13  ],
14  "edges": [
15    {"id": "e1", "sources": ["n1"], "targets": ["n2"]},
16    {"id": "e2", "sources": ["n1"], "targets": ["n3"]}
17  ]
18}
19
20const elk = new ELK()
21elk.layout(graph)
22    .then(data => {
23      var renderer = new elksvg.Renderer();
24      var svg = renderer.toSvg(
25        data,
26        styles=`
27          rect {
28            opacity: 0.8;
29            fill: #6094CC;
30            stroke-width: 1;
31            stroke: #222222;
32          }
33        `, 
34        defs=`
35          <marker id="node">
36            <path d="0,7 L10,4 L0,1 L0,7" style="" />
37          </marker>
38        `
39      );
40      console.log(svg);
41    })

To remove all the default styling and defs, set them to en empty string while calling toSvg().

Specify custom attributes, classes and styles

It is possible to specify further attributes, classes, and styles as part of the json graph. A node definition like this

1{
2  "id": "node1",
3  "class": ["myClass", "otherClass"],
4  "attributes": {
5    "data-foo": "bar",
6    "rx": 5
7  },
8  "style": "fill: #ddd;"
9}

results in a corresponding svg element

1<rect id="node1" class="myClass otherClass node" x="12" y="12" width="0" height="0" style="fill: #ddd;" data-foo="bar" rx="5" />

Running tests

The test runner goes through all files in test/testcases/*.json, renders them with ELK, and compares the result with the SVG with the same name.

Run all the tests by typing npm test in the project root.

To run just one test use ONLY_TEST="simple" npm test, where "simple" is the name of the json files you want to render.

To add a new testcase, put a new json files into test/testcases, and use the test-render script to generate a new SVG:

1env ONLY_RENDER="your-testcase" npm run render | awk "NR>4" > test/testcases/your-testcase.svg

This tells the test-render script to only render your-testcase, removes the first four lines (which are output from npm), and writes the resulting SVG to the path you specify. [/Elkjs SVG exampl( imagee.svg]:)