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

English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch

Привет! Я Stan, если вы использовали FossFLOW и это помогло вам, я буду очень признателен, если вы сможете сделать небольшое пожертвование :) Я работаю полный рабочий день, и найти время для работы над этим проектом достаточно сложно. Если я реализовал для вас функцию или исправил ошибку, было бы здорово, если бы вы могли :) если нет, то это не проблема, это программное обеспечение всегда останется бесплатным! Также! Если вы еще не сделали этого, пожалуйста, ознакомьтесь с базовой библиотекой, на которой это построено, от @markmanx Я действительно стою здесь на плечах гиганта 🫡 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P61KBXA3) image https://buymeacoffee.com/stan.smith Спасибо, -Stan ## Попробуйте онлайн Перейдите на --> https://stan-smith.github.io/FossFLOW/ <-- ------------------------------------------------------------------------------------------------------------------------------ FossFLOW - это мощное прогрессивное веб-приложение (PWA) с открытым исходным кодом для создания красивых изометрических диаграмм. Созданное с помощью React и библиотеки Isoflow (Теперь форкнуто и опубликовано в NPM как fossflow), оно полностью работает в вашем браузере с поддержкой офлайн-режима. ![Screenshot_20250630_160954](https://github.com/user-attachments/assets/e7f254ad-625f-4b8a-8efc-5293b5be9d55) - **🤝 [CONTRIBUTORS.md](https://github.com/stan-smith/FossFLOW/blob/master/CONTRIBUTORS.md)** - Как внести вклад в проект. ## Недавние обновления (Октябрь 2025) ### Многоязычная поддержка - **Поддержка 8 языков** - Полный перевод интерфейса на английский, китайский (упрощенный), испанский, португальский (бразильский), французский, хинди, бенгальский и русский - **Переключатель языка** - Простой в использовании переключатель языка в заголовке приложения - **Полный перевод** - Все меню, диалоги, настройки, подсказки и справочный контент переведены - **Учет локали** - Автоматически определяет и запоминает ваш языковой предпочтение ### Улучшенный инструмент соединителя - **Создание на основе кликов** - Новый режим по умолчанию: щелкните первый узел, затем второй узел для соединения - **Опция режима перетаскивания** - Исходное перетаскивание по-прежнему доступно через настройки - **Выбор режима** - Переключайтесь между режимами клика и перетаскивания в Настройки → вкладка Соединители - **Лучшая надежность** - Режим клика обеспечивает более предсказуемое создание соединений ### Импорт пользовательских иконок - **Импортируйте свои собственные иконки** - Загружайте пользовательские иконки (PNG, JPG, SVG) для использования в ваших диаграммах - **Автоматическое масштабирование** - Иконки автоматически масштабируются до согласованных размеров для профессионального внешнего вида - **Переключатель изометрия/плоскость** - Выберите, будут ли импортированные иконки отображаться как 3D изометрические или плоские 2D - **Умная постоянство** - Пользовательские иконки сохраняются с диаграммами и работают со всеми методами хранения - **Ресурсы иконок** - Найдите бесплатные иконки на: - [Iconify Icon Sets](https://icon-sets.iconify.design/) - Тысячи бесплатных SVG иконок - [Flaticon Isometric Icons](https://www.flaticon.com/free-icons/isometric) - Высококачественные наборы изометрических иконок ### Поддержка хранилища сервера - **Постоянное хранилище** - Диаграммы сохраняются в файловой системе сервера, сохраняются между сеансами браузера - **Многоустройственный доступ** - Получайте доступ к вашим диаграммам с любого устройства при использовании развертывания 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 ```bash # Использование 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`: ```bash docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest ``` ## Быстрый старт (Локальная разработка) ```bash # Клонировать репозиторий git clone https://github.com/stan-smith/FossFLOW cd FossFLOW # Установить зависимости npm install # Собрать библиотеку (требуется в первый раз) npm run build:lib # Запустить сервер разработки npm run dev ``` Откройте [http://localhost:3000](http://localhost:3000) в вашем браузере. ## Структура Monorepo Это monorepo, содержащий два пакета: - `packages/fossflow-lib` - Библиотека компонентов React для рисования сетевых диаграмм (собрана с Webpack) - `packages/fossflow-app` - Прогрессивное веб-приложение для создания изометрических диаграмм (собрано с RSBuild) ### Команды разработки ```bash # Разработка 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](../CONTRIBUTORS.md) для руководства. ## Документация - [FOSSFLOW_ENCYCLOPEDIA.md](../FOSSFLOW_ENCYCLOPEDIA.md) - Всестороннее руководство по кодовой базе - [CONTRIBUTORS.md](../CONTRIBUTORS.md) - Руководство по внесению вклада ## Лицензия MIT