let vertices = 0; //количество вершин графа
        let graph = []; // матрица смежности
        let canvas, ctx;

        function createGraph() {
            vertices = document.getElementById('vertices').value;
            if (vertices < 2 || vertices > 10) {
                alert("Количество вершин должно быть от 2 до 10");
                return;
            }

            let graphContainer = document.getElementById('graph-container');
            graphContainer.innerHTML = '';
			
			//создаем таблицу с ячейками, добавляя чекбоксы в ячейки ниже главной диагонали
            let table = document.createElement('table');
            for (let i = 1; i <= vertices; i++) {
                let row = document.createElement('tr');
                for (let j = 1; j <= vertices; j++) {
                    let cell = document.createElement('td');
					// чекбоксы добавляются ниже главной диагонали (где i > j)
                    if (i > j) {
                        let checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.id = `checkbox-${i}-${j}`;
                        cell.appendChild(checkbox);
                    } 
					//а ячейки выше будут серыми (css: empty-cell)
					else if (i < j) {
                        cell.classList.add('empty-cell');
                    }
					//на главной диагонали (i === j) ячейки остаются тоже без чекбоксов	
                    row.appendChild(cell);
                }
                table.appendChild(row);
            }
            graphContainer.appendChild(table);

            let drawButton = document.createElement('button');
            drawButton.textContent = 'Отрисовать';
            drawButton.onclick = drawGraph;
            graphContainer.appendChild(drawButton);
        }

        function drawGraph() {
            // Очистка canvas
            canvas = document.getElementById('graphCanvas');
            ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Создание матрицы смежности на основе чекбоксов 
            graph = [];
            for (let i = 1; i <= vertices; i++) {
                graph[i] = [];
                for (let j = 1; j <= vertices; j++) {
                    if (i > j) {
                        let checkbox = document.getElementById(`checkbox-${i}-${j}`);
                        graph[i][j] = checkbox.checked ? 1 : 0;
                    } else {
                        graph[i][j] = 0;
                    }
                }
            }

            // Отрисовка графа
            let centerX = canvas.width / 2;
            let centerY = canvas.height / 2;
            let radius = Math.min(centerX, centerY) - 20;

            for (let i = 1; i <= vertices; i++) {
                let angle = (i - 1) * (2 * Math.PI / vertices);
                let x = centerX + radius * Math.cos(angle);

                let y = centerY + radius * Math.sin(angle);
                drawCircle(ctx, x, y, 10, 'lightblue');
                drawText(ctx, `${i}`, x, y);
            }

            for (let i = 1; i <= vertices; i++) {
                for (let j = 1; j <= vertices; j++) {
                    if (graph[i][j] === 1) {
                        let x1 = centerX + radius * Math.cos((i - 1) * (2 * Math.PI / vertices));
                        let y1 = centerY + radius * Math.sin((i - 1) * (2 * Math.PI / vertices));
                        let x2 = centerX + radius * Math.cos((j - 1) * (2 * Math.PI / vertices));
                        let y2 = centerY + radius * Math.sin((j - 1) * (2 * Math.PI / vertices));
                        drawLine(ctx, x1, y1, x2, y2, 'black');
                    }
                }
            }
        }

        function drawLine(ctx, x1, y1, x2, y2, color) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = color;
            ctx.stroke();
        }

        function drawCircle(ctx, x, y, radius, color) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();
        }

        function drawText(ctx, text, x, y) {
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = '14px Arial';
            ctx.fillText(text, x, y);
        }