mirror of
https://github.com/stan-smith/FossFLOW.git
synced 2026-04-23 08:31:16 -04:00
204 lines
16 KiB
Markdown
204 lines
16 KiB
Markdown
# FossFLOW - Инструмент для изометрических диаграмм <img width="30" height="30" alt="fossflow" src="https://github.com/user-attachments/assets/56d78887-601c-4336-ab87-76f8ee4cde96" />
|
||
|
||
<p align="center">
|
||
<a href="../README.md">English</a> | <a href="README.cn.md">简体中文</a> | <a href="README.es.md">Español</a> | <a href="README.pt.md">Português</a> | <a href="README.fr.md">Français</a> | <a href="README.hi.md">हिन्दी</a> | <a href="README.bn.md">বাংলা</a> | <a href="README.ru.md">Русский</a> | <a href="README.id.md">Bahasa Indonesia</a> | <a href="README.de.md">Deutsch</a>
|
||
</p>
|
||
|
||
<b>Привет!</b> Я Stan, если вы использовали FossFLOW и это помогло вам, <b>я буду очень признателен, если вы сможете сделать небольшое пожертвование :)</b> Я работаю полный рабочий день, и найти время для работы над этим проектом достаточно сложно.
|
||
Если я реализовал для вас функцию или исправил ошибку, было бы здорово, если бы вы могли :) если нет, то это не проблема, это программное обеспечение всегда останется бесплатным!
|
||
|
||
|
||
<b>Также!</b> Если вы еще не сделали этого, пожалуйста, ознакомьтесь с базовой библиотекой, на которой это построено, от <a href="https://github.com/markmanx/isoflow">@markmanx</a> Я действительно стою здесь на плечах гиганта 🫡
|
||
|
||
[](https://ko-fi.com/P5P61KBXA3)
|
||
|
||
<img width="30" height="30" alt="image" src="https://github.com/user-attachments/assets/dc6ec9ca-48d7-4047-94cf-5c4f7ed63b84" /> <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](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
|