hpcc-js-wasm/hw-graphviz.html at main · hpcc-systems/hpcc-js-wasm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GraphViz WASM</title>
</head>

<body>
    <h2 id="placeholder_version"></h2>
    <div id="placeholder"></div>
    <script type="module">
        //  Prefer local version (if available)  ---
        const Graphviz = await import("./packages/graphviz/dist/index.js").then(m => m.Graphviz).catch(() => undefined) ??
            await import("https://cdn.jsdelivr.net/npm/@hpcc-js/wasm-graphviz/dist/index.js").then(m => m.Graphviz);

        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();
        let div = document.getElementById("placeholder_version");
        div.innerText = `Version: ${graphviz.version()}`;
        div = document.getElementById("placeholder");
        div.innerHTML = graphviz.layout(dot, "svg", "dot");
    </script>

</body>

</html>