Skip to content

bpmn-io/svelte-bpmn

Repository files navigation

svelte-bpmn

CI

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

License

MIT

About

Embed BPMN 2.0 diagrams in your Svelte app

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks