Your architecture sketch has attractive boxes, but the connector labels disappeared from the reading copy. Export the maintained D2 source to SVG, then inspect the text on every connection before handing over the diagram. Do not use the appearance of three boxes as proof that their relationships survived.
Consider a fictional document pipeline: Source draft connects to HTML review with the label “render,” and HTML review connects to Delivery package with “include sources.” There are three named components and two directed connections. The exercise describes file preparation, not a running application or an observed service architecture.
Open the complete example · Download the full HTML source
Write the connection meaning in the source
direction: right
draft: Source draft
review: HTML review
package: Delivery package
draft -> review: render
review -> package: include sources
Save this as handoff.d2. Keep the short identifiers separate from the displayed names so another person can change a caption without creating an accidental second component. Read the two source connection statements aloud before judging the rendered layout.
The D2 export guide identifies SVG as the default command-line export and describes opening the resulting file in a browser or embedding it in a web page. With your chosen D2 release available, use explicit input and output paths:
d2 handoff.d2 handoff.svg
Retain the command result, the D2 version, and the generated file. This guide's exercise uses a portable D2 executable in an isolated work directory; it does not require changing a system installation to explain the source-to-SVG handoff.
Read all five labels in the actual export
Inspect Source draft, HTML review, and Delivery package, then the connection labels render and include sources. Check that the arrow leaving Source draft reaches HTML review and that the next one reaches Delivery package. A visually similar export with a missing connector caption communicates less than the maintained source.
The source defines the relationship; the export makes it readable. Neither the source nor its rendering establishes that a real workflow enforces those steps. Label the diagram according to whether it describes an intended design, a supplied contract, or an observed system.
The export guide notes that the SVG contains styling and that viewers can handle fonts and CSS differently. Test the actual browser reading copy instead of assuming that another viewer's screenshot establishes the recipient's result. Preserve the original SVG when a downstream application needs the vector file.
Deliver the source with the reading copy
An HTML wrapper can put the diagram above the exact D2 source and the two-step prose description. That is enough for this small review; adding an approval button or a fake live-status panel would imply a different task.
The existing PlantUML sequence guide checks messages inside alternative branches. This D2 example is a component-and-connection export. Do not transfer sequence-diagram meanings to these arrows unless the supplied source contract defines them.
When a connector changes, edit the D2 file and regenerate the SVG. Reopen the delivered HTML at narrow width and inspect the connector captions again. End the review by keeping the accepted D2 source and its matching SVG together, with a note identifying what the two connections mean.
Download the maintained source and actual output archive. This archive retains the supplied fixture and the original generated files beside the reading copy.