web/src/components/GraphViz.vue

<template>
    <div ref="container" class="graph-viz"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Sigma from 'sigma';
import * as graphology from 'graphology';
const container = ref(null);
onMounted(() => {
  const sigmaInstance = new Sigma(graph, container.value);
  console.log(props.modelValue);
});
const props = defineProps(['modelValue']);
const graph = new graphology.Graph();
graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
graph.addEdge("1", "2", { size: 5, color: "purple" });
</script>