docs/index.md

In bergant/bpmn: BPMN Diagrams

bpmn - BPMN diagrams in R

.djs-overlay { color: red; opacity: 0.8; pointer-events: none; }

Overview

bpmn is an R interface to the bpmn-js library (a BPMN 2.0 rendering toolkit and web modeler) from bpmn.io. Using JavaScript in R is handled by htmlwidgets framework.

Installation

Install from GitHub:

devtools::install_github("bergant/bpmn")

Display a BPMN diagram

library(bpmn)

Use bpmn widget with a BPMN file:

bpmn_file <- system.file("examples/qr-code.bpmn", package = "bpmn")
bpmn(bpmn_file)

{"x":{"bpmn_model":"\nhttp://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" expressionLanguage=\"http://www.w3.org/1999/XPath\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\n \n \n <\/participant>\n <\/collaboration>\n \n \n \n \n sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138<\/flowNodeRef>\n sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26<\/flowNodeRef>\n SCAN_OK<\/flowNodeRef>\n sid-E49425CF-8287-4798-B622-D2A7D78EF00B<\/flowNodeRef>\n sid-E433566C-2289-4BEB-A19C-1697048900D2<\/flowNodeRef>\n sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9<\/flowNodeRef>\n <\/lane>\n <\/laneSet>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/outgoing>\n <\/startEvent>\n \n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/incoming>\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/outgoing>\n <\/task>\n \n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/incoming>\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/outgoing>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/outgoing>\n <\/exclusiveGateway>\n \n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/incoming>\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/outgoing>\n <\/task>\n \n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/incoming>\n <\/endEvent>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/incoming>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/incoming>\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/outgoing>\n <\/exclusiveGateway>\n \n \n \n \n \n \n <\/process>\n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n <\/bpmndi:BPMNPlane>\n \n \n <\/bpmndi:BPMNLabelStyle>\n \n \n <\/bpmndi:BPMNLabelStyle>\n <\/bpmndi:BPMNDiagram>\n<\/definitions>\n"},"evals":[],"jsHooks":[]}

Elements in the diagram

With bpmn_get_elements function it is possible to get BPMN elements with names and I:

library(xml2)
elements <- bpmn_get_elements(read_xml(bpmn_file))

library(htmlTable)
htmlTable(elements, align = "lll", rnames = FALSE, css.class = "table")

type name id extensionElements laneSet sid-b167d0d7-e761-4636-9200-76b7f0e8e83a startEvent Notices QR code sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138 task Scan QR code sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26 exclusiveGateway Scan successful? SCAN_OK task Open product information in mobile app sid-E49425CF-8287-4798-B622-D2A7D78EF00B endEvent Is informed sid-E433566C-2289-4BEB-A19C-1697048900D2 exclusiveGateway sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 sequenceFlow sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD sequenceFlow sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A sequenceFlow sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C sequenceFlow No sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB sequenceFlow sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D sequenceFlow Yes sid-337A23B9-A923-4CCE-B613-3E247B773CCE

Overlays

We can add additional notes aside any element of the diagram.

overlays <- list(

  overlay(
    element = "SCAN_OK", 
    html = "Mixed up the labels?"
  ),
  overlay(
    element = "sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26", 
    html = "Manually?",
    top = -40,
    left = -40
  )
)

bpmn(bpmn_file, overlays = overlays)

