Diagram playground

Write a diagram as text and it renders here as you type. Canvas editing for six of ten notations. Nothing leaves your browser. Syntax reference ·

Source text

archlab 1.0
schema "https://arch-lab.dev/schema/v1/diagram.schema.json"
title "Order Shop"
description "A deliberately small model of one flow: a customer places an order in an online shop."
created 2026-07-27T00:00:00Z
updated 2026-07-27T00:00:00Z
generator "arch-lab" "0.1.0"

@component d-cmp-order-service "Order Service — Components" owner=order-service
  desc "The parts that place one order. Boundary nodes come from the container view."
  view 1 0 0
  ext-email-cmp:external ^d-cnt-order-shop/ext-email (752,520 160x80)
  ext-order-db:database ^d-cnt-order-shop/order-db (496,688 176x80)
  ext-payment-cmp:external ^d-cnt-order-shop/ext-payment (240,688 160x80)
  ext-storefront:external ^d-cnt-order-shop/storefront (480,40 176x80)
  order-api:component "Order API Handler" [Go / chi] (480,192 176x88)
    desc "Validates the request and maps errors to HTTP responses."
  order-repository:component "Order Repository" [Go / pgx] (496,520 176x88)
    desc "Persistence for the order record."
  payment-client:component "Payment Client" [Go] (240,520 176x88)
    desc "Adapter for the payment provider's REST API."
  place-order-usecase:component "Place Order Use Case" [Go] (472,352 192x88)
    desc "Takes payment, saves the order, then sends the confirmation."

order-api -> place-order-usecase : "Invokes with a validated order" id=e-api-usecase
  payment-client -> ext-payment-cmp : "Authorises and captures the card" [HTTPS/JSON] ~e-orders-payment id=e-payment-provider
  order-repository <-> ext-order-db : "Inserts and reads orders" [SQL/TCP] ~e-orders-db id=e-repo-db
  ext-storefront -> order-api : "POST /orders" [HTTP/JSON] ~e-storefront-orders id=e-storefront-api
  place-order-usecase -> ext-email-cmp : "Sends the order confirmation" [HTTPS/JSON] ~e-orders-email id=e-usecase-email
  place-order-usecase -> payment-client : "Requests payment authorisation" id=e-usecase-payment
  place-order-usecase -> order-repository : "Saves the accepted order" id=e-usecase-repo

@container d-cnt-order-shop "Order Shop — Containers" owner=order-shop
  desc "The deployable pieces that place one order."
  view 1 0 0
  ext-customer:person ^d-ctx-root/customer (480,40 160x88)
  ext-email:external ^d-ctx-root/email-provider (688,560 160x80)
  ext-payment:external ^d-ctx-root/payment-provider (480,560 160x80)
  order-db:database "Order Database" @postgresql~ [PostgreSQL 16] (264,560 176x88)
    desc "Orders and their payment status. System of record."
  order-service:container "Order Service" @golang~ [Go 1.22] >d-cmp-order-service (472,376 176x88)
    desc "Accepts an order, takes payment, and records it."
  storefront:container "Storefront Web App" @nextjs~ [Next.js 15] (472,208 176x88)
    desc "Product pages, the cart, and the checkout form."

ext-customer -> storefront : "Browses products and checks out" [HTTPS] ~e-customer-shop id=e-customer-storefront
  order-service <-> order-db : "Reads and writes orders" [SQL/TCP] id=e-orders-db
  order-service -> ext-email : "Sends order confirmation" [HTTPS/JSON] ~e-shop-email id=e-orders-email
  order-service -> ext-payment : "Authorises payment" [HTTPS/JSON] ~e-shop-payment id=e-orders-payment
  storefront -> order-service : "Submits the order" [HTTP/JSON] id=e-storefront-orders

path checkout "Placing an order"
    beat "A shopper checks out in the storefront."
      ext-customer -> storefront
    beat "The storefront submits the order to the service."
      storefront -> order-service
    beat "Which authorises the payment, stores the order, and confirms it by email."
      order-service -> ext-payment
      order-service -> order-db
      order-service -> ext-email

@context d-ctx-root "Order Shop — System Context"
  desc "Who places orders and which third parties fulfil them."
  view 1 0 0
  customer:person "Customer" (480,80 160x96)
    desc "Shopper picking products and placing an order."
  email-provider:external "Email Provider" [REST API] (640,600 200x96)
    desc "Third party that delivers order confirmation emails."
  order-shop:system "Order Shop" [Next.js / Go] >d-cnt-order-shop (400,320 320x120)
    desc "Small online shop: browse products, place an order, pay."
  payment-provider:external "Payment Provider" [REST API] (280,600 200x96)
    desc "Third party that authorises and captures card payments."

customer -> order-shop : "Places an order" [HTTPS] id=e-customer-shop
  order-shop -> email-provider : "Sends order confirmation" [HTTPS/JSON] id=e-shop-email
  order-shop -> payment-provider : "Authorises payment" [HTTPS/JSON] id=e-shop-payment

Tab indents · Esc then Tab leaves the editor · syntax reference

Read-only

React Flow

Order Shop

A deliberately small model of one flow: a customer places an order in an online shop.