Как в draw io сделать пунктирную стрелку

Как в draw io сделать пунктирную стрелку

Методы создания шаблонов линий.

Когда мы рисуем диаграммы, то линии, а вернее сказать, стиль и узор этой линии нас не особо интересует. Диаграммы обычно соединяются сплошными линиями, иногда пунктиром. Если чертят чертеж по ГОСТу, то используются разные линии, разной толщины и разного узора. И вот тут-то начинаются нестыковки. Линии в Visio представлены в Американском стандарте, а необходимо, например, начертить линию по ГОСТу. С определенным интервалом, узором и т.д.
Линии в Visio бывают 2-х видов. “Программные” – эти линии встроены в саму программу и создаются не по шаблону, а математически. И “Шаблонные” – они создаются на основе шаблона, созданного пользователем. Разница между ними существенная. Если создать простой шаблон и сравнить с “программной” линией, то на малых длинах сразу видна разница. Почему это происходит? Из-за разного алгоритма формирования линии. “Программные” линии формируются по мере увеличения длины, т.е. видна только часть “программного” шаблона. Пользовательские шаблоны помещаются целиком в размер линии, а не частью. И если размер будет меньше шаблона, то он будет попросту сужен, что визуально смотрится плохо и искажает размеры. Если длина линии намного больше длины шаблона, то это видно не будет.

Полностью обойти это ограничение, видимо нельзя, но можно попытаться его минимизировать.

Уменьшение длины шаблона.

Допустим, нам необходимо создать линию, отвечающую ГОСТу (т.е. метрическую, а не дюймовую.) И нам известны ее размеры. Например, толщина 0,5 мм, длина черточек 15 мм, промежуток 12 мм. Цифры абстрактные. Для этого надо понять, как будет формироваться эта линия.

Её формирование можно рассмотреть как последовательность блоков. Длина такого блока будет равна длине черточки + длина промежутка, т.е. 27 мм.

Рассмотрим оба шаблона.
Первый шаблон представляет собой полную длину черточки и полную длину промежутка. Создадим этот шаблон. Для этого необходимо сделать видимым окно Обозревателя чертежа (RU:Вид>Окна>Обозреватель чертежа EN:View>Drawing Explorer window). Нажать правой кнопкой мыши на папке Узоры линии (Line patterns) и выбрать в появившемся меню Создать узор… (New pattern…).

В окне диалога дать название новому узору (15х12х0,5, например) и далее нажимаем ОК.

Теперь в данной папке появился значок нового узора и его название. Затем нажимаем правой кнопкой мыши на нем, и в меню выбираем Изменить узор (Edit pattern для Visio 2002 или Edit pattern shape для Visio 2003).

Откроется чистая страница чертежа. Далее все манипуляции производятся на этом листе. Для начала необходимо нарисовать прямоугольник с размерами 27х0,5. Он будет рамкой будущего узора. Для этого необходимо выбрать инструмент черчения прямоугольника (Ctrl+8). И начертить прямоугольник с данными размерами. Если сразу не получилось, то размеры всегда можно поправить вручную в окне Размер и позиция (RU:Вид>Окна>Размер и позиция EN:View>Size & Position window).

Затем необходимо начертить линию. Для этого необходимо выбрать инструмент черчения линии (Ctrl+6) и начертить линию в любом месте длиной 15 мм, т.е. будущую черточку линии. Теперь необходимо сначала выделить прямоугольник, а затем зажав Shift, выделить линию.

И в меню выбрать выравнивание фигур (RU:Сервис>Выравнивание фигур… для Visio 2000 или Фигура>Выравнивание фигур… для Visio 2002 EN:Shape>Align Shapes…) или нажать F8. В диалоговом окне выбрать Горизонтальное выравнивание по центру, а Вертикальное выравнивание по левому краю (Up/Down alignment по центру, Left/Right alignment по левому краю).

Теперь фигуры расположились как на синем шаблоне. Далее необходимо установить толщину 0 pt, для этого просто выделим обе фигуры прямоугольным выделением. Далее в меню Формат>Линия… (Format>Line…) или Shift+F3. В окне настройки линии во вкладке Толщина (Weight) необходимо выбрать Другое (Custom…) и в окне Другая толщина линии (Custom Line Weight) выставить 0 и нажать ОК. Далее закрываем окно настройки линии.

Затем группируем эти две фигуры. Либо через меню (RU:Фигура>Группировка>Группировать EN:Shape>Grouping>Group), либо Ctrl+G для Visio 2000 или Ctrl+Shift+G для остальных. Теперь из полученной группы надо удалить прямоугольник. Надо либо выделить прямоугольник в группе (тогда все его маркеры станут перечеркнуты крестиком) и удалить его.

Либо открыть фигуру как группу, предварительно выделив ее, и в меню выбрать Правка>Открыть Группа (Edit>Open group) и в новом окне удалить прямоугольник из группы. Далее закрываем окно редактирования группы. И закрываем окно редактирования шаблона соглашаясь на обновление узора. Теперь создав линию и выбрав в окне настроек линии, толщину 0,5 мм и узор 15х12х0,5 получим достаточно точную пунктирную линию.

И в меню выбрать выравнивание фигур (RU:Сервис>Выравнивание фигур… для Visio 2000 или Фигура>Выравнивание фигур… для Visio 2002 EN:Shape>Align Shapes…) или нажать F8. В диалоговом окне выбрать Горизонтальное выравнивание по центру, а Вертикальное выравнивание по левому краю (Up/Down alignment по центру, Left/Right alignment по левому краю).

Затем необходимо сначала выделить прямоугольник, а затем зажав Shift, выделить другую из линий и в меню выбрать выравнивание фигур (RU:Сервис>Выравнивание фигур… для Visio 2000 или Фигура>Выравнивание фигур… для Visio 2002 EN:Shape>Align Shapes…) или нажать F8. В диалоговом окне выбрать Горизонтальное выравнивание по центру, а Вертикальное выравнивание по правому краю (Up/Down alignment по центру, Left/Right alignment по правому краю).

Для более сложных линий используются другие приемы построения шаблонов. Для примера рассмотрим способ создания такого шаблона линии:

Линия с 2-мя точками.

Например, ширина черточки 10 мм, промежутка 7 мм, толщина 0,5 мм. Строится шаблон, как и в случае с простой линией. Все последующие шаблоны будут строиться «синим» способом. Для этого создадим прямоугольник равный сумме 1 черточки + промежуток + точка + промежуток + точка + промежуток, получается 10+7+7+7=31 и высотой 0,5 мм.

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

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

Сложная линия.

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

Рассмотрим способ создания 3-й линии с пунктиром. Размеры в данном случае будут такие: толщина 1 черточки 0,5 мм, длина 10 мм, горизонтальный промежуток 7 мм, вертикальный 1 мм, т.е. две толщины. Размеры пунктира 2 мм. Для начала необходимо снова создать прямоугольник. Его размеры будут складываться из следующих размеров: длина черточки + промежуток + длина пунктира + промежуток. Это будет длина, равная 10+7+2+7=26 мм. И ширина его будет составлять 0,5 мм. Т.е. прямоугольник с размерами 26х0,5 мм. В данном случае ширина прямоугольника равна толщине всего 1 линии и это сделано специально.
Далее создаем 3 линии и 3 пунктира. Затем располагаем так, как показано на рисунке.

Делаем толщину всех линий равной 0 мм. Затем группируем. Теперь выделяем Элементы группы и располагаем, как показано на следующем рисунке.

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

Другим примером сложной линии является провод заземления (тот, что желто – зеленый).

Шаблон состоит из 1-й линии и 1-го параллелограмма. Из рисунка, думаю все понятно.

Еще примером сложной линии может служить линия с подчеркиванием или линия с фигурами ниже или выше основной линии.

Для ее создания рисуется линия, и фигуры. Далее все фигуры «сжимают» до толщины линии, Группируем и «разжимаем» до нормальных размеров и перемещаем в нужное место.

Также можно сделать шаблон для «кривой». Например, орнамент или пара дуг как на примере.

Сам орнамент тоже вначале сжимался, а потом «разжимался».

Теперь некоторые советы:
1. При создании шаблона можно использовать направляющие, но после создания их надо удалить, иначе линия не будет нужной толщины(все линии станут тонкими).
2. Все точки делать либо линией, либо окружностью.
3. При создании шаблона можно использовать любые векторные объекты из других приложений. Их необходимо лишь разгруппировать и сделать толщину линий 0 мм. Например, шаблоны линий из Illustrator.
4. Если выделить фигуру и подвезти к ней направляющую, то она несмотря на шаг сетки, «прилипнет» к краю фигуры.
5. Если фигура привязана к направляющей, то к ней не работает команда Выравнивание фигур… Для работы с этой фигурой необходимо ее выделить и нажать на клавиатуре вверх и затем вниз. Фигура утратит привязку, но останется на том же месте.

В начало раздела Автор: Ничков Алексей (a.k.a. Digitall)

Выравнивание и расстановка фигур на схеме

Visio, план 2 Visio профессиональный 2021 Visio стандартный 2021 Visio профессиональный 2019 Visio стандартный 2019 Visio профессиональный 2016 Visio стандартный 2016 Visio профессиональный 2013 Visio 2013 Еще. Меньше

Visio имеет несколько инструментов, которые помогут вам аккуратно и равномерно выкладывать фигуры и соединители.

• Параметры выравнивания делают фигуры выровненными.
• Параметры положения делают равномерное расстояние между фигурами.
• Команды макета для конкретных шаблонов. Некоторые шаблоны схем поставляются с собственными командами макета, разработанными специально для этого типа схемы, включая шаблоны «Организационная диаграмма» и «Мозговой штурм».

• Параметры выравнивания делают фигуры выровненными.
• Параметры положения делают равномерное расстояние между фигурами.
• Команды макета для конкретных шаблонов. Некоторые шаблоны схем поставляются с собственными командами макета, разработанными специально для этого типа схемы, включая шаблоны «Организационная диаграмма» и «Мозговой штурм».

Автоматическое выравнивание и равномерное одновременное пространство фигур

Этот параметр оставляет фигуры как можно ближе к их текущим позициям, но выровнены друг с другом и равномерно расставлены.

1. Выделите фигуры, которые нужно выровнять и выделить место, или щелкните за пределами схемы, чтобы удалить все выделенные фрагменты. Если ничего не выбрано, будут затронуты все фигуры.
2. Выберите Главная >упорядочить> позицию >автоматическое выравнивание & пространства.

Выравнивание фигур

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

Выпрямите соединители

Этот параметр настраивает выравнивание фигур, чтобы сделать линии соединителя как можно более прямыми.

1. Выберите фигуры, которые требуется выровнять.
2. На вкладке Главная в группе Упорядочить нажмите кнопку Выровнять , а затем нажмите кнопку Автоматическое выравнивание.

Выбор направления выравнивания

1. Выберите основную фигуру , к которой должны выравнивать другие фигуры.
2. Нажимайте и удерживайте клавишу SHIFT, выбирая другие фигуры, которые нужно выровнять по первичной фигуре.
3. На вкладке Главная в группе Упорядочить нажмите кнопку Выровнять и выберите параметр выравнивания.

Команды position

Кнопка Положение на вкладке Главная в группе Упорядочить позволяет равномерно размещать фигуры или изменять ориентацию фигур.

Пространственные фигуры равномерно

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

1. Выделите фигуры, которые нужно выделить, или щелкните пустую область страницы, чтобы удалить все выделенные элементы. Если ничего не выбрано, будут затронуты все фигуры.
2. Щелкните Главная >Упорядочитьположение > >автоматического пространства , чтобы сделать четный интервал между фигурами. Чтобы точно задать интервал, щелкните Параметры интервала , а затем задайте нужное расстояние.

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

Использование параметров «Распространение»

Команды интервалов из более ранних версий Visio по-прежнему доступны, которые предоставляют различные варианты интервалов.

Выделите три или более фигур, удерживая нажатой клавишу SHIFT или CTRL, щелкнув фигуры.

Примечание: Если не выбрать три или более фигур, команды для распределения фигур будут недоступны.

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

Держите фигуры подальше от печатных разрывов страниц

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

1. Выберите фигуры, которые нужно переместить с разрывов страниц, или щелкните за пределами схемы, чтобы удалить все выделенные фрагменты. Если ничего не выбрано, будут затронуты все фигуры.
2. Выберите Главная >Упорядочить >позицию, а затем выберите Переместить разрывы страниц.

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

• Выберите Главная >Упорядочить> позицию и проверка, включен ли параметр «Избегать разрывов страниц«. Если нет, щелкните, чтобы выбрать его. При ее включении в меню рядом с командой появится проверка метка.

Переориентировать фигуры

Параметры в подменю Повернуть фигуры вращать или переворачивать выбранную фигуру.

• Выберите фигуру и щелкните соответствующую команду.
• На вкладке Главная в группе Упорядочить нажмите кнопку Положение, а затем щелкните Повернуть фигуры и выберите нужный параметр.

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

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

Расположение фигур вручную

При перетаскивании фигуры зеленые направляющие помогут разместить фигуру точно в нужном месте. На приведенном ниже рисунке стрелки распределения отображаются при перетаскивании фигуры в соответствии с распределением других близлежащих фигур. Пунктирные линии помогают выравнивать по горизонтали или вертикали с другими фигурами.

Команды макета для конкретных шаблонов

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

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

Выравнивание фигур

1. Откройте схему для редактирования.
2. Выделите две или несколько фигур.

Выберите Главная >Выровнять фигуры

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

На этом рисунке мы выбрали Выровнять поверх:

Фигуры позиции

1. Выберите три или более фигур.

Выберите Главная >Фигуры позиции

, а затем выберите из списка параметров позиционирования. В этом примере выбран вариант Распространить по горизонтали.

Изменить стиль фигур

Настройте внешний вид фигуры или группы фигур на холсте для рисования с помощью вкладок «Стиль» и «Текст» на панели форматирования справа. Редактор Р7 Графика автоматически переключится на панели стиля фигуры, когда вы выберете одну или несколько фигур.

В исходном стиле формы используется черный контур и сплошной белый цвет заливки.

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

• Используйте палитру стилей для изменения цветов
• Измените цвет заливки или добавьте градиент
• Дополнительные параметры заливки и эффекты
• Изменить контур фигуры
• Изменить непрозрачность фигуры
• Применение эффектов к фигурам
• Копировать и вставлять стили
• Установить стиль по умолчанию
• Изменить стиль и поведение фигуры
• Отредактируйте свойства формы на вкладке «Стиль».
• Отредактируйте XML, определяющий свойства фигуры.
• Изменить стиль фигуры

Прежде чем вы сможете стилизовать что-либо, вы должны выбрать это. Щелкните фигуру, чтобы выбрать ее, или, удерживая нажатой клавишу Shift , щелкните несколько фигур, чтобы выбрать их.

Отображаемые параметры стиля будут зависеть от выбранной вами формы или фигур. Например, у круга или эллипса нет углов, поэтому параметр «Скругленный» будет недоступен.

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

Используйте палитру стилей для изменения цветов

Палитра стилей в верхней части вкладки «Стиль» изменяет цвет заливки и контура.

Щелкните стрелку влево или вправо или щелкните точки страницы под палитрой, чтобы просмотреть дополнительные стили.

Измените цвет заливки или добавьте градиент

1. Нажмите на кнопку «Цвет» рядом с «Заливка», чтобы увидеть цветовую палитру.

