Перейти к основному содержимому

ProcessViewer

Отображает BPMN-схему бизнес-процесса.

Позволяет делать следующее:

  • просматривать BPMN-схему бизнес-процесса;
  • выбирать BPMN-элементы на схеме бизнес-процесса;
  • подсвечивать BPMN-элементы на схеме бизнес-процесса разными цветами.
<ProcessViewer Value-var="xml" />

Свойства​

ИмяОписаниеТипЗначение по умолчаниюВозможные значения
BadgeКоличественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число),
position ("post" или "pre"), color (цвет)		any
CSSМассив строк-классов CSS-стилей компонентаarray
CombineConfigКонфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм.
Не рекомендуется указывать значение вручную		object
HiddenПризнак состояния компонента СкрытbooleanFalse
HighlightedItemsМассив объектов, описывающих цвета BPMN-элементов. Каждый объект может содержать поля id (идентификатор BPMN-элемента) и color (цвет из предустановленной палитры: Active, Incident, End, Path, Warning).array
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
OnClickОбработчик события нажатия кнопки мышиundefined
OnItemClickОбработчик события выбора элемента схемы бизнес-процессаundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnUnmountОбработчик события Unmountundefined
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceId
Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
ValueBPMN-схема в формате xmlstring
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue

Примеры​

Данные:

  "xml": "<?xml version="1.0" encoding="UTF-8"?>\n<bpmn:definitions 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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0hbujbh" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.18.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.3.0">\n  <bpmn:process id="Process_18a11ii" isExecutable="true">\n    <bpmn:startEvent id="Event_0dfekbp">\n      <bpmn:outgoing>Flow_1t0it3b</bpmn:outgoing>\n    </bpmn:startEvent>\n    <bpmn:task id="Activity_1j5px29" name="Active">\n      <bpmn:incoming>Flow_1t0it3b</bpmn:incoming>\n      <bpmn:outgoing>Flow_0k78uhx</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1t0it3b" sourceRef="Event_0dfekbp" targetRef="Activity_1j5px29" />\n    <bpmn:task id="Activity_1bsr3eg" name="Incident">\n      <bpmn:incoming>Flow_0k78uhx</bpmn:incoming>\n      <bpmn:outgoing>Flow_1k4t294</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_0k78uhx" sourceRef="Activity_1j5px29" targetRef="Activity_1bsr3eg" />\n    <bpmn:task id="Activity_1dsx2ka" name="End">\n      <bpmn:incoming>Flow_1k4t294</bpmn:incoming>\n      <bpmn:outgoing>Flow_1q493oc</bpmn:outgoing>\n      <bpmn:outgoing>Flow_0ea0nmb</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1k4t294" sourceRef="Activity_1bsr3eg" targetRef="Activity_1dsx2ka" />\n    <bpmn:task id="Activity_15vfr5s" name="Path">\n      <bpmn:incoming>Flow_1q493oc</bpmn:incoming>\n      <bpmn:outgoing>Flow_0zckyb1</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1q493oc" sourceRef="Activity_1dsx2ka" targetRef="Activity_15vfr5s" />\n    <bpmn:task id="Activity_07kkir2" name="Warning">\n      <bpmn:incoming>Flow_0zckyb1</bpmn:incoming>\n      <bpmn:outgoing>Flow_1slhb1w</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_0zckyb1" sourceRef="Activity_15vfr5s" targetRef="Activity_07kkir2" />\n    <bpmn:endEvent id="Event_0dlyreh">\n      <bpmn:incoming>Flow_1slhb1w</bpmn:incoming>\n    </bpmn:endEvent>\n    <bpmn:sequenceFlow id="Flow_1slhb1w" sourceRef="Activity_07kkir2" targetRef="Event_0dlyreh" />\n    <bpmn:exclusiveGateway id="Gateway_070riav" name="void">\n      <bpmn:incoming>Flow_0ea0nmb</bpmn:incoming>\n    </bpmn:exclusiveGateway>\n    <bpmn:sequenceFlow id="Flow_0ea0nmb" sourceRef="Activity_1dsx2ka" targetRef="Gateway_070riav" />\n  </bpmn:process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_18a11ii">\n      <bpmndi:BPMNShape id="Activity_1j5px29_di" bpmnElement="Activity_1j5px29">\n        <dc:Bounds x="220" y="80" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1bsr3eg_di" bpmnElement="Activity_1bsr3eg">\n        <dc:Bounds x="320" y="168" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1dsx2ka_di" bpmnElement="Activity_1dsx2ka">\n        <dc:Bounds x="420" y="250" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_15vfr5s_di" bpmnElement="Activity_15vfr5s">\n        <dc:Bounds x="520" y="330" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_07kkir2_di" bpmnElement="Activity_07kkir2">\n        <dc:Bounds x="620" y="410" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_070riav_di" bpmnElement="Gateway_070riav" isMarkerVisible="true">\n        <dc:Bounds x="315" y="425" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="329" y="485" width="21" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0dfekbp_di" bpmnElement="Event_0dfekbp">\n        <dc:Bounds x="152" y="102" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0dlyreh_di" bpmnElement="Event_0dlyreh">\n        <dc:Bounds x="652" y="522" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Flow_1t0it3b_di" bpmnElement="Flow_1t0it3b">\n        <di:waypoint x="188" y="120" />\n        <di:waypoint x="220" y="120" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0k78uhx_di" bpmnElement="Flow_0k78uhx">\n        <di:waypoint x="320" y="120" />\n        <di:waypoint x="370" y="120" />\n        <di:waypoint x="370" y="168" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1k4t294_di" bpmnElement="Flow_1k4t294">\n        <di:waypoint x="420" y="208" />\n        <di:waypoint x="470" y="208" />\n        <di:waypoint x="470" y="250" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1q493oc_di" bpmnElement="Flow_1q493oc">\n        <di:waypoint x="520" y="290" />\n        <di:waypoint x="570" y="290" />\n        <di:waypoint x="570" y="330" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0ea0nmb_di" bpmnElement="Flow_0ea0nmb">\n        <di:waypoint x="420" y="290" />\n        <di:waypoint x="340" y="290" />\n        <di:waypoint x="340" y="425" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0zckyb1_di" bpmnElement="Flow_0zckyb1">\n        <di:waypoint x="620" y="370" />\n        <di:waypoint x="670" y="370" />\n        <di:waypoint x="670" y="410" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1slhb1w_di" bpmnElement="Flow_1slhb1w">\n        <di:waypoint x="670" y="490" />\n        <di:waypoint x="670" y="522" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</bpmn:definitions>", "xml2": "\n<?xml version="1.0" encoding="UTF-8"?>\n<semantic:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:semantic="http://www.omg.org/spec/BPMN/20100524/MODEL" id="_1275940932088" targetNamespace="http://www.trisotech.com/definitions/_1275940932088" exporter="Camunda Modeler" exporterVersion="1.16.0">\n  <semantic:message id="_1275940932310" />\n  <semantic:message id="_1275940932433" />\n  <semantic:process id="_6-1" isExecutable="false">\n    <semantic:laneSet id="ls_6-438">\n      <semantic:lane id="_6-448" name="delivery boy">\n        <semantic:flowNodeRef>_6-514</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-565</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-616</semantic:flowNodeRef>\n      </semantic:lane>\n      <semantic:lane id="_6-446" name="pizza chef">\n        <semantic:flowNodeRef>_6-463</semantic:flowNodeRef>\n      </semantic:lane>\n      <semantic:lane id="_6-650" name="clerk">\n        <semantic:flowNodeRef>OrderReceivedEvent</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-652</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-674</semantic:flowNodeRef>\n        <semantic:flowNodeRef>CalmCustomerTask</semantic:flowNodeRef>\n      </semantic:lane>\n    </semantic:laneSet>\n    <semantic:startEvent id="OrderReceivedEvent" name="Order received">\n      <semantic:outgoing>_6-630</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932310" />\n    </semantic:startEvent>\n    <semantic:parallelGateway id="_6-652" name="">\n      <semantic:incoming>_6-630</semantic:incoming>\n      <semantic:outgoing>_6-691</semantic:outgoing>\n      <semantic:outgoing>_6-693</semantic:outgoing>\n    </semantic:parallelGateway>\n    <semantic:intermediateCatchEvent id="_6-674" name="„where is my pizza?“">\n      <semantic:incoming>_6-691</semantic:incoming>\n      <semantic:incoming>_6-746</semantic:incoming>\n      <semantic:outgoing>_6-748</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932433" />\n    </semantic:intermediateCatchEvent>\n    <semantic:task id="CalmCustomerTask" name="Calm customer">\n      <semantic:incoming>_6-748</semantic:incoming>\n      <semantic:outgoing>_6-746</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-463" name="Bake the pizza">\n      <semantic:incoming>_6-693</semantic:incoming>\n      <semantic:outgoing>_6-632</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-514" name="Deliver the pizza">\n      <semantic:incoming>_6-632</semantic:incoming>\n      <semantic:outgoing>_6-634</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-565" name="Receive payment">\n      <semantic:incoming>_6-634</semantic:incoming>\n      <semantic:outgoing>_6-636</semantic:outgoing>\n    </semantic:task>\n    <semantic:endEvent id="_6-616" name="">\n      <semantic:incoming>_6-636</semantic:incoming>\n      <semantic:terminateEventDefinition />\n    </semantic:endEvent>\n    <semantic:sequenceFlow id="_6-630" name="" sourceRef="OrderReceivedEvent" targetRef="_6-652" />\n    <semantic:sequenceFlow id="_6-691" name="" sourceRef="_6-652" targetRef="_6-674" />\n    <semantic:sequenceFlow id="_6-693" name="" sourceRef="_6-652" targetRef="_6-463" />\n    <semantic:sequenceFlow id="_6-746" name="" sourceRef="CalmCustomerTask" targetRef="_6-674" />\n    <semantic:sequenceFlow id="_6-748" name="" sourceRef="_6-674" targetRef="CalmCustomerTask" />\n    <semantic:sequenceFlow id="_6-632" name="" sourceRef="_6-463" targetRef="_6-514" />\n    <semantic:sequenceFlow id="_6-634" name="" sourceRef="_6-514" targetRef="_6-565" />\n    <semantic:sequenceFlow id="_6-636" name="" sourceRef="_6-565" targetRef="_6-616" />\n  </semantic:process>\n  <semantic:message id="_1275940932198" />\n  <semantic:process id="_6-2" isExecutable="false">\n    <semantic:startEvent id="_6-61" name="Hungry for pizza">\n      <semantic:outgoing>_6-125</semantic:outgoing>\n    </semantic:startEvent>\n    <semantic:task id="SelectAPizzaTask" name="Select a pizza">\n      <semantic:incoming>_6-125</semantic:incoming>\n      <semantic:outgoing>_6-178</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-127" name="Order a pizza">\n      <semantic:incoming>_6-178</semantic:incoming>\n      <semantic:outgoing>_6-420</semantic:outgoing>\n    </semantic:task>\n    <semantic:eventBasedGateway id="_6-180" name="">\n      <semantic:incoming>_6-420</semantic:incoming>\n      <semantic:incoming>_6-430</semantic:incoming>\n      <semantic:outgoing>_6-422</semantic:outgoing>\n      <semantic:outgoing>_6-424</semantic:outgoing>\n    </semantic:eventBasedGateway>\n    <semantic:intermediateCatchEvent id="_6-202" name="pizza received">\n      <semantic:incoming>_6-422</semantic:incoming>\n      <semantic:outgoing>_6-428</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932198" />\n    </semantic:intermediateCatchEvent>\n    <semantic:intermediateCatchEvent id="_6-219" name="60 minutes">\n      <semantic:incoming>_6-424</semantic:incoming>\n      <semantic:outgoing>_6-426</semantic:outgoing>\n      <semantic:timerEventDefinition>\n        <semantic:timeDate />\n      </semantic:timerEventDefinition>\n    </semantic:intermediateCatchEvent>\n    <semantic:task id="_6-236" name="Ask for the pizza">\n      <semantic:incoming>_6-426</semantic:incoming>\n      <semantic:outgoing>_6-430</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-304" name="Pay the pizza">\n      <semantic:incoming>_6-428</semantic:incoming>\n      <semantic:outgoing>_6-434</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-355" name="Eat the pizza">\n      <semantic:incoming>_6-434</semantic:incoming>\n      <semantic:outgoing>_6-436</semantic:outgoing>\n    </semantic:task>\n    <semantic:endEvent id="_6-406" name="Hunger satisfied">\n      <semantic:incoming>_6-436</semantic:incoming>\n    </semantic:endEvent>\n    <semantic:sequenceFlow id="_6-125" name="" sourceRef="_6-61" targetRef="SelectAPizzaTask" />\n    <semantic:sequenceFlow id="_6-178" name="" sourceRef="SelectAPizzaTask" targetRef="_6-127" />\n    <semantic:sequenceFlow id="_6-420" name="" sourceRef="_6-127" targetRef="_6-180" />\n    <semantic:sequenceFlow id="_6-430" name="" sourceRef="_6-236" targetRef="_6-180" />\n    <semantic:sequenceFlow id="_6-422" name="" sourceRef="_6-180" targetRef="_6-202" />\n    <semantic:sequenceFlow id="_6-424" name="" sourceRef="_6-180" targetRef="_6-219" />\n    <semantic:sequenceFlow id="_6-428" name="" sourceRef="_6-202" targetRef="_6-304" />\n    <semantic:sequenceFlow id="_6-426" name="" sourceRef="_6-219" targetRef="_6-236" />\n    <semantic:sequenceFlow id="_6-434" name="" sourceRef="_6-304" targetRef="_6-355" />\n    <semantic:sequenceFlow id="_6-436" name="" sourceRef="_6-355" targetRef="_6-406" />\n  </semantic:process>\n  <semantic:collaboration id="C1275940932557">\n    <semantic:participant id="_6-53" name="Pizza Customer" processRef="_6-2" />\n    <semantic:participant id="_6-438" name="Pizza vendor" processRef="_6-1" />\n    <semantic:participant id="Participant_0spaerz" processRef="Process_1ysvtrx" />\n    <semantic:messageFlow id="_6-638" name="pizza order" sourceRef="_6-127" targetRef="OrderReceivedEvent" />\n    <semantic:messageFlow id="_6-642" name="" sourceRef="_6-236" targetRef="_6-674" />\n    <semantic:messageFlow id="_6-646" name="receipt" sourceRef="_6-565" targetRef="_6-304" />\n    <semantic:messageFlow id="_6-648" name="money" sourceRef="_6-304" targetRef="_6-565" />\n    <semantic:messageFlow id="_6-640" name="pizza" sourceRef="_6-514" targetRef="_6-202" />\n    <semantic:messageFlow id="_6-750" name="" sourceRef="CalmCustomerTask" targetRef="_6-236" />\n    <semantic:messageFlow id="Flow_02y3fro" sourceRef="SelectAPizzaTask" targetRef="Activity_01ig7ny" />\n    <semantic:messageFlow id="Flow_0ddycer" sourceRef="_6-127" targetRef="Activity_101um1a" />\n    <semantic:messageFlow id="Flow_0i1j9fo" sourceRef="_6-127" targetRef="Activity_0vwy5n9" />\n  </semantic:collaboration>\n  <semantic:process id="Process_1ysvtrx" isExecutable="false">\n    <semantic:subProcess id="Activity_01ig7ny" triggeredByEvent="true" />\n    <semantic:subProcess id="Activity_101um1a" />\n    <semantic:subProcess id="Activity_0vwy5n9" />\n  </semantic:process>\n  <bpmndi:BPMNDiagram id="Trisotech.Visio-_6" name="Untitled Diagram" documentation="" resolution="96.00000267028808">\n    <bpmndi:BPMNPlane bpmnElement="C1275940932557">\n      <bpmndi:BPMNShape id="Trisotech.Visio__6-53" bpmnElement="_6-53" isHorizontal="true">\n        <dc:Bounds x="152" y="82" width="1044" height="418" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-61" bpmnElement="_6-61">\n        <dc:Bounds x="206" y="166" width="30" height="30" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="181" y="196" width="81" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-74" bpmnElement="SelectAPizzaTask">\n        <dc:Bounds x="285" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-127" bpmnElement="_6-127">\n        <dc:Bounds x="405" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-180" bpmnElement="_6-180">\n        <dc:Bounds x="518" y="160" width="42" height="42" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-202" bpmnElement="_6-202">\n        <dc:Bounds x="787" y="165" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="768" y="197" width="71" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-219" bpmnElement="_6-219">\n        <dc:Bounds x="588" y="254" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="577" y="286" width="54" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-236" bpmnElement="_6-236">\n        <dc:Bounds x="657" y="236" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-304" bpmnElement="_6-304">\n        <dc:Bounds x="866" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-355" bpmnElement="_6-355">\n        <dc:Bounds x="974" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-406" bpmnElement="_6-406">\n        <dc:Bounds x="1096" y="165" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="1072" y="197" width="80" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-125" bpmnElement="_6-125">\n        <di:waypoint x="236" y="181" />\n        <di:waypoint x="254" y="181" />\n        <di:waypoint x="285" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-178" bpmnElement="_6-178">\n        <di:waypoint x="368" y="181" />\n        <di:waypoint x="405" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-420" bpmnElement="_6-420">\n        <di:waypoint x="488" y="181" />\n        <di:waypoint x="506" y="181" />\n        <di:waypoint x="518" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-430" bpmnElement="_6-430">\n        <di:waypoint x="740" y="270" />\n        <di:waypoint x="758" y="270" />\n        <di:waypoint x="758" y="322" />\n        <di:waypoint x="716" y="322" />\n        <di:waypoint x="689" y="322" />\n        <di:waypoint x="500" y="322" />\n        <di:waypoint x="500" y="181" />\n        <di:waypoint x="518" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-422" bpmnElement="_6-422">\n        <di:waypoint x="560" y="181" />\n        <di:waypoint x="578" y="181" />\n        <di:waypoint x="787" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-424" bpmnElement="_6-424">\n        <di:waypoint x="539" y="202" />\n        <di:waypoint x="539" y="270" />\n        <di:waypoint x="588" y="270" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-428" bpmnElement="_6-428">\n        <di:waypoint x="819" y="181" />\n        <di:waypoint x="866" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-426" bpmnElement="_6-426">\n        <di:waypoint x="620" y="270" />\n        <di:waypoint x="638" y="270" />\n        <di:waypoint x="657" y="270" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-434" bpmnElement="_6-434">\n        <di:waypoint x="950" y="181" />\n        <di:waypoint x="974" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-436" bpmnElement="_6-436">\n        <di:waypoint x="1058" y="181" />\n        <di:waypoint x="1076" y="181" />\n        <di:waypoint x="1096" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6-438" bpmnElement="_6-438" isHorizontal="true">\n        <dc:Bounds x="152" y="442" width="905" height="337" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-650" bpmnElement="_6-650" isHorizontal="true">\n        <dc:Bounds x="182" y="442" width="875" height="114" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-446" bpmnElement="_6-446" isHorizontal="true">\n        <dc:Bounds x="182" y="556" width="875" height="114" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-448" bpmnElement="_6-448" isHorizontal="true">\n        <dc:Bounds x="182" y="670" width="875" height="109" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6_OrderReceivedEvent" bpmnElement="OrderReceivedEvent">\n        <dc:Bounds x="219" y="475" width="30" height="30" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="198" y="505" width="73" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-652" bpmnElement="_6-652">\n        <dc:Bounds x="280" y="469" width="42" height="42" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-674" bpmnElement="_6-674">\n        <dc:Bounds x="358" y="474" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="343" y="506" width="63" height="27" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6_CalmCustomerTask" bpmnElement="CalmCustomerTask">\n        <dc:Bounds x="426" y="456" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-463" bpmnElement="_6-463">\n        <dc:Bounds x="392" y="591" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-514" bpmnElement="_6-514">\n        <dc:Bounds x="604" y="699" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-565" bpmnElement="_6-565">\n        <dc:Bounds x="743" y="699" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-616" bpmnElement="_6-616">\n        <dc:Bounds x="862" y="717" width="32" height="32" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-630" bpmnElement="_6-630">\n        <di:waypoint x="249" y="490" />\n        <di:waypoint x="280" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-691" bpmnElement="_6-691">\n        <di:waypoint x="322" y="490" />\n        <di:waypoint x="340" y="490" />\n        <di:waypoint x="358" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-693" bpmnElement="_6-693">\n        <di:waypoint x="301" y="511" />\n        <di:waypoint x="301" y="626" />\n        <di:waypoint x="392" y="625" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-746" bpmnElement="_6-746">\n        <di:waypoint x="510" y="490" />\n        <di:waypoint x="526" y="490" />\n        <di:waypoint x="526" y="544" />\n        <di:waypoint x="331" y="544" />\n        <di:waypoint x="331" y="490" />\n        <di:waypoint x="358" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-748" bpmnElement="_6-748">\n        <di:waypoint x="390" y="490" />\n        <di:waypoint x="408" y="490" />\n        <di:waypoint x="426" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-632" bpmnElement="_6-632">\n        <di:waypoint x="475" y="625" />\n        <di:waypoint x="493" y="625" />\n        <di:waypoint x="493" y="733" />\n        <di:waypoint x="604" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-634" bpmnElement="_6-634">\n        <di:waypoint x="688" y="733" />\n        <di:waypoint x="743" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-636" bpmnElement="_6-636">\n        <di:waypoint x="826" y="733" />\n        <di:waypoint x="844" y="733" />\n        <di:waypoint x="862" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Participant_0spaerz_di" bpmnElement="Participant_0spaerz" isHorizontal="true">\n        <dc:Bounds x="152" y="840" width="878" height="380" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_01ig7ny_di" bpmnElement="Activity_01ig7ny" isExpanded="true">\n        <dc:Bounds x="200" y="860" width="350" height="200" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_101um1a_di" bpmnElement="Activity_101um1a">\n        <dc:Bounds x="580" y="860" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0vwy5n9_di" bpmnElement="Activity_0vwy5n9" isExpanded="true">\n        <dc:Bounds x="580" y="960" width="350" height="200" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-638" bpmnElement="_6-638">\n        <di:waypoint x="446" y="215" />\n        <di:waypoint x="446" y="322" />\n        <di:waypoint x="234" y="322" />\n        <di:waypoint x="234" y="475" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="313" y="297" width="55" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-642" bpmnElement="_6-642">\n        <di:waypoint x="685" y="304" />\n        <di:waypoint x="685" y="394" />\n        <di:waypoint x="374" y="394" />\n        <di:waypoint x="374" y="474" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-646" bpmnElement="_6-646" messageVisibleKind="non_initiating">\n        <di:waypoint x="798" y="699" />\n        <di:waypoint x="798" y="502" />\n        <di:waypoint x="922" y="502" />\n        <di:waypoint x="922" y="215" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="843" y="477" width="34" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-648" bpmnElement="_6-648">\n        <di:waypoint x="894" y="215" />\n        <di:waypoint x="894" y="478" />\n        <di:waypoint x="770" y="478" />\n        <di:waypoint x="771" y="699" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="815" y="453" width="34" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-640" bpmnElement="_6-640">\n        <di:waypoint x="646" y="699" />\n        <di:waypoint x="646" y="454" />\n        <di:waypoint x="803" y="454" />\n        <di:waypoint x="803" y="197" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="712" y="429" width="26" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-750" bpmnElement="_6-750">\n        <di:waypoint x="468" y="456" />\n        <di:waypoint x="468" y="418" />\n        <di:waypoint x="712" y="418" />\n        <di:waypoint x="712" y="304" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_02y3fro_di" bpmnElement="Flow_02y3fro">\n        <di:waypoint x="327" y="215" />\n        <di:waypoint x="327" y="860" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0ddycer_di" bpmnElement="Flow_0ddycer">\n        <di:waypoint x="488" y="181" />\n        <di:waypoint x="530" y="181" />\n        <di:waypoint x="530" y="900" />\n        <di:waypoint x="580" y="900" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0i1j9fo_di" bpmnElement="Flow_0i1j9fo">\n        <di:waypoint x="447" y="215" />\n        <di:waypoint x="447" y="588" />\n        <di:waypoint x="647" y="588" />\n        <di:waypoint x="647" y="960" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_1dt967q">\n    <bpmndi:BPMNPlane id="BPMNPlane_1f9o77s" bpmnElement="Activity_101um1a" />\n  </bpmndi:BPMNDiagram>\n</semantic:definitions>\n"
}

