D2 Diagrams

by Typora Team · v1.0.0 · updated Oct 17, 2026

D2 code blocks, drawn by the d2 program on your computer or by a Kroki server.

Markdown ExtensionDiagramNetworkRuns programsdiagramd2terrastructarchitectureofflinekroki
D2 Diagrams in Typora

Permissions

When you install it, Typora asks you to allow it to:

  • Send and receive data from https://kroki.io.
  • Run d2 as you, outside the sandbox.

Sandboxed pages. Ships HTML views that run in a sandboxed frame and only see what Typora sends them.

What it adds

Code block renderers
```d2
Settings
Draw with, Command, Layout, Hand-drawn look, Kroki server

Readme

D2 Diagrams

Draws ```d2 code blocks with D2. Choose how in Settings ▸ Extensions ▸ D2 Diagrams ▸ Options:

Draw withNeedsOffline
d2 command (default)d2 on your PATH, e.g. brew install d2Yes
Kroki serverA network connection; the source goes to kroki.io or your own KrokiNo

With the d2 command, diagrams follow the light or dark appearance, and the options pick the layout engine (dagre or ELK) and the hand-drawn look — unless the diagram sets theme-id, pad, layout-engine or sketch in vars: { d2-config: { … } }.

D2's own WebAssembly build is not used: its layout runs generated JavaScript, which Typora's extension pages do not allow.

Permissions

  • process: ["d2"] — runs d2 [--theme=…] [--pad=24] [--layout=…] [--sketch] - - with the fence's source on stdin, by name from your PATH or at the full path set in the options. Nothing else. Typora only allows this after you turn on Settings ▸ Extensions ▸ Allow extensions to run programs and accept the permission.
  • network: ["https://kroki.io"] — only with Kroki server: the fence's source is posted to https://kroki.io/d2/svg.