Skip to content

Commit 28faef2

Browse files
lukasbindreiterlukasbindreiter
authored
Use d2 style classes to make diagrams for docs easier to maintain (#102)
* Use d2 style classes to make diagrams for docs easier to maintain * Fix process news
1 parent 729a6a2 commit 28faef2

28 files changed

+1733
-1978
lines changed

‎assets/workflows/diagrams/custom-display-names.d2‎

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,26 @@
1-
vars: {
2-
d2-config: {
3-
layout-engine: dagre
4-
theme-id: 102
5-
sketch: true
6-
pad: 10
7-
}
8-
}
9-
10-
style.fill: "#FCF9FA"
11-
style.stroke: "#170206"
121
direction: down
132

14-
title: {
3+
title: {
154
label: custom-display-names
16-
near: top-center
17-
shape: text
18-
style.font-size: 30
19-
style.font-color: "#170206"
5+
class: diagram-title
206
}
7+
218
root-task: {
229
label: "Root(3)"
23-
style.fill: "#F0FFF0"
24-
style.stroke: "#3F4B40"
25-
style.font-color: "#000000"
10+
class: computed
2611
}
2712
leaf0: {
2813
label: "Leaf Nr. 0"
29-
style.fill: "#F0FFF0"
30-
style.stroke: "#3F4B40"
31-
style.font-color: "#000000"
14+
class: computed
3215
}
33-
root-task -> leaf0: {style.stroke: "#170206"}
16+
root-task -> leaf0: {class: subtask-edge}
3417
leaf1: {
3518
label: "Leaf Nr. 1"
36-
style.fill: "#F0FFF0"
37-
style.stroke: "#3F4B40"
38-
style.font-color: "#000000"
19+
class: computed
3920
}
40-
root-task -> leaf1: {style.stroke: "#170206"}
21+
root-task -> leaf1: {class: subtask-edge}
4122
leaf2: {
4223
label: "Leaf Nr. 2"
43-
style.fill: "#F0FFF0"
44-
style.stroke: "#3F4B40"
45-
style.font-color: "#000000"
24+
class: computed
4625
}
47-
root-task -> leaf2: {style.stroke: "#170206"}
26+
root-task -> leaf2: {class: subtask-edge}

‎assets/workflows/diagrams/download-dog-images-recursive.d2‎

Lines changed: 30 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,76 @@
1-
vars: {
2-
d2-config: {
3-
layout-engine: dagre
4-
theme-id: 102
5-
sketch: true
6-
pad: 10
7-
}
8-
}
9-
10-
style.fill: "#FCF9FA"
111
direction: down
122

13-
title: {
3+
title: {
144
label: download-dog-images-recursive
15-
near: top-center
16-
shape: text
17-
style.font-size: 30
18-
style.font-color: "#170206"
5+
class: diagram-title
196
}
7+
208
01916ed6-dad9-69de-e2b9-498bfd4063ec: {
219
label: "DownloadRandomDogImages"
22-
style.fill: "#F0FFF0"
23-
style.stroke: "#3F4B40"
24-
style.font-color: "#000000"
10+
class: computed
2511
}
2612
01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {
2713
label: "DownloadRandomDogImages"
28-
style.fill: "#F0FFF0"
29-
style.stroke: "#3F4B40"
30-
style.font-color: "#000000"
14+
class: computed
3115
}
32-
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {style.stroke: "#170206"}
16+
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {class: subtask-edge}
3317
01916ed6-f486-0ecc-b38b-f6227ff00a64: {
3418
label: "DownloadImage"
35-
style.fill: "#F0FFF0"
36-
style.stroke: "#3F4B40"
37-
style.font-color: "#000000"
19+
class: computed
3820
}
39-
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-0ecc-b38b-f6227ff00a64: {style.stroke: "#170206"}
21+
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-0ecc-b38b-f6227ff00a64: {class: subtask-edge}
4022
01916ed6-f486-7440-7137-8eff4418bb33: {
4123
label: "DownloadImage"
42-
style.fill: "#F0FFF0"
43-
style.stroke: "#3F4B40"
44-
style.font-color: "#000000"
24+
class: computed
4525
}
46-
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-7440-7137-8eff4418bb33: {style.stroke: "#170206"}
26+
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-7440-7137-8eff4418bb33: {class: subtask-edge}
4727
01916ed6-f486-96f5-935e-60f53a9e236a: {
4828
label: "DownloadImage"
49-
style.fill: "#F0FFF0"
50-
style.stroke: "#3F4B40"
51-
style.font-color: "#000000"
29+
class: computed
5230
}
53-
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-96f5-935e-60f53a9e236a: {style.stroke: "#170206"}
31+
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-96f5-935e-60f53a9e236a: {class: subtask-edge}
5432
01916ed7-0baf-73da-1803-f84c268462bf: {
5533
label: "DownloadImage"
56-
style.fill: "#F0FFF0"
57-
style.stroke: "#3F4B40"
58-
style.font-color: "#000000"
34+
class: computed
5935
}
60-
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-73da-1803-f84c268462bf: {style.stroke: "#170206"}
36+
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-73da-1803-f84c268462bf: {class: subtask-edge}
6137
01916ed6-f486-b3b4-ba10-e866c110cd5f: {
6238
label: "DownloadImage"
63-
style.fill: "#F0FFF0"
64-
style.stroke: "#3F4B40"
65-
style.font-color: "#000000"
39+
class: computed
6640
}
67-
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-b3b4-ba10-e866c110cd5f: {style.stroke: "#170206"}
41+
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-b3b4-ba10-e866c110cd5f: {class: subtask-edge}
6842
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {
6943
label: "DownloadRandomDogImages"
70-
style.fill: "#F0FFF0"
71-
style.stroke: "#3F4B40"
72-
style.font-color: "#000000"
44+
class: computed
7345
}
74-
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {style.stroke: "#170206"}
46+
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {class: subtask-edge}
7547
01916ed7-062b-8b76-089b-d6afefbeda9d: {
7648
label: "DownloadRandomDogImages"
77-
style.fill: "#F0FFF0"
78-
style.stroke: "#3F4B40"
79-
style.font-color: "#000000"
49+
class: computed
8050
}
81-
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-8b76-089b-d6afefbeda9d: {style.stroke: "#170206"}
51+
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-8b76-089b-d6afefbeda9d: {class: subtask-edge}
8252
01916ed7-0baf-8926-8a77-732688abe0cb: {
8353
label: "DownloadImage"
84-
style.fill: "#F0FFF0"
85-
style.stroke: "#3F4B40"
86-
style.font-color: "#000000"
54+
class: computed
8755
}
88-
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-8926-8a77-732688abe0cb: {style.stroke: "#170206"}
56+
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-8926-8a77-732688abe0cb: {class: subtask-edge}
8957
01916ed7-1b55-55e6-f4ab-d931df99d369: {
9058
label: "DownloadImage"
91-
style.fill: "#F0FFF0"
92-
style.stroke: "#3F4B40"
93-
style.font-color: "#000000"
59+
class: computed
9460
}
95-
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-55e6-f4ab-d931df99d369: {style.stroke: "#170206"}
61+
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-55e6-f4ab-d931df99d369: {class: subtask-edge}
9662
01916ed7-1b55-6209-99c0-8aef11bd35b6: {
9763
label: "DownloadImage"
98-
style.fill: "#F0FFF0"
99-
style.stroke: "#3F4B40"
100-
style.font-color: "#000000"
64+
class: computed
10165
}
102-
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-6209-99c0-8aef11bd35b6: {style.stroke: "#170206"}
66+
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-6209-99c0-8aef11bd35b6: {class: subtask-edge}
10367
01916ed7-1b55-742f-385b-7167502a2fe2: {
10468
label: "DownloadImage"
105-
style.fill: "#F0FFF0"
106-
style.stroke: "#3F4B40"
107-
style.font-color: "#000000"
69+
class: computed
10870
}
109-
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-742f-385b-7167502a2fe2: {style.stroke: "#170206"}
71+
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-742f-385b-7167502a2fe2: {class: subtask-edge}
11072
01916ed7-062b-fdb3-f762-8fef23e661ba: {
11173
label: "DownloadRandomDogImages"
112-
style.fill: "#F0FFF0"
113-
style.stroke: "#3F4B40"
114-
style.font-color: "#000000"
74+
class: computed
11575
}
116-
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-fdb3-f762-8fef23e661ba: {style.stroke: "#170206"}
76+
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-fdb3-f762-8fef23e661ba: {class: subtask-edge}

‎assets/workflows/diagrams/download-dog-images.d2‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,36 @@
1-
vars: {
2-
d2-config: {
3-
layout-engine: dagre
4-
theme-id: 102
5-
sketch: true
6-
pad: 10
7-
}
8-
}
9-
10-
style.fill: "#FCF9FA"
111
direction: down
122

13-
title: {
3+
title: {
144
label: download-random-dog-images
15-
near: top-center
16-
shape: text
17-
style.font-size: 30
18-
style.font-color: "#170206"
5+
class: diagram-title
196
}
7+
208
01916b1f-524b-7e2c-ef0e-ff006e44508c: {
219
label: "DownloadImage"
22-
style.fill: "#F0FFF0"
23-
style.stroke: "#3F4B40"
24-
style.font-color: "#000000"
10+
class: computed
2511
}
26-
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-7e2c-ef0e-ff006e44508c: {style.stroke: "#170206"}
12+
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-7e2c-ef0e-ff006e44508c: {class: subtask-edge}
2713
01916b1f-524b-2e44-9bdf-b7d9c38d736c: {
2814
label: "DownloadImage"
29-
style.fill: "#F0FFF0"
30-
style.stroke: "#3F4B40"
31-
style.font-color: "#000000"
15+
class: computed
3216
}
33-
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-2e44-9bdf-b7d9c38d736c: {style.stroke: "#170206"}
17+
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-2e44-9bdf-b7d9c38d736c: {class: subtask-edge}
3418
01916b1f-4769-73e9-886e-ae0b1dd3ae3d: {
3519
label: "DownloadRandomDogImages"
36-
style.fill: "#F0FFF0"
37-
style.stroke: "#3F4B40"
38-
style.font-color: "#000000"
20+
class: computed
3921
}
4022
01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {
4123
label: "DownloadImage"
42-
style.fill: "#F0FFF0"
43-
style.stroke: "#3F4B40"
44-
style.font-color: "#000000"
24+
class: computed
4525
}
46-
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {style.stroke: "#170206"}
26+
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {class: subtask-edge}
4727
01916b1f-524b-b87f-9ee3-6d4676efee9d: {
4828
label: "DownloadImage"
49-
style.fill: "#F0FFF0"
50-
style.stroke: "#3F4B40"
51-
style.font-color: "#000000"
29+
class: computed
5230
}
53-
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-b87f-9ee3-6d4676efee9d: {style.stroke: "#170206"}
31+
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-b87f-9ee3-6d4676efee9d: {class: subtask-edge}
5432
01916b1f-524b-fc05-3d4b-cd41be7d2d20: {
5533
label: "DownloadImage"
56-
style.fill: "#F0FFF0"
57-
style.stroke: "#3F4B40"
58-
style.font-color: "#000000"
34+
class: computed
5935
}
60-
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-fc05-3d4b-cd41be7d2d20: {style.stroke: "#170206"}
36+
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-fc05-3d4b-cd41be7d2d20: {class: subtask-edge}

‎assets/workflows/diagrams/generate.py‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,67 @@
11
from pathlib import Path
22
import re
3-
import os
3+
import subprocess
44
from tempfile import NamedTemporaryFile
55

66

7+
_LIGHT_THEME = """
8+
classes: {
9+
optional: { style: {opacity: 0.8; stroke-dash: 5 }}
10+
queued: { style: {fill: "#FFF0F5"; stroke: "#504448"; font-color: "#000000" }}
11+
running: { style: {fill: "#AFEEEE"; stroke: "#0e5253"; font-color: "#000000" }}
12+
computed: { style: {fill: "#F0FFF0"; stroke: "#3f4b40"; font-color: "#000000" }}
13+
failed: { style: {fill: "#FA8072"; stroke: "#4a1511"; font-color: "#000000" }}
14+
skipped: { style: {fill: "#fcf3ae"; stroke: "#877e3c"; font-color: "#000000" }}
15+
subtask-edge: { style: {stroke: "#170206" }}
16+
dependency-edge: { style: {stroke-dash: 3; stroke: "#9B1A47" }}
17+
diagram-title: { near: top-center; shape: text; style: {font-size: 30; font-color: "#170206" }}
18+
}
19+
20+
style.fill: "#FCF9FA"
21+
22+
vars: {
23+
d2-config: {
24+
layout-engine: dagre
25+
theme-id: 102
26+
sketch: true
27+
pad: 10
28+
}
29+
}
30+
""".strip()
31+
32+
_DARK_THEME = """
33+
classes: {
34+
optional: { style: {opacity: 0.8; stroke-dash: 5 }}
35+
queued: { style: {fill: "#A37200"; stroke: "#fcc76f"; font-color: "#FFFFFF" }}
36+
running: { style: {fill: "#3E7079"; stroke: "#b1e5ef"; font-color: "#FFFFFF" }}
37+
computed: { style: {fill: "#265429"; stroke: "#b7ebb8"; font-color: "#FFFFFF" }}
38+
failed: { style: {fill: "#A31800"; stroke: "#f78d79"; font-color: "#FFFFFF" }}
39+
skipped: { style: {fill: "#c6b63c"; stroke: "#ffed67"; font-color: "#FFFFFF" }}
40+
subtask-edge: { style: {stroke: "#F4F1F4" }}
41+
dependency-edge: { style: {stroke-dash: 3; stroke: "#F97F76" }}
42+
diagram-title: { near: top-center; shape: text; style: {font-size: 30; font-color: "#F4F1F4" }}
43+
}
44+
45+
style.fill: "#161416"
46+
47+
vars: {
48+
d2-config: {
49+
layout-engine: dagre
50+
theme-id: 102
51+
sketch: true
52+
pad: 10
53+
}
54+
}
55+
"""
56+
57+
758
def generate_svg(diagram: str, output_file: Path) -> None:
859
"""Generates an SVG file from a diagram string using d2."""
960

1061
with NamedTemporaryFile(suffix=".d2") as tmp_file:
1162
Path(tmp_file.name).write_text(diagram)
1263
print("Generating", output_file.name)
13-
os.system(f"d2 {tmp_file.name} {output_file}")
64+
subprocess.run(["d2", tmp_file.name, str(output_file)])
1465
fix_svg_width_height(output_file)
1566

1667

@@ -20,40 +71,11 @@ def generate_light_and_dark_svgs(diagram_file: Path, output_dir: Path):
2071
diagram = diagram_file.read_text()
2172
output_file = output_dir / diagram_file.with_suffix(".svg").name
2273
dark_output_file = output_dir / diagram_file.with_suffix(".dark.svg").name
23-
generate_svg(diagram, output_file)
24-
generate_svg(to_dark(diagram), dark_output_file)
25-
26-
27-
def to_dark(diagram: str) -> str:
28-
"""Converts a diagram to dark mode by manipulating colors."""
29-
30-
color_mapping = {
31-
# general
32-
"#000000": "#FFFFFF",
33-
# main background color
34-
"#FCF9FA": "#161416",
35-
# title text, parent->child edge color
36-
"#170206": "#F4F1F4",
37-
# dependency edge color
38-
"#9B1A47": "#F97F76",
39-
# queued
40-
"#FFF0F5": "#A37200",
41-
"#504448": "#fcc76f",
42-
# running
43-
"#AFEEEE": "#3E7079",
44-
"#0e5253": "#B1E5EF",
45-
# computed
46-
"#F0FFF0": "#265429",
47-
"#3F4B40": "#B7EBB8",
48-
# failed
49-
"#FA8072": "#A31800",
50-
"#4A1511": "#F78D79",
51-
}
52-
53-
for light_color, dark_color in color_mapping.items():
54-
diagram = diagram.replace(light_color, dark_color)
55-
56-
return diagram
74+
75+
light_diagram = _LIGHT_THEME + "\n" + diagram
76+
dark_diagram = _DARK_THEME + "\n" + diagram
77+
generate_svg(light_diagram, output_file)
78+
generate_svg(dark_diagram, dark_output_file)
5779

5880

5981
def fix_svg_width_height(svg_file: Path):

0 commit comments

Comments
 (0)