I know that in the deprecated Camunda Eclipse plugin it automatically produces a png file. BPMN.IO must automatically render the BPMN, so this functionality is definitely buried in there somewhere.
As for automatic layout, I’m not exactly sure what you mean. If you examine the XML associated with the process, you will see a section like the following:
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="173" y="102" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="IntermediateThrowEvent_0vbg2qs_di" bpmnElement="IntermediateThrowEvent_0vbg2qs">
<dc:Bounds x="392" y="254" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="410" y="290" width="0" height="0" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
Without this code, how would the display component know where to put each element. What is the “right” way to do that? It’s rather arbitrary, though there are layout and routing algorithms out there, their efficacy is pretty subjective. What looks good to me may not look good to someone else. Moreover layout and routing is a fairly complex thing to do as there are an arbitrary number of elements in a process and thus you can’t predict the performance of your algorithm.
If you’re using Camunda Modeler, you can output the file in 3 different graphic formats. Because modeler uses BPMN.IO, the ability to do this dynamically is in there somewhere.