Markdown ASCII diagram maker

Draw a diagram in plain ASCII and watch it turn into a clean SVG. You type boxes, arrows and labels with ordinary keyboard characters, and svgbob renders the shapes. We save the ASCII in your Markdown, so the drawing stays readable even before it renders.

svgbob ASCII drawing

There is no keyword and no grammar to learn. You draw the picture with characters and svgbob reads the shapes out of it. Straight runs of characters become lines, corner marks turn them into boxes, and arrow heads point the lines. Anything svgbob does not recognise as a shape it keeps as plain text, so labels just sit where you type them.

The drawing characters

These are the marks svgbob looks for. Line them up on a monospace grid and it joins them into shapes.

Character	What it draws
`-`	A horizontal line segment
`\|`	A vertical line segment
`+`	A join or a square corner where lines meet
`.`	A rounded top corner
`'`	A rounded bottom corner
`/` `\`	Diagonal lines and slanted corners
`>` `<` `v` `^`	Arrow heads (right, left, down, up)
`*` `o`	A solid dot and a hollow dot at a join

A box

Corners plus straight runs make a rectangle. Use . and ' for rounded corners, or + for square ones. Text inside the box is just typed there.

You write

.-------.
| Hello |
'-------'

You get

Arrows

End a line with >, <, v or ^ and svgbob draws a head. Lines can carry a label as ordinary text sitting beside them.

You write

A ----> B

C <---> D

You get

Boxes joined by arrows

Draw two boxes and connect them. A + lets a line leave a box edge, and v points it down into the next one.

You write

  .--------.
  | Client |
  '---+----'
      |
      v
  .--------.
  | Server |
  '--------'

You get

Diagonals and dots

Use / and \ for slants, and * or o to mark a junction.

You write

    *
   / \
  /   \
 o-----o

You get

Cheat sheet

Draw this	You get
`----`	A horizontal line
`\|`	A vertical line
`.--.` over `'--'`	A box with rounded corners
`+--+` over `+--+`	A box with square corners
`--->`	A line with an arrow head
`<--->`	A line with a head at each end
`/` `\`	Diagonal lines
`*` `o`	Solid and hollow junction dots