FossFLOW - Инструмент для изометрических диаграмм

<b>Привет!</b> Я Stan, если вы использовали FossFLOW и это помогло вам, <b>я буду очень признателен, если вы сможете сделать небольшое пожертвование :)</b> Я работаю полный рабочий день, и найти время для работы над этим проектом достаточно сложно. Если я реализовал для вас функцию или исправил ошибку, было бы здорово, если бы вы могли :) если нет, то это не проблема, это программное обеспечение всегда останется бесплатным!

<b>Также!</b> Если вы еще не сделали этого, пожалуйста, ознакомьтесь с базовой библиотекой, на которой это построено, от <a href="https://github.com/markmanx/isoflow">@markmanx</a> Я действительно стою здесь на плечах гиганта 🫡

<b> https://buymeacoffee.com/stan.smith </b>

Спасибо,

-Stan

Попробуйте онлайн

Перейдите на <b> --> https://stan-smith.github.io/FossFLOW/ <-- </b>

FossFLOW - это мощное прогрессивное веб-приложение (PWA) с открытым исходным кодом для создания красивых изометрических диаграмм. Созданное с помощью React и библиотеки <a href="https://github.com/markmanx/isoflow">Isoflow</a> (Теперь форкнуто и опубликовано в NPM как fossflow), оно полностью работает в вашем браузере с поддержкой офлайн-режима.

• 🤝 CONTRIBUTORS.md - Как внести вклад в проект.

Недавние обновления (Октябрь 2025)

Многоязычная поддержка

• Поддержка 8 языков - Полный перевод интерфейса на английский, китайский (упрощенный), испанский, португальский (бразильский), французский, хинди, бенгальский и русский
• Переключатель языка - Простой в использовании переключатель языка в заголовке приложения
• Полный перевод - Все меню, диалоги, настройки, подсказки и справочный контент переведены
• Учет локали - Автоматически определяет и запоминает ваш языковой предпочтение

Улучшенный инструмент соединителя

• Создание на основе кликов - Новый режим по умолчанию: щелкните первый узел, затем второй узел для соединения
• Опция режима перетаскивания - Исходное перетаскивание по-прежнему доступно через настройки
• Выбор режима - Переключайтесь между режимами клика и перетаскивания в Настройки → вкладка Соединители
• Лучшая надежность - Режим клика обеспечивает более предсказуемое создание соединений

Импорт пользовательских иконок

• Импортируйте свои собственные иконки - Загружайте пользовательские иконки (PNG, JPG, SVG) для использования в ваших диаграммах
• Автоматическое масштабирование - Иконки автоматически масштабируются до согласованных размеров для профессионального внешнего вида
• Переключатель изометрия/плоскость - Выберите, будут ли импортированные иконки отображаться как 3D изометрические или плоские 2D
• Умная постоянство - Пользовательские иконки сохраняются с диаграммами и работают со всеми методами хранения
• Ресурсы иконок - Найдите бесплатные иконки на:
  • Iconify Icon Sets - Тысячи бесплатных SVG иконок
  • Flaticon Isometric Icons - Высококачественные наборы изометрических иконок

Поддержка хранилища сервера

• Постоянное хранилище - Диаграммы сохраняются в файловой системе сервера, сохраняются между сеансами браузера
• Многоустройственный доступ - Получайте доступ к вашим диаграммам с любого устройства при использовании развертывания Docker
• Автоматическое обнаружение - UI автоматически показывает хранилище сервера, когда оно доступно
• Защита от перезаписи - Диалог подтверждения при сохранении с дублирующими именами
• Интеграция Docker - Хранилище сервера включено по умолчанию в развертываниях Docker

Расширенные функции взаимодействия

• Настраиваемые горячие клавиши - Три профиля (QWERTY, SMNRCT, Нет) для выбора инструментов с визуальными индикаторами
• Расширенные элементы управления панорамированием - Несколько методов панорамирования, включая перетаскивание пустой области, средний/правый щелчок, клавиши модификаторы (Ctrl/Alt) и навигацию с клавиатуры (Стрелки/WASD/IJKL)
• Переключить стрелки соединителя - Опция для отображения/скрытия стрелок на отдельных соединителях
• Постоянный выбор инструмента - Инструмент соединителя остается активным после создания соединений
• Диалог настроек - Централизованная конфигурация для горячих клавиш и элементов управления панорамированием

Улучшения Docker и CI/CD

• Автоматизированные сборки Docker - Рабочий процесс GitHub Actions для автоматического развертывания Docker Hub при коммитах
• Поддержка мультиархитектуры - Образы Docker для linux/amd64 и linux/arm64
• Предварительно собранные образы - Доступны на stnsmith/fossflow:latest

Архитектура Monorepo

• Единый репозиторий для библиотеки и приложения
• NPM Workspaces для упрощенного управления зависимостями
• Единый процесс сборки с npm run build в корне

Исправления UI

• Исправлена проблема отображения иконок панели инструментов редактора Quill
• Решены предупреждения ключей React в контекстных меню
• Улучшен стиль редактора markdown

Возможности

• 🎨 Изометрическое диаграммирование - Создавайте потрясающие технические диаграммы в стиле 3D
• 💾 Автосохранение - Ваша работа автоматически сохраняется каждые 5 секунд
• 📱 Поддержка PWA - Установите как нативное приложение на Mac и Linux
• 🔒 Приоритет конфиденциальности - Все данные хранятся локально в вашем браузере
• 📤 Импорт/Экспорт - Делитесь диаграммами как JSON файлами
• 🎯 Хранилище сеанса - Быстрое сохранение без диалогов
• 🌐 Поддержка офлайн - Работайте без подключения к интернету
• 🗄️ Хранилище сервера - Дополнительное постоянное хранилище при использовании Docker (включено по умолчанию)
• 🌍 Многоязычный - Полная поддержка 8 языков: English, 简体中文, Español, Português, Français, हिन्दी, বাংলা, Русский

🐳 Быстрое развертывание с Docker

# Использование Docker Compose (рекомендуется - включает постоянное хранилище)
docker compose up

# Или запустите напрямую из Docker Hub с постоянным хранилищем
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

Хранилище сервера включено по умолчанию в Docker. Ваши диаграммы будут сохранены в ./diagrams на хосте.

Чтобы отключить хранилище сервера, установите ENABLE_SERVER_STORAGE=false:

docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

Быстрый старт (Локальная разработка)

# Клонировать репозиторий
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW

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

# Собрать библиотеку (требуется в первый раз)
npm run build:lib

# Запустить сервер разработки
npm run dev

Откройте http://localhost:3000 в вашем браузере.

Структура Monorepo

Это monorepo, содержащий два пакета:

• packages/fossflow-lib - Библиотека компонентов React для рисования сетевых диаграмм (собрана с Webpack)
• packages/fossflow-app - Прогрессивное веб-приложение для создания изометрических диаграмм (собрано с RSBuild)

Команды разработки

# Разработка
npm run dev          # Запустить сервер разработки приложения
npm run dev:lib      # Режим наблюдения для разработки библиотеки

# Сборка
npm run build        # Собрать библиотеку и приложение
npm run build:lib    # Собрать только библиотеку
npm run build:app    # Собрать только приложение

# Тестирование и линтинг
npm test             # Запустить модульные тесты
npm run lint         # Проверить ошибки линтинга

# E2E тесты (Selenium)
cd e2e-tests
./run-tests.sh       # Запустить сквозные тесты (требуется Docker и Python)

# Публикация
npm run publish:lib  # Опубликовать библиотеку в npm

Как использовать

Создание диаграмм

1. Добавить элементы:

   • Нажмите кнопку "+" в правом верхнем меню, библиотека компонентов появится слева
   • Перетащите компоненты из библиотеки на холст
   • Или щелкните правой кнопкой мыши на сетке и выберите "Добавить узел"

2. Соединить элементы:

   • Выберите инструмент Соединитель (нажмите 'C' или щелкните значок соединителя)
   • Режим клика (по умолчанию): Щелкните первый узел, затем щелкните второй узел
   • Режим перетаскивания (опционально): Щелкните и перетащите от первого узла ко второму
   • Переключайте режимы в Настройки → вкладка Соединители

3. Сохранить вашу работу:

   • Быстрое сохранение - Сохраняет в сеанс браузера
   • Экспорт - Скачать как JSON файл
   • Импорт - Загрузить из JSON файла

Варианты хранения

• Хранилище сеанса: Временные сохранения удаляются при закрытии браузера
• Экспорт/Импорт: Постоянное хранилище в виде JSON файлов
• Автосохранение: Автоматически сохраняет изменения каждые 5 секунд в сеанс

Внесение вклада

Мы приветствуем вклад! Пожалуйста, смотрите CONTRIBUTORS.md для руководства.

Документация

• FOSSFLOW_ENCYCLOPEDIA.md - Всестороннее руководство по кодовой базе
• CONTRIBUTORS.md - Руководство по внесению вклада

Лицензия

MIT