Diagrams

D2 Renderer

Quick start
Diagram

The diagram is drawn in your browser. Your code is not stored unless you click "Share with preview" yourself.

D2 has the best automatic layout of any diagram language, but you need a renderer to see it. Paste your code and the diagram appears right away.

What people use this for

  • a -> b: label — connection with text
  • server: {shape: cylinder} — pick a shape
  • group: { a; b } — group elements
  • a -> b: {style.stroke: "#2563eb"} — add colour
  • a <-> b — bidirectional connection
  • x.y.z — name nested elements

What others think of this tool

No reviews for this tool yet. Yours would be the first.

Frequently asked questions

What is D2?

A diagram language from 2022 with a pleasant syntax and strong automatic layout — especially for architecture diagrams with many parts, the result looks better than with older languages.

Is my code stored?

No. Your D2 is converted into a drawing on our server and discarded immediately; we do not keep it and do not log its contents. Only when you click 'Share with preview' yourself do we store the code to create a shareable link.

Why don't imports with @ work?

An import makes D2 read another file. In a web tool that could point at files on our server, so we do not allow it. This tool renders a single self-contained diagram definition.

Why is my markdown label missing?

Blocks using |md ... | may contain arbitrary HTML. We strip those from the drawing, because formatted text from an unknown visitor inside a web page is a well-known security risk. Regular labels are shown normally.

Why does a large diagram take long or stop?

We cut off a render after six seconds. A normal diagram finishes in a fraction of that; if you hit the limit, the schema is usually too large for one picture and is better split up.