From 3ea0ca34628e315d9f7b4943071b2bbcb2ee83aa Mon Sep 17 00:00:00 2001 From: Dmitry <121898072+bpmbpm@users.noreply.github.com> Date: Thu, 28 Aug 2025 13:30:31 +0300 Subject: [PATCH] Create custom.md --- BPM/graphic_editor/drawio/shape/custom.md | 158 ++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 BPM/graphic_editor/drawio/shape/custom.md diff --git a/BPM/graphic_editor/drawio/shape/custom.md b/BPM/graphic_editor/drawio/shape/custom.md new file mode 100644 index 00000000..6a8655b0 --- /dev/null +++ b/BPM/graphic_editor/drawio/shape/custom.md @@ -0,0 +1,158 @@ +### 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 через меню кастомных фигур. + +--- +