svelte-bpmn

<script>
  import SvelteBpmn from 'svelte-bpmn';

  const diagram = '..'; // import your BPMN 2.0 XML here

  const handleDiagramLoaded = () => {
    console.log('Diagram successfully loaded!');
  };

  const handleDiagramError = (error) => {
    console.log('Diagram import resolved in errors: ', error);
  };

  const handleDiagramWarning = (warnings) => {
    console.log('Diagram import warnings: ', warnings);
  };
</script>

<style>
  .diagram-container {
    height: 700px;
    border: 1px solid grey;
  }
</style>

<div class="diagram-container">
  <SvelteBpmn 
    xml={diagram} 
    onError={handleDiagramError}
    onLoaded={handleDiagramLoaded} 
    onWarning={handleDiagramWarning}
  />
</div>