title: How to export image file using PrimeFaces Diagram
body: <p>I'm using <a href="https://www.primefaces.org/showcase/ui/data/diagram/basic.xhtml" rel="nofollow noreferrer">The Diagram component</a> of PrimeFaces.
  I want to get image (like png) from that component. </p>
  
  <p>How can I do it?</p>
  
  <p>I tried <a href="https://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a> and <a href="https://github.com/canvg/canvg" rel="nofollow noreferrer">canvg</a>, but I can't get same image.
  Also I try <a href="https://github.com/jsplumb/jsPlumb/issues/35#issuecomment-82196174" rel="nofollow noreferrer">https://github.com/jsplumb/jsPlumb/issues/35#issuecomment-82196174</a>, but not good.</p>
  
  <p>My code is below.</p>
  
  <p>DiagramShowView.java</p>
  
  <pre><code>package //omitted;
  
  import // omitted
  import org.primefaces.model.diagram.DiagramModel;
  
  @Named
  @ViewScoped
  public class DiagramShowView implements Serializable {
  
      @Getter
      private DiagramModel flow;
  
      public void init(){
          this.flow = createDiagramModel(); // omitted createDiagramModel() impementation.
      }
  }
  </code></pre>
  
  <p>Diagram.xhtml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:p="http://primefaces.org/ui"&gt;
  &lt;h:head&gt;&lt;/h:head&gt;
  &lt;f:metadata&gt;&lt;f:viewAction action="#{diagramShowView.init()}"/&gt;&lt;/f:metadata&gt;
  &lt;h:body&gt;
      &lt;h:form id="mainForm"&gt;
          &lt;style type="text/css"&gt;
              .ui-diagram-element {
                  border: 0.1em dotted #d4e06b;
                  width: 14em;
                  height: 4em;
                  line-height: 4em;
                  text-align: center;
              }
          &lt;/style&gt;
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-g-6"&gt;
                  &lt;p:diagram value="#{diagramShowView.flow}" style="width:100%;height:500px;" id="flow"
                             styleClass="ui-widget-content" var="el"&gt;
                      &lt;f:facet name="element"&gt;
                          &lt;h:outputText value="#{el}"
                                        style="display:block;margin-top:0.5em;"/&gt;
                      &lt;/f:facet&gt;
                  &lt;/p:diagram&gt;
              &lt;/div&gt;
              &lt;div class="ui-g-6"&gt;
                  &lt;p id="copy"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://canvg.github.io/canvg/demo/v2/canvg.js"/&gt;
          &lt;script type="text/javascript"&gt;
              let el = document.getElementById("mainForm:flow");
              html2canvas(document.getElementById("mainForm:flow"), {
                  width: el.scrollWidth,
                  height: el.scrollHeight
              }).then(function (canvas) {
                  // this code copy from github issue
                  ctx = canvas.getContext('2d');
                  $flows = $('&gt; svg', el);
                  $flows.each(function () {
                      $svg = $(this)
                      offset = $svg.position();
                      svgStr = this.outerHTML;
                      ctx.drawSvg(svgStr, offset.left, offset.top);
                  });
                  $endpoints = $('._jsPlumb_endpoint &gt; svg', el);
                  $endpoints.each(function () {
                      $svg = $(this)
                      offset = $svg.parent().position();
                      svgStr = this.outerHTML;
                      ctx.drawSvg(svgStr, offset.left, offset.top);
                  });
                  // end of copy code.
  
                  document.getElementById("copy").appendChild(canvas);
              });
          &lt;/script&gt;
      &lt;/h:form&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The browser output below.
  The left component is darwn by jsf.
  The right component is used by html2canvas and canvg.js.</p>
  
  <p><a href="https://i.stack.imgur.com/5GZ3c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5GZ3c.png" alt="enter image description here"></a></p>