KoolGrapher

Визуальный редактор графов для создания и редактирования диаграмм, схем и сетей

KoolGrapher - это легковесный и интуитивно понятный редактор графов, построенный на Electron и Two.js. Приложение позволяет создавать, редактировать и визуализировать графы с поддержкой различных форм узлов, настраиваемых свойств и сохранения в собственном формате.

Ключевые особенности:

• Интерактивное редактирование - Создание, перемещение, связывание и удаление узлов
• Множество форм узлов - Круг, квадрат, треугольник, ромб и другие
• Настраиваемая панель свойств - Изменение цвета, размера, текста и толщины контура
• Собственный формат файлов - Сохранение и загрузка в формате .kgraph
• Темы оформления - Тёмная и светлая темы с плавным переключением
• Адаптивный интерфейс - Работает на разных разрешениях экрана

Архитектура

Формат файла .kgraph

KoolGrapher использует собственный формат файлов .kgraph для сохранения и загрузки графов. Это JSON-файл со следующей структурой:

{
  "nodes": [
    {
      "id": "uuid-узла",
      "x": 200.0,
      "y": 150.0,
      "shape": "circle",
      "label": "Текст метки",
      "color": "#ff0000",
      "linewidth": 2,
      "size": 25
    }
  ],
  "edges": [
    {
      "id": "uuid-ребра",
      "startId": "uuid-начального-узла",
      "endId": "uuid-конечного-узла",
      "label": "Текст ребра"
    }
  ]
}

Система идентификации

Каждый узел и ребро в графе имеют уникальный UUID, что обеспечивает:

• Надёжную идентификацию при сохранении и загрузке
• Целостность данных при сериализации
• Возможность восстановления связей после изменений формы узлов

Установка

Из исходного кода

# Клонируем репозиторий
git clone https://github.com/slpuk/koolgrapher.git
cd koolgrapher

# Устанавливаем зависимости
npm install

# Запускаем приложение
npm start

Сборка дистрибутива

# Сборка для вашей платформы
npm run build

# Сборка для определенной платформы
npm run build:win
npm run build:mac
npm run build:linux

Быстрый старт

Основные операции

1. Добавление узла:
   Нажмите "Добавить" → выберите форму из модального окна → кликните на холст
2. Перемещение узла:
   Перетащите узел мышью
3. Связывание узлов:
   Нажмите "Связать" → кликните на первый узел → кликните на второй узел
4. Удаление узла:
   Выделите узел → нажмите "Удалить" (или режим удаления + клик)
5. Редактирование свойств:
   Выделите узел → измените параметры в боковой панели

Темы оформления

Приложение поддерживает две цветовые схемы:

• Тёмная тема (по умолчанию)
• Светлая тема

Переключение тем сохраняется в localStorage и автоматически восстанавливается при следующем запуске.

Компоненты интерфейса

Панель инструментов

• Добавить - создание нового узла
• Связать - создание связи между узлами
• Удалить - удаление выделенного узла

Панель свойств

• ID - уникальный идентификатор узла (только чтение)
• Текст - редактирование метки узла
• Форма - выбор формы (круг, квадрат, треугольник, ромб, шестиугольник, параллелограмм)
• Цвет - настройка цвета контура
• Размер - изменение размера узла
• Толщина контура - настройка толщины обводки

Статусбар

Отображает текущий режим работы.

Системные требования

• Node.js 14.0 или выше
• npm 6.0 или выше
• Операционная система: Windows 10+, macOS 10.15+, Linux (Ubuntu 18.04+)

Структура проекта

koolgrapher/
├── examples/
│   ├── basic.kgraph        # Базовый пример
│   └── tree.kgraph         # Пример дерева
├── src/
│   ├── index.html          # Главная страница
│   ├── style.css           # Основные стили
│   ├── scripts/
│   │   └── graph.js        # Ядро графа и логика
│   ├── themes/
│   │   ├── dark.css        # Тёмная тема
│   │   └── light.css       # Светлая тема
│   └── assets/
│       └── fonts/          # Шрифты Michroma и Jura
├── main.js                 # Основной процесс Electron
├── preload.js              # Preload скрипт для IPC
├── package.json            # Зависимости и скрипты
└── README.md               # Этот файл

Участие в разработке

Мы приветствуем ваши идеи и предложения! Не стесняйтесь отправлять Pull Request.

Лицензия

Проект распространяется под лицензией GPLv3. Подробнее см. в файле LICENSE.