C4 diagram example: e-commerce platform

A small online store is one of the clearest C4 examples: one customer-facing person, one system, a handful of containers (storefront, catalog, orders, database), and one external dependency (a payment provider) that the system depends on but does not own. The diagram below is a real, live CRAYON-C4 project — drag a node, drill into a container, or open it in the designer to keep building on it.

Online Store — blog sampleThis diagram is live — drag nodes, drill down, click things. Opening it creates a local project on your device; nothing is uploaded.

Notice how the System Context diagram answers "what talks to what" without naming a single technology, while the Container diagram one level down brings in React, Node.js and PostgreSQL — the same model, two different questions answered.