2. Выберите новый цвет из палитры или введите точный шестнадцатеричный код цвета в текстовое поле (без начального #), затем нажмите «Применить».

Дополнительные параметры заливки и эффекты

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

Прозрачный: снимите флажок «Заливка», чтобы удалить цвет заливки и сделать фон фигуры прозрачным.

Эффект стекла: установите флажок «Стекло», чтобы добавить градиент к заливке и контуру, чтобы они выглядели как отражающая поверхность. Вы можете одновременно включить градиент и эффект стекла.

Цвет дорожки: чтобы добавить цвет заливки к фону дорожек, выберите дорожку и установите флажок Цвет дорожки. К фону дорожки можно применить как градиент, так и эффект стекла.

Изменить контур фигуры

1. Нажмите кнопку Цвет линии и выберите новый цвет из палитры.
2. Выберите новый стиль линии для контура фигуры из раскрывающегося списка. Выберите между сплошным, пунктирным и тремя пунктирными узорами.
3. Введите новое значение в текстовое поле рядом с рисунком контура, чтобы сделать линию толще. По умолчанию 1 pt .

Без контура: установите флажок «Линия» и отключите контур.

Добавьте пространство вокруг фигуры: введите новое значение в поле «Периметр», чтобы добавить пространство между контуром фигуры и ее фактическим размером. Это переместит точки соединения и внешний край, к которому подключаются соединители, наружу, подальше от контура фигуры.

Изменить непрозрачность фигуры

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

Введите новое значение в текстовое поле «Непрозрачность» или используйте стрелки вверх/вниз, чтобы изменить его значение.

Применение эффектов к фигурам

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

Добавить тень: установите флажок «Тень», чтобы добавить тень ко всем фигурам. Тени также можно применять к соединителям.

Примените стиль грубого эскиза: чтобы фигуры выглядели так, как будто они нарисованы от руки, установите флажок «Эскиз». Дополнительные параметры грубого стиля доступны в свойствах стиля.

Узнайте, как использовать стиль грубого эскиза и изменить свойства стиля эскиза.

Копировать и вставлять стили

1. Выберите фигуру со стилем, который вы хотите скопировать.
2. На вкладке «Стиль» панели форматирования нажмите «Копировать стиль».
3. Выберите другие фигуры или соединители, к которым вы хотите применить этот стиль. На вкладке «Стиль» нажмите «Вставить стиль».

Установить стиль по умолчанию

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

1. Выберите фигуру со стилем, который вы хотите использовать в качестве нового значения по умолчанию.
2. Нажмите «Установить как стиль по умолчанию» на вкладке «Стиль» панели форматирования.
3. Наведите указатель мыши на фигуры в библиотеках фигур слева, чтобы увидеть их предварительный просмотр с использованием нового стиля по умолчанию.

Удаление стиля по умолчанию: Убедитесь, что ничего не выбрано, чтобы вы могли видеть вкладку «Диаграмма» на панели форматирования, затем нажмите «Очистить стиль по умолчанию».

Это очистит стили по умолчанию как для фигур, так и для соединителей.

Отредактируйте стиль и поведение фигуры

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

Отредактируйте свойства фигуры на вкладке Стиль

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

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

Отредактируйте XML-файл, определяющий свойства фигуры

Если вам известны имена свойств фигуры и значения, которые вы хотите задать, возможно, будет быстрее просто отредактировать XML-описание фигуры в текстовом виде.

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

 rounded=1;whiteSpace=wrap;html=1;sketch=1;fillColor=#dae8fc; strokeColor=#6c8ebf;perimeterSpacing=5;arcSize=24; strokeOpacity=59;

Изменить стиль фигуры

1. Щелкните правой кнопкой мыши фигуру и выберите «Редактировать стиль» в контекстном меню. В качестве альтернативы, выбрав фигуру, нажмите Ctrl+E в Windows.
2. Отредактируйте описание XML с парами свойство=значение, чтобы описать стиль фигуры, который вы хотите использовать для этой фигуры, затем нажмите «Применить».

5 диаграмм, необходимых для документирования архитектуры решений

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

Задача архитектора решений ― четко донести проект системы до бизнеса, руководителей проектов и разработчиков. Нельзя просто нарисовать одно изображение, это невозможно и не принесет никому пользы. Вместо этого лучше сгруппировать различные проблемы и создать набор диаграмм, описывающих каждое представление. Конечно, есть миллиард способов сделать это. Как выбрать подходящий? За время работы в качестве архитектора решений я чаще всего использовал 5 диаграмм: контекстную диаграмму C4, диаграмму контейнеров, развертывания, последовательности и вариантов использования. В этой статье я рассмотрю подробно каждую из них.

Контекстная диаграмма

Веб-сайт, посвященный модели С4 (Context, Container, Component and Code), довольно хорошо объясняет свои диаграммы, я же поделюсь своим представлением, как эта модель работает.

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

Пример

На этой диаграмме показана цифровая платформа необанкинга, представленная синим прямоугольником в центре.

Как рисовать

• Определите пользователей.
• Определите внешние системы.
• Создайте единый прямоугольник, изображающий вашу систему.
• Добавьте связи между системой, пользователями и внешними системами.
• Напишите содержательные комментарии по каждому компоненту.

Инструменты

Существуют различные инструменты, которые можно использовать для создания контекстной диаграммы. Существуют трафареты C4 для OmniGraffle, примеры C4 для LucidChart, шаблоны есть также в draw.io. Чтобы использовать диаграммы как код, попробуйте PlantUML.

Допустим, мы хотим нарисовать такую диаграмму для цифровой платформы необанковского обслуживания с помощью uml:

@startuml !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml Person(customer, "Customer", "A bank client") System(abc_system, "Digital Platform", "Allows freelancers and business owners see their transactions.") System_Ext(idnow, "IDNow", "System for KYC and Qualified Eletronic Signatures") System_Ext(pay, "Google Pay/Apple Pay", "Google Pay and Apple Pay systems") System_Ext(dms, "DMS", "Document Management System") System_Ext(crm, "CRM", "CRM") System_Ext(current, "Existing Banking System", "Banking Backoffice") Rel(abc_system, pay, "uses") Rel(customer, abc_system, "Uses") Rel_L(abc_system, idnow, "integrates") Rel_Neighbor(abc_system, dms, "uploads files") Rel_D(abc_system, crm, "integrates") Rel_U(abc_system, current, "uses") @enduml

Мы определяем человека, систему, внешние системы и отношения между ними. Предикаты Person, System и System_ext имеют 3 параметра: ключ, заголовок и описание. Предикат Rel также имеет 3 параметра, но они разные: ключ одной сущности, ключ другой и тип отношений между сущностями.

Нарисовать контекстную диаграмму можно любым удобным инструментом. Здесь можно найти несколько отличных примеров.

Важно

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

Я боролся с контекстной диаграммой для одной банковской системы. Она должна была включать только недавно созданную систему и одного клиента, который не принесет никакой ценности. После согласования я добавил API Gateway и существующий Auth Provider, который мы собирались использовать. Таким образом, контекстная диаграмма стала обретать смысл и позволяла опустить эти элементы из диаграмм нижнего уровня.

Алексей, архитектор решений

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

Джон, архитектор решений.

Резюме

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

Диаграмма контейнеров

Контейнеры здесь не означают обязательно докер-контейнеры. Контейнер — это любой развертываемый объект или хранилище данных с точки зрения C4. Это может быть мобильное приложение, веб-сайт, виртуальная машина, докер-контейнер, база данных или хранилище объектов; все, что вы можете развернуть. По моему опыту эта диаграмма – самая сложная, а потому привлекает к себе особое внимание. Это, можно сказать, главная диаграмма, над которой нужно работать!

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

Пример

Как рисовать

• Определите список сущностей: микросервисы, хранилища, внешние сервисы.
• Поместите их на диаграмму.
• Добавьте комментарии о назначении каждого компонента и технологии, которую он реализует.
• Добавьте соединения со стрелками.
• Добавьте значимые метки к каждой стрелке.
• Подберите цвет схемы.
• Создайте легенду.

Инструменты

То же, что и для контекстной диаграммы: Draw.io, OmniGraffle, LucidChart и другие.

Важно

• Обратите внимание, что элементы расположены столбцами. Первый столбец — это просто API-шлюз, второй ― первая группа сервисов, затем вторая группа сервисов, затем несколько хранилищ. Таким образом вы продемонстрируете многоуровневую архитектуру, которая поможет понять границы и обязанности.
• Когда количество микросервисов превысит однозначное число, ваши линии соединения начнут пересекаться. В академических книгах говорится, что для удобочитаемости нужно избегать пересечений. К сожалению, это не всегда возможно. Но не расстраивайтесь, диаграмму можно сделать удобочитаемой, используя разные цвета или ширину линий или разные стили линий (пунктирные, сплошные и т. д.).
• Если вы используете специальный инструмент, (как я), вам необходимо включить блок легенды. Сами по себе стрелки и цвет непонятны — легенда объясняет всё это.
• Очень распространенный вопрос, когда используешь облака, включать ли вы управляемые сервисы, такие как очереди сообщений? Я обычно отвечаю: «Нет». Это усложняет диаграмму, делает её нечитабельной. Если некоторые сервисы обмениваются данными через очередь сообщений, отобразите её с помощью стрелки отдельного типа.

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

Илья, архитектор предприятия.

Резюме

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

Диаграмма последовательностей

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

Пример

Вверху мы видим взаимодействующие объекты: люди, веб-приложения и мобильные приложения, внешние системы, сервисы и хранилища данных. У каждого объекта есть вертикальная линия внизу. Взаимодействие между сервисами обозначено горизонтальными стрелками между вертикальными линиями. Эти стрелки могут быть разных типов в зависимости от того, синхронная это операция или асинхронная. Серые прямоугольники показывают, что процесс занимает некоторое время, и длина должна указывать на продолжительность: чем длиннее прямоугольник, тем больше время.

Как рисовать

• Выберите функцию (вход, покупка и т. д.).
• Определите сущности, участвующие в этом процессе.
• Поместите их на диаграмму.
• Добавьте взаимодействие (стрелки).
• Добавьте ценные комментарии к каждой стрелке.

Инструменты

К сожалению, OmniGraffle не подходит для диаграмм последовательности. Поэтому для создания этой диаграммы я использую draw.io и LucidChart. Последний вариант является хорош тем, что вы можете рисовать диаграмму вручную или использовать диаграмму последовательности UML.

Важно

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

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

Владимир, Архитектор решений

Резюме

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

Диаграмма развертывания

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

Есть несколько разных вещей, которые необходимо отобразить.

• Вычислительные ресурсы. Это могут быть виртуальные машины, докеры, кластеры Kubernetes и облачные функции. Мобильные устройства и настольные компьютеры также можно рассматривать как вычислительные ресурсы.
• Хранилища. Постоянные хранилища данных, такие как реляционные базы данных и базы данных nosql, хранилища двоичных файлов, таких как изображения, музыка и видео, хранилища больших данных и так далее.
• Ресурсы обмена сообщениями. Установки Kafka / RabbitMQ, Google Cloud pub / sub, AWS SQS и другие.
• Сети. Ваши компьютеры используют сети для связи друг с другом. Должны отображаться как физические, так и виртуальные сети.
• Зоны доступности. Вы можете думать о них как о центрах обработки данных.
• Узлы инфраструктуры. DNS-серверы, балансировщики нагрузки, брандмауэры, сети CDN

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

Как нарисовать

• Разместите основные блоки: браузеры, мобильные устройства, общедоступное облако, центры обработки данных.
• Разместите вычислительные ресурсы и ресурсы хранения.
• Добавьте узлы инфраструктуры.
• Добавьте сети.
• Добавьте сетевые вызовы между узлами.
• Добавьте ресурсы мониторинга.

Пример

В C4 нотации есть дополнительная диаграмма развертывания:

Обратите внимание на имена вычислительных ресурсов, их типы и номера узлов.

Другой пример для облака AWS:

Инструменты

Существует множество инструментов для создания схемы развертывания. OmniGraffle, LucidChart, Draw.io и другие прекрасно справляются с этой задачей, если установлены соответствующие шаблоны.

Важно

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

Резюме

Диаграмма развертывания дополняет понимание системы с точки зрения внешнего вида.

Диаграмма вариантов использования

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

Как рисовать

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

Примеры

Инструменты

Архитектор может нарисовать диаграмму с помощью любого графического редактора и того же набора инструментов, что и для других диаграмм. Omnigraffle, LucidChart, Draw.io работают хорошо. Помните, что эта диаграмма является структурированной, поэтому вы можете использовать UML для её создания. В этом помогает PlantUml или LucidChart.

Резюме

• Используйте контекстную диаграмму, чтобы отобразить представление системы на самом высоком уровне.
• Документируйте варианты использования с соответствующей диаграммой.
• Масштабируйте внутренние компоненты системы с помощью контейнеров и диаграмм развертывания.
• Документируйте конкретные бизнес-кейсы с помощью диаграмм последовательности.