Export BpmnViewer as a PNG

Support
#1

I preview my diagram on a BpmnViewer component. I’m happy the way it looks on screen but I need to export it as a png byte[] is this possible?

#2

That is an interesting topic. If you follow the implementation of the BpmnVieWer interface, you can find BpmnViewerJavaScriptComponent:

package com.haulmont.addon.bproc.web.uicomponent.bpmnviewer.vaadin;

import com.google.common.base.Strings;
import com.haulmont.addon.bproc.web.uicomponent.bpmnviewer.command.AddMarkerCmd;
import com.haulmont.addon.bproc.web.uicomponent.bpmnviewer.command.RemoveMarkerCmd;
import com.haulmont.addon.bproc.web.uicomponent.bpmnviewer.command.SetElementColorCmd;
import com.haulmont.cuba.web.widgets.WebJarResource;
import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.server.EncodeResult;
import com.vaadin.server.JsonCodec;
import com.vaadin.ui.AbstractJavaScriptComponent;
import elemental.json.impl.JreJsonNull;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.function.Consumer;

@JavaScript({“bpmn-viewer-connector.js”})
@StyleSheet({“bpmn-viewer.css”})
@WebJarResource({
“jquery:jquery.min.js”,
“bproc-modeler:bproc-viewer.bundled.js”,
“bproc-modeler:css/diagram-js.css”,
“bproc-modeler:css/bpmn.css”})
public class BpmnViewerJavaScriptComponent extends AbstractJavaScriptComponent {

So this is a place to dig. One of the solutions is to extend this or copy-paste into your implementation and add a button to convert and export into your desired format, taking as an argument the already generated image

Kind regards,
Mladen

#3

Thank you for your reply
I tried doing bpmnViewer.unwrap(BpmnViewerJavaScriptComponent.class) and saw this but I have no idea to go from here.
I color code some elements usint the bpmnViewer set color so this is my preferred way

I had some success getting an image this
ProcessDiagramGenerator processDiagramGenerator = new DefaultProcessDiagramGenerator();
BufferedImage bufferedImage = processDiagramGenerator.generatePngImage(bpmnModel, 1.0);
but the boxes are really small and the lines dont appear.

anyone can shed some light on how to export the image from the viewer?

#5

Hi,
Currently, our components that wrap javascript components used for modeling do not support exporting functionality. I’ve created an issue.

#6

That would be fantastic !!! I have some steps on my diagram highlited that I would love to see on a PDF
Spasibo Spasibo Spasibo