svelte-bpmn

Embed BPMN 2.0 diagrams in your Svelte app - powered by bpmn-js.

Installation

npm install --save svelte-bpmn

Usage

<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>

Checkout the example to get further information.

Additional Resources

• bpmn-js Examples
• bpmn-js Viewer Documentation, Example
• bpmn-js Modeler Documentation, Example

License

MIT