Skip to content

Commit c042ba9

Browse files
GordonSmithGordonSmith
committed
fix(readme): Update readme sample html to working version
Signed-off-by: Gordon Smith <[email protected]>
1 parent 1dbc7fc commit c042ba9

File tree

2 files changed

+60
-45
lines changed

2 files changed

+60
-45
lines changed

‎README.md‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -69,51 +69,60 @@ See [Layout manual pages](https://www.graphviz.org/documentation/) for more info
6969

7070
## Quick Example (CDN hosting courtesy of [unpkg.com](https://unpkg.com))
7171
```html
72+
<!DOCTYPE html>
7273
<html>
73-
<head>
74-
<title>GraphViz</title>
75-
<script src="https://unpkg.com/@hpcc-js/wasm"></script>
76-
</head>
77-
<body>
78-
<div id="placeholder"></div>
79-
<script>
80-
const dot = `
81-
digraph G {
82-
node [shape=rect];
83-
84-
subgraph cluster_0 {
85-
style=filled;
86-
color=lightgrey;
87-
node [style=filled,color=white];
88-
a0 -> a1 -> a2 -> a3;
89-
label = "process #1";
90-
}
91-
92-
subgraph cluster_1 {
93-
node [style=filled];
94-
b0 -> b1 -> b2 -> b3;
95-
label = "process #2";
96-
color=blue
97-
}
98-
99-
start -> a0;
100-
start -> b0;
101-
a1 -> b3;
102-
b2 -> a3;
103-
a3 -> a0;
104-
a3 -> end;
105-
b3 -> end;
106-
107-
start [shape=Mdiamond];
108-
end [shape=Msquare];
74+
75+
<head>
76+
<meta charset="UTF-8">
77+
<title>GraphViz WASM</title>
78+
<script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js"></script>
79+
<script>
80+
var hpccWasm = window["@hpcc-js/wasm"];
81+
</script>
82+
</head>
83+
84+
<body>
85+
<div id="placeholder"></div>
86+
<script>
87+
const dot = `
88+
digraph G {
89+
node [shape=rect];
90+
91+
subgraph cluster_0 {
92+
style=filled;
93+
color=lightgrey;
94+
node [style=filled,color=white];
95+
a0 -> a1 -> a2 -> a3;
96+
label = "process #1";
97+
}
98+
99+
subgraph cluster_1 {
100+
node [style=filled];
101+
b0 -> b1 -> b2 -> b3;
102+
label = "process #2";
103+
color=blue
109104
}
110-
`;
111-
// wasm file will be loaded "on demand"
112-
window["@hpcc-js/wasm"].graphviz.layout(dot, "svg", "dot").then(svg => {
113-
const div = document.getElementByID("placholder");
114-
div.innerHTML = svg;
115-
});
116-
</script>
117-
</body>
105+
106+
start -> a0;
107+
start -> b0;
108+
a1 -> b3;
109+
b2 -> a3;
110+
a3 -> a0;
111+
a3 -> end;
112+
b3 -> end;
113+
114+
start [shape=Mdiamond];
115+
end [shape=Msquare];
116+
}
117+
`;
118+
119+
hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
120+
const div = document.getElementById("placeholder");
121+
div.innerHTML = svg;
122+
});
123+
</script>
124+
125+
</body>
126+
118127
</html>
119128
```

‎index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
<meta charset="UTF-8">
66
<title>GraphViz WASM</title>
77
<script src="./dist/index.js"></script>
8+
<!--
9+
<script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js"></script>
10+
<script src="./dist/index.js"></script>
11+
-->
12+
<script>
13+
var hpccWasm = window["@hpcc-js/wasm"];
14+
</script>
815
</head>
916

1017
<body>
@@ -42,7 +49,6 @@
4249
}
4350
`;
4451

45-
var hpccWasm = window["@hpcc-js/wasm"];
4652
hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
4753
const div = document.getElementById("placeholder");
4854
div.innerHTML = svg;

0 commit comments

Comments
 (0)