bpmn.js 创建Documentation节点和内容

12 min read
const documentationElement = props.modeler.get('moddle').create('bpmn:Documentation', { text: desc })
props.modeler.get('modeling').updateProperties(toRaw(rootElement.value), { documentation: [documentationElement] })

创建后的xml会添加bpmn:Documentation节点和其内容

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:flowable="http://flowable.org/bpmn" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
    <bpmn2:process id="CG" name="流程名称">
        <bpmn2:documentation>流程描述</bpmn2:documentation>
        <bpmn2:startEvent id="StartEvent_01ydzqe" name="开始"/>
        <bpmn2:userTask id="Activity_11zd4j6" name="步骤名称" 
        flowable:candidateUsers="1,123456" 
        flowable:node_type="SP" flowable:buttons="通过,退回"
        /></bpmn2:process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="CG">
            <bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe"><dc:Bounds x="142" y="212" width="36" height="36"/><bpmndi:BPMNLabel><dc:Bounds x="149" y="255" width="22" height="14"/></bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape id="Activity_0yuqiug_di" bpmnElement="Activity_11zd4j6"><dc:Bounds x="360" y="270" width="100" height="80"/><bpmndi:BPMNLabel/></bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
</bpmn2:definitions>