Skip to main content

<DiagramProvider/>

This is a context provider that enables you to use various other components alongside a DiagramComponent without having to explicitly connect them up.

Usage​

<script lang="ts">
	import {DiagramComponent, DiagramComponentOptions, DiagramProvider, DiagramPaletteComponent} from "@visuallyjs/browser-ui-svelte"
	import {FLOWCHART_SHAPES} from "@visuallyjs/browser-ui";

	const options: DiagramComponentOptions = {
		shapes: {
			sets: {FLOWCHART_SHAPES}
		}
	}
	const data = {
		...
	}
</script>
<DiagramProvider>
	<DiagramComponent options={options} data={data}/>
    <div>
		<DiagramPaletteComponent/>
    </div>
</DiagramProvider>

The list of components that are diagram context aware is: