Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>7 авг 2023</li>

3 <li>0</li>

4 </ul>Разбираемся, что собой представляет язык стрелочек и кружочков, который используют все айтишники.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Любитель научной фантастики и технологического прогресса. Хорошо сочетает в себе заумного технаря и утончённого гуманитария. Пишет про IT и радуется этому.

7 Чтобы грамотно проектировать приложения, используют схемы. Они помогают разработчикам понять, как выглядит вся архитектура целиком и как устроены отдельные её части.

8 Но схемы можно делать по-разному - например, одни проектировщики будут использовать кружки для обозначения классов, а другие - квадраты. И как тогда обычным программистам разобраться, где класс, а где не класс? Ответ - с помощью популярного языка для схем и моделей - UML.

9 В этой статье мы разберёмся, что это за язык и зачем он нужен, а также научимся различать разные типы фигур и построим свои первые диаграммы.

10 Вы узнаете:

11 <ul><li><a>Что это за язык</a></li>

12 <li><a>Для чего он нужен</a></li>

13 <li><a>Какие у него преимущества и недостатки</a></li>

14 <li><a>Что такое UML-диаграмма</a></li>

15 <li><a>Из чего она состоит</a></li>

16 <li><a>Каких бывает видов</a></li>

17 <li><a>Как построить собственную</a></li>

18 <li><a>Что запомнить</a></li>

19 </ul>UML, илиUnified Modeling Language, - это унифицированный язык моделирования. Его используют, чтобы создавать диаграммы и схемы для визуализации процессов и явлений.

20 Слово "унифицированный" означает, что схемы на UML будут понятны всем, кто знаком с ним. То есть у языка есть определённые правила, по которым применяются все стрелочки, кружки и квадраты.

21 Давайте на примере разберём, о каких процессах и явлениях мы вообще говорим.

22 Представьте, что у нас есть простой сайт, который работает на сервере. К нему подключена база данных, где хранится информация о посетителях и их действиях. Когда пользователь заходит на сайт, он сначала отправляет запрос на сервер, а тот делает запрос в базу данных и возвращает информацию обратно пользователю. И так происходит до тех пор, пока не будет закрыта страница сайта.

23 Визуально такое взаимодействие можно представить так:

24 Схема простая: пользователь → сайт → база данных. И в обратном порядкеИнфографика: Оля Ежак для Skillbox MediaТолько что мы описали процесс - как пользователь взаимодействует с нашим сайтом. Правда, сделали это в очень упрощённом виде и не по правилам языка UML. К примеру, мы могли вместо картинки компьютера использовать картинку ноутбука или вообще консоли. А направление запросов обозначать с помощью эмодзи:

25 Поменяли обозначения, но процесс не изменилсяИнфографика: Оля Ежак для Skillbox MediaПо сути ничего не поменялось, но, когда на схему посмотрит кто-то, кто не создавал её, он ничего не поймёт. Возникнет единственный вопрос: "Что вообще тут происходит???"

26 Чтобы не возникало непонимания того, какие фигуры что обозначают, как раз и придумали язык UML. Если мы знаем его, то сможем понять любую диаграмму, которую увидим.

27 UML нужен, чтобы превращать абстракции в визуальные модели и схемы. Поэтому применять его можно во многих областях:

28 <ul><li>в программировании - чтобы наглядно видеть связи между классами и другими частями приложения или чтобы построить карту поведения пользователя на сайте;</li>

29 <li>в дизайне - чтобы создавать интерфейсы и понимать, как пользователи будут взаимодействовать с ними;</li>

30 <li>в бизнесе - чтобы визуально представлять, как работают бизнес-процессы или ведётся документооборот в организации.</li>

31 </ul>При этом процессы можно проектировать с нуля или брать уже существующие и описывать в виде UML-диаграмм. Например, вот так схематично выглядит устройство базы данных музыкального сервиса:

32 К пользователю привязаны две таблицы - с музыкантами, на которых он подписан, и с понравившимися ему аудиозаписямиСкриншот: draw.io / Skillbox MediaБазы данных могут быть сложнее, и для работы с ними как раз и пригодится язык UML. Например, вот как выглядит диаграмма для интернет-магазина:

