luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

removed pretty linke

Browse source
This commit is contained in:
Daniel Suh 2024-05-28 22:31:24 -04:00 committed by Alexander Wang
parent 2ccd211cc8
commit 38bfc69325
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
6 changed files with 155 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
d2exporter/export.go
View file

@ -356,7 +356,6 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
}
if edge.Link != nil {
connection.Link = edge.Link.Value
connection.PrettyLink = toPrettyLink(edge.Dst.Graph, edge.Link.Value)
}
connection.Label = text.Text
connection.LabelWidth = text.Dimensions.Width

3
d2target/d2target.go
View file

@ -599,8 +599,7 @@ type Connection struct {
LabelPosition string `json:"labelPosition"`
LabelPercentage float64 `json:"labelPercentage"`
Link string `json:"link"`
PrettyLink string `json:"prettyLink,omitempty"`
Link string `json:"link"`
Route []*geo.Point `json:"route"`
IsCurve bool `json:"isCurve,omitempty"`

1
e2etests/testdata/txtar/link-on-connections/dagre/board.exp.json generated vendored
View file

@ -112,7 +112,6 @@
"labelPosition": "",
"labelPercentage": 0,
"link": "https://google.com",
"prettyLink": "https://google.com",
"route": [
{
"x": 42.5,

154
e2etests/testdata/txtar/link-on-connections/dagre/sketch.exp.svg vendored
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 251"><svg id="d2-svg" class="d2-376000024" width="104" height="251" viewBox="-1 -18 104 251"><rect x="-1.000000" y="-18.000000" width="104.000000" height="251.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 251"><svg id="d2-svg" class="d2-340887395" width="104" height="251" viewBox="-1 -18 104 251"><rect x="-1.000000" y="-18.000000" width="104.000000" height="251.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
}
.d2-376000024 .text-bold {
font-family: "d2-376000024-font-bold";
.d2-340887395 .text-bold {
font-family: "d2-340887395-font-bold";
}
@font-face {
font-family: d2-376000024-font-bold;
font-family: d2-340887395-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -21,78 +21,78 @@
opacity: 0.5;
}
.d2-376000024 .fill-N1{fill:#0A0F25;}
.d2-376000024 .fill-N2{fill:#676C7E;}
.d2-376000024 .fill-N3{fill:#9499AB;}
.d2-376000024 .fill-N4{fill:#CFD2DD;}
.d2-376000024 .fill-N5{fill:#DEE1EB;}
.d2-376000024 .fill-N6{fill:#EEF1F8;}
.d2-376000024 .fill-N7{fill:#FFFFFF;}
.d2-376000024 .fill-B1{fill:#0D32B2;}
.d2-376000024 .fill-B2{fill:#0D32B2;}
.d2-376000024 .fill-B3{fill:#E3E9FD;}
.d2-376000024 .fill-B4{fill:#E3E9FD;}
.d2-376000024 .fill-B5{fill:#EDF0FD;}
.d2-376000024 .fill-B6{fill:#F7F8FE;}
.d2-376000024 .fill-AA2{fill:#4A6FF3;}
.d2-376000024 .fill-AA4{fill:#EDF0FD;}
.d2-376000024 .fill-AA5{fill:#F7F8FE;}
.d2-376000024 .fill-AB4{fill:#EDF0FD;}
.d2-376000024 .fill-AB5{fill:#F7F8FE;}
.d2-376000024 .stroke-N1{stroke:#0A0F25;}
.d2-376000024 .stroke-N2{stroke:#676C7E;}
.d2-376000024 .stroke-N3{stroke:#9499AB;}
.d2-376000024 .stroke-N4{stroke:#CFD2DD;}
.d2-376000024 .stroke-N5{stroke:#DEE1EB;}
.d2-376000024 .stroke-N6{stroke:#EEF1F8;}
.d2-376000024 .stroke-N7{stroke:#FFFFFF;}
.d2-376000024 .stroke-B1{stroke:#0D32B2;}
.d2-376000024 .stroke-B2{stroke:#0D32B2;}
.d2-376000024 .stroke-B3{stroke:#E3E9FD;}
.d2-376000024 .stroke-B4{stroke:#E3E9FD;}
.d2-376000024 .stroke-B5{stroke:#EDF0FD;}
.d2-376000024 .stroke-B6{stroke:#F7F8FE;}
.d2-376000024 .stroke-AA2{stroke:#4A6FF3;}
.d2-376000024 .stroke-AA4{stroke:#EDF0FD;}
.d2-376000024 .stroke-AA5{stroke:#F7F8FE;}
.d2-376000024 .stroke-AB4{stroke:#EDF0FD;}
.d2-376000024 .stroke-AB5{stroke:#F7F8FE;}
.d2-376000024 .background-color-N1{background-color:#0A0F25;}
.d2-376000024 .background-color-N2{background-color:#676C7E;}
.d2-376000024 .background-color-N3{background-color:#9499AB;}
.d2-376000024 .background-color-N4{background-color:#CFD2DD;}
.d2-376000024 .background-color-N5{background-color:#DEE1EB;}
.d2-376000024 .background-color-N6{background-color:#EEF1F8;}
.d2-376000024 .background-color-N7{background-color:#FFFFFF;}
.d2-376000024 .background-color-B1{background-color:#0D32B2;}
.d2-376000024 .background-color-B2{background-color:#0D32B2;}
.d2-376000024 .background-color-B3{background-color:#E3E9FD;}
.d2-376000024 .background-color-B4{background-color:#E3E9FD;}
.d2-376000024 .background-color-B5{background-color:#EDF0FD;}
.d2-376000024 .background-color-B6{background-color:#F7F8FE;}
.d2-376000024 .background-color-AA2{background-color:#4A6FF3;}
.d2-376000024 .background-color-AA4{background-color:#EDF0FD;}
.d2-376000024 .background-color-AA5{background-color:#F7F8FE;}
.d2-376000024 .background-color-AB4{background-color:#EDF0FD;}
.d2-376000024 .background-color-AB5{background-color:#F7F8FE;}
.d2-376000024 .color-N1{color:#0A0F25;}
.d2-376000024 .color-N2{color:#676C7E;}
.d2-376000024 .color-N3{color:#9499AB;}
.d2-376000024 .color-N4{color:#CFD2DD;}
.d2-376000024 .color-N5{color:#DEE1EB;}
.d2-376000024 .color-N6{color:#EEF1F8;}
.d2-376000024 .color-N7{color:#FFFFFF;}
.d2-376000024 .color-B1{color:#0D32B2;}
.d2-376000024 .color-B2{color:#0D32B2;}
.d2-376000024 .color-B3{color:#E3E9FD;}
.d2-376000024 .color-B4{color:#E3E9FD;}
.d2-376000024 .color-B5{color:#EDF0FD;}
.d2-376000024 .color-B6{color:#F7F8FE;}
.d2-376000024 .color-AA2{color:#4A6FF3;}
.d2-376000024 .color-AA4{color:#EDF0FD;}
.d2-376000024 .color-AA5{color:#F7F8FE;}
.d2-376000024 .color-AB4{color:#EDF0FD;}
.d2-376000024 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="16.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 42.500000 70.000000 C 42.500000 106.000000 42.500000 126.000000 42.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-376000024)" /></g></a><g transform="translate(69 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
.d2-340887395 .fill-N1{fill:#0A0F25;}
.d2-340887395 .fill-N2{fill:#676C7E;}
.d2-340887395 .fill-N3{fill:#9499AB;}
.d2-340887395 .fill-N4{fill:#CFD2DD;}
.d2-340887395 .fill-N5{fill:#DEE1EB;}
.d2-340887395 .fill-N6{fill:#EEF1F8;}
.d2-340887395 .fill-N7{fill:#FFFFFF;}
.d2-340887395 .fill-B1{fill:#0D32B2;}
.d2-340887395 .fill-B2{fill:#0D32B2;}
.d2-340887395 .fill-B3{fill:#E3E9FD;}
.d2-340887395 .fill-B4{fill:#E3E9FD;}
.d2-340887395 .fill-B5{fill:#EDF0FD;}
.d2-340887395 .fill-B6{fill:#F7F8FE;}
.d2-340887395 .fill-AA2{fill:#4A6FF3;}
.d2-340887395 .fill-AA4{fill:#EDF0FD;}
.d2-340887395 .fill-AA5{fill:#F7F8FE;}
.d2-340887395 .fill-AB4{fill:#EDF0FD;}
.d2-340887395 .fill-AB5{fill:#F7F8FE;}
.d2-340887395 .stroke-N1{stroke:#0A0F25;}
.d2-340887395 .stroke-N2{stroke:#676C7E;}
.d2-340887395 .stroke-N3{stroke:#9499AB;}
.d2-340887395 .stroke-N4{stroke:#CFD2DD;}
.d2-340887395 .stroke-N5{stroke:#DEE1EB;}
.d2-340887395 .stroke-N6{stroke:#EEF1F8;}
.d2-340887395 .stroke-N7{stroke:#FFFFFF;}
.d2-340887395 .stroke-B1{stroke:#0D32B2;}
.d2-340887395 .stroke-B2{stroke:#0D32B2;}
.d2-340887395 .stroke-B3{stroke:#E3E9FD;}
.d2-340887395 .stroke-B4{stroke:#E3E9FD;}
.d2-340887395 .stroke-B5{stroke:#EDF0FD;}
.d2-340887395 .stroke-B6{stroke:#F7F8FE;}
.d2-340887395 .stroke-AA2{stroke:#4A6FF3;}
.d2-340887395 .stroke-AA4{stroke:#EDF0FD;}
.d2-340887395 .stroke-AA5{stroke:#F7F8FE;}
.d2-340887395 .stroke-AB4{stroke:#EDF0FD;}
.d2-340887395 .stroke-AB5{stroke:#F7F8FE;}
.d2-340887395 .background-color-N1{background-color:#0A0F25;}
.d2-340887395 .background-color-N2{background-color:#676C7E;}
.d2-340887395 .background-color-N3{background-color:#9499AB;}
.d2-340887395 .background-color-N4{background-color:#CFD2DD;}
.d2-340887395 .background-color-N5{background-color:#DEE1EB;}
.d2-340887395 .background-color-N6{background-color:#EEF1F8;}
.d2-340887395 .background-color-N7{background-color:#FFFFFF;}
.d2-340887395 .background-color-B1{background-color:#0D32B2;}
.d2-340887395 .background-color-B2{background-color:#0D32B2;}
.d2-340887395 .background-color-B3{background-color:#E3E9FD;}
.d2-340887395 .background-color-B4{background-color:#E3E9FD;}
.d2-340887395 .background-color-B5{background-color:#EDF0FD;}
.d2-340887395 .background-color-B6{background-color:#F7F8FE;}
.d2-340887395 .background-color-AA2{background-color:#4A6FF3;}
.d2-340887395 .background-color-AA4{background-color:#EDF0FD;}
.d2-340887395 .background-color-AA5{background-color:#F7F8FE;}
.d2-340887395 .background-color-AB4{background-color:#EDF0FD;}
.d2-340887395 .background-color-AB5{background-color:#F7F8FE;}
.d2-340887395 .color-N1{color:#0A0F25;}
.d2-340887395 .color-N2{color:#676C7E;}
.d2-340887395 .color-N3{color:#9499AB;}
.d2-340887395 .color-N4{color:#CFD2DD;}
.d2-340887395 .color-N5{color:#DEE1EB;}
.d2-340887395 .color-N6{color:#EEF1F8;}
.d2-340887395 .color-N7{color:#FFFFFF;}
.d2-340887395 .color-B1{color:#0D32B2;}
.d2-340887395 .color-B2{color:#0D32B2;}
.d2-340887395 .color-B3{color:#E3E9FD;}
.d2-340887395 .color-B4{color:#E3E9FD;}
.d2-340887395 .color-B5{color:#EDF0FD;}
.d2-340887395 .color-B6{color:#F7F8FE;}
.d2-340887395 .color-AA2{color:#4A6FF3;}
.d2-340887395 .color-AA4{color:#EDF0FD;}
.d2-340887395 .color-AA5{color:#F7F8FE;}
.d2-340887395 .color-AB4{color:#EDF0FD;}
.d2-340887395 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="16.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="42.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 42.500000 70.000000 C 42.500000 106.000000 42.500000 126.000000 42.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-340887395)" /></g></a><g transform="translate(69 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@ -104,7 +104,7 @@
</clipPath>
</defs>
</svg>
</g><mask id="d2-376000024" maskUnits="userSpaceOnUse" x="-1" y="-18" width="104" height="251">
</g><mask id="d2-340887395" maskUnits="userSpaceOnUse" x="-1" y="-18" width="104" height="251">
<rect x="-1" y="-18" width="104" height="251" fill="white"></rect>
<rect x="38.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="38.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

1
e2etests/testdata/txtar/link-on-connections/elk/board.exp.json generated vendored
View file

@ -112,7 +112,6 @@
"labelPosition": "",
"labelPercentage": 0,
"link": "https://google.com",
"prettyLink": "https://google.com",
"route": [
{
"x": 54.5,

154
e2etests/testdata/txtar/link-on-connections/elk/sketch.exp.svg vendored
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 221"><svg id="d2-svg" class="d2-2160393269" width="104" height="221" viewBox="11 -6 104 221"><rect x="11.000000" y="-6.000000" width="104.000000" height="221.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.5-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 104 221"><svg id="d2-svg" class="d2-3413914892" width="104" height="221" viewBox="11 -6 104 221"><rect x="11.000000" y="-6.000000" width="104.000000" height="221.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.appendix-icon {
filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
}
.d2-2160393269 .text-bold {
font-family: "d2-2160393269-font-bold";
.d2-3413914892 .text-bold {
font-family: "d2-3413914892-font-bold";
}
@font-face {
font-family: d2-2160393269-font-bold;
font-family: d2-3413914892-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -21,78 +21,78 @@
opacity: 0.5;
}
.d2-2160393269 .fill-N1{fill:#0A0F25;}
.d2-2160393269 .fill-N2{fill:#676C7E;}
.d2-2160393269 .fill-N3{fill:#9499AB;}
.d2-2160393269 .fill-N4{fill:#CFD2DD;}
.d2-2160393269 .fill-N5{fill:#DEE1EB;}
.d2-2160393269 .fill-N6{fill:#EEF1F8;}
.d2-2160393269 .fill-N7{fill:#FFFFFF;}
.d2-2160393269 .fill-B1{fill:#0D32B2;}
.d2-2160393269 .fill-B2{fill:#0D32B2;}
.d2-2160393269 .fill-B3{fill:#E3E9FD;}
.d2-2160393269 .fill-B4{fill:#E3E9FD;}
.d2-2160393269 .fill-B5{fill:#EDF0FD;}
.d2-2160393269 .fill-B6{fill:#F7F8FE;}
.d2-2160393269 .fill-AA2{fill:#4A6FF3;}
.d2-2160393269 .fill-AA4{fill:#EDF0FD;}
.d2-2160393269 .fill-AA5{fill:#F7F8FE;}
.d2-2160393269 .fill-AB4{fill:#EDF0FD;}
.d2-2160393269 .fill-AB5{fill:#F7F8FE;}
.d2-2160393269 .stroke-N1{stroke:#0A0F25;}
.d2-2160393269 .stroke-N2{stroke:#676C7E;}
.d2-2160393269 .stroke-N3{stroke:#9499AB;}
.d2-2160393269 .stroke-N4{stroke:#CFD2DD;}
.d2-2160393269 .stroke-N5{stroke:#DEE1EB;}
.d2-2160393269 .stroke-N6{stroke:#EEF1F8;}
.d2-2160393269 .stroke-N7{stroke:#FFFFFF;}
.d2-2160393269 .stroke-B1{stroke:#0D32B2;}
.d2-2160393269 .stroke-B2{stroke:#0D32B2;}
.d2-2160393269 .stroke-B3{stroke:#E3E9FD;}
.d2-2160393269 .stroke-B4{stroke:#E3E9FD;}
.d2-2160393269 .stroke-B5{stroke:#EDF0FD;}
.d2-2160393269 .stroke-B6{stroke:#F7F8FE;}
.d2-2160393269 .stroke-AA2{stroke:#4A6FF3;}
.d2-2160393269 .stroke-AA4{stroke:#EDF0FD;}
.d2-2160393269 .stroke-AA5{stroke:#F7F8FE;}
.d2-2160393269 .stroke-AB4{stroke:#EDF0FD;}
.d2-2160393269 .stroke-AB5{stroke:#F7F8FE;}
.d2-2160393269 .background-color-N1{background-color:#0A0F25;}
.d2-2160393269 .background-color-N2{background-color:#676C7E;}
.d2-2160393269 .background-color-N3{background-color:#9499AB;}
.d2-2160393269 .background-color-N4{background-color:#CFD2DD;}
.d2-2160393269 .background-color-N5{background-color:#DEE1EB;}
.d2-2160393269 .background-color-N6{background-color:#EEF1F8;}
.d2-2160393269 .background-color-N7{background-color:#FFFFFF;}
.d2-2160393269 .background-color-B1{background-color:#0D32B2;}
.d2-2160393269 .background-color-B2{background-color:#0D32B2;}
.d2-2160393269 .background-color-B3{background-color:#E3E9FD;}
.d2-2160393269 .background-color-B4{background-color:#E3E9FD;}
.d2-2160393269 .background-color-B5{background-color:#EDF0FD;}
.d2-2160393269 .background-color-B6{background-color:#F7F8FE;}
.d2-2160393269 .background-color-AA2{background-color:#4A6FF3;}
.d2-2160393269 .background-color-AA4{background-color:#EDF0FD;}
.d2-2160393269 .background-color-AA5{background-color:#F7F8FE;}
.d2-2160393269 .background-color-AB4{background-color:#EDF0FD;}
.d2-2160393269 .background-color-AB5{background-color:#F7F8FE;}
.d2-2160393269 .color-N1{color:#0A0F25;}
.d2-2160393269 .color-N2{color:#676C7E;}
.d2-2160393269 .color-N3{color:#9499AB;}
.d2-2160393269 .color-N4{color:#CFD2DD;}
.d2-2160393269 .color-N5{color:#DEE1EB;}
.d2-2160393269 .color-N6{color:#EEF1F8;}
.d2-2160393269 .color-N7{color:#FFFFFF;}
.d2-2160393269 .color-B1{color:#0D32B2;}
.d2-2160393269 .color-B2{color:#0D32B2;}
.d2-2160393269 .color-B3{color:#E3E9FD;}
.d2-2160393269 .color-B4{color:#E3E9FD;}
.d2-2160393269 .color-B5{color:#EDF0FD;}
.d2-2160393269 .color-B6{color:#F7F8FE;}
.d2-2160393269 .color-AA2{color:#4A6FF3;}
.d2-2160393269 .color-AA4{color:#EDF0FD;}
.d2-2160393269 .color-AA5{color:#F7F8FE;}
.d2-2160393269 .color-AB4{color:#EDF0FD;}
.d2-2160393269 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="28.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.500000 82.000000 L 54.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2160393269)" /></g></a><g transform="translate(81 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
.d2-3413914892 .fill-N1{fill:#0A0F25;}
.d2-3413914892 .fill-N2{fill:#676C7E;}
.d2-3413914892 .fill-N3{fill:#9499AB;}
.d2-3413914892 .fill-N4{fill:#CFD2DD;}
.d2-3413914892 .fill-N5{fill:#DEE1EB;}
.d2-3413914892 .fill-N6{fill:#EEF1F8;}
.d2-3413914892 .fill-N7{fill:#FFFFFF;}
.d2-3413914892 .fill-B1{fill:#0D32B2;}
.d2-3413914892 .fill-B2{fill:#0D32B2;}
.d2-3413914892 .fill-B3{fill:#E3E9FD;}
.d2-3413914892 .fill-B4{fill:#E3E9FD;}
.d2-3413914892 .fill-B5{fill:#EDF0FD;}
.d2-3413914892 .fill-B6{fill:#F7F8FE;}
.d2-3413914892 .fill-AA2{fill:#4A6FF3;}
.d2-3413914892 .fill-AA4{fill:#EDF0FD;}
.d2-3413914892 .fill-AA5{fill:#F7F8FE;}
.d2-3413914892 .fill-AB4{fill:#EDF0FD;}
.d2-3413914892 .fill-AB5{fill:#F7F8FE;}
.d2-3413914892 .stroke-N1{stroke:#0A0F25;}
.d2-3413914892 .stroke-N2{stroke:#676C7E;}
.d2-3413914892 .stroke-N3{stroke:#9499AB;}
.d2-3413914892 .stroke-N4{stroke:#CFD2DD;}
.d2-3413914892 .stroke-N5{stroke:#DEE1EB;}
.d2-3413914892 .stroke-N6{stroke:#EEF1F8;}
.d2-3413914892 .stroke-N7{stroke:#FFFFFF;}
.d2-3413914892 .stroke-B1{stroke:#0D32B2;}
.d2-3413914892 .stroke-B2{stroke:#0D32B2;}
.d2-3413914892 .stroke-B3{stroke:#E3E9FD;}
.d2-3413914892 .stroke-B4{stroke:#E3E9FD;}
.d2-3413914892 .stroke-B5{stroke:#EDF0FD;}
.d2-3413914892 .stroke-B6{stroke:#F7F8FE;}
.d2-3413914892 .stroke-AA2{stroke:#4A6FF3;}
.d2-3413914892 .stroke-AA4{stroke:#EDF0FD;}
.d2-3413914892 .stroke-AA5{stroke:#F7F8FE;}
.d2-3413914892 .stroke-AB4{stroke:#EDF0FD;}
.d2-3413914892 .stroke-AB5{stroke:#F7F8FE;}
.d2-3413914892 .background-color-N1{background-color:#0A0F25;}
.d2-3413914892 .background-color-N2{background-color:#676C7E;}
.d2-3413914892 .background-color-N3{background-color:#9499AB;}
.d2-3413914892 .background-color-N4{background-color:#CFD2DD;}
.d2-3413914892 .background-color-N5{background-color:#DEE1EB;}
.d2-3413914892 .background-color-N6{background-color:#EEF1F8;}
.d2-3413914892 .background-color-N7{background-color:#FFFFFF;}
.d2-3413914892 .background-color-B1{background-color:#0D32B2;}
.d2-3413914892 .background-color-B2{background-color:#0D32B2;}
.d2-3413914892 .background-color-B3{background-color:#E3E9FD;}
.d2-3413914892 .background-color-B4{background-color:#E3E9FD;}
.d2-3413914892 .background-color-B5{background-color:#EDF0FD;}
.d2-3413914892 .background-color-B6{background-color:#F7F8FE;}
.d2-3413914892 .background-color-AA2{background-color:#4A6FF3;}
.d2-3413914892 .background-color-AA4{background-color:#EDF0FD;}
.d2-3413914892 .background-color-AA5{background-color:#F7F8FE;}
.d2-3413914892 .background-color-AB4{background-color:#EDF0FD;}
.d2-3413914892 .background-color-AB5{background-color:#F7F8FE;}
.d2-3413914892 .color-N1{color:#0A0F25;}
.d2-3413914892 .color-N2{color:#676C7E;}
.d2-3413914892 .color-N3{color:#9499AB;}
.d2-3413914892 .color-N4{color:#CFD2DD;}
.d2-3413914892 .color-N5{color:#DEE1EB;}
.d2-3413914892 .color-N6{color:#EEF1F8;}
.d2-3413914892 .color-N7{color:#FFFFFF;}
.d2-3413914892 .color-B1{color:#0D32B2;}
.d2-3413914892 .color-B2{color:#0D32B2;}
.d2-3413914892 .color-B3{color:#E3E9FD;}
.d2-3413914892 .color-B4{color:#E3E9FD;}
.d2-3413914892 .color-B5{color:#EDF0FD;}
.d2-3413914892 .color-B6{color:#F7F8FE;}
.d2-3413914892 .color-AA2{color:#4A6FF3;}
.d2-3413914892 .color-AA4{color:#EDF0FD;}
.d2-3413914892 .color-AA5{color:#F7F8FE;}
.d2-3413914892 .color-AB4{color:#EDF0FD;}
.d2-3413914892 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="https://twitter.com" xlink:href="https://twitter.com"><g id="a"><g class="shape" ><rect x="12.000000" y="12.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g></a><g id="b"><g class="shape" ><rect x="28.000000" y="148.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="54.500000" y="186.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><a href="https://google.com" xlink:href="https://google.com"><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 54.500000 82.000000 L 54.500000 144.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-3413914892)" /></g></a><g transform="translate(81 -4)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3440_35088111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@ -104,7 +104,7 @@
</clipPath>
</defs>
</svg>
</g><mask id="d2-2160393269" maskUnits="userSpaceOnUse" x="11" y="-6" width="104" height="221">
</g><mask id="d2-3413914892" maskUnits="userSpaceOnUse" x="11" y="-6" width="104" height="221">
<rect x="11" y="-6" width="104" height="221" fill="white"></rect>
<rect x="50.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="50.500000" y="170.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB