hw-graphviz.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GraphViz WASM</title>
</head>

<body>
    <div id="placeholder"></div>
    <script type="module">
        //  Prefer local version (if available)  ---
        const GraphvizLocal = await import("./dist/index.js").then(m => m.Graphviz).catch(() => undefined);
        import { Graphviz as GraphvizExternal } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";

        const Graphviz = GraphvizLocal ?? GraphvizExternal;

        const dot = `
            digraph G {
                node [shape=rect];

                subgraph cluster_0 {
                    style=filled;
                    color=lightgrey;
                    node [style=filled,color=white];
                    a0 -> a1 -> a2 -> a3;
                    label = "Hello";
                }

                subgraph cluster_1 {
                    node [style=filled];
                    b0 -> b1 -> b2 -> b3;
                    label = "World";
                    color=blue
                }

                start -> a0;
                start -> b0;
                a1 -> b3;
                b2 -> a3;
                a3 -> a0;
                a3 -> end;
                b3 -> end;

                start [shape=Mdiamond];
                end [shape=Msquare];
            }
        `;

        const graphviz = await Graphviz.load();
        const div = document.getElementById("placeholder");
        div.innerHTML = graphviz.layout(dot, "svg", "dot");
    </script>

</body>

</html>