33 Эта диаграмма описывает базу данных интернет-магазинаИзображение: Skillbox MediaНе бойтесь, что всё выглядит так сложно. Это только потому, что мы ещё не разобрались со стандартными обозначениями. В конце статьи можете вернуться сюда и понять, что всё просто.

34 Теперь поговорим о преимуществах и недостатках UML, а затем начнём уже наконец разбирать диаграммы.

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

36 <ul><li>Универсальность.У каждого элемента в UML-диаграммах строго определённое значение, которое не меняется в зависимости от отрасли, страны или предпочтений разработчика. Поэтому если вы знаете базовый синтаксис, то сможете разобраться практически в любой схеме. Это как математические теоремы: их понимают одинаково во всём мире.</li>

37 <li>Простота и визуализация.Любую информацию легче понять, если она представлена в виде картинки, а UML как раз про это. В диаграммах используют знакомые всем объекты: фигуры и стрелки. По ним легко понять, как устроена структура целиком, даже если вы не особо знакомы с языком.</li>

38 <li>Распространённость.UML - понятный и простой язык, поэтому его используют во многих областях, например в IT, инженерии и менеджменте. При этом диаграммы из одной сферы смогут без особых усилий понять и в другой, хотя нюансы, конечно, есть.</li>

39 <li>Возможность автоматизации и реверс-инжиниринга.Язык поддерживает много инструментов для автоматизации моделирования. Например, можно генерировать код прямо из UML-диаграмм - для этого есть такие инструменты, как<a>Umbrello</a>. Это же помогает, когда нужно провести ревёрс-инжиниринг и понять, как работает система без документации.</li>

40 </ul>Теперь о неприятном - о недостатках языка UML. Они тоже есть, и об этом точно стоит помнить, прежде чем использовать его для ваших проектов.

41 <ul><li>Объёмная документация.Если решитесь изучить язык, практически сразу же наткнётесь<a>на его документацию</a>. И она удивит вас тем, что там 700 страниц… Хотя читать всю необязательно - достаточно обращаться к ней, когда возникнут вопросы об элементах.</li>

42 <li>Сложность использования и поддержки проектов.Некоторые инструменты для работы с UML могут показаться сложными или недостаточно интуитивными. А это добавляет трудности в освоении и использовании.</li>

43 <li>Семантическая неоднозначность.Язык не всегда придерживается строгих обозначений, и это усложняет работу с ним. Некоторые элементы можно интерпретировать по-разному, что приводит к проблемам интерпретации. Особенно ярко это видно в диаграммах активности и последовательности. Но о них дальше.</li>

44 <li>Несовместимость с мелкими проектами.UML разработали, чтобы моделировать большие и сложные системы. Поэтому использовать его для небольших - это избыточно и неэффективно. Так вы только усложните разработку и потратите ресурсы на менее значимые вещи.</li>

45 </ul>Плюсов у языка достаточно, и они перешивают минусы, поэтому использовать его точно стоит. Теперь перейдём к самим диаграммам, чтобы понять, как они устроены.

46 UML-диаграмма - это просто схема, которую сделали по правилам языка UML. Обычно в ней есть элементы и связи между ними, а также дополнительные объекты, которые помогают лучше понять диаграмму.

47 С помощью UML-схем можно описывать разные процессы и явления. Это мы уже усвоили. Примеры таких диаграмм - зависимости частей приложения друг от друга, описание классов в коде, планировка магазина или архитектура ноутбука.

48 Вот так выглядит простая диаграмма, которая описывает связи между классами в коде:

49 Ура, появились какие-то обозначенияСкриншот: draw.io / Skillbox MediaНа диаграмме есть три класса: Студент, Учитель и Человек. Все они как-то относятся друг к другу. Сейчас коротко поясним.

50 Классы Студент и Учитель связаны между собой - это показано обычной линией. Связаны - значит, что они как-то взаимодействуют: например, вызывают методы друг друга.

51 Классы Студент и Учитель наследуют свойства от класса Человек. Наследуют - значит берут этот класс за основу. Например, у Человека могут быть свойства: рост, вес и имя. А все классы, которые наследуются от него, сразу же получат эти свойства. Наследование показано незакрашенной стрелкой.

52 ? Все диаграммы строятся по главному принципу: есть объекты, которые как-то связаны друг с другом. Эта связь может быть разной - например, наследование или обычное взаимодействие между объектами.

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

54 Весь UML основан на принципах объектно-ориентированного программирования. Поэтому дальше мы часто будем говорить о классах, объектах, интерфейсах. Этот подход очень популярен среди разработчиков, и создатели UML решили сфокусироваться именно на нём.

55 Если вы ещё не знакомы с ООП и хотите узнать о нём подробнее, прочитайте наш<a>цикл статей</a>, где мы рассказываем об этом подходе просто и с примерами.

56 Класс - это структура данных, у которой есть свойства и методы. Из него создаются объекты - копии класса со всеми его внутренностями, но всегда с разными значениями.

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

58 У нашего человека есть рост и вес, а из действий он умеет ходить и естьСкриншот: draw.io / Skillbox MediaНа прямоугольнике есть три секции: с названием класса, свойствами и методами. Давайте о них подробнее.

59 <ul><li>Название класса - это уникальное имя, по которому мы можем определить, зачем нужен этот класс. В нашем случае, класс Человек - это набор характеристик людей и действия, которые они могут совершать.</li>

60 <li>Свойства класса - это переменные класса, которые нужны для чего-то. Например, для человека мы можем перевести его рост и вес в американские обозначения.</li>

61 <li>Методы класса - это действия, которые класс может выполнять. Например, метод Ходить позволяет человеку ходить, а метод Есть - есть.</li>

62 </ul>Заметьте, что у свойств и методов есть типы - float и void. Для свойств они показывают, какой тип переменных будет храниться в ней. А для методов - какой тип будет возвращаться после выполнения действия.

63 Чтобы обозначить метод, после его названия ставят две круглые скобки. А если метод принимает какой-то аргумент, то его тип можно указать внутри скобок:

64 Теперь в метод Есть() передаётся название едыСкриншот: draw.io / Skillbox MediaЭто копия класса, у которой есть все его свойства и методы. Объекты нужны, чтобы создавать различные версии классов с разными значениями. Например, мы можем создать объект класса Человек:

65 Для объекта не обязательно указывать свойства, достаточно показать, что этот объект относится к классу Человек. Но о связях мы поговорим дальшеСкриншот: draw.io / Skillbox MediaЭто как класс, только что-то абстрактное. Интерфейс можно представить как нечто, что помогает двум другим объектам взаимодействовать друг с другом. Например, интерфейс сайта позволяет пользователю не разбираться, как отправлять HTTP-запросы, а просто нажимать кнопки с понятным названием.

66 В программировании интерфейсы используют, чтобы показать наличие класса, но без его внутренностей. В UML это выглядит так:

67 Простой интерфейс для сайтаСкриншот: draw.io / Skillbox MediaДля интерфейса нужно обязательно указать слово "interface". Иначе его можно будет спутать с обычным объектом или классом.

68 Ещё можно указать, какие у интерфейса должны быть свойства и методы, которые обязательно нужно сделать программисту:

69 Когда создадут класс по этому интерфейсу, нужно будет обязательно добавить эти свойства и методСкриншот: draw.io / Skillbox MediaЭто более крупная часть приложения - например, файл или библиотека. С помощью компонентов можно показать, как взаимодействуют разные части системы между собой. Выглядит он так:

70 Это главный файл для сайта, который отображает страницуСкриншот: draw.io / Skillbox MediaЭто как компонент, только ещё больше. Пример - сервер или база данных. Внутри узла может находиться несколько компонентов. А выглядит узел так:

71 Чем крупнее, тем более объёмна фигураСкриншот: draw.io / Skillbox Media? Отметим одну вроде бы уже очевидную вещь: элементы UML можно вкладывать друг в друга. Получается такая матрёшка, которую мы можем раскрывать и смотреть, как устроена структура на уровень ниже.

72 Это объединение нескольких объектов диаграммы в одну группу. Обычно это нужно, чтобы располагать вместе похожие объекты - например, все файлы, которые относятся к серверной части приложения. Выглядит пакет так:

73 Внутри - все файлы, что находятся на сервереСкриншот: draw.io / Skillbox MediaЭто особое состояние системы, через которое она проходит. Например, когда сервер получил запрос и начал его обработку, то он больше не сможет принимать новые запросы, пока не закончит этот.

74 Состояние выглядит так:

75 Это состояние, когда пользователь проходит авторизациюСкриншот: draw.io / Skillbox MediaЭто комментарий для разных объектов в UML. У заметок нет определённой структуры: они нужны просто для уточнений подробностей. Выглядят так:

76 Поясняем, зачем нужен класс ЧеловекСкриншот: draw.io / Skillbox MediaЭто действие, которое может выполнить система. Например, приложение может отправить запрос в базу данных или вернуть пользователю эти данные, если они уже пришли. Юзкейс выглядит так:

77 Все мы люди, всем хочется погладить кота - даже компьютеруСкриншот: draw.io / Skillbox MediaЭто линия, которая показывает, что два объекта связаны между собой. Связь может быть любой - например, два объекта могут вызывать методы друг друга. Обозначается это так:

78 Да, это обычная прямая линия, без всяких стрелокСкриншот:draw.io / Skillbox MediaА так выглядит связь между двумя классами:

79 Человек и Животное могут взаимодействовать через методы Поиграть() и Прыгать(). Поэтому два класса связаныСкриншот: draw.io / Skillbox MediaЭто стрелка, которая показывает, что один объект обращается к другому. Взаимодействие также указывает, какие данные передаются адресату. Показывают взаимодействие так:

80 Передаём имя по стрелке слева направоСкриншот: draw.io / Skillbox MediaСверху над стрелкой указывают, какие данные мы передаём другому элементу. В нашем случае это чьё-то имя. Но данные могут быть любыми.

81 Посмотрим, как два класса взаимодействуют между собой:

82 У класса Животное появился метод Играть_с_человеком(), который принимает имя человека в виде строки. Поэтому два класса взаимодействуютСкриншот: draw.io / Skillbox MediaЭто тоже стрелка, но пунктирная, которая показывает, что если мы изменим один объект, то одновременно изменим и другой. Выглядит зависимость так:

83 Сверху ещё можно указать, что именно поменяетсяСкриншот: draw.ioПример зависимости - это градусник и температура. Если меняется температура, то меняется и значение на градуснике:

84 Температура изменилась - изменилось и значение на градусникеСкриншот: draw.io / Skillbox MediaЭто указание, что один объект является частью другого. Например, машина, говоря упрощённо, состоит из колеса, руля и двигателя. Обозначается агрегация так:

85 Слева указывается базовый элемент, а справа - объект, внутри которого есть базовыйСкриншот: draw.io / Skillbox MediaКак это выглядит в схеме? Посмотрим агрегацию на примере машины, которая состоит из нескольких частей:

86 Здесь у машины есть три базовых класса: Колесо, Руль и ДвигательСкриншот: draw.io / Skillbox MediaЭто стрелка, которая показывает, что один объект наследует свойства другого. Например, класс Студент может наследовать класс Человек. Выглядит обобщение так:

87 Справа ставят класс, от которого наследуют, а слева - класс потомок.Скриншот: draw.io / Skillbox MediaПример наследования - классы Человек, Студент и Учитель:

88 Классы Студент и Учитель наследуют все свойства класса Человек, а также добавляют собственныеСкриншот: draw.io / Skillbox MediaПока закончим знакомство с элементами UML. Всё за один раз не изучить - да это и не нужно. Лучше всего постоянно обращаться к <a>спецификации UML</a>и находить там нужные объекты.

89 Все UML-диаграммы делятся два больших типа - структурные и поведенческие. Первые нужны, чтобы описывать структуру объектов и приложений. А вторые показывают, как проходят взаимодействия внутри системы.

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

91 Получается, всего 14 видов разных диаграмм. Но запоминать все уж точно не нужноИнфографика: Оля Ежак для Skillbox MediaЧаще всего используют лишь шесть из них. Поэтому давайте познакомимся с ними поближе.

92 Диаграмма классов.Описывает структуру и связи между объектами и классами. Такая диаграмма помогает понять, какие классы от кого наследуются и с кем взаимодействуют. Выглядит она так:

93 На диаграмме изображены классы для интернет-магазинаСкриншот: draw.io / Skillbox MediaДиаграмма компонентов.Показывает, какие компоненты есть в системе и как они взаимодействуют между собой. Пример такой диаграммы - приложение интернет-магазина:

