Arrows not shown in BPMN diagrams

[janwesterkamp]

BPMN drawings do not show arrows in their connections, only lines are visible in PDF version.

The SVGs generated from Asciidoctor(J) Diagram shows the arrows and so the simultaneously created HTML version shows them in the correct way too, as tooling like the Camunda Modeler or Eclipse IDE does.

• BPMN source example:
  bpmn-example.bpmn.zip

• SVG generated:
  

• PDF generated with error:
  BPMN error.pdf

Environment:

• macOS Intel 14.5 (23F79)
• Java SE 21.0.3
• JRuby 9.4.7.0
• Maven 3.9.7
• Asciidoctor Maven Plugin 3.0.0
• AsciidoctorJ 2.5.13
• AsciidoctorJ Diagram 2.3.0
• AsciidoctorJ PDF 2.3.15
• bmnn-js 10.2.1
• bpmn-js-cmd 0.4.0

[robertpanzer]

It seems like bpmn-js-cmd, which is used to convert bpmn, does not run on arm, and I don't have an x86 machine at disposal.
Can you reproduce this also with the "non-java" versions? I.e. if you install the asciidoctor, asciidoctor-pdf and asciidoctor-diagram Ruby Gems?
Also, is the image that you have pasted above directly generated with bpmn-js-cmd?

[janwesterkamp]

I will try to reproduce this on the CLI with the non-Java versions - may be with a VM...

Yes, it looks like the image is generated during the HTML part with bpmn-js in Maven:

...
[INFO] �[1m--- �[0;32masciidoctor:3.0.0:process-asciidoc�[m �[1m(generate-html-doc)�[m @ �[36mdevelopment�[0;1m ---�[m
[INFO] asciidoctor: DEBUG: Finding 'dot' in attributes
[INFO] asciidoctor: DEBUG: Finding 'dot' in environment
[INFO] asciidoctor: DEBUG: Found '/usr/local/bin/dot' in environment
[INFO] asciidoctor: DEBUG: Finding 'bpmn-js' in attributes
[INFO] asciidoctor: DEBUG: Finding 'bpmn-js' in environment
[INFO] asciidoctor: DEBUG: Found '/usr/local/bin/bpmn-js' in environment
[INFO] asciidoctor: DEBUG: Executing ["/usr/local/bin/bpmn-js", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-iopej6.bpmn", "-o", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-po6mmy.svg", "-t", "svg"] with options {:chdir=>"/Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc"} and environment {}
[INFO] asciidoctor: DEBUG: Executing ["/usr/local/bin/bpmn-js", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-hkwasc.bpmn", "-o", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-bebovs.svg", "-t", "svg"] with options {:chdir=>"/Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc"} and environment {}
[INFO] asciidoctor: DEBUG: Executing ["/usr/local/bin/bpmn-js", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-n6g54s.bpmn", "-o", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-r36b6u.svg", "-t", "svg"] with options {:chdir=>"/Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc"} and environment {}
[INFO] asciidoctor: DEBUG: Executing ["/usr/local/bin/bpmn-js", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-naaov1.bpmn", "-o", "/var/folders/q5/4w6x1frx61g34vnyhzmm5zsr0000gn/T/bpmn-js20240606-16629-calutx.svg", "-t", "svg"] with options {:chdir=>"/Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc"} and environment {}
[INFO] Converted /Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc/development.adoc
[INFO] 
[INFO] �[1m--- �[0;32masciidoctor:3.0.0:process-asciidoc�[m �[1m(generate-pdf-doc)�[m @ �[36mdevelopment�[0;1m ---�[m
[INFO] Converted /Users/jan/git/eu.sensoraktor.platform/doc/development/src/main/asciidoc/development.adoc
...

There are no details about the generation within the PDF part unfortunately.
Note: There are four BPMN files in this project, one is the example given here and all have the same issue regarding the arrows.

[robertpanzer]

I spun up a VM and rendered the diagram with the base Ruby projects, i.e., I installed Ruby and asciidoctor, asciidoctor-pdf, asciidoctor-diagram and nodejs with bpmn-js-cmd:

[ec2-user@ip-172-31-26-114 ~]$ asciidoctor --version
Asciidoctor 2.0.23 [https://asciidoctor.org]
Runtime Environment (ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)
[ec2-user@ip-172-31-26-114 ~]$ node --version
v18.18.2

When rendering a pdf I also saw that it did not show the arrows:
test.pdf
Otoh, rendering to html shows them:
test.zip

Rendering the bpmn to png instead of svg also shows the errors in the pdf. So that might be a workaround if you can live with the lower quality:

[bpmn,test,png]
----
include::bpmn-example.bpmn[]
----

It would make more sense to open this issue in asciidoctor/asciidoctor-pdf.

[janwesterkamp]

@robertpanzer, thanks for the analysis and workaround!
As some of these processes are much more complex and zooming in into the document would be nice, this workaround mitigates the impact for now.
Changing from SVG to PNG also increases the file size, so fixing it would be nice.

I will create the issue in the asciidoctor/asciidoctor-pdf and link it with this ticket, so we can keep track of it.