{"id":10557,"title":"\u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043b\u0438 \u043e \u043b\u043e\u0433\u0438\u043d\u0430\u0445 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f\u0445","url":"\/redirect?component=advertising&id=10557&url=https:\/\/vc.ru\/promo\/341444-istoriya-loginov-i-paroley&placeBit=1&hash=94017d4f91c29251d7b976c8b7d1d213142fee516a823204c0a9aa77fdbbb464","isPaidAndBannersEnabled":false}
Сервисы
Федя и Самат

С помощью диаграмм можно объяснить что угодно. Тем более для этого есть классные инструменты

Язык коммуникации, о котором все забывают.

Я обожаю диаграммы. Рисовать их на доске или на бумажке и одновременно обсуждать с программистами. Это мой способ разобраться самому и объяснить что-то сложное другим.

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

Есть несколько классических типов диаграмм. Здесь речь пойдет об инструментах на примере «общей схемы архитектуры». На одном листе мы отразим основные группы пользователей, важные элементы системы и инфраструктуры — мобильные приложения, API, бэкенд, база данных, лоад-балансеры и прочие. На такой схеме удобно объяснять бизнесу, куда именно утекают денжищи, которые мы тратим на разработку.

Необходимые ресурсы

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

Иконки сервисов вроде Яндекс.Метрики, Google BigQuery и прочих удобно скачать в SVG на VectorLogoZone — они добавят ярких элементов и упростят визуальную навигацию в большой схеме:

Самые популярные редакторы

Один из самых популярных сервисов для построения диаграмм — Lucidchart. В нем есть всё, что ожидаешь от подобного инструмента в 2020-м: встроенные библиотеки компонент, возможность редактировать документы вместе и оставлять друг другу комментарии прямо внутри, возможность легко встроить готовые диаграммы внутрь Notion и других баз знаний. В бесплатной версии есть ограничение на 3 документа, личная лицензия 7 евро в месяц, командная — 8 евро на человека.

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

общая архитектура дорогого igooods в draw.io

Мне не нравится пользоваться обоими этими сервисами (что-то про «чувство инструмента в руках») и не нравится качество картинок, которые получаются на выходе, но я не вижу смысла углубляться в эту тему. Проще остановиться на том, что это — вопрос вкуса.

Оба инструмента очень популярны и делают то, что обещают.

Если нужна очень красивая картинка

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

Основной минус — схемы рисовать долго, поддерживать и редактировать — не особо удобно.

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

та же самая диаграмма в фигме

Суперприятный редактор

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

Неудобно то, что нет поддержки библиотек иконок (например от AWS) и не понятно, какие у сервиса перспективы. В большую команду я его не потащу, но для своих личных целей и небольших проектов теперь буду пользоваться исключительно им.

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

Варианты для «программистов»

Если вы робот или схема слишком велика для того, чтобы нарисовать и поддерживать её руками — не беда. Используйте инструменты моделирования, а не рисования: Graphviz, yworks, Structurizr, Archi, Sparx Enterprise Architect. Описываете схему формально, в коде, финальную картинку компьютер сгенерирует автоматически.

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

Базовый язык для описания моделей и схем — UML, Unified Modelling Language, но почти все инструменты используют свои собственные DSL и/или поддерживают обычные языки программирования.

Автоматизация создания схем

Есть попытки построить диаграммы автоматически, на основе анализа кода или даже инфраструктуры. Яркий пример — Cloudcraft. Если у вас вся инфраструктура в AWS — он не только сам нарисует схему, но ещё подсчитает расходы и даже покажет актуальный статус компонент:

Интерактивные диаграммы для веба

GoJS — классная библиотека, если диаграмма должна быть интерактивной и её хочется встроить в веб. У них очень приятные примеры диаграмм на сайте, рекомендую поиграть:

Вторая очень популярная js-библиотека для рендеринга диаграмм в вебе — mermaid.

JointJs — мощный фреймворк для разработки приложений для создания интерактивных диаграмм. Есть платная версия Rappid.

Немного теории перед развлекательным блоком

Пост про диаграммы будет не полным без упоминания c4 model — попытки формализовать искусство построения диаграмм. Предоставлю слово автору в пяти диаграммах (кликните на картинки для того, чтобы они открылись на полный экран):

ASCII-диаграммы (ШТОА?)

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

Хороший веб-инструмент Textik:

и очень красивый маковский Monodraw:

Наконец, самое важное — пример использования диаграмм в реальном проекте

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

Все схемы ниже разработаны и нарисованы Антоном Давыдовом. Антон помогает нам в igooods с архитектурой и хардкорной ruby-разработкой. Инструмент — Lucidchart.

