Как стать автором
Обновить

Как я «напрограммировал» себе скилл рисования диаграмм в скетч-стиле

Время на прочтение5 мин
Количество просмотров25K
Всего голосов 157: ↑157 и ↓0+157
Комментарии37

Комментарии 37

Ух. Шикарно. Напомнило xkcd-стиль диаграмм.

Да, вдохновлялся в том числе и xkcd-комиксами. В сервисе есть руссифицированный xkcd-шрифт, можно делать комиксы прямо из диаграмм draw.io )

Очень здорово. Отличная работа

Поделюсь ещё одним сервисом подобного стиля: https://excalidraw.com/

Только тут ещё можно вместе работать. Есть гитхаб со всем кодом.

Большое спасибо. Была где-то здесь когда-то ссылка на draw.io. Сам хотел посмотреть, как и где делаются красивые картинки. Визуализация — одна из самых интересных тем!

Выглядит круто, но такие бар-диаграммы (ни одну!) я бы точно показывать своим слушателям не стал. Во-первых, глаза же сломать можно, пытаясь понять, кто кого насколько, во-вторых, зачем своими руками создавать ощущение «небрежности», «неточности», «размытости» у людей, у которых уже чуть ли не генетическая память о скандалах с этими барами (например, история с nVidia про вырезание конца и увеличение его в 10 раз).

Диаграмма со стрелками (самая первая) крутая, я бы, возможно, где-нибудь применил подобное, но не знаю, где, а UML в качестве примера меня мало вдохновляет )

Спасибо за подробный комментарий. Сервис на самом деле не про графики, а про стилизацию в жанре "нарисовано от руки". Исходными изображениями могут быть иконки, векторные иллюстрации и, как частный случай, диаграммы и графики. Причем, не важно, где именно вы их сгенерируете (можно из Excel и Google Sheets экспортировать, можно нарисовать в draw.io или Figma). На входе у вас схематичное изображение чего-то или маркетинговая иллюстрация в стиле "flat design", на выходе - уникальный скетч (уникальный, потому что искривления примитивов будет рандомным). У сервиса высокая вариативность, можно делать цветные и черно-белые, в стиле "мелом на черной доске" или "фломастерами на бумаге".

Я сам регулярно пользуюсь им для обработки иллюстраций для сайтов. Пример1, пример2, пример3. Здесь, как мне кажется, подобная стилизация выглядит вполне уместно.
В то же время, если у вас серьезный аналитический материал, конечно, разумно использовать классическое представление, более строгое и точное.
Стилизация под скетчи хорошо подойдет для развлекательного контента, там, где привлечение внимания важнее точности подачи (кстати, если в сервисе "покрутить ручки", то можно и сейчас сделать искажения исходного изображения минимальными).

Буду с вами откровенен, сейчас я как раз пытаюсь понять, есть ли вообще потребность - использовать скетчи вместо классических схем, диаграмм и графиков. И, если есть, то у кого? Есть вероятность, что это всего лишь "прикольная штука", и не более того.

Сервис на самом деле не про графики, а про стилизацию в жанре «нарисовано от руки». Исходными изображениями могут быть иконки, векторные иллюстрации и, как частный случай, диаграммы и графики.

Да, я понимаю. Мой комментарий относится исключительно к примерам применения. И мне кажется, это как раз укладывается в рамки вопроса о потребности )

пример2

Самый красивый, ИМХО.

Кстати, глядя на него, я почему-то подумал об анимации. (В духе советской мультипликации, если помните такую. Когда выводился заголовок и висел какое-то время, постоянно изменяясь. Правда, тогда это был, скорее, нежелательный эффект, обусловленный несовершенством технологии). В общем, если исходная библиотека поддерживает разные варианты штриховки такого типа заливки (как у заголовка «Аналитика...»), из них можно было бы наделать кадров. Возможно, я ошибаюсь, но способ превратить одиночную картинку в анимацию может быть востребован при подготовке рекламных баннеров. (С этой же целью, например, берут картинку и зумят туда-сюда — надеюсь, понятно, о чём речь).

Вы про такое?

Да )
есть ли вообще потребность — использовать скетчи вместо классических схем, диаграмм и графиков. И, если есть, то у кого?

Есть. Изначально такой стиль был придуман для прямого указания на то, что схема/рисунок являются драфтом и никаким образом не могут быть вставлены в «серьёзные документы». То есть, когда показываешь дураку половину работы, нужен такой прямой крик: «я набросок, отстаньте, меня потом переделают заново». Вот для таких промежуточных этапов подготовки документации — это очень полезная вещь.

Гриша, как всегда великолепно!

Какая приятная ложь )

Ну неправда. Я ж фанат того, что у тебя получается:)

Попробовал на рабочей диаграмме. Очень классно! Руки зачесались применить для презентации. Спасибо.

"browser an image" -> "browse an image"

в интерфейсе поправьте

О, спасибо, поправлю.

Боже, я что-то подобное ищу уже года два. Вы не представляете насколько вы попали в точку!
11/10.

Потребность в таком инструменте, определенно, есть. Я часто пишу документацию, делаю презентации - для обучения или рассказа о сделанном. В том числе и лично для себя. И однотипные вещи приедаются и иногда хочется их разнообразить. Приятно же заглянуть в свои записи и увидеть там аккуратный markdown и нарисованные в визуально приятном стиле графики!

Например, в нашей компании принято делать самопрезентации для повышения - и использование нетипичных графиков может привлечь больше внимания и, соответственно, накинуть плюсик к шансам поднять денежку. Для кого-то, возможно, это будет ярким выражением высого уровня скилла мейкера презентаций.

Отдельно впечатляет технический путь реализации.

Я думаю, Ваша работа крайне интересная и я опробую ее, так сказать, as soon as possible. Спасибо большое!

НЛО прилетело и опубликовало эту надпись здесь

В app.diagrams.net при выборе фигуры в правом меню можно выбрать чекбокс "Sketch".

Да, но выбор стилей там весьма скудный. Я бы даже сказал - его нет.

О, это прекрасная мысль и отличная работа. Я немного попробовал, у меня шрифты не так выглядят, как у вас, а коряво. Конечно, такие слайды можно показывать на чуть более продвинутую аудиторию, чем обычная (которая любит Times New Roman Cyr 12).

Со шрифтами проблема может быть из-за исходного файла. Если шрифты изначально в «кривых» (например, такое может быть в некоторых PDF или если сохранить график из Google Sheets не в PDF, а в SVG), они станут отображаться непотребно. Вероятнее всего с этим проблема. Если вам будет интересно разобраться, напишите мне, я посмотрю, в чем причина. Спасибо.

Шикарно, впечатляет объём работы и конечный результат!

Подскажите, исходники тоже есть где-то? Было бы круто поднять у себя докер-контейнер с таким инструментом

Возможно, когда-нибудь выложу.

Отличный инструмент, визуально мне нравится. Жаль только аспирантуру уже заканчиваю и меньше возможностей будет в презентации/документы вставлять такие графики

А для попробовать сервис вот прям обязательно надо регистрироваться? Хотел посмотреть, но это остановило прямо сразу.

Чтобы попробовать сервис, нужно зайти под Google или FB аккаунтом. Регистрации нет, все сразу начинает работать. Два клика.

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

Понимаю. Но пока так. Чуть позже сделаю регистрацию по email.

всё классно, но текст с диаграмм plantuml не показывается, а в остальном прикольно, можно пользоваться, чтобы глаза не страдали от стандартного оформления

А обязательно логиниться через социальные сети? :(
По-старинке, через (уникальный, сгенерённый специально для этого сайта одноразовый) e-mail нельзя?

Или просто, вообще без логинов попробовать?

Пока только через соцаккаунты. Позже добавлю email.

Чот глючит очень

Можете прислать примеры файлов на info@instad.io?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий