Hi all,
This is my first post here.
I have been using BPMN Camunda Modeler for a while. One of the issues that faced me was exporting/importing diagrams to MS Office products.
Although MS Word and PowerPoint now support importing SVG graphics (I think since 2016), the SVG files exported from BPMN.io/Camunda Modeler are not imported correctly.
The arrow ends (arrow heads) in the diagram are omitted when the SVG diagram is embedded in MS Office products
Solution:
After looking around for a while I found the cause of the issue
In the SVG files code, BPMN.io marks-up the connector and message flow lines as follows (example):
<g class="djs-visual">
<path d="m 705,340L820,340 " style="fill: none; stroke-width: 2px; stroke: black; stroke-linejoin: round; marker-end: url('#sequenceflow-end-white-black-1gigau9sg4fb9i72102jrtkap'); marker-start: url('#conditional-default-flow-marker-white-black-1gigau9sg4fb9i72102jrtkap');"/>
</g>
the problem is with the apostrophe ’ around the URL reference
MS Word/PowePoint do not expect it
If you remove it from around all the marker-end/marker-start references, the file will be displayed correctly in MS products (while still compatible with other viewers such as web browsers)
To modify a BPMN SVG files, you can open the file using any text editor, and find and replace all occurrences
To make it easy, you can use the following regex (regular expression) in an advance text editor (e.g. Notepad++ for Windows) and do the following find and replace:
Find:
(marker-(end|start):.+?)(')(.+?)(')
Replace:
$1$4
Replace all and save the file (make a backup before you try this!)
Now you can import it to MS Office products and it will display correctly
Hope this would help someone!
Ahmed
.