Skip to content

Use d2 style classes to make diagrams for docs easier to maintain #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukasbindreiter merged 2 commits into from
Feb 9, 2026
Merged

Use d2 style classes to make diagrams for docs easier to maintain #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca3ee30
Use d2 style classes to make diagrams for docs easier to maintain
lukasbindreiter Feb 9, 2026
a2b7c05
Fix process news
lukasbindreiter Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 10 additions & 31 deletions assets/workflows/diagrams/custom-display-names.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,26 @@
vars: {
d2-config: {
layout-engine: dagre
theme-id: 102
sketch: true
pad: 10
}
}

style.fill: "#FCF9FA"
style.stroke: "#170206"
direction: down

title: {
title: {
label: custom-display-names
near: top-center
shape: text
style.font-size: 30
style.font-color: "#170206"
class: diagram-title
}

root-task: {
label: "Root(3)"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
leaf0: {
label: "Leaf Nr. 0"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
root-task -> leaf0: {style.stroke: "#170206"}
root-task -> leaf0: {class: subtask-edge}
leaf1: {
label: "Leaf Nr. 1"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
root-task -> leaf1: {style.stroke: "#170206"}
root-task -> leaf1: {class: subtask-edge}
leaf2: {
label: "Leaf Nr. 2"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
root-task -> leaf2: {style.stroke: "#170206"}
root-task -> leaf2: {class: subtask-edge}
100 changes: 30 additions & 70 deletions assets/workflows/diagrams/download-dog-images-recursive.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,76 @@
vars: {
d2-config: {
layout-engine: dagre
theme-id: 102
sketch: true
pad: 10
}
}

style.fill: "#FCF9FA"
direction: down

title: {
title: {
label: download-dog-images-recursive
near: top-center
shape: text
style.font-size: 30
style.font-color: "#170206"
class: diagram-title
}

01916ed6-dad9-69de-e2b9-498bfd4063ec: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {style.stroke: "#170206"}
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-8108-aaf6-9c3e36b2be71: {class: subtask-edge}
01916ed6-f486-0ecc-b38b-f6227ff00a64: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-0ecc-b38b-f6227ff00a64: {style.stroke: "#170206"}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-0ecc-b38b-f6227ff00a64: {class: subtask-edge}
01916ed6-f486-7440-7137-8eff4418bb33: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-7440-7137-8eff4418bb33: {style.stroke: "#170206"}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-7440-7137-8eff4418bb33: {class: subtask-edge}
01916ed6-f486-96f5-935e-60f53a9e236a: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-96f5-935e-60f53a9e236a: {style.stroke: "#170206"}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-96f5-935e-60f53a9e236a: {class: subtask-edge}
01916ed7-0baf-73da-1803-f84c268462bf: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-73da-1803-f84c268462bf: {style.stroke: "#170206"}
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-73da-1803-f84c268462bf: {class: subtask-edge}
01916ed6-f486-b3b4-ba10-e866c110cd5f: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-b3b4-ba10-e866c110cd5f: {style.stroke: "#170206"}
01916ed6-ed2c-8108-aaf6-9c3e36b2be71 -> 01916ed6-f486-b3b4-ba10-e866c110cd5f: {class: subtask-edge}
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {style.stroke: "#170206"}
01916ed6-dad9-69de-e2b9-498bfd4063ec -> 01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7: {class: subtask-edge}
01916ed7-062b-8b76-089b-d6afefbeda9d: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-8b76-089b-d6afefbeda9d: {style.stroke: "#170206"}
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-8b76-089b-d6afefbeda9d: {class: subtask-edge}
01916ed7-0baf-8926-8a77-732688abe0cb: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-8926-8a77-732688abe0cb: {style.stroke: "#170206"}
01916ed7-062b-8b76-089b-d6afefbeda9d -> 01916ed7-0baf-8926-8a77-732688abe0cb: {class: subtask-edge}
01916ed7-1b55-55e6-f4ab-d931df99d369: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-55e6-f4ab-d931df99d369: {style.stroke: "#170206"}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-55e6-f4ab-d931df99d369: {class: subtask-edge}
01916ed7-1b55-6209-99c0-8aef11bd35b6: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-6209-99c0-8aef11bd35b6: {style.stroke: "#170206"}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-6209-99c0-8aef11bd35b6: {class: subtask-edge}
01916ed7-1b55-742f-385b-7167502a2fe2: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-742f-385b-7167502a2fe2: {style.stroke: "#170206"}
01916ed7-062b-fdb3-f762-8fef23e661ba -> 01916ed7-1b55-742f-385b-7167502a2fe2: {class: subtask-edge}
01916ed7-062b-fdb3-f762-8fef23e661ba: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-fdb3-f762-8fef23e661ba: {style.stroke: "#170206"}
01916ed6-ed2c-cd72-4f0b-ec87c45cb3f7 -> 01916ed7-062b-fdb3-f762-8fef23e661ba: {class: subtask-edge}
52 changes: 14 additions & 38 deletions assets/workflows/diagrams/download-dog-images.d2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,36 @@
vars: {
d2-config: {
layout-engine: dagre
theme-id: 102
sketch: true
pad: 10
}
}

style.fill: "#FCF9FA"
direction: down

title: {
title: {
label: download-random-dog-images
near: top-center
shape: text
style.font-size: 30
style.font-color: "#170206"
class: diagram-title
}

01916b1f-524b-7e2c-ef0e-ff006e44508c: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-7e2c-ef0e-ff006e44508c: {style.stroke: "#170206"}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-7e2c-ef0e-ff006e44508c: {class: subtask-edge}
01916b1f-524b-2e44-9bdf-b7d9c38d736c: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-2e44-9bdf-b7d9c38d736c: {style.stroke: "#170206"}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-2e44-9bdf-b7d9c38d736c: {class: subtask-edge}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d: {
label: "DownloadRandomDogImages"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {style.stroke: "#170206"}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-8be2-ee23-e0a93a4c2a3a: {class: subtask-edge}
01916b1f-524b-b87f-9ee3-6d4676efee9d: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-b87f-9ee3-6d4676efee9d: {style.stroke: "#170206"}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-b87f-9ee3-6d4676efee9d: {class: subtask-edge}
01916b1f-524b-fc05-3d4b-cd41be7d2d20: {
label: "DownloadImage"
style.fill: "#F0FFF0"
style.stroke: "#3F4B40"
style.font-color: "#000000"
class: computed
}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-fc05-3d4b-cd41be7d2d20: {style.stroke: "#170206"}
01916b1f-4769-73e9-886e-ae0b1dd3ae3d -> 01916b1f-524b-fc05-3d4b-cd41be7d2d20: {class: subtask-edge}
94 changes: 58 additions & 36 deletions assets/workflows/diagrams/generate.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,67 @@
from pathlib import Path
import re
import os
import subprocess
from tempfile import NamedTemporaryFile


_LIGHT_THEME = """
classes: {
optional: { style: {opacity: 0.8; stroke-dash: 5 }}
queued: { style: {fill: "#FFF0F5"; stroke: "#504448"; font-color: "#000000" }}
running: { style: {fill: "#AFEEEE"; stroke: "#0e5253"; font-color: "#000000" }}
computed: { style: {fill: "#F0FFF0"; stroke: "#3f4b40"; font-color: "#000000" }}
failed: { style: {fill: "#FA8072"; stroke: "#4a1511"; font-color: "#000000" }}
skipped: { style: {fill: "#fcf3ae"; stroke: "#877e3c"; font-color: "#000000" }}
subtask-edge: { style: {stroke: "#170206" }}
dependency-edge: { style: {stroke-dash: 3; stroke: "#9B1A47" }}
diagram-title: { near: top-center; shape: text; style: {font-size: 30; font-color: "#170206" }}
}

style.fill: "#FCF9FA"

vars: {
d2-config: {
layout-engine: dagre
theme-id: 102
sketch: true
pad: 10
}
}
""".strip()

_DARK_THEME = """
classes: {
optional: { style: {opacity: 0.8; stroke-dash: 5 }}
queued: { style: {fill: "#A37200"; stroke: "#fcc76f"; font-color: "#FFFFFF" }}
running: { style: {fill: "#3E7079"; stroke: "#b1e5ef"; font-color: "#FFFFFF" }}
computed: { style: {fill: "#265429"; stroke: "#b7ebb8"; font-color: "#FFFFFF" }}
failed: { style: {fill: "#A31800"; stroke: "#f78d79"; font-color: "#FFFFFF" }}
skipped: { style: {fill: "#c6b63c"; stroke: "#ffed67"; font-color: "#FFFFFF" }}
subtask-edge: { style: {stroke: "#F4F1F4" }}
dependency-edge: { style: {stroke-dash: 3; stroke: "#F97F76" }}
diagram-title: { near: top-center; shape: text; style: {font-size: 30; font-color: "#F4F1F4" }}
}

style.fill: "#161416"

vars: {
d2-config: {
layout-engine: dagre
theme-id: 102
sketch: true
pad: 10
}
}
"""


def generate_svg(diagram: str, output_file: Path) -> None:
"""Generates an SVG file from a diagram string using d2."""

with NamedTemporaryFile(suffix=".d2") as tmp_file:
Path(tmp_file.name).write_text(diagram)
print("Generating", output_file.name)
os.system(f"d2 {tmp_file.name} {output_file}")
subprocess.run(["d2", tmp_file.name, str(output_file)])
fix_svg_width_height(output_file)


Expand All @@ -20,40 +71,11 @@ def generate_light_and_dark_svgs(diagram_file: Path, output_dir: Path):
diagram = diagram_file.read_text()
output_file = output_dir / diagram_file.with_suffix(".svg").name
dark_output_file = output_dir / diagram_file.with_suffix(".dark.svg").name
generate_svg(diagram, output_file)
generate_svg(to_dark(diagram), dark_output_file)


def to_dark(diagram: str) -> str:
"""Converts a diagram to dark mode by manipulating colors."""

color_mapping = {
# general
"#000000": "#FFFFFF",
# main background color
"#FCF9FA": "#161416",
# title text, parent->child edge color
"#170206": "#F4F1F4",
# dependency edge color
"#9B1A47": "#F97F76",
# queued
"#FFF0F5": "#A37200",
"#504448": "#fcc76f",
# running
"#AFEEEE": "#3E7079",
"#0e5253": "#B1E5EF",
# computed
"#F0FFF0": "#265429",
"#3F4B40": "#B7EBB8",
# failed
"#FA8072": "#A31800",
"#4A1511": "#F78D79",
}

for light_color, dark_color in color_mapping.items():
diagram = diagram.replace(light_color, dark_color)

return diagram

light_diagram = _LIGHT_THEME + "\n" + diagram
dark_diagram = _DARK_THEME + "\n" + diagram
generate_svg(light_diagram, output_file)
generate_svg(dark_diagram, dark_output_file)


def fix_svg_width_height(svg_file: Path):
Expand Down
Loading