@meltemi/diagrams-cli 0.0.0-stage → 1.9.0

package/templates/free/diagrams/slide.meltemi

@@ -0,0 +1,39 @@
+language "0.2"
+
+// A slide composed freely: every object is placed by hand on a 16:9 canvas. Drag them on the
+// canvas in VS Code, or change the places below.
+diagram slide: free {
+  title "How a request flows"
+  canvas (1280, 720)
+  layout manual
+
+  text heading "How a request flows"
+  text subtitle "From the browser to the database in two steps"
+
+  box browser "Browser"
+  icon person "tabler:user"
+
+  group backend "Backend" {
+    box api "API"
+    box db "Database"
+    api -> db: "SQL" as query
+  }
+
+  browser -> api: "HTTPS" as request
+
+  placement {
+    place heading at (640, 90)
+    place subtitle at (640, 145)
+    place person at (220, 300)
+    place browser at (220, 400)
+    place backend at (800, 400)
+    size backend (600, 220)
+    place api at (150, 110)
+    place db at (450, 110)
+  }
+
+  style heading { fontSize 40; fontWeight 700 }
+  style subtitle { color muted }
+  style db { shape cylinder }
+  animate request { effect flow; duration 1200ms; repeat forever }
+}

package/templates/purchase/diagrams/architecture.meltemi

@@ -0,0 +1,36 @@
+language "0.2"
+
+import commerce from "../models/commerce.meltemi"
+
+// The general architecture: the shop in its context, then its containers.
+diagram context: c4 using commerce {
+  title "The shop in context"
+  level context
+}
+
+diagram containers: c4 using commerce {
+  title "Inside the shop"
+  level container
+  scope shop
+  layout assisted
+
+  // Two rows inside the shop: the order's way in above, its data and events below.
+  placement {
+    place customer at (130, 70)
+    place shop.web at (130, 300)
+    place shop.gateway at (450, 300)
+    place shop.orders at (770, 300)
+    place shop.payments at (1090, 300)
+    place shop.db at (450, 520)
+    place shop.events at (770, 520)
+    place provider at (1090, 760)
+    route store from shop.orders.south to shop.db.north via [(730, 410), (450, 410)]
+    route publish from shop.payments.south to shop.events.east via [(1050, 520)]
+    label authorise at 75%
+  }
+}
+
+// A document page of the containers.
+export sheet for containers {
+  format pdf
+}

package/templates/purchase/diagrams/executive.meltemi

@@ -0,0 +1,52 @@
+language "0.2"
+
+import commerce from "../models/commerce.meltemi"
+
+// The executive view: a slide composed freely, whose boxes are entities of the model.
+diagram executive: free {
+  title "From click to confirmed order"
+  canvas (1280, 720)
+  layout manual
+
+  text heading "From click to confirmed order"
+  text subtitle "One order, one payment, one event: under two seconds"
+
+  icon buyer "tabler:shopping-cart"
+  box customer "Customer" { link commerce.customer }
+
+  group shop "Online shop" {
+    box orders "Orders" { link commerce.shop.orders }
+    box payments "Payments" { link commerce.shop.payments }
+    orders -> payments: "Charge" as charge
+  }
+
+  box provider "Payment provider" { link commerce.provider }
+
+  customer -> orders: "Places an order" as order
+  payments -> provider: "Authorises" as authorise
+
+  placement {
+    place heading at (640, 90)
+    place subtitle at (640, 145)
+    place buyer at (170, 300)
+    place customer at (170, 390)
+    place shop at (640, 390)
+    size shop (520, 150)
+    place orders at (114, 35)
+    place payments at (374, 35)
+    place provider at (1110, 390)
+    label order at 40%
+    label authorise at 55%
+  }
+
+  style heading { fontSize 40; fontWeight 700 }
+  style subtitle { color muted }
+  style provider { shape pill }
+  animate order { effect flow; duration 1200ms; repeat forever }
+}
+
+// A slide picture at twice the pixels.
+export slide for executive {
+  format png
+  scale 2
+}

package/templates/purchase/diagrams/payment.meltemi

