D2 for Your Website

D2 is a declarative diagramming language designed to turn text into clean diagrams with minimal syntax.

It is a strong choice for system maps, architecture views, and diagrams you want to keep readable in source form.

Simple example

direction: right
Idea: Draft: Review: Publish

Rendered result

What you need to show it on your site

To display a live diagram, the site needs either a build step that turns the source into SVG before publishing, or a browser-side renderer that loads the diagram text and draws it at view time.

For permanent pages, the build-time SVG path is usually the best fit. It keeps the page stable, avoids script dependencies, and makes the diagram part of the published page rather than a runtime request.

Authoritative sources

• D2 home
• D2 tour
• D2 documentation