ha-chart

v0.0.1

Published

3 years ago

beautiful auto layout flowchart

Downloads

0High
0Medium
0Low

wangdashuai

composition

Hachart

HaHa, this is a flowchart generator.

online edit website

example

install

npm install ha-chart --save

quick start

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>flow-draw</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

const {compiler, layout, Container} = require('Hachart')

const code = `
type CondStyle struct{
  "extend": "deafultShape",
  "fill": "#fcb738"
}

def start("action")
  () -> cond
end

def cond:CondStyle("is 10?")
  ("yes") -> step1
  ("no") -> step2
end

def step1("step 1")
end

def step2("step 2")
end
`

const output = layout(compiler(code))
const container = new Container({containerID: "container"})
container.draw(output)

example

API

compiler(code, options)

code

//create new style, you can extends default style to create new style
type style struct{
  "extend": "deafultShape",
  "fill": "#fcb738"
}

// create a chart
def name:style("string")
  () -> nextShape
end

options

you can change the default style at compiler code using options.

{
  type: {
    deafultShape: {
      fill: '#3ab882',
      cornerRadius: 10,
      maxWidth: 180,
      fontType: {
        fontSize: 16,
        fontFamily: 'Calibri',
        padding: 20,
        fill: '#fff',
        fontStyle: 'bold',
        align: 'center'
      }
    },
    defaultAnnotation: {
      fill: '#fff',
      fontType: {
        fontSize: 16,
        fontFamily: 'Calibri',
        padding: 5,
        fill: '#8699a3',
        fontStyle: 'bold',
        align: 'center'
      }
    },
    defaultFontType: {
      'fontSize': 16,
      'fontFamily': 'Calibri',
      'fill': '#fff',
      'fontStyle': 'bold',
      'align': 'center',
      'padding': 20
    },
    defaultArrow: {
      stroke: '#8699a3',
      strokeWidth: 3,
      lineCap: 'round',
      lineJoin: 'round'
    }
  }
}

layout(input, options)

input

const input = compiler(code)

options

name | defaultValue | description -----|---------------|------------ rankdir | TB | Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. align | TB | Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right. nodesep | 50 | Number of pixels that separate nodes horizontally in the layout. edgesep | 10 | Number of pixels that separate edges horizontally in the layout. ranksep | 50 | Number of pixels between each rank in the layout. marginx | 0 | Number of pixels to use as a margin around the left and right of the graph. marginy | 0 | Number of pixels to use as a margin around the top and bottom of the graph. acyclicer | undefined | If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic. ranker | network-simplex | Type of algorithm to assigns a rank to each node in the input graph. Possible values: network-simplex, tight-tree or longest-path

Container

constructor({containerID: "string"})

containerID: the id of document node.

draw(input)

draw the compiler code

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme