HaHa, this is a flowchart generator.
npm install ha-chart --save<!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('ha-chart')
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)
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
endoptions
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'
}
}
}draw with konvajs
more defaultShape and defaultAnnotation Parameters
more default fontType parameters
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 |
constructor({containerID: "string"})
containerID: the id of document node.
draw(input)
draw the compiler code
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent