mirror of
https://github.com/bpmbpm/doc.git
synced 2026-05-01 04:50:44 +00:00
350 lines
19 KiB
Markdown
350 lines
19 KiB
Markdown
### 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
|
||
<shape name="StepWithFlatLeft" h="100" w="150" aspect="variable">
|
||
<foreground>
|
||
<path>
|
||
M 0 0
|
||
L 140 0
|
||
L 150 50
|
||
L 140 100
|
||
L 0 100
|
||
Z
|
||
</path>
|
||
</foreground>
|
||
</shape>
|
||
```
|
||
|
||
- `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
|
||
<shape name="StepWithFlatLeft" h="100" w="150" aspect="variable">
|
||
<foreground>
|
||
<path>
|
||
M 0 0
|
||
L {w-10} 0
|
||
L {w} {h/2}
|
||
L {w-10} {h}
|
||
L 0 {h}
|
||
Z
|
||
</path>
|
||
</foreground>
|
||
</shape>
|
||
```
|
||
|
||
- `{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_родительской_фигуры>` — это уникальный идентификатор основной фигуры.
|
||
|
||
---
|
||
|
||
### Как узнать 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=<id>` дочернему элементу.
|
||
- Переместите дочерний элемент под родителя.
|
||
- Группировать не нужно — вложенность уже обеспечивает совместное перемещение.
|
||
|
||
---
|
||
|
||
### 3 Сгенерируй XML, где к shape=step (первая подпись Подпись1) будет добавлена вторая подпись (Подпись2) снизу фигуры.
|
||
|
||
Вот пример XML для draw.io, где к фигуре `shape=step` добавлены две подписи: первая — внутри фигуры, вторая — отдельным текстовым элементом под фигурой, связанная с фигурой через атрибут `parent`. Вторая подпись будет позиционироваться под фигурой и двигаться вместе с ней.
|
||
|
||
```xml
|
||
<mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
|
||
<root>
|
||
<mxCell id="0"/>
|
||
<mxCell id="1" parent="0"/>
|
||
|
||
<!-- Основная фигура step -->
|
||
<mxCell id="step1" value="Подпись1" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;" vertex="1" parent="1">
|
||
<mxGeometry x="100" y="100" width="160" height="80" as="geometry"/>
|
||
</mxCell>
|
||
|
||
<!-- Вторая подпись под фигурой, дочерний элемент -->
|
||
<mxCell id="label2" value="Подпись2" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=top;whiteSpace=wrap;" vertex="1" parent="step1">
|
||
<mxGeometry x="0" y="1" width="160" height="20" as="geometry" relative="1"/>
|
||
</mxCell>
|
||
|
||
</root>
|
||
</mxGraphModel>
|
||
```
|
||
|
||
---
|
||
|
||
### Объяснение:
|
||
|
||
- `<mxCell id="step1" ...>` — основная фигура `step` с текстом "Подпись1" внутри.
|
||
- `<mxCell id="label2" ... parent="step1">` — текстовый элемент с текстом "Подпись2", у которого в стиле `parent=step1` (через атрибут `parent="step1"`), то есть он вложен в фигуру.
|
||
- Вторая подпись позиционируется с помощью `<mxGeometry x="0" y="1" width="160" height="20" relative="1"/>`, где `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, относящийся только к вашей фигуре (например, `<mxCell id="step1" ...>` и связанные с ней элементы).
|
||
4. Создайте новый файл с расширением `.drawio` или `.xml` и вставьте туда этот XML, обернув в минимальную структуру:
|
||
|
||
```xml
|
||
<mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
|
||
<root>
|
||
<mxCell id="0"/>
|
||
<mxCell id="1" parent="0"/>
|
||
<!-- Вставьте сюда вашу фигуру step1 и связанные элементы -->
|
||
<mxCell id="step1" value="Подпись1" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;" vertex="1" parent="1">
|
||
<mxGeometry x="0" y="0" width="160" height="80" as="geometry"/>
|
||
</mxCell>
|
||
<mxCell id="label2" value="Подпись2" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=top;whiteSpace=wrap;" vertex="1" parent="step1">
|
||
<mxGeometry x="0" y="1" width="160" height="20" as="geometry" relative="1"/>
|
||
</mxCell>
|
||
</root>
|
||
</mxGraphModel>
|
||
```
|
||
|
||
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** для удобного повторного использования.
|
||
|
||
---
|
||
|