Cover image generator

Fill in the eyebrow, title and subtitle, then place up to six boxes on a 3-column grid and connect them with arrows. The preview updates as you type.

Diagram boxes

A box appears once it has a label. Position is a 3-column grid, top row is row 0.

Box 1
Box 2
+ Add more boxes (up to 4 more)
Box 3
Box 4
Box 5
Box 6

Arrows

Connects two boxes by number. Both ends need a labeled box.

+ Add more arrows (up to 5 more)

SVG is a vector file for editing in Illustrator or Figma. WebP and PNG are flat images, ready to use as-is.

This tool needs JavaScript. Everything it draws happens on this device — nothing you type is sent anywhere.

This runs entirely in your browser. Nothing you type is uploaded, logged or stored.

Where this template comes from

tools.belchamber.us draws its own technical posts' covers with exactly this template -- one layout, different text and a different small diagram, generated from data rather than requested from an image model one post at a time. This tool is the same drawing, available for a one-off card without a build.

Placing boxes

Column and row are grid positions starting at 0. A box with span: 2 spans two columns, which is useful for a box that needs to sit under two narrower ones above it. Leave a box's label blank to remove it from the drawing.

Role picks the color. concept (blue) is the mechanism being explained, instance (green) is a result or something that works, failure (red) is what is being fixed or what goes wrong, warning (amber) flags a caveat, and neutral (gray) is a plain fact with no verdict attached.

Arrows

An arrow connects two box numbers (1-6, matching the box slots above). It routes itself: a straight line if the two boxes share a row or column, one right-angle bend otherwise.