94 Напомним, что прямоугольники с этим символом в правом верхнем углу - это компонентыСкриншот: draw.io / Skillbox MediaВидим, что появились новые обозначения в виде круга и полукруга. Они указывают на то, что для взаимодействия компонентов нужен интерфейс. А ещё есть круг, полукруг, стрелка между ними и надпись "Платёж". Это значит, что для взаимодействия компонентов должен произойти платёж.

95 Диаграмма объектов.Нужна, чтобы показать состояние элементов в конкретный момент времени. Это помогает лучше понять, как моделировать объекты.

96 Так выглядит диаграмма объектов для оплаты чего-то в интернете.Скриншот: draw.io / Skillbox MediaДиаграмма деятельности.Показывает всю последовательность работы системы. Диаграмма выглядит как прямые указания приложению, что нужно делать и когда.

97 На диаграмме изображена схема показывающая, как пользователь взаимодействует с банкоматом и как банкомат связывается с банкомСкриншот: draw.io / Skillbox MediaВидим, что на диаграмме ещё появились ромбики. Это условие, от которого зависит, к какому следующему действию мы перейдём.

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

99 Здесь показан процесс взаимодействия пользователи с приложением банкомСкриншот: draw.io / Skillbox MediaДиаграмма последовательности.Описывает все возможные действия, которые может выполнить пользователь. Она чем-то похожа на диаграмму вариантов использования.

100 Тут показан полный процесс взаимодействия пользователя с банкоматом и все возможные сценарииСкриншот: draw.io / Skillbox MediaЧтобы построить UML-диаграмму, можно даже не устанавливать дополнительные приложения - всё уже доступно в браузере. Для нашей статьи мы делали все схемы в сервисе<a>draw.io</a>. Вот как он выглядит:

101 Пустая страница инструмента draw.ioСкриншот: draw.io / Skillbox MediaВ сервисе есть все нужные для UML элементы: классы, объекты, связи и прочие. Находятся они в левом меню:

102 Элементы берём из левого менюСкриншот: draw.io / Skillbox MediaЧтобы добавить элемент, нужно просто перетащить его в центральную область:

103 Интерфейс инструмента draw.ioСкриншот: draw.io / Skillbox MediaА чтобы сделать связь, можно воспользоваться стрелками из меню:

104 Так добавляем элементы и соединяем ихСкриншот: draw.io / Skillbox MediaКроме этого сервиса есть ещё много других. Вот список некоторых из них:

105 <ul><li><a>Lucidchart</a> - популярный инструмент для создания диаграмм. Он предлагает широкий выбор готовых шаблонов и символов, а также возможность совместной работы в реальном времени.</li>

106 <li><a>Visual Paradigm</a> - полнофункциональный инструмент для моделирования и создания UML-диаграмм. Он предоставляет множество функций и возможностей для анализа и разработки систем.</li>

107 <li><a>Creately</a>предлагает простой в использовании веб-интерфейс для создания UML-диаграмм. Он содержит множество шаблонов и символов, а также поддерживает совместную работу и комментирование.</li>

108 <li><a>PlantUML</a> - представляет собой инструмент для создания диаграмм, основанный на текстовом описании с использованием языка UML. Он позволяет создавать UML-диаграммы путем написания текстового кода, что делает его гибким и простым в использовании.</li>

109 </ul>Давайте резюмируем всё, что мы узнали о языке UML:

110 <ul><li>UML - это унифицированный язык для создания схем. Унифицированный - значит, что если знать базовый синтаксис, то можно понять любую схему.</li>

111 <li>Язык нужен, чтобы визуально описывать явления и процессы. Например, как работают приложения или как идут бизнес-процессы в компании.</li>

112 <li>У UML несколько главных преимуществ: универсальность, простота и визуализация, распространённость, а также возможность автоматизации и ревёрс-инжиниринга.</li>

113 <li>UML-диаграммы - это схемы, которые сделаны по правилам языка UML.</li>

114 <li>Диаграммы состоят из разных базовых элементов - например, классов, объектов, узлов и связей между ними.</li>

115 <li>Глобально диаграммы делятся на два вида: структурные и поведенческие. Структурные описывают, из каких элементов состоит система, а поведенческие - как она себя ведёт внутри.</li>

116 <li>А ещё структурные и поведенческие диаграммы делятся внутри на 14 более специфичных диаграмм, где у каждой своё предназначение.</li>

117 </ul><a>Практический курс: "Архитектор ПО" Узнать о курсе</a>