Native D2 SVG and the source that defines its two connections

HTML for this example

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>D2 export: two named connections</title><style>*{box-sizing:border-box}body{font:16px/1.65 system-ui;color:#26384a;margin:0;padding:20px;max-width:950px}h1{font-size:27px;line-height:1.2}h2{font-size:22px}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#f2f5f8}svg{max-width:100%;height:auto}table{border-collapse:collapse;width:100%}th,td{padding:8px;text-align:left;border-bottom:1px solid #ccd5dd}a{color:#1f5f98}.diagram-narrow{display:none}@media(max-width:600px){.diagram-wide{display:none}.diagram-narrow{display:block}}</style><h1>D2 export: two named connections</h1><p>Fictional document handoff. Reading copy; no work is submitted or saved.</p><svg class="diagram-wide" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.9.0" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1068 268"><svg class="d2-4008377456 d2-svg" width="1068" height="268" viewBox="-101 -101 1068 268"><rect x="-101" y="-101" width="1068" height="268" rx="0" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-4008377456 .text-bold {
	font-family: "d2-4008377456-font-bold";
}
@font-face {
	font-family: d2-4008377456-font-bold;
	src: url("data:application/font-woff;base64,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");
}
.d2-4008377456 .text-italic {
	font-family: "d2-4008377456-font-italic";
}
@font-face {
	font-family: d2-4008377456-font-italic;
	src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
}
.connection {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blend {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

		.d2-4008377456 .fill-N1{fill:#0A0F25;}
		.d2-4008377456 .fill-N2{fill:#676C7E;}
		.d2-4008377456 .fill-N7{fill:#FFFFFF;}
		.d2-4008377456 .fill-B1{fill:#0D32B2;}
		.d2-4008377456 .fill-B6{fill:#F7F8FE;}
		.d2-4008377456 .stroke-B1{stroke:#0D32B2;}
		.d2-4008377456 .stroke-B2{stroke:#0D32B2;}.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;}.light-code{display: block}.dark-code{display: none}]]></style><g class="ZHJhZnQ="><g class="shape" ><rect x="0" y="0" width="133" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.5" y="38.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Source draft</text></g><g class="cmV2aWV3"><g class="shape" ><rect x="320" y="0" width="137" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="388.5" y="38.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HTML review</text></g><g class="cGFja2FnZQ=="><g class="shape" ><rect x="701" y="0" width="165" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="783.5" y="38.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Delivery package</text></g><g class="KGRyYWZ0IC0mZ3Q7IHJldmlldylbMF0="><marker id="mk-d2-4008377456-3488378134" markerWidth="10" markerHeight="12" refX="7" refY="6" viewBox="0 0 10 12" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0,0 10,6 0,12" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 134.5 33 C 207.699997 33 245.300003 33 316.5 33" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4008377456-3488378134)" mask="url(#d2-4008377456)" /><text x="226.5" y="39" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render</text></g><g class="KHJldmlldyAtJmd0OyBwYWNrYWdlKVswXQ=="><path d="M 459 33 C 554.599976 33 603.400024 33 697 33" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4008377456-3488378134)" mask="url(#d2-4008377456)" /><text x="579" y="39" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">include sources</text></g><mask id="d2-4008377456" maskUnits="userSpaceOnUse" x="-101" y="-101" width="1068" height="268">
<rect x="-101" y="-101" width="1068" height="268" fill="white"></rect>
<rect x="202" y="23" width="49" height="21" fill="black"></rect>
<rect x="526" y="23" width="106" height="21" fill="black"></rect>
</mask></svg></svg>
<svg class="diagram-narrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.9.0" preserveAspectRatio="xMinYMin meet" viewBox="0 0 367 642"><svg class="d2-2252321181 d2-svg" width="367" height="642" viewBox="-101 -101 367 642"><rect x="-101" y="-101" width="367" height="642" rx="0" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-2252321181 .text-bold {
	font-family: "d2-2252321181-font-bold";
}
@font-face {
	font-family: d2-2252321181-font-bold;
	src: url("data:application/font-woff;base64,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");
}
.d2-2252321181 .text-italic {
	font-family: "d2-2252321181-font-italic";
}
@font-face {
	font-family: d2-2252321181-font-italic;
	src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
}
.connection {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blend {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

		.d2-2252321181 .fill-N1{fill:#0A0F25;}
		.d2-2252321181 .fill-N2{fill:#676C7E;}
		.d2-2252321181 .fill-N7{fill:#FFFFFF;}
		.d2-2252321181 .fill-B1{fill:#0D32B2;}
		.d2-2252321181 .fill-B6{fill:#F7F8FE;}
		.d2-2252321181 .stroke-B1{stroke:#0D32B2;}
		.d2-2252321181 .stroke-B2{stroke:#0D32B2;}.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;}.light-code{display: block}.dark-code{display: none}]]></style><g class="ZHJhZnQ="><g class="shape" ><rect x="16" y="0" width="133" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="82.5" y="38.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Source draft</text></g><g class="cmV2aWV3"><g class="shape" ><rect x="14" y="187" width="137" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="82.5" y="225.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">HTML review</text></g><g class="cGFja2FnZQ=="><g class="shape" ><rect x="0" y="374" width="165" height="66" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="82.5" y="412.5" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Delivery package</text></g><g class="KGRyYWZ0IC0mZ3Q7IHJldmlldylbMF0="><marker id="mk-d2-2252321181-3488378134" markerWidth="10" markerHeight="12" refX="7" refY="6" viewBox="0 0 10 12" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0,0 10,6 0,12" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 82.5 67.5 C 82.5 114.300003 82.5 138.699997 82.5 183.5" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2252321181-3488378134)" mask="url(#d2-2252321181)" /><text x="82.5" y="132" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">render</text></g><g class="KHJldmlldyAtJmd0OyBwYWNrYWdlKVswXQ=="><path d="M 82.5 254.5 C 82.5 301.299988 82.5 325.700012 82.5 370.5" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2252321181-3488378134)" mask="url(#d2-2252321181)" /><text x="83" y="319" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">include sources</text></g><mask id="d2-2252321181" maskUnits="userSpaceOnUse" x="-101" y="-101" width="367" height="642">
<rect x="-101" y="-101" width="367" height="642" fill="white"></rect>
<rect x="58" y="116" width="49" height="21" fill="black"></rect>
<rect x="30" y="303" width="106" height="21" fill="black"></rect>
</mask></svg></svg>
<p>Source draft goes to HTML review (render). HTML review goes to Delivery package (include sources).</p><p>The narrow view uses another actual D2 export with direction: down; relationship labels are unchanged.</p><h2>Maintained D2 source</h2><pre>direction: right
draft: Source draft
review: HTML review
package: Delivery package
draft -&gt; review: render
review -&gt; package: include sources
</pre><p>Actual portable D2 0.9.0 SVG output. The component names and relationships are illustrative.</p></html>