Sequence flow arrow is not shown when import Diagram

Users
1

Hi all, I have a problem when import Diagram whit bpmnModeler.

The sequence flow arrow is not show, but if move element the sequence flow show.
I need help.

// create modeler
const bpmnModeler = new BpmnModeler({
container: containerEl,
additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
customModule
],
propertiesPanel: {
parent: propertiesPanel
}
});

// import XML
bpmnModeler.importXML(diagramXML, (err) => {
if (err) {
console.error(err);
}
…
}

Diagram

2

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it. Especially your used diagram would be interesting.

3

What diagram are you importing?

Also: https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks :wink:

4

Hi Niklas,

This is escenary.
https://codesandbox.io/s/dry-pond-1trje

The sequence flow arrow it’s behin the element, when import code XML.

When update the bounds X and Y in XML, the position is correct but, I have other diagrams whit bounds diferences and don’t show sequence flow arrow.

How I can change secuence flow arrow bounds automatly for show in diagram ?

5

Hi man,

This is the code.
https://codesandbox.io/s/dry-pond-1trje

I have different diagrams, with different bounds and Sequence flow arrow is not shown.

const diagramXML = <?xml version="1.0" encoding="UTF-8"?> <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns="http://www.omg.org/bpmn20" xmlns:drools="http://www.jboss.org/drools" id="_kQ_6UFcDEeWF8qZhQW9kJw" targetNamespace="http://www.omg.org/bpmn20" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"> <bpmn2:process id="Process_0sckl64" isExecutable="true"> <bpmn2:startEvent id="startElement_1"> <bpmn:outgoing>secuendeFlow_1</bpmn:outgoing> </bpmn2:startEvent> <bpmn2:sequenceFlow id="secuendeFlow_1" sourceRef="startElement_1" targetRef="task_1" drools:bgcolor="#000000" drools:selectable="true" /> <bpmn2:task id="task_1" name="RetrieveHeaderProperties" drools:selectable="true" drools:taskName="RetrieveHeaderProperties"> <bpmn2:incoming>secuendeFlow_1</bpmn2:incoming> </bpmn2:task> </bpmn2:process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0sckl64"> <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="startElement_1"> <dc:Bounds x="179" y="164" width="36" height="36" /> </bpmndi:BPMNShape> <bpmndi:BPMNEdge id="_kRBvglcDEeWF8qZhQW9kJw" bpmnElement="secuendeFlow_1"> <di:waypoint x="210" y="183" /> <di:waypoint x="387" y="183" /> </bpmndi:BPMNEdge> <bpmndi:BPMNShape id="_kRBvmFcDEeWF8qZhQW9kJw" bpmnElement="task_1"> <dc:Bounds x="330" y="142" width="114" height="82" /> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </bpmn2:definitions>;

6

The waypoints in the diagram you’re importing are wrong

 <bpmndi:BPMNEdge id="_kRBvglcDEeWF8qZhQW9kJw" bpmnElement="secuendeFlow_1">
    <di:waypoint x="210" y="183" />
    <di:waypoint x="387" y="183" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_kRBvmFcDEeWF8qZhQW9kJw" bpmnElement="task_1">
    <dc:Bounds x="330" y="142" width="114" height="82" />
</bpmndi:BPMNShape>

See the x-value of the ending waypoint of the sequence flow is bigger (387) than the x-value of the target shape (330). That’s why you’re seeing the sequence flow ending behind the task.

From where did you export this diagram?

While modeling, we try to fix connections as much as possible, so when exporting, the waypoints should be cropped correctly. We can’t guarantee the waypoints are correct when importing diagrams from other modeling tools.

7

The diagram was exported from jbpmn tool.

How I can change secuence flow arrow bounds automatly for show in diagram when import, using some property or clase of JavaScript?

8

Maybe Modeling#layoutConnection is your friend here.