* **Установка через npm:**
    >npm install metricflow

    ```html
    let MetricFlow = require("metricflow")

<div id="graph" height="700px" width="1100px" ></div>

/*Создание диаграммы на холсте*/
let metricFlow = MetricFlow("graph")
/*Определение данных узла*/
let nodeData= {
    "id":"primaryKey",//id должен быть уникальным в глобальном масштабе, иначе будет перезаписан
    "title":{'name':"Статистика времени выполнения"},
    "data":[
       {'name':'Метод: IndexController#method1'},
       {'name':'Среднее время: 0,333 мс'},
     ]
};
/*Создание узла в координатах (20,200)*/
let node1 = metricFlow.createNode(nodeData,10,200);
/*Или напрямую определите позицию x и y в nodeData, затем*/
/*metricFlow.createNode(nodeData);*/

let metricFlow = MetricFlow("graph")
let node1Data= {
    "x":10,
    "y":200,
    "id":"node1",
    "title":{'name':"Статистика времени выполнения"},
    "data":[
       {'name':'Метод: IndexController#method1'},
       {'name':'Среднее время: 0,333 мс'},
     ]
};
let node1 = metricFlow.createNode(node1Data);

let node2Data= {
    "x":300,
    "y":200,
    "id":"node2",
    "title":{'name':"Статистика времени выполнения"},
    "data":[
       {'name':'Метод: IndexController#method1'},
       {'name':'Среднее время: 0,333 мс'},
     ]
};
let node2 = metricFlow.createNode(node2Data);
/*Соедините два узла. Начальная точка соединения не имеет значения, она будет автоматически определена. Например, если целевой узел находится ниже начального узла, соединение начинается от нижней части начального узла и заканчивается в верхней части целевого узла.*/
metricFlow.createLink(node1,node2);

let metricFlow = MetricFlow("graph")
let node1Data= {
    "x":10,
    "y":200,
    "id":"node1",
    "title":{'name':"Статистика времени выполнения"},
    "data":[]
};
let node1 = metricFlow.createNode(node1Data);

let node2Data= {
    "x":300,
    "y":200,
    "id":"node2",
    "from":"node1",//значение from может быть строкой или массивом
    "title":{'name':"Статистика времени выполнения"},
    "data":[]
};
let node2 = metricFlow.createNode(node2Data);

            let metricFlow = MetricFlow("graph")

            /*Определение данных узлов*/
               let node1Data= {
                "x":20,
                "y":200,
                "id":"node1",
                "title":{'name':"Узел 1"}
            };

            let node2Data= {
                "x":300,
                "y":50,
                "id":"node2",
                "from":"node1",
                "title":{'name':"Узел 2"}
            };
            let node3Data= {
                "x":300,
                "y":300,
                "id":"node3",
                "from":"node1",
                "title":{'name':"Узел 3"}
            };
            let node4Data= {
                "x":500,
                "y":200,
                "id":"node4",
                "from":['node2','node3'],
                "title":{'name':"Узел 4"},
                "data":[
                    {'name':"1.xxxx"},
                    {'name':"2.xxxx"},
                ]
            };
            let nodes = [node1Data,node2Data,node3Data,node4Data];
            metricFlow.createNodes(nodes);
``` **Создание узлов:**

* demo7.html:
    * ```javascript
let nodes= {
            "x":20,
            "y":200,
             ...
            "children":[
                {
                    "id":"node3",
                     ...
                    "children":[
                        {...}
                    ]
                },
            ]
        };

metricFlow.createNodes(nodes);```

**Стилизация узлов:**

* demo8.html: 
    * Второй способ создания с использованием свойства children. Корневой узел требует указания координат x и y, остальные дочерние узлы будут автоматически выравниваться по правому краю.

* demo9.html:
    * Если при автоматическом создании расстояние между узлами не подходит, его можно настроить.
    * ```javascript
let options = {
                'node-distance-offsetx':5,//левое и правое расстояния +5
                'node-distance-offsety':-5//верхнее и нижнее расстояния -5
            };
let metricFlow = MetricFlow("graph",options)```

* demo12.html:
    * При автоматическом создании, если формат данных не соответствует, и вы не хотите обрабатывать данные вручную, можно передать функцию для настройки.
    * ```javascript
function format(data){
    data['title'] = {'name':"更改title的名字"};
    return data;
}
metricFlow.createNodes(nodes,format);```

**Определение стилей:**

* demo8.html:
    * Для изменения стиля узла можно добавить свойство style.
    * ```javascript
let node2Data= {
    "id":"node2",
    "style":{
                    "node-type": "circle",//тип узла {metric,circle,rectangle} по умолчанию metric v1.1.4 новый
                    'node-width':'3px',//ширина узла по умолчанию адаптивная, после указания фиксированная v1.1.3 новая
                    'node-height':'3px',//высота узла по умолчанию адаптивная, после указания фиксированная v1.1.3 новая
                    'border-width':'3px',//толщина границы v1.1.3 новая
                    'border-color':'black',//цвет границы
                    'title-color':'black',//фон заголовка
                    'title-font-color':'white',//шрифт заголовка
                    'title-font-size':'13px',//размер шрифта заголовка
                    'data-color':'white',//фон данных
                    'data-font-size':'13px',//размер шрифта данных
                    'data-font-color':'red',//цвет шрифта данных
                },
    "title":{'name':"запуск времени статистики"},
    "data":[
       {'name':'метод：IndexController#method1'},
       {'name':'среднее время：0.333ms'},
     ]
};```

* demo7.html:
    * Добавление стилей для отдельных узлов может быть неудобным, поэтому можно использовать пакетное добавление.
    * ```javascript
metricFlow.createNodes(nodeList,addColors);
 function addColors(data) {
        data['style'] = {
            'border-color':'black',//граница
            'title-color':'black',//заголовок
            'title-font-color':'white',//шрифт заголовка
            'title-font-size':'13px',//размер шрифта заголовка
            'data-color':'white',//данные
            'data-font-size':'13px',//размер шрифта данных
            'data-font-color':'red',//цвет шрифта данных
        }
        return data
    }```

**Конфигурация соединений:**

* demo5.html:
    * Позиция соединения в настоящее время поддерживает только определение смещения. Можно определить при создании MetricFlow.
    * Соединение разделено на начальную и конечную точки, можно установить глобальное смещение начальной точки, в основном для рассмотрения случая, когда передний конец использует сложную структуру CSS, что приводит к смещению позиции из-за конфликта CSS.
    * ```javascript
let options = {
                'link-start-offsetx':1,//смещение начальной точки вправо на одну единицу
                'link-start-offsety':-1,//смещение начальной точки вверх на одну единицу
                'link-end-offsetx':-1,
                'link-end-offsety':-1,
                'link-width-offset':-1,//уменьшение толщины сегмента линии на одну единицу
                'link-color':"blue", //изменение цвета линии
                'node-distance-offsetx': -55,//автоматическое выравнивание вправо при двух узлах расстояние -55
                'node-distance-offsety': -55,//автоматическое вертикальное выравнивание при двух узлах расстояние -55
            };
let metricFlow = MetricFlow("graph",options)```

**Запрет перетаскивания:**

* ```javascript
let options = {
                'drag':false
            };
let metricFlow = MetricFlow("graph",options)```

**События узлов:**

* Поддерживаются основные события мыши, такие как click, dblclick, mousedown и mouseup, которые согласуются с исходным JavaScript, и события могут быть настроены на соответствующем узле.
* ```javascript
let node1Data= {
            "id":"primaryKey",
            "title":{'name':"двойной щелчок"},
            'click':"sinclick", //одиночный щелчок sinclick - это имя функции
            'dblclick':"doubleClick",//двойной щелчок
            "data":[
               {'name':'метод：IndexController#method1'},
               {'name':'среднее время：0.333ms'},
             ]
        };```

* demo11.html и demo14.html: примеры использования событий узлов.