Utensil's Zettelkasten-style forest of evergreen notes on math and tech.
utensil.tngl.sh/forest/
Add: test graphviz
+174
-53
+25
bun/graphviz.js
+25
bun/graphviz.js
···
1
+
2
+
// bun add @hpcc-js/wasm
3
+
import { Graphviz } from "@hpcc-js/wasm/graphviz"
4
+
5
+
const graphviz = await Graphviz.load()
6
+
7
+
const possible_layouts = [
8
+
'circo', 'dot', 'fdp', 'sfdp', 'neato', 'osage', 'patchwork', 'twopi' // , 'nop', 'nop2'
9
+
]
10
+
11
+
const graphviz_roots = document.querySelectorAll('.graphviz-root.loading')
12
+
for (const graphviz_root of graphviz_roots) {
13
+
const graphviz_source = graphviz_root.textContent
14
+
let layout = graphviz_root.getAttribute('data-layout')
15
+
if (!possible_layouts.includes(layout)) {
16
+
// randomly choose a layout
17
+
layout = possible_layouts[Math.floor(Math.random() * possible_layouts.length)]
18
+
console.debug('randomly choose a layout:', layout)
19
+
}
20
+
21
+
graphviz_root.innerHTML = ''
22
+
const graphviz_svg = graphviz.layout(graphviz_source, 'svg', layout)
23
+
graphviz_root.innerHTML = graphviz_svg
24
+
graphviz_root.classList.remove('loading')
25
+
}
+1
-1
bun/penrose.js
+1
-1
bun/penrose.js
+15
-51
bun/uts-ondemand.js
+15
-51
bun/uts-ondemand.js
···
6
6
document.head.appendChild(script)
7
7
}
8
8
9
-
document.addEventListener('DOMContentLoaded', async () => {
10
-
const markdownit_tags = document.querySelectorAll('.markdownit')
11
-
12
-
if (markdownit_tags.length !== 0) {
13
-
load_script('markdownit.js')
14
-
}
15
-
16
-
const typst_tags = document.querySelectorAll('.typst-root')
17
-
18
-
if (typst_tags.length !== 0) {
19
-
load_script('typst.js')
20
-
}
21
-
22
-
const pikchr_tags = document.querySelectorAll('.pikchr-root')
23
-
24
-
if (pikchr_tags.length !== 0) {
25
-
load_script('pikchr.js')
26
-
}
27
-
28
-
const code_tags = document.querySelectorAll('article code.highlight')
29
-
30
-
if (code_tags.length !== 0) {
31
-
load_script('shiki.js')
32
-
}
33
-
34
-
const embeded_shaders = document.querySelectorAll('.embeded-shader')
35
-
36
-
if (embeded_shaders.length !== 0) {
37
-
load_script('shader.js')
38
-
}
39
-
40
-
const embeded_shadertoys = document.querySelectorAll('.embeded-shadertoy')
41
-
42
-
if (embeded_shadertoys.length !== 0) {
43
-
load_script('shadertoy.js')
44
-
}
9
+
const register = (selector, script) => {
10
+
const tags = document.querySelectorAll(selector)
45
11
46
-
const embeded_usegpus = document.querySelectorAll('.usegpu')
47
-
48
-
if (embeded_usegpus.length !== 0) {
49
-
load_script('usegpu.js')
12
+
if (tags.length !== 0) {
13
+
load_script(script)
50
14
}
15
+
}
51
16
52
-
const embeded_wgputoys = document.querySelectorAll('.wgputoy')
53
-
54
-
if (embeded_wgputoys.length !== 0) {
55
-
load_script('wgputoy.js')
56
-
}
57
-
58
-
// load_script('uwal.js');
59
-
60
-
// load_script('hello-egglog.js');
61
-
62
-
// load_script('hello-ginac.js');
17
+
document.addEventListener('DOMContentLoaded', async () => {
18
+
register('.markdownit', 'markdownit.js')
19
+
register('.typst-root', 'typst.js')
20
+
register('.pikchr-root', 'pikchr.js')
21
+
register('article code.highlight', 'shiki.js')
22
+
register('.embeded-shader', 'shader.js')
23
+
register('.embeded-shadertoy', 'shadertoy.js')
24
+
register('.usegpu', 'usegpu.js')
25
+
register('.wgputoy', 'wgputoy.js')
26
+
register('.graphviz-root', 'graphviz.js')
63
27
64
28
const hostname = window.location.hostname
65
29
+1
package.json
+1
package.json
+5
-1
trees/macros.tree
+5
-1
trees/macros.tree
···
575
575
\<html:div>[class]{pikchr-root loading}{\body}
576
576
}
577
577
578
+
\def\graphviz[layout][body]{
579
+
\<html:div>[class]{graphviz-root loading}[data-layout]{\layout}{\body}
580
+
}
581
+
578
582
% \def\cref[addr]{\<html:span>[class]{cref}{[\addr](\addr)}} % this is not required as XSLT can handle local links with or without taxons like cleveref automatically
579
583
580
584
% Some Math symbols that are common in all topics
···
584
588
\def\NN{\mathbb N}
585
589
\def\QQ{\mathbb Q}
586
590
\def\RR{\mathbb R}
587
-
\def\ZZ{\mathbb Z}
591
+
\def\ZZ{\mathbb Z}
+127
trees/uts-001L.tree
+127
trees/uts-001L.tree
···
1
+
\import{macros}
2
+
% clifford hopf spin tt ag math draft tech exp notes
3
+
\tag{tech}
4
+
\tag{exp}
5
+
6
+
\note{test graphviz}{
7
+
\p{Adapted from \link{https://utensil.github.io/lean-ga/blueprint/dep_graph_section_1.html}:
8
+
}
9
+
10
+
\graphviz{dot}\verb>>>|
11
+
12
+
strict digraph "" { graph [bgcolor=transparent]; node [label="\N", penwidth=1.8 ]; edge [arrowhead=vee]; QuadraticForm [color=green, fillcolor="#B0ECA3", label=QuadraticForm, shape=box, style=filled]; LinearMap [color=green, fillcolor="#B0ECA3", label=LinearMap, shape=box, style=filled]; Dual [color=green, fillcolor="#B0ECA3", label=Dual, shape=box, style=filled]; LinearMap -> Dual [style=dashed]; TensorAlgebra [color=green, fillcolor="#B0ECA3", label=TensorAlgebra, shape=box, style=filled]; LinearMap -> TensorAlgebra [style=dashed]; Group [color=green, fillcolor="#B0ECA3", label=Group, shape=box, style=filled]; Ring [color=green, fillcolor="#B0ECA3", label=Ring, shape=box, style=filled]; Group -> Ring [style=dashed]; Module [color=green, fillcolor="#B0ECA3", label=Module, shape=box, style=filled]; Ring -> Module [style=dashed]; DivisionRing [color=green, fillcolor="#B0ECA3", label=DivisionRing, shape=box, style=filled]; Ring -> DivisionRing [style=dashed]; RingHom [color=green, fillcolor="#B0ECA3", label=RingHom, shape=box, style=filled]; Ring -> RingHom [style=dashed]; Module -> LinearMap [style=dashed]; VectorSpace [color=green, fillcolor="#B0ECA3", label=VectorSpace, shape=box, style=filled]; Module -> VectorSpace [style=dashed]; Algebra [color=green, fillcolor="#B0ECA3", label=Algebra, shape=box, style=filled]; Module -> Algebra [style=dashed]; RingQuot [color=green, fillcolor="#B0ECA3", label=RingQuot, shape=box, style=filled]; Module -> RingQuot [style=dashed]; BilinForm [color=green, fillcolor="#B0ECA3", label=BilinForm, shape=box, style=filled]; Module -> BilinForm [style=dashed]; FreeAlgebra [color=green, fillcolor="#B0ECA3", label=FreeAlgebra, shape=box, style=filled]; Algebra -> FreeAlgebra [style=dashed]; RingQuot -> FreeAlgebra [style=dashed]; BilinForm -> QuadraticForm [style=dashed]; DivisionRing -> VectorSpace [style=dashed]; RingHom -> LinearMap [style=dashed]; RingHom -> Algebra [style=dashed]; RingHom -> RingQuot [style=dashed]; AlgHom [color=green, fillcolor="#B0ECA3", label=AlgHom, shape=box, style=filled]; RingHom -> AlgHom [style=dashed]; FreeAlgebra -> TensorAlgebra [style=dashed]; Monoid [color=green, fillcolor="#B0ECA3", label=Monoid, shape=box, style=filled]; Monoid -> Ring [style=dashed];}
13
+
14
+
>>>
15
+
16
+
\p{Adapted from \link{https://viz-js.com/}:
17
+
}
18
+
19
+
\graphviz{dot}\verb>>>|
20
+
digraph {
21
+
graph [rankdir=LR];
22
+
node [shape=record];
23
+
0 [label="0 | [• S, $]\n[S → • a S b, $]\n[S → •, $]"];
24
+
1 [label="1 | [S •, $]"];
25
+
2 [label="2 | [S → a • S b, $]\n[S → • a S b, b]\n[S → •, b]"];
26
+
3 [label="3 | [S → a S • b, $]"];
27
+
4 [label="4 | [S → a • S b, b]\n[S → • a S b, b]\n[S → •, b]"];
28
+
5 [label="5 | [S → a S b •, $]"];
29
+
6 [label="6 | [S → a S • b, b]"];
30
+
7 [label="7 | [S → a S b •, b]"];
31
+
0 -> 1 [label=S];
32
+
0 -> 2 [label=a];
33
+
2 -> 3 [label=S];
34
+
2 -> 4 [label=a];
35
+
3 -> 5 [label=b];
36
+
4 -> 6 [label=S];
37
+
4 -> 4 [label=a];
38
+
6 -> 7 [label=b];
39
+
}
40
+
>>>
41
+
42
+
\p{Adapted from \link{https://renenyffenegger.ch/notes/tools/Graphviz/examples/edge-crossing}:
43
+
}
44
+
\graphviz{dot}\verb>>>|
45
+
digraph G {
46
+
47
+
node [shape=plaintext fontname="Arial"];
48
+
49
+
0 -> 1 [arrowhead=none];
50
+
1 -> 2 [arrowhead=none];
51
+
2 -> 7 [arrowhead=none];
52
+
7 -> 8 [arrowhead=none];
53
+
8 -> 9 [arrowhead=none];
54
+
8 -> 10 [arrowhead=none];
55
+
9 -> 10 [color="#aaaaaa" constraint=false];
56
+
10 -> 11 [arrowhead=none];
57
+
10 -> 12 [arrowhead=none];
58
+
11 -> 12 [color="#aaaaaa" constraint=false];
59
+
7 -> 13 [arrowhead=none];
60
+
8 -> 13 [color="#aaaaaa" constraint=false];
61
+
13 -> 14 [arrowhead=none];
62
+
7 -> 15 [arrowhead=none];
63
+
13 -> 15 [color="#aaaaaa" constraint=false];
64
+
15 -> 16 [arrowhead=none];
65
+
15 -> 17 [arrowhead=none];
66
+
16 -> 17 [color="#aaaaaa" constraint=false];
67
+
2 -> 3 [arrowhead=none];
68
+
7 -> 3 [color="#aaaaaa" constraint=false];
69
+
3 -> 4 [arrowhead=none];
70
+
2 -> 5 [arrowhead=none];
71
+
3 -> 5 [color="#aaaaaa" constraint=false];
72
+
5 -> 6 [arrowhead=none];
73
+
2 -> 18 [arrowhead=none];
74
+
5 -> 18 [color="#aaaaaa" constraint=false];
75
+
18 -> 19 [arrowhead=none];
76
+
19 -> 20 [arrowhead=none];
77
+
19 -> 21 [arrowhead=none];
78
+
20 -> 21 [color="#aaaaaa" constraint=false];
79
+
18 -> 22 [arrowhead=none];
80
+
19 -> 22 [color="#aaaaaa" constraint=false];
81
+
}
82
+
>>>
83
+
84
+
\p{The same, but randomly choose a layout from one of 'circo', 'dot', 'fdp', 'sfdp', 'neato', 'osage', 'patchwork', 'twopi':
85
+
}
86
+
87
+
\graphviz{random}\verb>>>|
88
+
digraph G {
89
+
90
+
node [shape=plaintext fontname="Arial"];
91
+
92
+
0 -> 1 [arrowhead=none];
93
+
1 -> 2 [arrowhead=none];
94
+
2 -> 7 [arrowhead=none];
95
+
7 -> 8 [arrowhead=none];
96
+
8 -> 9 [arrowhead=none];
97
+
8 -> 10 [arrowhead=none];
98
+
9 -> 10 [color="#aaaaaa" constraint=false];
99
+
10 -> 11 [arrowhead=none];
100
+
10 -> 12 [arrowhead=none];
101
+
11 -> 12 [color="#aaaaaa" constraint=false];
102
+
7 -> 13 [arrowhead=none];
103
+
8 -> 13 [color="#aaaaaa" constraint=false];
104
+
13 -> 14 [arrowhead=none];
105
+
7 -> 15 [arrowhead=none];
106
+
13 -> 15 [color="#aaaaaa" constraint=false];
107
+
15 -> 16 [arrowhead=none];
108
+
15 -> 17 [arrowhead=none];
109
+
16 -> 17 [color="#aaaaaa" constraint=false];
110
+
2 -> 3 [arrowhead=none];
111
+
7 -> 3 [color="#aaaaaa" constraint=false];
112
+
3 -> 4 [arrowhead=none];
113
+
2 -> 5 [arrowhead=none];
114
+
3 -> 5 [color="#aaaaaa" constraint=false];
115
+
5 -> 6 [arrowhead=none];
116
+
2 -> 18 [arrowhead=none];
117
+
5 -> 18 [color="#aaaaaa" constraint=false];
118
+
18 -> 19 [arrowhead=none];
119
+
19 -> 20 [arrowhead=none];
120
+
19 -> 21 [arrowhead=none];
121
+
20 -> 21 [color="#aaaaaa" constraint=false];
122
+
18 -> 22 [arrowhead=none];
123
+
19 -> 22 [color="#aaaaaa" constraint=false];
124
+
}
125
+
>>>
126
+
127
+
}