Markdown blockdiag editor

Write a block diagram in blockdiag's short DOT-like text and see it drawn as you type. blockdiag places the boxes on a grid and routes the lines for you. The text sits in your Markdown as a ```blockdiag block. Free in your browser, with no Python and no sign-up.

The same family covers sequence diagrams, swimlane activity diagrams and network, rack and packet diagrams.

blockdiag syntax

A diagram is blockdiag { … } holding statements that end with ;. Naming a node creates it, arrows join nodes, and settings go in square brackets after a node or a link. Lines starting with // or # are comments.

Nodes and links

Join nodes with ->. A chain draws several links at once, and a comma sends one node to several others.

You write

blockdiag {
  A -> B -> C;
  A -> D, E;
}

You get

Labels, shapes and colours

Attributes in square brackets set a node's label, shape and colour, or a link's label and style.

You write

blockdiag {
  start [label = "Order in", shape = roundedbox];
  ok [label = "Paid?", shape = diamond];
  ship [label = "Ship", color = "#cfe8cf"];
  start -> ok;
  ok -> ship [label = "yes"];
  ok -> start [label = "no", style = dashed];
}

You get

Groups

A group draws a shaded area behind the nodes it lists, with an optional label and colour.

You write

blockdiag {
  web -> app -> db;
  app -> cache;
  group {
    label = "Back end";
    color = "#dde8ff";
    app; db; cache;
  }
}

You get

Direction and size

Diagram settings go at the top: orientation = portrait runs the diagram downwards, and default_shape, node_width and node_height change every node.

You write

blockdiag {
  orientation = portrait;
  default_shape = roundedbox;
  node_width = 100;
  Draft -> Review -> Live;
}

You get

Cheat sheet

Write this	You get
`A -> B;`	An arrow from A to B
`A <- B;`, `A <-> B;`, `A -- B;`	A reversed arrow, a two-way arrow, a plain line
`A -> B, C;`	Arrows from A to both B and C
`A [label = "Text"];`	A node with its own label
`[shape = roundedbox]`	Another shape: `diamond`, `ellipse`, `note`, `cloud`, `mail`, `actor`, `flowchart.database` and more
`[color = "#cfe8cf"]`, `[textcolor = red]`	Fill and text colour
`A -> B [label = "yes", style = dashed];`	A labelled, dashed link
`group { label = "G"; A; B; }`	A shaded group
`orientation = portrait;`	Run the diagram downwards
`default_shape = roundedbox;`	The shape for every node

This is blockdiag's layout and drawing ported to run in your browser. Not covered: icons and backgrounds from files or web addresses (only data: images), exact font metrics, and plugins other than attributes and autoclass.

Something not working? Let us know.