Архитектура проекта и схема его взаимодействия с реальным миром и остальными частями приложения:

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

Кстати, у igooods есть классный блог на vc.ru о том, как , как живет один из крупнейших сервисов доставки продуктов в России. Подписывайтесь!

За всем этим богатством важно не забыть главное:

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

Как в здоровых личных отношениях мы иногда шепчем на ушко, а иногда кричим — так и в бизнес-коммуникации порой к месту нарисовать схему.

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

А в чем вы рисуете схемы?

0
16 комментариев
Популярные
По порядку
Написать комментарий...
Федя и Самат

именно для диаграмм архитектуры и разработки совсем не зашло :(

хотя сервис конечно огонь, пытаются заменить вообще всё

Ответить
2
Развернуть ветку
Ulyan Chesnokov

С языка сняли, один из наиболее удобных продуктов по теме. Перешел на него с draw.io (diagrams.net) и не жалею.

Ответить
1
Развернуть ветку
Philip Vasilchenko

Мне нравится http://excalidraw.com/

Ответить
4
Развернуть ветку
Dmitriy Slinkov

класс! Как будто от руки рисуешь!

Ответить
0
Развернуть ветку
Никита Долматов

Пойду в качестве водилы открывать смену и поеду бомбить таксистом, чтобы получить деньги с магазина

Ответить
1
Развернуть ветку
Федя и Самат

Но заметь, что мы этот варик уже учли :)

Ответить
2
Развернуть ветку
Федя и Самат

Вы получаете приз за внимательное чтение диаграмм!

Ответить
0
Развернуть ветку
John Jones

Как встроить диаграмму в notion?

Ответить
0
Развернуть ветку
Anton Davydov

привет, я просто брал embed ссылку из lucidchart и ее встраивал в notion

Ответить
2
Развернуть ветку

Комментарий удален

Развернуть ветку
Dmitry Fundak

https://www.websequencediagrams.com - для тех кто не хочет рисовать sequence диаграммы мышкой

Ответить
0
Развернуть ветку
Stepan Cheltsov

А как тебе Camunda? На мой взгляд, просто и наглядно.

Ответить
0
Развернуть ветку
Владислав Богомолов

Еще есть вариант с PlantUML которым можно рисовать диаграммы, в первую очередь sequence diagram в том числе и из IDE, например семейства JetBrains

Ответить
–2
Развернуть ветку
Читать все 16 комментариев
Статус бота Veles
Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

Аллилуйя: платные комментарии на vc.ru существуют

Не замечали в статьях на vc.ru про крупные банки (да и не только про банки) странные комментарии? Вдруг десятками слетаются любители бренда и начинают его защищать от нападок. Я исследую, существует ли рынок платных комментариев для «Виси‎», и уже нашел первые следы.

Вы ВТБ или календарь праздников?

Зачем в мобильном приложении ВТБ каждый день показывают клиентам, какой сегодня день в истории? Нет, я очень уважаю Эйзенштейна, Сезанна и Винни-Пуха, но вам не кажется, что клиенты заходят совсем не за этим?

Банкомат «Тинькофф» внёс не все деньги на мой счёт

28.12.2021 пополнял карту в банкомате Тинькофф, положить нужно было 60 тысяч. Выбрал на банкомате "Пополнить", положил в лоток 12 купюр по 5 тысяч, банкомат начал шуршать, через какое-то время на экране появилось сообщение типа "Заберите нераспознанные купюры", открылся лоток, в нем 5 купюр(25 тысяч), деньги забрал, на экране появилась сумма…

«Общность условий жизни — вот что необходимо для воспитания нового человека»: почему на заре СССР появились дома-коммуны Статьи редакции

В «машинах для жилья» власти пытались воспитать человека, который бы отбросил личное и сосредоточился на общем деле. Теперь люди объединяются в коливинги, потому что хотят вместе веселиться, развиваться и получать поддержку.

Субботний самопиар на vc.ru

Делимся в комментах ссылками на свои проекты и скидками для висян!

OZON и ЗоЗПП

Здравствуй vc.ru! 20.03.2021 была куплена видеокарта Gigabyte Radeon RX 570 Gaming 8GB в интернет-магазине OZON, по цене 13851 р (№55292426-0007). Из категорий "уцененный" товар. В карточки товара указывалась гарантия сроком 3 года (Это норма для данного товара, т.е. полная гарантия).

«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

Как я ходила на собеседование в ВТБ и оказалась в начале 2000-х

Итак, быстро ввожу в курс дела. Мне чуть более 40 лет, 16 из которых я продаю разные банковские продукты... На сайте давно, но как читательница. Теперь решила написать про личный опыт и впечатление от свежего собеседования в госбанке.

null