Using GoJS with Svelte

If you are new to GoJS, it may be helpful to first visit the Getting Started Tutorial.

Svelte requires almost no special considerations for use with GoJS. In your project, install GoJS via npm or yarn:

And you can use it in a Svelte app. GoJS Diagrams require a DIV, so you should initialize them within onMount to ensure the DOM is ready. An example:

  <!-- +page.svelte -->
  <script lang="ts">
    import * as go from 'gojs';
    import { onMount } from 'svelte';
    let myDiagram;

    onMount(() => {
      myDiagram = new go.Diagram('myDiagramID');
      // Set up the rest of the diagram:
      myDiagram.model = new go.Model([ { key: 'Alpha' } ])
    });
  </script>

  <div id="myDiagramID" style="width: 500px; height: 500px;" />

Svelte discourages referencing DOM Ids, so you can also reference the DIV directly with Svelte's bind:this attribute:

  <!-- +page.svelte -->
  <script lang="ts">
    import * as go from 'gojs';
    import { onMount } from 'svelte';
    let myDiagram;
    let diagramDiv: HTMLDivElement;

    onMount(() => {
      myDiagram = new go.Diagram(diagramDiv);
      // Set up the rest of the diagram:
      myDiagram.model = new go.Model([ { key: 'Alpha' } ])
    });
  </script>

  <div bind:this={diagramDiv}  style="width: 500px; height: 500px;" />