{"id":10776,"title":"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0432 \u043e\u043a\u0435\u0430\u043d \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430","url":"\/redirect?component=advertising&id=10776&url=https:\/\/vc.ru\/acer_russia\/347915-acer-vypustila-pervyy-noutbuk-iz-pererabotannogo-plastika&placeBit=1&hash=368c351f012741e124bb4bc6c0b9b05d5e0f9033fab83ea5e301424877f73936","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 комментариев
Прирост средней заработной платы в США в конце 2021 года был значительно ниже инфляции
Люди на вырост: как it-компании получить новых сотрудников с нужными компетенциями

Чем занимаются стажеры «Ситимобила» — рассказывает (теперь уже) штатная сотрудница компании.

Почему спрос создать нельзя и что с этим делать

«Рекламируем паркетную доску темного цвета… она не пользуется спросом… люди спрашивают светлую… По опыту темную доску покупают люди… Вопрос: какую стратегию применить для привлечения покупателей?»

Авито и участники IT-коалиции подписали мировое соглашение с Яндексом
Партнерство Coinbase и Mastercard революционизирует опыт покупок NFT

2021 год был несомненно прорывным во множество сфер криптовалют, особенно это было ощутимо для NFT. 2022 год обещает быть очень интересным. Множество компаний готовят для жаждущей аудитории различные NFT игры, коллекции и т.д. Не считая всего этого, пользователи также хотят быть уверенными в своих покупках и сделках, так что многие пристально…

«Азбука вкуса» завоевала серебро и бронзу на международном конкурсе дизайна World Brand Design Society Awards

Проекты инхаус дизайн-студии «Азбуки вкуса» — упаковка Мосальского стейка и редизайн упаковки СТМ «Азбука вкуса» — получили серебряную и бронзовую награды в двух номинациях: Дизайн упаковки и Редизайн упаковки.

В новогоднюю ночь клиенты Yota переписывались в Viber и WhatsApp

По данным Yota, в период с 31 декабря по 1 января объем трафика мессенджеров Viber и WhatsApp среди пользователей оператора вырос более чем на 50% по сравнению с периодом 24-25 декабря.

На кого поставить при развороте рынка вверх
CityDrive: мы сначала блокируем а потом разбираемся или доказывать свою не виновность

Привет друзья!

Revolut запустил в США сервис для торговли акциями без комиссии Статьи редакции

До этого пользоваться приложением могли только жители Евросоюза и Великобритании.

null