Closed albfan closed 5 years ago
This efectively export to svg, but the result is wrapped in some g
nodes. I need to remove them to be able to see the diagram. (Not sure how to solve it)
this is the result from:
./cli.js test/smal.bpmn:svg
<svg width="100%" height="100%" data-element-id="Process_1"><g class="viewport" transform="matrix(1 0 0 1 0 0)"><g class="layer-base" data-element-id="Process_1"><g class="djs-group"><g class="djs-element djs-shape" data-element-id="Task_0l0q2kz" style="display: block;" transform="matrix(1 0 0 1 206 108)"><g class="djs-visual"><rect x="0" y="0" width="100" height="80" rx="10" ry="10" style="stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;"></rect><text lineHeight="1.2" class="djs-label" style="font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; fill: black;"><tspan x="19.3125" y="43.599999999999994">Single Task</tspan></text></g><rect x="0" y="0" width="100" height="80" class="djs-hit" style="fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;"></rect><rect x="-6" y="-6" width="112" height="92" class="djs-outline" style="fill: none;"></rect></g></g></g></g></svg>
and this is the visible svg:
<svg width="100%" height="100%" data-element-id="Process_1"><g class="djs-visual"><rect x="0" y="0" width="100" height="80" rx="10" ry="10" style="stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;"></rect><text lineHeight="1.2" class="djs-label" style="font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; fill: black;"><tspan x="19.3125" y="43.599999999999994">Single Task</tspan></text></g><rect x="0" y="0" width="100" height="80" class="djs-hit" style="fill: none; stroke-opacity: 0; stroke: white; stroke-width: 15px;"></rect><rect x="-6" y="-6" width="112" height="92" class="djs-outline" style="fill: none;"></rect></svg>
(without the four g
nodes)
We provide the Viewer#saveSVG
API to export a proper vector graphics representation of the diagram.
Could you update your PR to use it?
Oh, will rework this to use the API
Not sure what I need to import:
https://travis-ci.org/bpmn-io/bpmn-to-image/jobs/551808365#L106
You will have to import the BpmnJS
module for using it
import BpmnJS from 'bpmn-js';
Sincebpmn-js
is an ES Module, you will have to bundle the application, as this example reveals. Personally I'd prevent bundling the whole cli application. Instead, maybe you could do the following
BpmnJS#saveSVG
functionality, will be bundled like the example shows and can be normally imported in the index.js
Feel free to shout if you need help there 👍
Closed via https://github.com/bpmn-io/bpmn-to-image/commit/2354512802ccdc66eb38fcc6e25aa614e5650ed2.
Thanks for your contribution :heart_decoration:
Released as v0.4.0
.
Save svg rendered image directly.
This is a tentative PR as it is saving the bpmn xml right now.
I think it needs to find the rendered object in skeleton.html. Something like: