Markdown freeform diagram maker

Draw freeform diagrams on a canvas: boxes, arrows and text, in any layout you like. We save an editable model in your Markdown next to a rendered image.

Freeform syntax

Freeform is a small text format made for this editor. The first line is the word freeform. Every line after it is one shape: a shape name, then its numbers in pixels, then an optional "label" in quotes, then any style tokens written as key=value. The origin is the top left. Blank lines and lines starting with # are ignored.

You write

freeform
rect 40 40 120 60 "Start" fill=#e0e7ff stroke=#4f46e5
arrow 160 70 300 70
ellipse 360 70 60 34 "Ship" fill=#dcfce7 stroke=#16a34a
text 40 150 "a freeform note" color=#64748b size=13

You get

Rectangle

Write rect then the top-left corner x y and the size w h. Add a "label" to centre text inside it, and fill / stroke to colour it.

You write

freeform
rect 20 20 140 60 "Inbox"
rect 20 100 140 60 "Archive" fill=#fef9c3 stroke=#ca8a04

You get

Circle and ellipse

A circle takes a centre cx cy and a radius r. An ellipse takes a centre cx cy and two radii rx ry. Both accept a "label", fill and stroke.

You write

freeform
circle 70 70 50 "One" fill=#dbeafe stroke=#2563eb
ellipse 210 70 70 40 "Two" fill=#dcfce7 stroke=#16a34a

You get

Line and arrow

A line joins two points x1 y1 and x2 y2. An arrow is the same but draws a head at the second point and can carry a "label". Set the colour with stroke.

You write

freeform
line 20 30 200 30
arrow 20 90 200 90 "next" stroke=#e11d48

You get

Text

Place a free label with text at a point x y followed by the required "label". Set color and size to style it.

You write

freeform
text 10 30 "Big title" size=22
text 10 70 "small grey note" color=#94a3b8 size=13

You get

Cheat sheet

Write this	You get
`freeform`	First line — starts the diagram
`rect x y w h ["label"]`	A rectangle at (x, y) sized w by h
`circle cx cy r ["label"]`	A circle centred at (cx, cy)
`ellipse cx cy rx ry ["label"]`	An ellipse centred at (cx, cy)
`line x1 y1 x2 y2`	A plain line between two points
`arrow x1 y1 x2 y2 ["label"]`	A line with an arrowhead at the end
`text x y "label"`	A free text label at (x, y)
`fill=#hex`	Fill colour (rect, circle, ellipse)
`stroke=#hex`	Line colour (any shape but text)
`color=#hex`	Text colour (text only)
`size=n`	Text size in pixels (text only)
`# note`	A comment line — ignored