plot.html

<!DOCTYPE html>
<html>
<head>
    <title>Automaton Visualization</title>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style type="text/css">
        #mynetwork { width: 800px; height: 600px; border: 1px solid lightgray; }
    </style>
</head>
<body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
        fetch('automaton_data.json')
            .then(response => response.json())
            .then(data => {
                var nodes = new vis.DataSet(data.nodes);
                var edges = new vis.DataSet(data.edges.map(edge => ({ ...edge, arrows: 'to' })));

                var container = document.getElementById('mynetwork');
                var network = new vis.Network(container, { nodes, edges }, {});
            });
    </script>
</body>
</html>