Illustrate a concept

The two banks, combinable

Every diagram is one pick from each bank: a structure that says the concept, dressed in a material that gives it beauty. The banks are open: every approved diagram adds its pair. There may be many other subjects; this is the start.

The founding examples

Eight studies made on day one, all with the cheap default engine, centimes in total. The first three play the same concept (an institutional world above, a living territory below, one new bridge) in three materials; the other five each play a different concept. No image carries a single word: real text always sits on the page, above.

spectacular

best of the bridge study

kept as counter-example

The four ways to draw one

One family, four recipes. The picture under each is a real thing it made.

concept-diagrams

Say: illustrate this concept

The house kind, above: forms that carry an idea before a word is read. Made with the cheap image engines, the text laid over the picture afterwards, never inside it.

diagram-design

Say: draw the architecture of this

The engineer kind, twenty-seven sorts: architecture, flow, sequence, timeline, quadrant. One self-contained page, one ink, one accent.

archify

Say: a map I can explore, checked against the code

The same subjects, but the reader hovers to trace a route and the map can be checked against a real repository. It can move, and it exports a picture or a film.

FossFLOW

Say: the isometric board

Machines, stores and documents as blocks seen from the corner, with a built-in icon set. Driven headlessly to a picture, so it lands in a page or a slide.

Looked at and refused, so nobody proposes them again. The whiteboard helpers (Miro, FigJam, Lucid) and the slide-visual makers need a human at the mouse, which fails the one test the studio applies: we must drive it end to end. arch-flows-visualizer makes the same self-contained page as the two above from five commits and no real licence. Datadef is the only one worth remembering: it exposes a machine interface and puts real product icons on an architecture, so it is a candidate the day a page needs vendor icons that FossFLOW does not carry.

The recipe

1. Say the concept in one sentence. If you cannot, no image will.
2. Pick the structure whose geometry is the argument (a network for connection, layers for accumulation, a bridge for two worlds).
3. Pick the material that dresses it with the right dignity for the audience and page.
4. Generate with the default engine; the prompt always ends with the no-text law. Several candidates cost centimes.
5. Judge before showing. Open the image yourself; discard the weak; regenerate. Frank never sees a first draft you would not defend.
6. Render in context. For a page that matters: three directions inside the real page, one recommendation marked.
7. Real text on top. Labels, titles and numbers live in HTML/SVG above the image, never inside it.
8. After the verdict, grow the banks. An approved diagram adds its material and structure here.

Engines and cost

The laws