@@ -0,0 +1,42 @@
+language "0.2"
+
+import commerce from "../models/commerce.meltemi"
+
+// The payment sequence. Its participants are entities of the model, so they take its names.
+diagram payment: sequence {
+  title "Payment"
+
+  actor customer { link commerce.customer }
+  participant web { link commerce.shop.web }
+  participant orders { link commerce.shop.orders }
+  participant payments { link commerce.shop.payments }
+  participant provider { link commerce.provider }
+  queue events { link commerce.shop.events }
+
+  customer -> web: "Pay" as checkout
+  web -> orders: "Confirm the order" as confirm
+  orders -> payments: "Charge" as charge
+  activate payments
+  payments -> provider: "Authorise the card" as authorise
+
+  alt result "Approved" {
+    provider --> payments: "Approved" as approved
+    payments -> events: "PaymentApproved" as publish
+    payments --> orders: "Paid" as paid
+    orders --> web: "Order confirmed" as confirmed
+  } else "Declined" {
+    provider --> payments: "Declined" as declined
+    payments --> orders: "Payment failed" as failed
+    orders --> web: "Try another card" as retry
+  }
+
+  deactivate payments
+
+  scenario approved "Payment approved" {
+    choose result "Approved"
+  }
+
+  scenario declined "Payment declined" {
+    choose result "Declined"
+  }
+}

package/templates/purchase/models/commerce.meltemi

@@ -0,0 +1,30 @@
+language "0.2"
+
+// The reference purchase: a customer, the API entry, orders, payments, events and data. Every view,
+// the payment sequence, the executive slide and the story draw these entities.
+model commerce {
+  person customer "Customer" { description "Buys online" }
+
+  system shop "Online shop" {
+    description "Takes orders and payments"
+    container web "Web store" { technology "React" }
+    container gateway "API gateway" { technology "Kong" }
+    container orders "Orders" { technology "Kotlin" }
+    container payments "Payments" { technology "Kotlin" }
+    container events "Event bus" { technology "Kafka" }
+    datastore db "Orders database" { technology "PostgreSQL" }
+  }
+  system provider "Payment provider" {
+    description "Authorises cards"
+    external
+  }
+
+  customer -> shop.web: "Places an order" as buys
+  shop.web -> shop.gateway: "Calls" as calls { technology "JSON/HTTPS" }
+  shop.gateway -> shop.orders: "Creates the order" as create
+  shop.orders -> shop.db: "Stores" as store
+  shop.orders -> shop.payments: "Requests the payment" as charge
+  shop.payments -> provider: "Authorises the card" as authorise
+  shop.payments -> shop.events: "PaymentApproved" as publish
+  shop.events -> shop.orders: "Confirms the order" as confirm
+}

package/templates/purchase/stories/purchase.meltemi

@@ -0,0 +1,38 @@
+language "0.2"
+
+import "../diagrams/architecture.meltemi" as views
+
+// The animated walkthrough: from the shop in context to the containers that take the order.
+story purchase for views.context {
+  title "A purchase, step by step"
+  description "Who takes part, then how the order and the payment travel inside the shop."
+
+  scene who {
+    reveal customer, shop, provider over 800ms
+    highlight buys
+    hold 1s
+  }
+
+  scene inside {
+    view views.containers
+    transition morph over 900ms
+    trace calls over 700ms
+    trace create over 700ms
+    trace charge over 700ms
+    parallel {
+      trace authorise over 1000ms
+      highlight provider over 1000ms
+    }
+    trace publish over 700ms
+    trace confirm over 700ms
+    camera shop.orders, shop.payments, shop.events
+    hold 1500ms
+  }
+}
+
+// The story as a 1080p video at 30 frames per second.
+export video for purchase {
+  format mp4
+  size (1920, 1080)
+  fps 30
+}

package/templates/sequence/diagrams/sign-in.meltemi

@@ -0,0 +1,36 @@
+language "0.2"
+
+// Sign-in, with a scenario for each outcome: export one with
+// `meltemi-diagrams export diagrams/sign-in.meltemi --scenario success`.
+diagram signin: sequence {
+  title "Sign in"
+
+  actor user "User"
+  participant web "Web app"
+  participant api "API"
+  database db "Users"
+
+  user -> web: "Email and password" as submit
+  web -> api: "POST /sessions" as login
+  activate api
+  api -> db: "Find the user" as find
+  db --> api: "User" as found
+
+  alt check "Password matches" {
+    api --> web: "Session" as session
+    web --> user: "Welcome" as welcome
+  } else "Wrong password" {
+    api --> web: "401" as rejected
+    web --> user: "Try again" as retry
+  }
+
+  deactivate api
+
+  scenario success "Signed in" {
+    choose check "Password matches"
+  }
+
+  scenario failure "Wrong password" {
+    choose check "Wrong password"
+  }
+}