Skip to content

Commit 4ed867c

Browse files
Nick Ficanoclaude
Nick Ficano
and
claude
committed
Harmonize Graphviz diagrams with the ARCP design system
Mechanical restyle applied to every .dot/.svg pair: - fontname: Helvetica/Inter → TT Commons Pro Trial - splines: ortho → spline (curved edges) - shape=ellipse → shape=box with style="rounded[,filled]" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent b4a9def commit 4ed867c

50 files changed

Lines changed: 1338 additions & 941 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎diagrams/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# Architecture diagrams
22

33
<picture>
4-
<source media="(prefers-color-scheme: dark)" srcset="arcp-dark.svg">
5-
<img alt="ARCP architecture (worked example)" src="arcp-light.svg">
4+
<source media="(prefers-color-scheme: dark)" srcset="architecture-dark.svg">
5+
<img alt="ARCP architecture (worked example)" src="architecture-light.svg">
66
</picture>
77

88
Graphviz `.dot` templates for clean architecture diagrams, with paired
99
light/dark SVGs that GitHub auto-switches via `<picture>` and
1010
`prefers-color-scheme`. The image above renders from
11-
[`arcp-light.dot`](arcp-light.dot) / [`arcp-dark.dot`](arcp-dark.dot).
11+
[`architecture-light.dot`](architecture-light.dot) / [`architecture-dark.dot`](architecture-dark.dot).
1212

1313
## Using this with an AI coding agent
1414

@@ -51,7 +51,7 @@ Hard constraints — do not violate:
5151
| ---------------------------------- | ------------------------------------------------------- |
5252
| `diagram-template-light.dot` | Starting point. Full style docs in the header. |
5353
| `diagram-template-dark.dot` | Dark companion. Structure must match the light variant. |
54-
| `arcp-light.dot` / `arcp-dark.dot` | Worked example shown above. |
54+
| `architecture-light.dot` / `architecture-dark.dot` | Worked example shown above. |
5555

5656
The `.dot` files are the source you edit. The `.svg` files are rendered
5757
deliverables; you commit both and reference them from markdown.

