diff --git a/packages/viewer/src/components/GraphViz/GraphViz.svelte b/packages/viewer/src/components/GraphViz/GraphViz.svelte
index 7ac8d72c..5625b156 100644
--- a/packages/viewer/src/components/GraphViz/GraphViz.svelte
+++ b/packages/viewer/src/components/GraphViz/GraphViz.svelte
@@ -4,10 +4,11 @@
   import * as d3 from 'd3'
   import * as graphviz from 'd3-graphviz'
   export let dot = 'digraph  {a -> b}'
-  let graphDiv : HTMLElement
+  let graphDiv: HTMLElement
   onMount(() => {
     d3.select(graphDiv).graphviz().renderDot(dot)
   })
+  $: if (graphDiv) { d3.select(graphDiv).graphviz().renderDot(dot) }
 </script>
 
 <div bind:this={graphDiv} style="text-align: center;" />
diff --git a/packages/viewer/src/routes/(app)/dev/graph/+page.svelte b/packages/viewer/src/routes/(app)/dev/graph/+page.svelte
new file mode 100644
index 00000000..7082a3fc
--- /dev/null
+++ b/packages/viewer/src/routes/(app)/dev/graph/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Title from '@/components/Shared/Title.svelte'
+  import { GraphViz } from '@/components/GraphViz'
+  let dot = 'digraph  {a -> b}'
+</script>
+
+<Title title="GraphViz" />
+
+<input type="text" bind:value={dot} />
+
+<GraphViz {dot} />