Export to svg - Githubissues

albfan commented 5 years ago

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:

try {
  const url = await page.evaluate(() => document.querySelect('#svg').src)
  const content = await getImageContent(page, url);
  const contentBuffer = Buffer.from(content, 'base64');
  fs.writeFileSync('logo-extracted.svg', contentBuffer, 'base64');
} catch (e) {
  console.log(e);
}

albfan commented 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)

nikku commented 5 years ago

We provide the Viewer#saveSVG API to export a proper vector graphics representation of the diagram.

Could you update your PR to use it?

nikku commented 5 years ago

Cf. this post on the underlying BPMN toolkits export functionality

albfan commented 5 years ago

Oh, will rework this to use the API

albfan commented 5 years ago

Not sure what I need to import:

https://travis-ci.org/bpmn-io/bpmn-to-image/jobs/551808365#L106

pinussilvestrus commented 5 years ago

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

Encapsulating the svg rendering in an additional module inside the application, which uses 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 👍

nikku commented 5 years ago

Closed via https://github.com/bpmn-io/bpmn-to-image/commit/2354512802ccdc66eb38fcc6e25aa614e5650ed2.

Thanks for your contribution :heart_decoration:

nikku commented 5 years ago

Released as v0.4.0.

bpmn-io / bpmn-to-image

Export to svg #9