How to use elkjs - 4 common examples

// 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(() => {

.attr('transform', 'scale(0.02) rotate(90)')
    .append('svg:path')
    .attr('d', 'M852.8,558.8c0,194.5-158.2,352.8-352.8,352.8c-194.5,0-352.8-158.3-352.8-352.8c0-190.8,152.4-346.7,341.8-352.5v117.4l176.4-156.9L489,10v118C256.3,133.8,68.8,324.8,68.8,558.8C68.8,796.6,262.2,990,500,990c237.8,0,431.2-193.4,431.2-431.2H852.8z')

  if (!$('#qtip')[0]) {
    // add qtip to the document
    $(document.body).append("<div id="qtip"><span id="qtipArrow">◄</span><div id="qtipContent"></div></div>")
  }

  if (activations) {
    $(wskflowContainer).append("<div style="position: absolute; display:none; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 0.75em; padding: 1ex; width:225px; right: 5px; top: 5px;" id="actList"></div>")
  }

  const root = svg.append('g')
  let elkData
  const elk = new ELK()
  const doneRendering = elk.layout(JSONgraph, {
    layoutOptions: Object.assign({
      'elk.algorithm': 'org.eclipse.elk.layered',
      'org.eclipse.elk.direction': 'DOWN',
      'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
      'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
      'elk.layered.spacing.nodeNodeBetweenLayers': 15, // org.eclipse. prefix doesn't work (elk bug???)
      // 'org.eclipse.elk.layered.cycleBreaking.strategy': "DEPTH_FIRST",
      'org.eclipse.elk.insideSelfLoops.activate': true
    }, layoutOptions)
  })
    .then(data =&gt; {
      elkData = data

      // By default, the graph resizes to fit the size
      // of the container i.e. zoom-to-contain, showing

// 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': '200',
                'elk.direction': 'DOWN',
                'elk.layered.spacing.nodeNodeBetweenLayers': '200'
            },
            children: children,
            edges: edges,
        };
        return new Promise(resolve => {

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

import ELK from 'elkjs'
import * as R from 'ramda'
import * as logLevel from 'loglevel'
import xmlFormat from 'xml-formatter'

import X from './xml/Element'
import { uniqMarkers, preprocess } from './utils'
import { simplifyPath } from './utils/edge'
import { defaultLayoutOptions, defaultSizeOptions, defaultMarkers } from './constants'

const log = logLevel.getLogger('ariel/index')

const elk = new ELK()

const createNode = (n, defaultLayoutOptions) => {
  // node
  const node = new X('svg', R.pick(['x', 'y', 'width', 'height'], n))
  const strokeWidth = 1
  const padding = Math.ceil(strokeWidth / 2) // padding to avoid cliping: https://stackoverflow.com/questions/7241393
  const shape = new X('rect', { x: padding, y: padding, width: n.width - padding * 2, height: n.height - padding * 2, fill: 'none', stroke: 'black', 'stroke-width': strokeWidth })
  if (shape.get('stroke-width') === 1) {
    shape.delete('stroke-width') // omit default value
  }
  node.append(shape)

  // node label
  if (!R.isNil(n.labels) && !R.isEmpty(n.labels)) {
    R.forEach(l => {
      let text = new X('text', { x: '50%', y: '50%', 'text-anchor': 'middle', 'dominant-baseline': 'central', stroke: 'black' }, l.text)