https://github.com/bpmn-io/svelte-bpmn

Embed BPMN 2.0 diagrams in your Svelte app
https://github.com/bpmn-io/svelte-bpmn

bpmn bpmn-js svelte

Last synced: 3 months ago
JSON representation

Embed BPMN 2.0 diagrams in your Svelte app

• Host: GitHub
• URL: https://github.com/bpmn-io/svelte-bpmn
• Owner: bpmn-io
• License: mit
• Created: 2020-05-02T11:06:53.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-07-30T12:17:45.000Z (over 3 years ago)
• Last Synced: 2024-07-03T23:26:22.661Z (4 months ago)
• Topics: bpmn, bpmn-js, svelte
• Language: Svelte
• Homepage:
• Size: 866 KB
• Stars: 7
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - svelte-bpmn - Render BPMN 2.0 diagrams in a [Svelte](https://svelte.dev) application (Integrations)

README

        
# svelte-bpmn

[![CI](https://github.com/bpmn-io/svelte-bpmn/workflows/CI/badge.svg)](https://github.com/bpmn-io/svelte-bpmn/actions?query=workflow%3ACI)

Embed BPMN 2.0 diagrams in your [Svelte](https://svelte.dev/) app - powered by [bpmn-js](https://github.com/bpmn-io/bpmn-js).

## Installation

```sh

npm install --save svelte-bpmn

```

## Usage

```svelte

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

  };

  .diagram-container {

    height: 700px;

    border: 1px solid grey;

  }



  



```


Checkout the [example](./example) to get further information.

## Additional Resources

* [bpmn-js Examples](https://github.com/bpmn-io/bpmn-js-examples)

* [bpmn-js Viewer Documentation](https://github.com/bpmn-io/bpmn-js/blob/master/lib/Viewer.js), [Example](https://github.com/bpmn-io/bpmn-js-examples/blob/master/starter/viewer.html)

* [bpmn-js Modeler Documentation](https://github.com/bpmn-io/bpmn-js/blob/master/lib/Modeler.js), [Example](https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler)

## License

MIT