‎diagrams/architecture-dark.dot‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ digraph ARCPTypescriptSDK {
22
rankdir=TB;
33
bgcolor="transparent";
44
compound=true;
5-
fontname="Helvetica";
5+
fontname="TT Commons Pro Trial";
66
splines=spline;
77
nodesep=0.32;
88
ranksep=0.55;
@@ -13,15 +13,15 @@ digraph ARCPTypescriptSDK {
1313
style="rounded,filled",
1414
fillcolor="#334155",
1515
color="#475569",
16-
fontname="Helvetica",
16+
fontname="TT Commons Pro Trial",
1717
fontsize=11,
1818
fontcolor="#F1F5F9",
1919
margin="0.22,0.11",
2020
penwidth=1.0
2121
];
2222

2323
edge [
24-
fontname="Helvetica",
24+
fontname="TT Commons Pro Trial",
2525
fontsize=9,
2626
fontcolor="#94A3B8",
2727
color="#64748B",
@@ -41,7 +41,7 @@ digraph ARCPTypescriptSDK {
4141
style="rounded,filled";
4242
fillcolor="#0F172A";
4343
color="#334155";
44-
fontname="Helvetica";
44+
fontname="TT Commons Pro Trial";
4545
fontcolor="#94A3B8";
4646
margin=14;
4747
labeljust=l;
@@ -60,7 +60,7 @@ digraph ARCPTypescriptSDK {
6060
style="rounded,filled";
6161
fillcolor="#1E293B";
6262
color="#334155";
63-
fontname="Helvetica";
63+
fontname="TT Commons Pro Trial";
6464
fontcolor="#94A3B8";
6565
margin=14;
6666
labeljust=l;
@@ -87,7 +87,7 @@ digraph ARCPTypescriptSDK {
8787
style="rounded,filled";
8888
fillcolor="#1E293B";
8989
color="#334155";
90-
fontname="Helvetica";
90+
fontname="TT Commons Pro Trial";
9191
fontcolor="#94A3B8";
9292
margin=14;
9393
labeljust=l;

‎diagrams/architecture-dark.svg‎

Lines changed: 146 additions & 197 deletions
Loading

‎diagrams/architecture-light.dot‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ digraph ARCPTypescriptSDK {
22
rankdir=TB;
33
bgcolor="transparent";
44
compound=true;
5-
fontname="Helvetica";
5+
fontname="TT Commons Pro Trial";
66
splines=spline;
77
nodesep=0.32;
88
ranksep=0.55;
@@ -13,15 +13,15 @@ digraph ARCPTypescriptSDK {
1313
style="rounded,filled",
1414
fillcolor="white",
1515
color="#CBD5E1",
16-
fontname="Helvetica",
16+
fontname="TT Commons Pro Trial",
1717
fontsize=11,
1818
fontcolor="#1F2937",
1919
margin="0.22,0.11",
2020
penwidth=1.0
2121
];
2222

2323
edge [
24-
fontname="Helvetica",
24+
fontname="TT Commons Pro Trial",
2525
fontsize=9,
2626
fontcolor="#64748B",
2727
color="#94A3B8",
@@ -43,7 +43,7 @@ digraph ARCPTypescriptSDK {
4343
style="rounded,filled";
4444
fillcolor="#F1F5F9";
4545
color="#E2E8F0";
46-
fontname="Helvetica";
46+
fontname="TT Commons Pro Trial";
4747
fontcolor="#475569";
4848
margin=14;
4949
labeljust=l;
@@ -63,7 +63,7 @@ digraph ARCPTypescriptSDK {
6363
style="rounded,filled";
6464
fillcolor="#F8FAFC";
6565
color="#E2E8F0";
66-
fontname="Helvetica";
66+
fontname="TT Commons Pro Trial";
6767
fontcolor="#475569";
6868
margin=14;
6969
labeljust=l;
@@ -92,7 +92,7 @@ digraph ARCPTypescriptSDK {
9292
style="rounded,filled";
9393
fillcolor="#F8FAFC";
9494
color="#E2E8F0";
95-
fontname="Helvetica";
95+
fontname="TT Commons Pro Trial";
9696
fontcolor="#475569";
9797
margin=14;
9898
labeljust=l;

‎diagrams/architecture-light.svg‎

Lines changed: 54 additions & 54 deletions
Loading

‎diagrams/delegation-span-tree-dark.dot‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// ARCP delegation span tree (dark)
22
digraph DelegationSpanTree {
3-
rankdir=TB; bgcolor="transparent"; compound=true; fontname="Helvetica";
4-
splines=ortho; nodesep=0.32; ranksep=0.45; pad="0.35,0.25";
3+
rankdir=TB; bgcolor="transparent"; compound=true; fontname="TT Commons Pro Trial";
4+
splines=spline; nodesep=0.32; ranksep=0.45; pad="0.35,0.25";
55

66
node [shape=box, style="rounded,filled", fillcolor="#334155", color="#475569",
7-
fontname="Helvetica", fontsize=11, fontcolor="#F1F5F9",
7+
fontname="TT Commons Pro Trial", fontsize=11, fontcolor="#F1F5F9",
88
margin="0.22,0.11", penwidth=1.0];
9-
edge [fontname="Helvetica", fontsize=9, fontcolor="#94A3B8", color="#64748B",
9+
edge [fontname="TT Commons Pro Trial", fontsize=9, fontcolor="#94A3B8", color="#64748B",
1010
penwidth=1.1, arrowsize=0.75, arrowhead=vee];
1111

1212
Parent [

‎diagrams/delegation-span-tree-dark.svg‎

Lines changed: 15 additions & 15 deletions
Loading

‎diagrams/delegation-span-tree-light.dot‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// ARCP delegation span tree (light)
22
// orchestrator parent span with delegated child agent spans.
33
digraph DelegationSpanTree {
4-
rankdir=TB; bgcolor="transparent"; compound=true; fontname="Helvetica";
5-
splines=ortho; nodesep=0.32; ranksep=0.45; pad="0.35,0.25";
4+
rankdir=TB; bgcolor="transparent"; compound=true; fontname="TT Commons Pro Trial";
5+
splines=spline; nodesep=0.32; ranksep=0.45; pad="0.35,0.25";
66

77
node [shape=box, style="rounded,filled", fillcolor="white", color="#CBD5E1",
8-
fontname="Helvetica", fontsize=11, fontcolor="#1F2937",
8+
fontname="TT Commons Pro Trial", fontsize=11, fontcolor="#1F2937",
99
margin="0.22,0.11", penwidth=1.0];
10-
edge [fontname="Helvetica", fontsize=9, fontcolor="#64748B", color="#94A3B8",
10+
edge [fontname="TT Commons Pro Trial", fontsize=9, fontcolor="#64748B", color="#94A3B8",
1111
penwidth=1.1, arrowsize=0.75, arrowhead=vee];
1212

1313
Parent [

‎diagrams/delegation-span-tree-light.svg‎

Lines changed: 15 additions & 15 deletions
Loading

‎diagrams/diagram-template-dark.dot‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ digraph Template {
1212
rankdir=TB;
1313
bgcolor="transparent"; // sit on whatever dark page bg is active
1414
compound=true;
15-
fontname="Helvetica";
15+
fontname="TT Commons Pro Trial";
1616
splines=spline;
1717
nodesep=0.32;
1818
ranksep=0.55;
@@ -24,7 +24,7 @@ digraph Template {
2424
style="rounded,filled",
2525
fillcolor="#334155", // slate-700
2626
color="#475569", // slate-600 border
27-
fontname="Helvetica",
27+
fontname="TT Commons Pro Trial",
2828
fontsize=11,
2929
fontcolor="#F1F5F9", // slate-100
3030
margin="0.22,0.11",
@@ -33,7 +33,7 @@ digraph Template {
3333

3434
// ─── EDGE DEFAULTS ───────────────────────────────────────────────────
3535
edge [
36-
fontname="Helvetica",
36+
fontname="TT Commons Pro Trial",
3737
fontsize=9,
3838
fontcolor="#94A3B8", // slate-400
3939
color="#64748B", // slate-500
@@ -59,7 +59,7 @@ digraph Template {
5959
style="rounded,filled";
6060
fillcolor="#0F172A"; // slate-900
6161
color="#334155"; // slate-700
62-
fontname="Helvetica";
62+
fontname="TT Commons Pro Trial";
6363
fontcolor="#94A3B8"; // slate-400
6464
margin=14;
6565
labeljust=l;
@@ -78,7 +78,7 @@ digraph Template {
7878
style="rounded,filled";
7979
fillcolor="#1E293B"; // slate-800
8080
color="#334155";
81-
fontname="Helvetica";
81+
fontname="TT Commons Pro Trial";
8282
fontcolor="#94A3B8";
8383
margin=14;
8484
labeljust=l;

0 commit comments

Comments
 (0)