https://github.com/spritejs/sprite-extend-dagre
Draws simple flow chart diagrams with spritejs. Powered by dagre.js.
https://github.com/spritejs/sprite-extend-dagre
Last synced: 9 months ago
JSON representation
Draws simple flow chart diagrams with spritejs. Powered by dagre.js.
- Host: GitHub
- URL: https://github.com/spritejs/sprite-extend-dagre
- Owner: spritejs
- Created: 2018-12-05T09:34:24.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-08-23T09:54:55.000Z (over 3 years ago)
- Last Synced: 2025-04-23T00:42:58.444Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 302 KB
- Stars: 27
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sprite-Dagre
Draws simple flow chart diagrams with spritejs. Powered by [Dagre](https://github.com/dagrejs/dagre) and [Rough.js](https://github.com/pshihn/rough). Inspired by [MermaidJS](https://mermaidjs.github.io).
## Usage
[CodePen](https://codepen.io/akira-cn/pen/ebYjYX)
```html
const {Scene, Dagre} = spritejs;
const scene = new Scene('#container', {
viewport: 'auto',
resolution: 'flex',
useDocumentCSS: true,
});
const fglayer = scene.layer('fglayer');
const dagreGroup = new Dagre({
pos: fglayer.center,
anchor: 0.5,
lineWidth: 5,
});
fglayer.append(dagreGroup);
dagreGroup.layoutGraph(`
graph TB
A->B~~D
B~>C
`);
```
## Flow charts
**Graph [direction]** declares a new graph and the direction of the graph layout.
Possible directions are:
- TB - top bottom (default)
- BT - bottom top
- RL - right left
- LR - left right
```js
dagreGroup.layoutGraph(`
graph LR
A->B~~D
B~>C
`);
```
This declares a graph oriented from left to right.
### Nodes & Shapes
#### A node (default)
```js
dagreGroup.layoutGraph(`
graph LR
id
`);
```
#### A node with text
```js
dagreGroup.layoutGraph(`
graph LR
id1[This is the text in the box]
`);
```
#### A node with round edges
```js
dagreGroup.layoutGraph(`
graph LR
id1(This is the text in the box)
`);
```
#### A node in the form of an ellipse
```js
dagreGroup.layoutGraph(`
graph LR
id1((This is the text in the ellipse))
`);
```
#### A node (rhombus)
```js
dagreGroup.layoutGraph(`
graph LR
id1
`);
```
#### A node (parallelogram)
```js
dagreGroup.layoutGraph(`
graph LR
id1/This is the text in the box/
`);
```
#### A user defined node
```js
dagreGroup.layoutGraph(`
graph LR
id1!star
`, {
star() {
const star = new Star();
star.attr({
radius: 100,
color: 'red',
angles: 5,
fillColor: 'red',
});
return star;
},
});
```
### Links between nodes
#### A link with arrow head
```js
dagreGroup.layoutGraph(`
graph LR
A->B
`);
```
#### An open link
```js
dagreGroup.layoutGraph(`
graph LR
A--B
`);
```
#### A dashed link
```js
dagreGroup.layoutGraph(`
graph LR
A~>B
`);
```
#### A dashed open link
```js
dagreGroup.layoutGraph(`
graph LR
A~~B
`);
```
#### A link with text
```js
dagreGroup.layoutGraph(`
graph LR
A->B{"Link text"}
`);
```
#### A link with colored text
```js
dagreGroup.layoutGraph(`
graph LR
A->B{"Link text" red}
`);
```
### Demo
[CodePen](https://codepen.io/akira-cn/pen/QzWZdv)
```js
const {Scene, Dagre} = spritejs;
const scene = new Scene('#container', {
viewport: 'auto',
resolution: 'flex',
useDocumentCSS: true,
});
const fglayer = scene.layer('fglayer');
const dagreGroup = new Dagre({
pos: fglayer.center,
lineWidth: 5,
anchor: 0.5,
});
fglayer.append(dagreGroup);
dagreGroup.layoutGraph(`
graph TB
start((S))
step1[proceed]
step2
step3/read file/
step4(done)
start->step1->step2
step2~>step4{no}
step2->step3{yes}
step3->step4
`);
```
### Styling nodes & links
[CodePen](https://codepen.io/akira-cn/pen/madzMJ)
```css
#step1 {
--sprite-fillColor: red;
--sprite-labelBg: white;
}
#step2 {
--sprite-strokeColor: blue;
--sprite-labelColor: red;
}
dagreedge[connection="[step1,step2]"] {
--sprite-strokeColor: green;
}
```
```js
const {Scene, Dagre} = spritejs;
const scene = new Scene('#container', {
viewport: 'auto',
resolution: 'flex',
useDocumentCSS: true,
});
const fglayer = scene.layer('fglayer');
const dagreGroup = new Dagre({
pos: fglayer.center,
lineWidth: 5,
anchor: 0.5,
});
fglayer.append(dagreGroup);
dagreGroup.layoutGraph(`
graph TB
start((S))
step1[proceed]
step2
step3/read file/
step4(done)
start->step1->step2
step2~>step4{no}
step2->step3{yes}
step3->step4
`);
```
