Стараюсь сделать хороший редактор блок-схем. Вот что получается.
Задача
Сделать удобно.
Удобно - значит не отвлекать пользователя
Аналитик продумывает бизнес-процесс, ему нужно сосредоточиться. Редактор-схем не должен отвлекать. Редактор должен отнимать как можно меньше внимания.
Максимум 7 кнопок одновременно
Человек может одновременно держать в памяти 7 элементов: 7 цифр, 7 слов. Если в меню 7 пунктов - это удобно. Если больше - нужно разбивать на блоки. Так сделано во всех программах.
Не больше 7 элементов в блоке.
Не переводить фокус
В dgrm элементы управления нейтральные, сливаются с полотном. Весь фокус на диаграмме.
Настройки отображаются рядом с фигурой. Не нужно прыгать взглядом между панелью настроек и фигурой.
Меньше действий для выполнения операции
Перетащить файл, быстрее чем загрузить через меню.
Ctrl C, Ctrl V быстрее чем “Сохранить изображение” -> “Вставить в Word”.
Избавить от необходимости выбирать
Выбирать стили и шаблоны интересно, но это отвлекает. Наши возможности концентрироваться ограничены, рабочий инструмент не должен забирать наши ресурсы.
Для рабочей схемы хватит 6-ти цветов. Палитра не нужна.
В dgrm можно выгрузить картинку только в одном формате, в png. Эта же картинка “файл проекта”. Вы можете открыть её на редактирование.
Еще пример. “Обводка” всегда находится на заднем плане. Это не нужно настраивать.
Это не нужно настраивать.
Не заставлять целиться
Когда мы целимся ниткой в иголку, прислушиваемся, разглядываем мелкий шрифт - ничего другого одновременно мы делать не можем. Эти действия занимают все наше внимание. Прислушиваясь мы останавливаемся и даже частично выключаем зрение.
В dgrm вы рисуете “по клеточкам”. Не нужно целиться. Все фигуры всегда вписываются в клетки. Вам легче сделать фигуры одинакового размера, и ровно их поставить.
Редактор развивается
Редактор: https://dgrm.net/
Анонсы обновлений в телеграмм: https://t.me/dgrm_net
Комментарии (23)
VLadislav_habr2023
07.07.2023 06:40Hidden text
Здравствуйте, очень понравилась ваша идея, в будущем можно добавить команды. Как вы считаете, чем ваше приложение будет привлекать больше, чем Miro, почему вы выбрали именно эту нишу, если есть уже монополисты?
Alex_BBB Автор
07.07.2023 06:40Спасибо за поддержку.
> можно добавить команды
Какие команды?
Miro молодцы, красиво сделали. Но можно лучше.
Нишу не выбирал. Ради интереса сделал прототип, знакомым понравилось.
Затянуло, интерес не пропал.
forthuse
07.07.2023 06:40Редактор развивается
А, есть ли какая то предполагаемая дорожная карта?
P.S. Есть программы как FlProg, Hiasm, Алгоритм Билдер где с помощью визуального представления схемы связей между узлами/компонентами и управлению свойствами этих "модулей" может быть сгенерирован исполняемый код.
Возможно ли будет в будущем использовать такой подход и с Вашим инструментарием?Alex_BBB Автор
07.07.2023 06:40>дорожная карта?
Ближайшая задача - совместная работа
>может быть сгенерирован исполняемый код.
Прям исходный код генерировать не планировал.
Была идея приделать к bpm движку. Пока отложил эту идею.
https://vimeo.com/632994077
vagon333
07.07.2023 06:40По опыту работы с BPMN.io:
При выборе контрола хорошо-бы контекстное меню доступных компонент (у вас их не много)
Хранение и перенос диаграм лучше в открытом формате, например хмл или json.
Пример:
Hidden text
Alex_BBB Автор
07.07.2023 06:40Спасибо за советы.
>Хранение и перенос диаграм лучше в открытом формате, например хмл или json.
json и меньше весить будет чем картинка. Но пока решил оставить только картинку. Кому кроме dgrm.net нужны json-ы его формата?
mpa4b
07.07.2023 06:40+1Ещё было бы здорово сохранять не только в пнг, но и например в svg
Alex_BBB Автор
07.07.2023 06:40Хочу лучше понять конечную цель выгрузки схемы в svg. Что потом с этими svg будете делать, почему png не подходит?
olku
07.07.2023 06:40Обычно делают два вида выгрузки - save и export. Save во внутреннем формате для последующей работы и обмена, export для вставки в другие документы. SVG векторный формат и скейлится в современных онлайн-презентациях на пол-стены (могу показать кейсы), PNG когда SVG невозможен.
Tkachov
07.07.2023 06:40Может человек хочет json сгенерировать по каким-нибудь данным, и визуализировать?
Ну и диффать/мерджить текст обычно попроще — если, например, хочется диаграммы в репозитории хранить.
KyHTEP
07.07.2023 06:40Настройки отображаются рядом с фигурой. Не нужно прыгать взглядом между панелью настроек и фигурой.
Вы противопоставляете два подхода. Почему не сделать оба?
Как вы решите задачу по изменению одного свойства у множества выбранных элементов, которые разбросаны по холсту, без боковой панели?Alex_BBB Автор
07.07.2023 06:40Думаю боковая панель нужна когда много настроек.
Если нужно изменить свойство сразу у нескольких фигур: Выделить несколько фигур. Кликнуть на любой из выделенных фигур -> настройки открываются рядом с местом клика.
Сейчас в dgrm так и сделал. См рисунок «Операции с группой фигур. 4 кнопки.».
KyHTEP
07.07.2023 06:40Если нужно изменить свойство сразу у нескольких фигур: Выделить несколько фигур. Кликнуть на любой из выделенных фигур -> настройки открываются рядом с местом клика.
Там не настройки, а управление (удалить, копировать вставить). Если вы добавите настройки (цвет, стиль), то будет новая проблема - сброс выделения при miss-click.
Кстати, а почему для создания элементов у вас боковая панель, а не настройки рядом с фигурой? Почему бы не сделать при клике на connection end-point показ элементов, которые можно создать дальше по цепочке?
Создание "по цепочке"
Предложения и наблюдения:
1. Ctrl+Click не добавляет в текущий список выделений
2. Между двумя end-point можно сделать сколько угодно одинаковых соединений. Может проверять на наличие и не создавать?
3. Список объектов очень нужен. Если я случайно создал кучу элементов друг на друге (те же стрелки между двумя точками), то во-первых - это тяжело увидеть, во-вторых - тяжело исправить, а со списком это делается быстрее. Но не обязательно его показывать всегда.Alex_BBB Автор
07.07.2023 06:40Спасибо! Записал в to-do.
1. Ctrl+Click не добавляет в текущий список выделений
Это первым пунктом
eton65
07.07.2023 06:40Интересный проект. Можно еще добавить возможность одновременной онлайн работы для двух или более человек.
Stanislavvv
Всё это, конечно, хорошо, но вот "перетащить файл" считаю полным Г, особенно по нынешним временам, когда вместо мышей - тачпады... Слишком неоднозначное действие — чуть не так дёрнулась рука и объект непонятно где.
Хоткеи копирования/вырезания/вставки более однозначны.
Peter1010
Работа только через хоткеи сразу отсекают людей которые с планшета/смартфона.
Stanislavvv
Судя по анимациям в статье — там нихрена не про тачскрины, где многооконный интерфейс не прижился от слова вообще. Внутри одного окна одного приложения таскать - сколько угодно, а вот между окнами, как на анимации — см. первоначальный коммент.
Alex_BBB Автор
Можно через меню открыть
twerqu1
У большей части приложений (как минимум на маке) уже реализовано перетаскивание. Как по мне это удобно, особенно когда можно из папки в dock перетащить файл в приложение, что быстрее, чем открывать отдельное окно finder, искать файл, копировать, а потом это же окно закрывать
Stanislavvv
Для меня неудобно именно тащить, целиться с нажатой кнопкой. Особенно на тачпаде...