vrr/doc
2
0
Fork 0
mirror of https://github.com/bpmbpm/doc.git synced 2026-04-30 20:40:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
doc/BPM/graphic_editor/drawio/shape/custom.md
Dmitry eb0bc38959
Update custom.md
2025-08-28 17:13:21 +03:00

19 KiB
Raw Blame History

help

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 кастомной фигуры

Простейшая фигура описывается так:

<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 (высота):

<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. Вторая подпись будет позиционироваться под фигурой и двигаться вместе с ней.

<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, обернув в минимальную структуру:
<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>
  1. Сохраните этот файл, например, как 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 для удобного повторного использования.