- PVSM.RU - https://www.pvsm.ru -

UI редактора блок-схем

Dgrm.net [1]

Придумывать интерфейс интересно. Похоже на головоломку. Вот что получается для Dgrm.net [1].

Dgrm.net [1] это редактор блок-схем

  • работает на пк, планшетах и телефонах;

  • нет лишних кнопок;

  • быстрый;

  • бесплатный.

Редактор открывает схемы из картинок

Рис 1. Dgrm.net открывает картинки схем
Рис 1. Dgrm.net открывает картинки схем

Не нужно хранить исходники, картинка и есть исходник.

Например:  посылаем схему по почте. Через месяц письмо возвращается - сразу правим картинку из письма, не ищем исходники.

Соединительные линии вытягиваем, а не добавляем как отдельную фигуру

Рис 2. Для соединения фигур вытягиваем стрелки
Рис 2. Для соединения фигур вытягиваем стрелки

Точки входа подсвечиваются заранее при приближении к фигуре

На рисунке 3 показаны скрытые контуры.

Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре
Рис 3. Точки входа подсвечиваются заранее при приближении к фигуре

Фигуры автоматически подстраиваются под длину текста

Не нужно вручную менять размер.

Фигуры увеличиваются не плавно, а шагами. Чтобы на схеме не рябило от разных размеров.

Рис 4. Фигуры автоматически меняют размер в зависимости от текста
Рис 4. Фигуры автоматически меняют размер в зависимости от текста

Минимум элементов управления

Возможности редактора сознательно ограничены.

  • Только 4 фигуры;

  • В меню 5 пунктов. Нет выбора формата сохранения.

Большие элементы управления

На телефонах элементы управления становятся еще больше.

Рис 5. Большие элементы управления на телефонах
Рис 5. Большие элементы управления на телефонах

Ближайшие планы

  1. Групповое перетаскивание фигур. Сейчас можно только одну фигуру перетащить.

  2. Изменение цвета фигур.

  3. Приближать/удалить схему.

  4. Короткие ссылки на диаграммы.

  5. Диалог “Сохранить как”. Сейчас сохраняет в “Загрузки” без возможности указать имя файла.

  6. Копирование схемы из редактора в Word.

  7. Перетаскивание схемы из редактора в Word.

Dgrm.net [1] | GitHub [2] (исходный код)

Автор: Алексей Бойко

Источник [3]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/376242

Ссылки в тексте:

[1] Dgrm.net: https://dgrm.net/

[2] GitHub: https://github.com/AlexeyBoiko/DgrmJS

[3] Источник: https://habr.com/ru/post/672694/?utm_source=habrahabr&utm_medium=rss&utm_campaign=672694