Markdown ditaa diagram editor

Draw boxes and arrows with ordinary keyboard characters and see them turned into a ditaa diagram, with filled shapes, drop shadows, colours and special shapes such as documents and storage. The drawing stays in your Markdown as a ```ditaa block, so it reads as a picture even before it renders. Free in your browser, with no Java and no sign-up.

ditaa syntax

ditaa reads a picture, not a language. Closed outlines become filled boxes, lines join them, and anything that is not part of a line is kept as text. A few extra marks add colour, dashed lines and special shapes.

Boxes

Draw the outline with -, | and + at the corners. Use / and \ at the corners for a rounded box.

You write

+--------+    /--------\
| square |    | round  |
+--------+    \--------/

You get

Arrows and dashed lines

End a line with >, <, ^ or v for an arrow head. A : in a vertical line or = in a horizontal one makes the whole line dashed.

You write

+-------+     +-------+
| Start |---->| Check |
+---+---+     +-------+
    :
    v
+-------+
| Stop  |
+-------+

You get

Colours

A colour code inside a box fills it: cRED, cGRE, cBLU, cPNK, cYEL, cBLK, or c and three hex digits such as c8CF.

You write

+-------+  +-------+  +-------+
| cBLU  |  | cGRE  |  | cFC8  |
| Plan  |  | Build |  | Ship  |
+-------+  +-------+  +-------+

You get

Special shapes

A tag inside a box changes its shape: {d} document, {s} storage, {io} input or output, {c} choice, {mo} manual operation, {tr} trapezoid and {o} ellipse.

You write

+--------+   +--------+   +--------+
| Report |   | Orders |   | Input  |
|     {d}+-->|     {s}|<--+    {io}|
+--------+   +--------+   +--------+

You get

Options

A first line starting with ditaa sets options for the whole drawing: -S turns shadows off, -r rounds every corner, -E stops boxes that share an edge being pulled apart and -s 1.5 scales the drawing.

You write

ditaa -S -r
+------+   +------+
| One  +-->| Two  |
+------+   +------+

You get

Cheat sheet

Draw this	You get
`+--+` over `+--+`	A box with square corners
`/--\` over `\--/`	A box with rounded corners
`---->`, `<----`, `^`, `v`	Arrow heads
`--=--` or `:` in a line	A dashed line
`*` on a line	A point marker
`cRED`, `c8CF` in a box	A fill colour
`{d}`, `{s}`, `{io}`	Document, storage and input or output shapes
`{c}`, `{mo}`, `{tr}`, `{o}`	Choice, manual operation, trapezoid and ellipse
`o item`	A bullet point in the text
`ditaa -S -r -E` as the first line	No shadows, rounded corners, no edge separation

This is a renderer written for the browser from ditaa's documented syntax and test drawings, so you need no Java. Not covered: custom shapes from a configuration file, HTML mode, and / or \ as diagonal lines (here they only round corners).

Something not working? Let us know.