Скрипты:


      setState({HighlightedItems: [
        // {id: "_6-61", color: 'Active'},
        // {id: "SelectAPizzaTask", color: 'Incident'},
        // {id: "_6-638", color: 'Incident'},
        // {id: "OrderReceivedEvent", color: 'End'},
        // {id: "_6-180", color: 'Warning'},
        // {id: "_6-219", color: 'Path'},
        // {id: "_6-640", color: 'Path'},
        // {id: "_6-236", color: 'Active'},
        // {id: "_6-304", color: 'Incident'},
        // {id: "_6-616", color: 'Path'},
        // {id: "Activity_01ig7ny", color: 'Warning'},
        // {id: "Flow_02y3fro", color: 'Warning'},
        // {id: "Activity_101um1a", color: 'End'},
        // {id: "Activity_0vwy5n9", color: 'Active'},
        {id: 'Event_0dfekbp', color: 'Active'},
        {id: 'Activity_1j5px29', color: 'Incident'},
        {id: 'Flow_0zckyb1', color: 'Incident'},
        {id: 'Activity_1bsr3eg', color: 'Path'},
        {id: 'Activity_1dsx2ka', color: 'Warning'},
        {id: 'Activity_15vfr5s', color: 'End'},
        {id: 'Activity_07kkir2', color: 'Active'},
        {id: 'Gateway_070riav', color: 'Incident'},
        {id: 'Event_0dlyreh', color: 'Path'},
        {id: 'Flow_0ea0nmb', color: 'Path'},
      ]})

JSX:

<ProcessViewer
  OnItemClick={() => { console.log(getEvent()); }}
  HighlightedItems-var="HighlightedItems"
  Value-var="xml"
/>