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.
Install from GitHub:
devtools::install_github("bergant/bpmn")library(bpmn)Use bpmn widget with a BPMN file:
bpmn_file <- system.file("examples/qr-code.bpmn", package = "bpmn")
bpmn(bpmn_file)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 |
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)To highlight some of the shapes with special style, create markers with selected elements and classes:
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"
)
))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>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.