I have a bpmn diagram with different icons for artifacts and data stores. Here's an example.
When I visualize this using the vite.js example in the examples repo I get this.
Here is the code I used to generate using vite
import './style.css';
// this is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
// for other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
import * as diagrams from '../../diagrams';
import { BpmnVisualization, FitType, getVersion, mxgraph } from 'bpmn-visualization';
for (const [index, diagram] of Object.entries(diagrams)) {
const link = document.createElement('a');
link.textContent = `Load diagram: ${index}`;
link.href = '#';
link.addEventListener('click', (event) => {
event.preventDefault();
//document.body.innerHTML = '';
const bpmnVisualization = new BpmnVisualization({
container: "bpmn-container",
});
// Load the BPMN diagram when the hyperlink is clicked
bpmnVisualization.load(diagram, { fit: { type: FitType.Center, margin: 10}});
// Clear the body, excluding the container
const elementsToClear = document.body.querySelectorAll('a');
elementsToClear.forEach(element => element.remove());
// Create a hyperlink to go back to the main page
const backLink = document.createElement('a');
backLink.textContent = 'Go Back to Main Page';
backLink.href = '#';
backLink.addEventListener('click', (event) => {
event.preventDefault();
location.reload();
});
event.preventDefault();
// Add the back hyperlink to the page
document.body.appendChild(backLink);
});
// Add the hyperlink to the page
document.body.appendChild(link);
// Add a newline after the hyperlink
const br = document.createElement('br');
document.body.appendChild(br);
};
To Reproduce
Steps to reproduce the behavior:
1) npm start
2) navigate to page
BPMN diagram that reproduces the problem:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots or videos to help explain your problem.
Describe the bug
I have a bpmn diagram with different icons for artifacts and data stores. Here's an example.
When I visualize this using the vite.js example in the examples repo I get this.
Here is the code I used to generate using vite
To Reproduce
Steps to reproduce the behavior: 1) npm start 2) navigate to page
BPMN diagram that reproduces the problem:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots or videos to help explain your problem.
Environment
Additional context
Add any other context about the problem here.