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

Dgrm.net

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

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

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

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

  • быстрый;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

© Habrahabr.ru