How create a default diagram with unique id

Developers
1

Hi,
There is some way to run:
bpmnJS.importXML() , without XML value ?
and then the bpmnJS Lib will generate a new xml file(with unique --> id=“Definitions_xxxxx”)

just like in https://demo.bpmn.io/new
when the user click on button “create new BPMN diagram” the bpmnJS generate a new XML file with new Definitions

it’s possible?

who “create new BPMN diagram” buttons work?
I want to do the same behavior as his

Thanks :slight_smile:

2

Hey,

“Create new diagram” actually imports XML as well. You can use a simple XML for that.

Have a look at here: https://codesandbox.io/s/bpmn-js-sandbox-3zkw0

To answer your question, the importXML API always expects an XML. It’s up to you to set a default XML depending on your needs.

1 Like
3

In your link, the XML is fixed.

I just want to click on the ‘new’ button and get a new bpmn ID.

just like in https://demo.bpmn.io/new
when the user click on the button “create new BPMN diagram” the bpmnJS generate a new XML file with new BPMN id
image

For example:
image

the id is changed

How do you do that ?

4

Inside and, aswell in the Camunda Modeler, which embeds bpmn-js, we use the replace-ids library to create new diagrams with random id: https://github.com/camunda/camunda-modeler/blob/b2afd083a3da0c843a3c91f49a1d0d724d8ac97b/client/src/app/TabsProvider.js#L212

So as an example

const initialDiagram = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_{{ ID }}" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_{{ ID:process }}" isExecutable="false">
    <bpmn:startEvent id="StartEvent_{{ ID:event }}" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_{{ ID:process }}">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_{{ ID:event }}">
        <dc:Bounds x="156" y="81" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`; 

const diagramXML = replaceIds(initialDiagram);

Maybe this will help you.

4 Likes