How to use the elkjs function in elkjs

To help you get started, we’ve selected a few elkjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mermaidjs / ariel-diagrams / src / index.js View on Github external
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)

elkjs

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

EPL-2.0
Latest version published 18 days ago

Package Health Score

86 / 100
Full package analysis

Popular elkjs functions