Arrows not shown in BPMN diagrams

[janwesterkamp]

BPMN drawings do not show arrows in their connections, only lines are visible in PDF version, where prawn-svg is used for this task.

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.17 bmnn-js 10.2.1 bpmn-js-cmd 0.4.0

This issue was created originally in asciidoctor/asciidoctorj-pdf (https://github.com/asciidoctor/asciidoctorj-pdf/issues/105) and then analysed in asciidoctor/asciidoctor-pdf (https://github.com/asciidoctor/asciidoctor-pdf/issues/2526) too, where it turned out, that the root cause is here in prawn-svg.

It looks like the SVG marker type is not handled correctly in this use case. Can you confirm and fix it, please?

[janwesterkamp]

My further analysis of this issue shows some differences in the SVG elements being used as output of in different diagram types with asciidoctor(j)-diagram, where the arrows are shown correctly:

PlantUML:

ditaa:

In ditaa arrows are shown, but shadows are missing in the prawn-svg rendering. The PlantUML rendering is shown correctly. When looking in the SVG source, these two do not make use of marker-elements and it looks like a url is part of the shadow definition in the ditaa example. The BPMN example makes use of the marker-element instead, including a url. So it looks like the arrows from the SVG get rendered only, when low-level functionality like polygon-elements are used instead of higher level ones like marker (may be in combination with a url).

So may be this error is linked to the currently unsupported hyperlink feature? If yes, should I open a separate feature request for this then?

[mogest]

Hi @janwesterkamp. I've isolated what I believe the problem is down to this SVG file here:

This renders without the marker in prawn-svg.

Looking at the source, there is a problem parsing the url():

marker-end: url('#sequenceflow-end-white-black-545bkfytrdsikj6wxvup3ieim');

prawn-svg is not expecting the apostrophe (') in that url string. If you take it out, it works fine. I'll add support for quoting which I hope will fix the issue.

As a tip for writing future issues, isolating the offending problem by providing the smallest possible SVG file that demonstrates the issue is greatly appreciated!

[mogest]

I've pushed a fix for parsing the url() which handles quoting now, and it is rendering the first SVG you posted with arrows at the end of each line. Let me know if you find any other problems with it.

[janwesterkamp]

Hi @mogest, thank you very much for your fix of this!

Regarding the other problems, there are only two little things left, that might belong to new, separate issues to be created:

I recognized that hyperlinks (with the a-element at least) are supported, but the README.md file still says they are not supported (at all): https://github.com/mogest/prawn-svg/blob/a0b242f744bf02b9709eb39e2368addd8f5b36c9/README.md?plain=1#L126 Should I create a separate issue for this documentation fix (including a small example)?

The 2nd cosmetic thing is, that other SVG resources (generated by asciidoctor(j)-diagram from PlantUML and ditaa) showing shadows that are not shown in prawn-svg renderings, which might be a result of the unsupported filter-element. Should I create a feature request for this (with low priority)?

When you have released the new version of prawn-svg, I will ping the upstream projects asciidoctor-pdf and asciidoctorj-pdf to update their dependencies. Again, many thanks! Best, Jan

[mogest]

Hi @janwesterkamp, hyperlinks are definitely not supported anywhere in the codebase. I just did a double check... unless it's hiding somewhere!

I don't think I will be implementing filter or any other major elements—everything remaining would be a very large project. Of course others are always welcome to contribute. It's documented that it's not supported so I don't think a new issue would be particularly useful.

I've just released a new gem now so you should be good to go!

[janwesterkamp]

Hi @mogest,

here is a small example which, when rendered with asciidoctorj-pdf, asciidoctor-pdf, prawn and prawn-svg results in a working link in the resulting PDF:

It just uses a a-element and works fine - I don't know where this implemented exactly, may be it's working out of the box because it is using a standard tag for linking. But I am very happy with the result, as this makes it possible to maintain these links inside the deployment diagrams of the software architecture documentation, which improves use and acceptance of this doc a lot.

Yes, I expected supporting filter-elements is a mayor change and it's only a cosmetic feature (as opposed to hyperlinks or missing arrows) - I can live with that limitation. :-)

Thanks a lot for the release, I will ping the upstream projects now! Best, Jan