Блог

Главная - Вопросы по программированию - Создание строк таблицы со стрелками в Draw.io

Создание строк таблицы со стрелками в Draw.io

#graphics #diagram #entity-relationship-model #draw.io

#графика #схема #сущность-отношение #draw.io

Вопрос:

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

введите описание изображения здесь

Однако у меня есть несколько проблем, я не знаю, как создать третий столбец, я бы хотел, чтобы вертикальная линия простиралась до самого низа, даже если элементы этого не делают (в настоящее время они являются правой линией слева внутри элемента «строки»). И, наконец, мне нужно иметь возможность гибко адаптировать размер столбцов (вместо того, чтобы редактировать настройки в отдельных строках). Мне не хватает лучшего решения здесь?

Ответ №1:

Я не уверен, что понял все детали, но эта статья может помочь: https://drawio-app.com/tables-in-drawio-got-a-makeover /

Вы можете сделать что-то подобное и дополнительно модифицировать его.

введите описание изображения здесь

или просто скопируйте / вставьте этот код в Дополнительные функции> Редактировать диаграмму

 <mxGraphModel dx="2062" dy="762" 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" />
    <mxCell id="ppajL3H83U300mlp604u-53" value="Table" style="shape=table;html=1;whiteSpace=wrap;startSize=30;container=1;collapsible=0;childLayout=tableLayout;" vertex="1" parent="1">
      <mxGeometry x="450" y="270" width="180" height="150" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-54" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;collapsible=0;dropTarget=0;pointerEvents=0;fillColor=none;top=0;left=0;bottom=0;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="ppajL3H83U300mlp604u-53">
      <mxGeometry y="30" width="180" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-55" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-54">
      <mxGeometry width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-56" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-54">
      <mxGeometry x="60" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-57" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-54">
      <mxGeometry x="120" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-58" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;collapsible=0;dropTarget=0;pointerEvents=0;fillColor=none;top=0;left=0;bottom=0;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="ppajL3H83U300mlp604u-53">
      <mxGeometry y="70" width="180" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-59" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-58">
      <mxGeometry width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-60" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-58">
      <mxGeometry x="60" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-61" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-58">
      <mxGeometry x="120" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-62" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;collapsible=0;dropTarget=0;pointerEvents=0;fillColor=none;top=0;left=0;bottom=0;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="ppajL3H83U300mlp604u-53">
      <mxGeometry y="110" width="180" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-63" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-62">
      <mxGeometry width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-64" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-62">
      <mxGeometry x="60" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-65" value="" style="shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;overflow=hidden;fillColor=none;top=0;left=0;bottom=0;right=0;" vertex="1" parent="ppajL3H83U300mlp604u-62">
      <mxGeometry x="120" width="60" height="40" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-69" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="ppajL3H83U300mlp604u-66" target="ppajL3H83U300mlp604u-54">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-66" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="120" y="200" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-70" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="ppajL3H83U300mlp604u-67" target="ppajL3H83U300mlp604u-58">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-67" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="120" y="330" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-71" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="ppajL3H83U300mlp604u-68" target="ppajL3H83U300mlp604u-62">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ppajL3H83U300mlp604u-68" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="120" y="470" width="120" height="60" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

С уважением,

Метки: