Skip to content
Flowmark

Gallery

Pick a diagram that looks like your problem. Open it full-width, edit the source, steal the pattern. The picture is the docs.

Looking for a job-to-be-done? Architecture, event-driven,workflows, ERD,C4, layout craft— each leads with a live diagram.

System maps

Diagram with 12 nodes and 15 edges CheckoutEdge → services → data → Stripe · sync calls and OrderPlacedClientsEdgeApplicationData planeIntegrationsWeb checkoutSPAMobile appiOS / AndroidCDNAPI GatewayGatewayKongCheckoutcart · totals · place orderInventoryreserve stockBillingauthorize · capturePostgresRedisEvent busStripeEmailassetsHTTPSHTTPSPOST /ordersGET /stockPOST /paywrite ordersessionreservationshot SKUsPaymentIntentpayment rowOrderPlacedreceipt
Checkout architecture
Clients through edge, services, data, and Stripe — metro routing, brand icons, and OrderPlaced on the bus.
Diagram with 15 nodes and 16 edges Enterprise RAGGuarded retrieval across ingress, orchestration, knowledge, and controlsIngressOrchestrationKnowledgeControlsAnalystAuth gatewayGatewayOIDCPolicy OK?Query rewriterEncoderRetrievalRerankerGeneratorServiceLLMEmbeddingsvector indexDocument storechunked corpusFeature cacheOutput guardAnswerTelemetryBlockedyesnoyesnokNNhydrate chunksscorestokens
Enterprise RAGAnimated
Four planes — ingress policy, retrieval orchestration, knowledge stores, and output guards — with sync, dependency, and failure edges.
Diagram with 10 nodes and 10 edges Layered architecturePresentation → API → data as stretch bandssystemExperiencesServicesDataBrowserMobilePartner portalAPI GatewayCheckoutCatalogBillingEvent busRedisPostgresOrderPlaced
Layered architecture
Horizontal layers that hold as planes. Pack members side-by-side; wire across band boundaries.
Diagram with 14 nodes and 14 edges Hexagonal architectureOrder core · driving & driven adapters · queue-side Inventory & FulfillmentOrder contextActorsDriving adaptersApplication coreDriven adaptersSecondary contextsMessage portsInventory contextApplication coreDriven adaptersFulfillment contextBrowserMobilePartner portalWeb BFFAPI GatewayOrderOrders DBRabbitMQinventoryfulfillmentInventoryRedisStock DBFulfillmentwrite orderOrderPlacedrouteroutegetloadset
Hexagonal architectureAnimated
Ports & adapters: actors drive the Order hexagon; RabbitMQ opens Inventory and Fulfillment contexts with cache-aside stock.

Event pipelines

Diagram with 12 nodes and 13 edges OrderPlaced pipelineOne publish · fan-out queues · workers · sinks · dead-letterProducersQueuesConsumersSinksCheckoutEvent busBrokerKafkaorderspaymentsemailInventory workerBilling workerNotify workerOrders DBStripeEmail providerdead-letterOrderPlacedrouterouterouteupsert linescapturepayment statusreceiptpoison messageretry exhausted
OrderPlaced pipeline
Publish once — Kafka routes to queues, workers hit sinks, poison paths land in dead-letter.

Workflows

Diagram with 11 nodes and 13 edges Customer refund requestEligibility · inspection · approval · payout — metro + jumpsApproval laneFulfillmentCustomer submitsrefundWithin return window?Inspect returned itemItem condition OK?Under auto-approvelimit?Manager reviewApprove refundRefund to cardEmail confirmationDeny requestClose caseyesnoyesnoyesno
Customer refund requestAnimated
Eligibility → inspection → approval → payout. Priorities keep the happy path obvious; jumps keep crossings legible.
Diagram with 18 nodes and 21 edges Temporal runtimeOrder WorkflowPromise.alloutcomesHappy pathCompensateSystemsCheckout APIStartWorkflowTemporalServiceServerordersTask queueWorkerPoll + executeValidate OrderActivity · retriesReserve InventoryAuthorize PaymentAwaitPaymentCapturedSignal or 15m timerPayment ok?Ship Order (child)SubprocessTemporalChild workflowMark Completed✓Notify CustomerCompensate Reserve!Saga rollbackFail Workflow!Inventory APIPaymentsShippingEmailStart Order Workflowschedulerun OrderWorkflowyestimeoutReadHoldAuthorizeSignal Payment CapturedCreate labelReceiptRelease hold
Order orchestration (Temporal)Animated
Checkout starts OrderWorkflow — parallel activities, PaymentCaptured signal vs timer, ShipOrder child, and compensate on timeout.
Diagram with 9 nodes and 21 edges Parallel [Reserve]AuthorizeAlternate [payment ok]timeoutAwait Payment Captured (signal or 15m timer)Checkout APITemporalordersOrderWorkflowInventory APIPaymentsShippingEmailShip Order1. Start Order Workflow2. schedule3. poll4. Validate · Read5. ok6. Hold7. held8. Authorize9. auth ok10. PaymentCaptured11. Ship Order12. Start child13. Create label14. label15. shipped16. Notify Customer17. sent18. Compensate · Release hold19. released20. Fail WorkflowSignal PaymentCaptured or timer fires
Order orchestration (Temporal) — sequenceAnimated
Interaction view of OrderWorkflow — parallel reserve/authorize, payment signal, ShipOrder child create/destroy, and compensate on timeout.

Data models

Diagram with 6 nodes and 5 edges Checkout schemaCustomers · catalog · orders · payments — FK crow’s-feetcustomersPKiduuidUKemailtextNNnametextNNcreated_attimestamptzNNproductsPKiduuidUKskutextNNnametextNNunit_price_centsintNNactiveboolNNordersPKiduuidFKcustomer_iduuidNNstatustextNNcurrencytextNNtotal_centsintNNplaced_attimestamptzNNorder_itemsPKiduuidFKorder_iduuidNNFKproduct_iduuidNNqtyintNNunit_price_centsintNNpaymentsPKiduuidFKorder_iduuidNNprovidertextNNUKprovider_reftextamount_centsintNNstatustextNNcaptured_attimestamptzshipmentsPKiduuidFKorder_iduuidNNcarriertextNNUKtrackingtextshipped_attimestamptz
Checkout schema
First-class tables and FK crow’s-feet — persistence that shares the same SVG path as architecture maps.

Layout craft

Diagram with 8 nodes and 6 edges Platform gridNamed columns with core spanning both rowsplatformEdgeCoreDataOpsAPI GatewayCheckoutInventoryBillingPostgresRedisMetricsLogs
Platform grid
Edge / core / data on named columns. A spanning core shows what region arrange is for.
Diagram with 9 nodes and 7 edges Grid spanscolSpan full-width bands and rowSpan tall columnsplatformIngressEdgeCoreDataOpsCDNAPI GatewayAuthCheckoutBillingPostgresRedisMetricsLogs
Platform spans
Ingress spans the width; core owns height; ops shares a band. Spans without a canvas.

Presentation

Diagram with 9 nodes and 9 edges Platform overviewReview-ready chrome — title and group accents — still embeddable SVGEdgeCoreDataCDNAPI GatewayGatewayKongAuthCheckoutBillingCatalogPostgresRedisEventsChargedOrderPlaced
Presentation slideAnimated
Opt-in chrome for design reviews — title, legend, accents — same graph, still embeddable SVG.

Next

Section titled “Next”