### help
- https://www.drawio.com/doc/faq/shape-complex-create-edit
### 1 Как изменить элемент step, чтобы его левая сторона была ровной?
#### You've hit your free quota for the Auto Agent.
#### For more usage of the Auto Agent, learn more at: https://you.com/plans.
Answering your question with the Express Agent:
#### Как сделать левую сторону элемента "step" ровной в draw.io
В draw.io (теперь diagrams.net) фигуры типа "step" (шаг) часто имеют скошенные или закруглённые стороны по умолчанию. Чтобы **сделать левую сторону ровной (прямой вертикальной линией)**, можно воспользоваться одним из следующих способов:
---
### 1. Использование параметров фигуры (если доступны)
- Выделите элемент "step".
- В правой панели свойств (Format Panel) найдите раздел, связанный с формой или стилем.
- Иногда для фигур скошенного типа есть параметр, регулирующий степень скашивания или скругления сторон (например, "Corner radius", "Skew", "Inset").
- Установите значение скошенной левой стороны в 0 или минимальное, чтобы сделать её ровной.
---
### 2. Редактирование точек фигуры вручную
- Выделите фигуру.
- Нажмите **Ctrl + Shift + P** (или через меню: Arrange → Edit Shape / Edit Points), чтобы перейти в режим редактирования вершин (точек).
- В режиме редактирования точек вы увидите узлы, которые можно перетаскивать.
- Переместите точки левой стороны так, чтобы они выстроились по одной вертикальной линии, сделав сторону ровной.
- После этого выйдите из режима редактирования точек.
---
### 3. Замена фигуры на прямоугольник с дополнительными элементами
Если "step" — это сложная фигура с фиксированной формой, и её нельзя отредактировать, можно:
- Использовать обычный прямоугольник для ровной левой стороны.
- Добавить дополнительные фигуры или линии для имитации нужного вида.
- Это даст полный контроль над формой.
---
### 4. Использование пользовательских фигур (Custom Shape)
- В draw.io можно создавать свои фигуры с помощью XML-описания.
- Создайте кастомную фигуру, где левая сторона будет ровной.
- Импортируйте её и используйте вместо стандартного "step".
---
### Итог
**Самый простой способ — отредактировать точки фигуры вручную, чтобы выровнять левую сторону по вертикали.** Если в свойствах фигуры есть параметр скошенности — установите его в 0. Если нет — переходите в режим редактирования точек и подгоняйте форму вручную.
### 2 Custom Shape - как мне сделать нужную мне фигуру (элемент step, чтобы его левая сторона была ровной).
#### You've hit your free quota for the Auto Agent.
#### For more usage of the Auto Agent, learn more at: https://you.com/plans.
Answering your question with the Express Agent:
#### Как создать кастомную фигуру "step" с ровной левой стороной в draw.io (diagrams.net)
В draw.io можно создавать свои собственные фигуры (Custom Shapes) с помощью XML-описания, где задаётся контур фигуры через команды рисования (moveTo, lineTo, curveTo и т.д.). Это даёт полный контроль над формой, включая ровные или скошенные стороны.
---
### Пошаговое руководство
#### 1. Откройте редактор кастомных фигур
- В draw.io нажмите **Arrange → Insert → Advanced → Custom Shape...**
- Откроется окно для ввода XML-описания фигуры.
---
#### 2. Структура XML кастомной фигуры
Простейшая фигура описывается так:
```xml
M 0 0
L 140 0
L 150 50
L 140 100
L 0 100
Z
```
- `M 0 0` — переместиться в точку (0,0) (верхний левый угол)
- `L 140 0` — линия до (140,0) (правая верхняя точка, чуть влево от правого края)
- `L 150 50` — линия до (150,50) — правая середина, скошенный угол
- `L 140 100` — линия до (140,100) — правая нижняя точка, чуть влево от правого края
- `L 0 100` — линия до (0,100) — нижний левый угол
- `Z` — замкнуть контур
---
#### 3. Объяснение, как сделать левую сторону ровной
- Левая сторона — это линии от (0,0) до (0,100), то есть вертикальная линия.
- В примере выше левая сторона — ровная вертикальная линия.
- Правая сторона сделана скошенной (три точки справа), чтобы сохранить форму "step".
- Если в исходной фигуре левая сторона была скошена, просто замените её на вертикальную линию, как в примере.
---
#### 4. Добавление параметров для изменения размеров
Чтобы фигура была адаптивной, можно использовать переменные `w` (ширина) и `h` (высота):
```xml
M 0 0
L {w-10} 0
L {w} {h/2}
L {w-10} {h}
L 0 {h}
Z
```
- `{w}` и `{h}` — ширина и высота фигуры.
- `{w-10}` — сдвиг на 10 пикселей внутрь справа, чтобы сделать скошенный край.
- `{h/2}` — середина по высоте.
---
#### 5. Как использовать созданную фигуру
- Вставьте XML в окно кастомной фигуры.
- Нажмите "Insert".
- Фигура появится на холсте.
- Можно менять её размеры, и левая сторона останется ровной.
---
### Итог
- **Для ровной левой стороны** в XML-контурах фигуры просто задайте вертикальную линию слева (например, `M 0 0 L 0 h`).
- Правая сторона может быть скошена или любой другой формы.
- Используйте переменные `{w}`, `{h}` для адаптивности.
- Вставляйте XML через меню кастомных фигур.
---
### 2 Добавить подпись снизу
#### Как сделать две подписи к фигуре в draw.io с помощью свойства `parent=`
В draw.io можно создать **вложенную структуру элементов**, где один элемент является "родителем" (parent), а другой — "дочерним" (child). Это позволяет, например, добавить вторую подпись под фигурой, сделав её дочерним элементом, который будет позиционироваться относительно родителя.
---
### Как это сделать через `parent=`
1. **Создайте основную фигуру** (например, step).
2. **Создайте отдельный текстовый элемент** — это будет вторая подпись.
3. **В "Редактировать стиль" у второго (текстового) элемента добавьте:**
```
parent=
```
где `` — это уникальный идентификатор основной фигуры.
---
### Как узнать ID фигуры?
- Выделите основную фигуру.
- В меню "Редактировать стиль" добавьте или посмотрите атрибут `id=someId`.
- Если ID нет, можно его добавить, например: `id=step1`.
- Запомните этот ID.
---
### Пример
- Основная фигура (step) со стилем:
```
shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;id=step1;
```
- Текстовый элемент (вторая подпись) со стилем:
```
text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=top;parent=step1;
```
---
### Что это даёт?
- Вторая подпись становится **дочерним элементом** фигуры.
- При перемещении или масштабировании родителя дочерний элемент будет двигаться вместе с ним.
- Позицию дочернего элемента можно задать относительно родителя (например, сместить вниз под фигурой).
---
### Как задать позицию дочернего элемента?
- Выделите дочерний текст.
- Переместите его мышью под фигуру.
- Поскольку он "вложен" в родителя, позиция будет относительной.
- Можно также в стиле использовать `offsetX` и `offsetY` для точной настройки смещения.
---
### Итог
- Добавьте `id` родителю.
- Добавьте `parent=` дочернему элементу.
- Переместите дочерний элемент под родителя.
- Группировать не нужно — вложенность уже обеспечивает совместное перемещение.
---
### 3 Сгенерируй XML, где к shape=step (первая подпись Подпись1) будет добавлена вторая подпись (Подпись2) снизу фигуры.
Вот пример XML для draw.io, где к фигуре `shape=step` добавлены две подписи: первая — внутри фигуры, вторая — отдельным текстовым элементом под фигурой, связанная с фигурой через атрибут `parent`. Вторая подпись будет позиционироваться под фигурой и двигаться вместе с ней.
```xml
```
---
### Объяснение:
- `` — основная фигура `step` с текстом "Подпись1" внутри.
- `` — текстовый элемент с текстом "Подпись2", у которого в стиле `parent=step1` (через атрибут `parent="step1"`), то есть он вложен в фигуру.
- Вторая подпись позиционируется с помощью ``, где `y="1"` и `relative="1"` означает, что элемент расположен **снизу** относительно родителя (на 100% высоты фигуры).
- `width="160"` совпадает с шириной фигуры, чтобы текст был по центру под фигурой.
- `strokeColor=none;fillColor=none` — чтобы у текста не было рамок и заливки.
---
### Как использовать
- Скопируйте этот XML.
- В draw.io выберите **File → Import From → Device** и вставьте этот XML (или через **Arrange → Insert → Advanced → XML...**).
- Вы увидите фигуру step с двумя подписями: одна внутри, другая под фигурой.
- При перемещении фигуры вторая подпись будет двигаться вместе с ней.
---
### 4 Сохрани полученную фигуру (пусть будет имя step1) как шаблон (отдельный файл) и покажи как подключить этот внешний файл - шаблон для использования в другой схеме.
#### You've hit your free quota for the Auto Agent.
#### For more usage of the Auto Agent, learn more at: https://you.com/plans.
Answering your question with the Express Agent:
#### Как сохранить фигуру (step1) как шаблон в draw.io и подключить её в другой схеме
---
### 1. Сохранение фигуры как отдельного файла-шаблона
1. **Выделите фигуру step1** на холсте.
2. В меню выберите **Arrange → Edit Diagram...** (или **File → Export as → XML...**).
3. В открывшемся XML-редакторе скопируйте XML, относящийся только к вашей фигуре (например, `` и связанные с ней элементы).
4. Создайте новый файл с расширением `.drawio` или `.xml` и вставьте туда этот XML, обернув в минимальную структуру:
```xml
```
5. Сохраните этот файл, например, как `step1_template.drawio`.
---
### 2. Подключение шаблона (внешнего файла) в другую схему
draw.io **не поддерживает прямое "включение" внешних файлов-шаблонов в XML** как, например, импорт в коде. Но есть несколько способов использовать сохранённый шаблон:
#### Вариант А: Импорт шаблона в текущий документ
- В открытом основном файле выберите **File → Import From → Device** и выберите файл `step1_template.drawio`.
- Импортированный шаблон появится на холсте, откуда вы можете скопировать фигуру и использовать её.
#### Вариант Б: Создать библиотеку фигур (Custom Library)
1. Откройте файл с шаблоном.
2. Выделите фигуру и нажмите **Arrange → Add to Library**.
3. Создайте новую библиотеку или добавьте в существующую.
4. В другом файле откройте эту библиотеку через боковую панель (Libraries → Open Library).
5. Перетаскивайте фигуры из библиотеки на холст.
---
### 3. Итог
- **draw.io не поддерживает прямое подключение внешних XML-шаблонов как include.**
- Для повторного использования фигур лучше создавать **пользовательские библиотеки** или импортировать шаблон и копировать фигуры.
- Сохраняйте фигуры в отдельном файле `.drawio` с минимальной структурой XML.
- Используйте меню **Add to Library** для удобного повторного использования.
---