-
Notifications
You must be signed in to change notification settings - Fork 8
/
index2.html
77 lines (71 loc) · 4.01 KB
/
index2.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
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Network diagram as code</title>
<script src="dist/code-full.min.js"></script>
</head>
<body style="font:14px helvetica neue, helvetica, arial, sans-serif;">
<h3>Complex diagram with color edges, layout = grid</h3>
<div id="scheme6" style="height:500px;width:800px;"></div>
<script>
const elements6 = {
groups: [
{ id: 'service-group1', label: 'Группа сервисов 1'},
{ id: 'service-group2', label: 'Группа сервисов 2'},
],
nodes: [
{ id: 'man1', type: 'person', label: 'Человек'},
{ id: 'client', type: 'smartphone', label: 'Смартфон'},
{ id: 'agent-backend', type: 'server', group: 'service-group1', label: 'agent-backend'},
{ id: 'web', type: 'server', group: 'service-group1', label: 'Приложение Записи мобильных'},
{ id: 'www', type: 'server', group: 'service-group1', label: 'страница загрузки'},
{ id: 'mongodb1', type: 'database', group: 'service-group1', label: 'Mongo DB 1'},
{ id: 'mongodb2', type: 'database', group: 'service-group1', label: 'Mongo DB 2'},
{ id: 'runner-integration1', type: 'worker', group: 'service-group1', label: 'отправка'},
{ id: 'runner-integration2', type: 'worker', group: 'service-group1', label: 'отправка'},
{ id: 'api', type: 'server', group: 'service-group1', label: 'API для внутренних сервисов'},
{ id: 'integration', type: 'server', group:'service-group2', label: 'Интеграция CRM'},
{ id: 'otherServer', type: 'server', group:'service-group2', label: 'сервер'},
{ id: 'firebase', type: 'cloud', label: 'Google Firebase'},
{ id: 'logger', type: 'server', group:'service-group2', label: 'Сервер логов'},
{ id: 'crm', type: 'cloud', label: 'Cloud CRM'},
],
edges: [
{ source: 'client', target: 'agent-backend', label: 'json данные', line: 'dotted',},
{ source: 'agent-backend', target: 'mongodb1', color: 'black', line: 'dashed'},
{ source: 'agent-backend', target: 'mongodb2', color: 'black' },
{ source: 'mongodb1', target: 'runner-integration1', label: 'данные', color: 'red', style: 'taxi'},
{ source: 'mongodb2', target: 'runner-integration2', label: 'данные' },
{ source: 'mongodb1', target: 'web', label: 'данные для отображения' },
{ source: 'runner-integration1', target: 'integration', label: 'данные', color: 'red' },
{ source: 'runner-integration2', target: 'otherServer', label: 'данные для отчетов' },
{ source: 'api', target: 'firebase', label: 'запросы', color: 'green' },
{ source: 'firebase', target: 'client', label: 'данные в push-сообщениях', color: 'green' },
{ source: 'service-group1', target: 'logger', label: 'логи syslog', direction: 'none'},
{ source: 'integration', target: 'api', label: 'уведомления', color: 'green' },
{ source: 'integration', target: 'crm', label: 'данные' },
{ source: 'man1', target: 'client', label: 'совершает звонки', style: 'taxi',},
],
positions: [
{ id: 'client', row: 2, col: 1,},
{ id: 'agent-backend', row: 2, col: 3,},
{ id: 'web', row: 6, col: 3,},
{ id: 'www', row: 1, col: 3,},
{ id: 'mongodb1', row: 1, col: 4,},
{ id: 'mongodb2', row: 2, col: 5,},
{ id: 'runner-integration1', row: 3, col: 3,},
{ id: 'runner-integration2', row: 4, col: 3,},
{ id: 'api', row: 5, col: 3,},
{ id: 'integration', row: 6, col: 7,},
{ id: 'otherServer', row: 4, col: 7,},
{ id: 'firebase', row: 4, col: 1,},
{ id: 'logger', row: 2, col: 7,},
{ id: 'crm', row: 5, col: 8,},
],
};
Diagram('scheme6', elements6, {layout: 'grid'});
</script>
</body>
</html>