Docs concept diagram

A tech writer needs this while writing a concept page. The page has to show boxes, arrows, and labels. The diagram has to live in the docs repo, next to the page, so a rename is a find-and-replace and a PR can review the change. A design-tool export attached to the page will not do that.

This happens while the page is being written, not once when a slide is first drawn. The person doing it already owns the concept names. They should not redraw a box every time a name changes.

The job is one PNG per diagram, at the docs content width. You put { nodes: [], edges: [], caption } next to each artboard. One export writes the diagrams that have data. Adding a second diagram on the same page is another artboard and another colocated file.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same diagram component, colocated data, many images if you have more than one.

The component is .lerret/docs/flow-diagram.jsx. It lays out boxes, arrows, and labels in React. The nodes and edges are data. The caption is data. The layout is the component. Renaming a concept is editing a string in the data file.

Data is { nodes: [], edges: [], caption } per diagram, colocated with each artboard. This is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures them all. The diagram is code in the docs repo. It gets reviewed in the PR. There is no batch product, no queue, no orchestrator.

The image is a PNG at the docs content width.

The diagram is code in the docs repo. It gets reviewed in the PR, and renaming a concept is a find-and-replace, not a redraw. A design-file export attached to a doc goes stale the moment the concept is renamed. You use Lerret because the diagram is the data file, and the data file is in the PR.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.