Architecture overview for an RFC

An engineer needs this while writing an RFC. The RFC has service boxes, labeled edges, and a legend. The diagram has to evolve in the same PR as the RFC. A design-tool export attached to the doc goes stale the moment the RFC is amended. Renaming a service should be editing a file, not redrawing a box.

This happens while the RFC is being written, and again each time the design is amended. The person doing it already owns the service list. They should not attach a picture that no longer matches the text.

The job is one 1600×1000 PNG. You keep { services: [], links: [] } in one data file and edit it as the design evolves. You export when the diagram has to match the current draft. The next amendment is an edit to the same file and another run.

Give Lerret a React component under .lerret/ and a data file. export writes a PNG. Same diagram, edited data, new image.

The component is .lerret/docs/architecture.jsx. It draws service boxes, labeled edges, and a legend. The services are an array. The links are an array. The legend is part of the component. You do not maintain a second picture of the same boxes.

Data is { services: [], links: [] } in one data file, edited as the design evolves. One file, one diagram, one image. The RFC and the data file can sit in the same PR. A reviewer can read both.

The image is a PNG at 1600×1000. services are the boxes. links are the labeled edges. The legend is in the component. You edit the file as the design evolves and export again for the same PR.

The diagram evolves with the RFC in the same PR. A design-tool export attached to a doc goes stale the moment the RFC is amended. You use Lerret because the diagram is the data file, and the data file is in the PR with the RFC.

The diagram is service boxes, labeled edges, and a legend. { services: [], links: [] } is edited as the design evolves. The diagram evolves with the RFC in the same PR. A design-tool export attached to a doc goes stale the moment the RFC is amended.

npx @lerret/cli@latest export

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