Skip to content

Commit 870ffbf

Browse files
kamiazyakamiazya
committed
Add example project
1 parent 8526ec2 commit 870ffbf

File tree

6 files changed

+680
-0
lines changed

6 files changed

+680
-0
lines changed

‎examples/preview/diagram.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { digraph } from 'ts-graphviz';
2+
3+
export default digraph('state_machine', (g) => {
4+
g.set('newrank', true);
5+
g.node({ shape: 'circle' });
6+
7+
g.edge(['Model', 'DOT'], { label: 'toDot', constraint: false });
8+
g.edge(['AST', 'DOT'], { label: 'stringify' });
9+
g.edge(['DOT', 'AST'], { label: 'parse' });
10+
g.edge(['Model', 'AST'], { label: 'fromModel' });
11+
g.edge(['AST', 'Model'], { label: 'toModel' });
12+
g.edge(['DOT', 'Model'], { label: 'fromDot', constraint: false });
13+
});

‎examples/preview/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Preview ts-graphviz diagram</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
font-family: 'Arial', sans-serif;
12+
}
13+
main {
14+
display: flex;
15+
flex-direction: row;
16+
height: 100vh;
17+
}
18+
pre {
19+
flex: 1;
20+
overflow: auto;
21+
padding: 0;
22+
margin: 0;
23+
}
24+
code {
25+
display: block;
26+
padding: 1em;
27+
margin: 0;
28+
white-space: pre-wrap;
29+
}
30+
#graph {
31+
flex: 1;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<main>
40+
<pre><code id="code" class="language-dot" ></code></pre>
41+
<div id="graph"></div>
42+
</main>
43+
<script type="module" src="./main.ts"></script>
44+
</body>
45+
</html>

‎examples/preview/main.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Graphviz } from "@hpcc-js/wasm-graphviz";
2+
import { highlightElement } from 'prismjs';
3+
import "prismjs/components/prism-dot";
4+
import 'prismjs/themes/prism-okaidia.css';
5+
import { RootGraph, toDot } from 'ts-graphviz';
6+
7+
const graphElement = document.getElementById("graph")!;
8+
const codeElement = document.getElementById("code")!;
9+
10+
import('./diagram.js').then(async (module) => {
11+
const graphviz = await Graphviz.load();
12+
13+
for (const value of Object.values(module)) {
14+
if (value instanceof RootGraph) {
15+
const dot = toDot(value);
16+
codeElement.setHTMLUnsafe(dot);
17+
highlightElement(codeElement);
18+
19+
const svg = graphviz.dot(dot);
20+
// console.log(svg);
21+
const blob = new Blob([svg], { type: 'image/svg+xml' });
22+
const url = URL.createObjectURL(blob);
23+
const img = new Image();
24+
img.src = url;
25+
graphElement.appendChild(img);
26+
break;
27+
}
28+
}
29+
30+
});

‎examples/preview/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "preview",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite dev"
7+
},
8+
"license": "ISC",
9+
"dependencies": {
10+
"@hpcc-js/wasm-graphviz": "^1.6.1",
11+
"prismjs": "^1.29.0",
12+
"ts-graphviz": "^2.1.4"
13+
},
14+
"devDependencies": {
15+
"typescript": "^5.6.3",
16+
"vite": "^5.4.9"
17+
}
18+
}

0 commit comments

Comments
 (0)