Create beautiful diagrams in minutes. Simple syntax. Endlessly customizable. D2 is the fastest and easiest way to get a mental model from your head onto the screen, then make edits with your team.

 

vars: {
  d2-config: {
    layout-engine: elk
    # Terminal theme code
    theme-id: 300
  }
}
network: {
  cell tower: {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    transmitter

    satellites -> transmitter: send
    satellites -> transmitter: send
    satellites -> transmitter: send
  }

  online portal: {
    ui: {shape: hexagon}
  }

  data processor: {
    storage: {
      shape: cylinder
      style.multiple: true
    }
  }

  cell tower.transmitter -> data processor.storage: phone logs
}

user: {
  shape: person
  width: 130
}

user -> network.cell tower: make call
user -> network.online portal.ui: access {
  style.stroke-dash: 3
}

api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}

network.data processor -> api server
 

 

Feature highlights

More features

Local CLIRobust CLI with watch mode. Completely offline workflow.

Most major OS'sMacOS, Linux, and Windows. D2 is included in many popular package managers like Homebrew and Winget.

VSCode and VimOfficial editor support for VSCode and Vim, with more coming soon.

Online playgroundCreate and share diagrams quickly by going to our hosted Playground.

ContainersFirst-class support for containers (grouping shapes in other shapes).

Images and IconsImport any image or icon online into your diagram

Multiple layout enginesChoose from 3 layout engines that uniquely handle different types of diagrams.

Use any fontTo customize the font, simply pass in your own .ttf files.

ImportsModularize your diagrams like your code. Split models from views or dice it any way you want.

VariablesReuse values like colors, labels, and anything else for clean diagram code.

GlobsAll the power of wildcard globs you're already familiar with.

AutoformatDon't sweat style decisions like indentations and spacing, D2 has a built-in autoformatter.

Language APIProgrammatically create diagrams by calling D2's language API.

Interactive tooltips and linksHover over shapes to learn more, or click through to another page.

Class shapeUML Class diagrams are fully supported

Sequence diagramsSequence diagrams are created by setting shape: sequence_diagram

Adaptive dark modeDiagrams adjust color schemes to fit user preferences automatically, anywhere on the web.

ExtensionsExplore official and community developed plugins and extensions

ExportsOn the CLI, you may export .d2 into SVG, PNG, PDF. More coming soon!

Cheat sheetDownload our handy one-pager D2 syntax cheat sheet