-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathsample2.html
66 lines (65 loc) · 4.71 KB
/
sample2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<svg width="960" height="720"></svg>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="./lib/flowcharty.js"></script>
<script>
var data = {
nodes: [
{id: 'start', label: {name: 'Which flowchart library should you use?'}, style: {fillColor: '#fff'}},
{id: 'manually', label: {name: 'You want to draw manually?'}},
{id: 'drawIo', label: {name: '<a href="https://www.draw.io/" target="_blank">draw.io</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: 'rgb(241, 136, 8)', strokeColor: 'rgb(199, 113, 7)'}},
{id: 'formal', label: {name: 'You want to draw a relatively formal chart?'}},
{id: 'anotherChart', label: {name: 'You want to use \nnot only for flowchart \nbut also another UML?'}},
{id: 'mermaid', label: {name: '<a href="https://mermaidjs.github.io/" target="_blank">mermaid</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: '#8dcf7c', strokeColor: '#72a964'}},
{id: 'flowchartJS', label: {name: '<a href="http://flowchart.js.org/" target="_blank">flowchart.js</a>', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 100, height: 25, rx: 3, ry: 3, fillColor: '#2e7bcf', strokeColor: '#275da1'}},
{id: 'bigDiamond', label: {name: 'You can avoid using a big diamond\nfor long sentence condition.', color: '#fff', dx: 0, dy: 5, textAnchor: 'middle'}, style: {shape: "rect", width: 230, height: 50, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
{id: 'nodePosition', label: {name: 'You can put nodes to in a position you like.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 280, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
{id: 'decorate', label: {name: 'You can decorate nodes and links.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 230, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
{id: 'module', label: {name: 'You can use as "npm" module.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 210, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
{id: 'maintenance', label: {name: 'It is not difficult to maintain the chart.', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 240, height: 25, rx: 3, ry: 3, fillColor: '#706CAA', strokeColor: '#7152aa'}},
{id: 'd3', label: {name: 'You do not want to depends on "d3.js" ?', color: '#afafaf'}, style: {fillColor: '#afafaf', strokeColor: '#afafaf'}},
{id: 'dummyNode1', label: {name: ''}, style: {shape: 'nothing', strokeWidth: 0, width:0, height:0}},
{id: 'dummyNode2', label: {name: ''}, style: {shape: 'nothing', strokeWidth: 0, width:0, height:0}},
{id: 'flowcharty', label: {name: 'flowcharty', fontSize: '20px', color: '#fff', dx: 0, dy: 0, textAnchor: 'middle'}, style: {shape: "rect", width: 150, height: 40, rx: 3, ry: 3, fillColor: '#cf634b', strokeColor: '#a7533e'}},
],
map: [
['', 'start'],
['', 'manually', 'drawIo'],
['', 'formal'],
['', 'bigDiamond', '', 'dummyNode1'],
['', 'nodePosition', '', 'anotherChart'],
['', 'decorate', 'dummyNode2'],
['', 'module'],
['', 'maintenance'],
['', 'd3'],
['', 'flowcharty', '', 'flowchartJS', 'mermaid'],
],
links: [
{source: 'start', target: 'manually'},
{source: 'manually', target: 'drawIo', label: {name: 'yes'}},
{source: 'manually', target: 'formal', label: {name: 'no'}},
{source: 'formal', target: 'anotherChart', label: {name: 'yes'}},
{source: 'anotherChart', target: 'flowchartJS', label: {name: 'no'}},
{source: 'anotherChart', target: 'mermaid', label: {name: 'yes'}},
{source: 'formal', target: 'bigDiamond', label: {name: 'no'}},
{source: 'bigDiamond', target: 'nodePosition'},
{source: 'nodePosition', target: 'decorate'},
{source: 'decorate', target: 'module'},
{source: 'module', target: 'maintenance'},
{source: 'maintenance', target: 'd3'},
{source: 'd3', target: 'dummyNode2', label: {name: 'yes'}, style: {headType: 'none', curveType: 'stepAfter', color: '#afafaf'}},
{source: 'dummyNode2', target: 'dummyNode1', style: {color: '#afafaf', curveType: 'stepBefore'}},
{source: 'd3', target: 'flowcharty', label: {name: 'no'}, style: {strokeWidth: 4, color: '#cf3933'}},
]
};
var flowcharty = new Flowcharty.default();
flowcharty.nodeRX = 7;
flowcharty.nodeRY = 7;
flowcharty.nodeFillColor = "#000";
flowcharty.render(d3.select("svg"), data);
</script>
</body>
</html>