FossFLOW — создавайте потрясающие изометрические диаграммы инфраструктуры в 3D-стиле локально и бесплатно

Вы устали от сложных и непонятных схем инфраструктуры? Хотели бы вы, чтобы существовал более простой и наглядный способ отображения ваших систем? Хорошие новости! FossFLOW поможет вам по-новому взглянуть на визуализацию вашей архитектуры. Это инструмент с открытым исходным кодом, который с невероятной легкостью поможет вам создавать красивые изометрические диаграммы в 3D-стиле.

Что такое FossFLOW?

FossFLOW — это мощное прогрессивное веб-приложение (PWA) с открытым исходным кодом, разработанное специально для создания изометрических диаграмм инфраструктуры.

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

Пользователи могут добавлять и соединять компоненты, настраивать схемы и управлять своей работой с помощью таких функций, как автосохранение и импорт/экспорт.

Созданный на основе React и библиотеки Isoflow (https://github.com/markmanx/isoflow), FossFLOW предлагает фантастические возможности для обеспечения конфиденциальности, при этом все данные вашей диаграммы хранятся локально в вашем браузере, что гарантирует конфиденциальность вашей работы и возможность доступа к ней в автономном режиме.

Создатель FossFLOW взял Isoflow Community Edition и сделал так, чтобы любой желающий мог настроить и запустить его с невероятной лёгкостью.

Хотя основная библиотека Isoflow великолепна, FossFLOW предлагает дополнительные преимущества, позволяя экспортировать и загружать резервные копии в формате JSON ваших диаграмм. Эта функция недоступна в версии Isoflow для сообщества.

Это полностью проект с открытым исходным кодом, выпущенный под лицензией Unlicense, что означает, что вы можете свободно использовать и изменять его по своему усмотрению.

Ранее FossFLOW был известен как OpenFLOW, но был переименован, чтобы избежать путаницы с существующим протоколом сетевой телеметрии и продуктом Snowflake.

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

FossFLOW обладает множеством функций, которые упрощают создание диаграмм:

• Потрясающие изометрические виды: создавайте привлекательные технические схемы в 3D-стиле, которые помогут разобраться в сложных системах.
• Простой редактор с функцией перетаскивания: легко создавайте свою архитектуру с помощью иконок, областей и соединителей. Просто выберите компонент из библиотеки и разместите его на холсте.
• Расширяемая система иконок: используйте существующие библиотеки иконок для основных облачных провайдеров, таких как AWS, Azure, GCP или даже Kubernetes. Вы также можете создавать собственные наборы иконок.
• Автоматическое сохранение и быстрое сохранение: ваша работа автоматически сохраняется каждые 5 секунд прямо в хранилище вашего браузера. Нужно сохранить прямо сейчас? Функция «Быстрое сохранение (сеанс)» поможет вам без лишних всплывающих окон.
• Автономный доступ: поскольку это PWA, вы можете работать над своими диаграммами даже без подключения к интернету.
• Простой импорт/экспорт: легко делитесь своими диаграммами и создавайте их резервные копии в виде файлов JSON. Это позволяет загружать диаграммы, созданные другими пользователями, или сохранять важные наработки.
• Интуитивно понятная навигация: перемещайте и масштабируйте холст, чтобы сосредоточиться на разных областях диаграммы.
• Сочетания клавиш: ускорьте рабочий процесс с помощью сочетаний клавиш для удаления элементов, масштабирования и панорамирования. Кроме того, есть даже Ctrl+Z для отмены и Ctrl+Y для повтора!

Установить FossFLOW

Готовы визуализировать свою инфраструктуру как никогда раньше? С FossFLOW начать невероятно просто.

Вы можете установить его как обычное приложение на устройство с Linux или Mac или просто запустить его прямо в веб-браузере.

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

Перейдите по ссылке https://stan-smith.github.io/FossFLOW/, чтобы мгновенно начать создавать диаграммы.

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

Запустите FossFLOW локально

Для тех, кто предпочитает локальную среду, сначала клонируйте репозиторий FossFLOW на GitHub:

git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW

Затем убедитесь, что у вас установлен npm, и установите необходимые зависимости с помощью:

npm install

Наконец, запустите сервер разработки:

npm start

Чтобы получить доступ к FossFLOW, откройте http://localhost:3000 в своём веб-браузере.

FossFLOW хорошо работает в современных браузерах, таких как Chrome, Edge, Firefox и Safari, в том числе в мобильных браузерах с поддержкой PWA.

Для оптимальной работы автор рекомендует использовать браузеры Chrome или Edge.

Создавайте изометрические диаграммы с помощью FossFLOW

FossFLOW предназначен для изометрического построения диаграмм, что позволяет создавать потрясающие технические диаграммы в 3D-стиле.

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

Добавлять элементы:

• Использование меню: нажмите кнопку «+» в правом верхнем углу меню, чтобы слева появилась библиотека компонентов. Затем вы можете перетаскивать компоненты из этой библиотеки на холст.
• С помощью правой кнопки мыши: или же щелкните правой кнопкой мыши по сетке и выберите «Добавить узел». После создания нового узла вы можете нажать на него и настроить его с помощью меню слева.
• Инструмент поддерживает расширяемую систему иконок, что позволяет использовать существующие библиотеки для AWS, Azure, GCP, Kubernetes и других платформ или создавать собственные.

Соединяйте Элементы:

Используйте доступные соединители, чтобы показать связи между компонентами на вашей схеме.

Настройка:

Вы можете изменить цвета, подписи и свойства элементов в соответствии со своими потребностями.

Навигация и взаимодействие

Ориентироваться:

Вы можете перемещать и масштабировать холст, чтобы работать с разными областями диаграммы.

• Масштаб: используйте колесико мыши, чтобы увеличить или уменьшить масштаб.
• Панорамирование: Нажмите и перетащите, чтобы панорамировать холст.

Сочетания клавиш:

• Удалить: удалить выбранные элементы.
• Ctrl+Z: отменить последнее действие.
• Ctrl+Y: повторить действие, которое было отменено ранее.

Сохранение Вашей работы и управление ею

FossFLOW уделяет первостепенное внимание конфиденциальности: все данные вашей диаграммы хранятся локально в вашем браузере.

• Автосохранение: ваши диаграммы автоматически сохраняются в хранилище браузера каждые 5 секунд.
• Быстрое сохранение (сеанс): Нажмите «Быстрое сохранение (сеанс)» для мгновенного сохранения без всплывающих диалоговых окон.
• Сохранить как новое: используйте кнопку «Сохранить как новое», чтобы создать копию диаграммы с другим названием.
• Загрузить: нажмите «Загрузить», чтобы просмотреть и получить доступ ко всем ранее сохранённым диаграммам.
• Импорт: вы можете загружать диаграммы из файлов JSON, которыми поделились другие пользователи.
• Экспорт: Загрузите свои диаграммы в виде файлов JSON, чтобы поделиться ими или создать резервную копию.
• Диспетчер хранилища: используйте «Диспетчер хранилища», чтобы управлять пространством, используемым в хранилище вашего браузера. Это особенно полезно, поскольку браузер localStorage имеет ограничение примерно в 5–10 МБ. Рекомендуется регулярно экспортировать важные диаграммы в виде файлов JSON для резервного копирования.

FossFLOW упрощает создание схем инфраструктуры, делая их доступными, красивыми и конфиденциальными. Чего же вы ждёте? Начните создавать схемы своих систем, используя понятный и стильный подход!

Ресурс:

• Репозиторий FossFLOW на GitHub: https://github.com/stan-smith/FossFLOW

Редактор: AndreyEx