{"x":{"bpmn_model":"\nhttp://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" expressionLanguage=\"http://www.w3.org/1999/XPath\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\n \n \n <\/participant>\n <\/collaboration>\n \n \n \n \n sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138<\/flowNodeRef>\n sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26<\/flowNodeRef>\n SCAN_OK<\/flowNodeRef>\n sid-E49425CF-8287-4798-B622-D2A7D78EF00B<\/flowNodeRef>\n sid-E433566C-2289-4BEB-A19C-1697048900D2<\/flowNodeRef>\n sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9<\/flowNodeRef>\n <\/lane>\n <\/laneSet>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/outgoing>\n <\/startEvent>\n \n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/incoming>\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/outgoing>\n <\/task>\n \n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/incoming>\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/outgoing>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/outgoing>\n <\/exclusiveGateway>\n \n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/incoming>\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/outgoing>\n <\/task>\n \n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/incoming>\n <\/endEvent>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/incoming>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/incoming>\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/outgoing>\n <\/exclusiveGateway>\n \n \n \n \n \n \n <\/process>\n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n <\/bpmndi:BPMNPlane>\n \n \n <\/bpmndi:BPMNLabelStyle>\n \n \n <\/bpmndi:BPMNLabelStyle>\n <\/bpmndi:BPMNDiagram>\n<\/definitions>\n","overlays":[{"element":"SCAN_OK","type":"note","overlay":{"html":"Mixed up the labels?","position":{"bottom":0,"right":0}}},{"element":"sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26","type":"note","overlay":{"html":"Manually?","position":{"left":-40,"top":-40}}}]},"evals":[],"jsHooks":[]}

Markers

To highlight some of the shapes with special style, create markers with selected elements and classes:

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) { fill: lightgreen !important; } .highlight2:not(.djs-connection) .djs-visual > :nth-child(1) { fill: cyan !important; }

bpmn(bpmn_file, markers = list(
  marker(
    element = "sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26",
    class_name = "highlight"
  ),
  marker(
    element = "sid-E49425CF-8287-4798-B622-D2A7D78EF00B",
    class_name = "highlight2"
  )

))

{"x":{"bpmn_model":"\nhttp://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" expressionLanguage=\"http://www.w3.org/1999/XPath\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\n \n \n <\/participant>\n <\/collaboration>\n \n \n \n \n sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138<\/flowNodeRef>\n sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26<\/flowNodeRef>\n SCAN_OK<\/flowNodeRef>\n sid-E49425CF-8287-4798-B622-D2A7D78EF00B<\/flowNodeRef>\n sid-E433566C-2289-4BEB-A19C-1697048900D2<\/flowNodeRef>\n sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9<\/flowNodeRef>\n <\/lane>\n <\/laneSet>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/outgoing>\n <\/startEvent>\n \n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/incoming>\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/outgoing>\n <\/task>\n \n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A<\/incoming>\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/outgoing>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/outgoing>\n <\/exclusiveGateway>\n \n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB<\/incoming>\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/outgoing>\n <\/task>\n \n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C<\/incoming>\n <\/endEvent>\n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD<\/incoming>\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE<\/incoming>\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D<\/outgoing>\n <\/exclusiveGateway>\n \n \n \n \n \n \n <\/process>\n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNShape>\n \n \n <\/bpmndi:BPMNShape>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n <\/bpmndi:BPMNEdge>\n \n \n \n \n \n \n \n <\/bpmndi:BPMNLabel>\n <\/bpmndi:BPMNEdge>\n <\/bpmndi:BPMNPlane>\n \n \n <\/bpmndi:BPMNLabelStyle>\n \n \n <\/bpmndi:BPMNLabelStyle>\n <\/bpmndi:BPMNDiagram>\n<\/definitions>\n","markers":[{"element":"sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26","className":"highlight"},{"element":"sid-E49425CF-8287-4798-B622-D2A7D78EF00B","className":"highlight2"}]},"evals":[],"jsHooks":[]}

For this effect some styles should be defined inside the HTML:

<style>
  .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: lightgreen !important;
  }
  .highlight2:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: cyan !important;
  }
</style>

More

There are a lot of bpmn-js features (e.g. designing a new diagram) which are not (yet) supported by this widget. Explore these on bpmn.io demo site.

Project

GitHub: https://github.com/bergant/bpmn

Issues: https://github.com/bergant/bpmn/issues

Licenses

bpmn package: MIT License

See license file for the included bpmn-js library

bergant/bpmn documentation built on May 20, 2019, 5:05 p.m.