--- title: Examples · limu description: Every type of diagram limu supports, rendered by its svg package when the site was built. --- ## Block Blocks placed on a grid of columns by hand, joined by arrows. ### A web service in three tiers ```mermaid block columns 3 clients(["Web and mobile clients"]):3 space:3 gateway["API gateway"]:3 space:3 auth["Auth service"] orders["Order service"] search["Search service"] space:3 users[("Users")] orderdb[("Orders")] index[("Search index")] clients --> gateway gateway --> auth gateway --> orders gateway --> search auth --> users orders --> orderdb search --> index ``` ### Layers of a mobile app ```mermaid block columns 3 screens["Screens and components"]:3 state["State store"] nav["Navigation"] i18n["Translations"] api["API client"]:2 cache[("Offline cache")] platform["iOS and Android"]:3 ``` [All examples](/examples/block.md) ## C4 A software system's context, containers or components, at one level of the C4 model. ### A food delivery platform ```mermaid C4Context title System context of a food delivery platform UpdateLayoutConfig($c4ShapeInRow="2") Person(customer, "Customer", "Orders food from nearby restaurants.") Person(restaurant, "Restaurant staff", "Accept orders and mark them ready.") System(platform, "Delivery Platform", "Takes orders and dispatches couriers.") Person(courier, "Courier", "Picks up and delivers orders.") System_Ext(payments, "Payment Provider", "Charges cards and pays restaurants.") System_Ext(maps, "Maps API", "Geocodes addresses and plans routes.") Rel(customer, platform, "Orders food with") Rel(restaurant, platform, "Manages orders in") Rel(platform, courier, "Offers jobs to") Rel(platform, payments, "Charges cards through", "HTTPS") Rel(platform, maps, "Plans routes with", "HTTPS") ``` [All examples](/examples/c4.md) ## Class Classes with their fields and methods, and how they inherit from and use each other. ### An online store's orders ```mermaid classDiagram class Customer { +UUID id +String email +placeOrder(Cart cart) Order } class Order { +UUID id +OrderStatus status +Money total() +cancel() } class OrderLine { +int quantity +Money unitPrice } class Product { +String sku +String name +Money price } class OrderStatus { <> PENDING PAID SHIPPED CANCELED } Customer "1" --> "*" Order : places Order "1" *-- "1..*" OrderLine : contains OrderLine "*" --> "1" Product : refers to class Payment { +String providerRef +Money amount +refund() } Order "1" --> "0..1" Payment : paid by Order ..> OrderStatus ``` ### Payment gateways ```mermaid classDiagram class PaymentGateway { <> +authorize(Charge charge) Auth +capture(Auth auth) +refund(Auth auth, Money amount) } class StripeGateway { -String apiKey +authorize(Charge charge) Auth +capture(Auth auth) +refund(Auth auth, Money amount) } class AdyenGateway { -String merchantAccount +authorize(Charge charge) Auth +capture(Auth auth) +refund(Auth auth, Money amount) } class CheckoutService { -PaymentGateway gateway +checkout(Cart cart) Receipt } PaymentGateway <|.. StripeGateway PaymentGateway <|.. AdyenGateway CheckoutService --> PaymentGateway : charges through ``` [All examples](/examples/class.md) ## Entity relationship The entities of a data model, their attributes, and how many of one relate to how many of another. ### A blog's schema ```mermaid erDiagram USER ||--o{ POST : writes USER ||--o{ COMMENT : leaves POST ||--o{ COMMENT : has POST ||--o{ POST_TAG : "tagged with" TAG ||--o{ POST_TAG : labels USER { bigint id PK string email UK string display_name timestamp created_at } POST { bigint id PK bigint author_id FK string slug UK string title text body timestamp published_at "null while a draft" } COMMENT { bigint id PK bigint post_id FK bigint user_id FK text body } TAG { int id PK string name UK } POST_TAG { bigint post_id PK, FK int tag_id PK, FK } ``` ### An online store ```mermaid erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ADDRESS : "saves" ORDER ||--|{ LINE_ITEM : contains ORDER ||--o| PAYMENT : "is paid by" PRODUCT ||--o{ LINE_ITEM : "is sold as" CATEGORY ||--o{ PRODUCT : groups ``` [All examples](/examples/er.md) ## Event modeling A system over time as a row of screens, commands, events and views. ### An online store's checkout ```mermaid eventmodeling tf 01 ui Checkout tf 02 cmd PlaceOrder tf 03 evt OrderPlaced tf 04 pcr Payments tf 05 cmd ChargeCard tf 06 evt CardCharged tf 07 rmo OrderStatus ->> 03 ->> 06 tf 08 ui Receipt ->> 07 ``` ### Booking a meeting room, with its data ```mermaid eventmodeling tf 01 ui RoomFinder tf 02 cmd BookRoom [[BookRoom01]] tf 03 evt RoomBooked [[RoomBooked]] tf 04 rmo RoomCalendar ->> 03 tf 05 ui RoomFinder ->> 04 data BookRoom01 { room: 'Harbor 3' date: '2026-11-04' from: '10:00' until: '11:00' } data RoomBooked { room: string date: string from: string until: string bookedBy: string } ``` [All examples](/examples/eventmodeling.md) ## Flowchart Steps of a process as boxes, joined by arrows that show where each step leads. ### Checking out an order ```mermaid flowchart TD cart([Customer opens the cart]) --> stock{All in stock?} stock -- No --> backorder[Offer a backorder] stock -- Yes --> address[Confirm the address] backorder --> address address --> pay[Charge the card] pay --> paid{Approved?} paid -- No --> retry[Ask for another card] retry --> pay paid -- Yes --> order[(Save the order)] order --> email[Email a receipt] order --> warehouse[Queue for packing] email --> done([Order placed]) warehouse --> done ``` ### From pull request to production ```mermaid flowchart LR pr[Pull request] --> ci subgraph ci [CI] direction TB lint[Lint] --> test[Test] test --> build[Build image] end ci --> staging{Staging healthy?} staging -- Yes --> canary[Canary at 5%] staging -- No --> rollback[Roll back] canary --> prod[Full rollout] ``` [All examples](/examples/flowchart.md) ## Gantt The tasks of a project as bars along a calendar, with their dates and dependencies. ### Mobile app 3.0 launch ```mermaid gantt title Mobile app 3.0 launch dateFormat YYYY-MM-DD axisFormat %b %d section Design User research :done, research, 2025-12-01, 2025-12-12 Wireframes :done, wire, after research, 10d Visual design :active, visual, after wire, 14d section Build API changes :done, api, 2025-12-08, 24d New screens :active, screens, 2026-01-05, 30d Offline sync :crit, sync, after api, 28d section Release Beta with 500 users :crit, beta, after screens sync, 14d App store review :review, after beta, 5d Launch :milestone, after review, 0d ``` ### Postgres 17 upgrade ```mermaid gantt title Postgres 17 upgrade, working days only dateFormat YYYY-MM-DD axisFormat %b %d excludes weekends section Prepare Audit extensions :done, audit, 2026-01-05, 3d Test backup restores :done, restore, after audit, 2d Upgrade staging :active, staging, after restore, 4d section Verify Regression suite :crit, regress, after staging, 3d Load test replicas :load, after staging, 5d Sign-off :milestone, signoff, after regress load, 0d section Production Upgrade read replicas :crit, replicas, after signoff, 2d Fail over the primary :crit, failover, after replicas, 1d Watch and tune :after failover, 5d ``` [All examples](/examples/gantt.md) ## Git graph Commits on branches of a repository, and where the branches split and merge. ### A release with Git flow ```mermaid gitGraph commit id: "init" branch develop checkout develop commit id: "add cart" branch feature/search checkout feature/search commit id: "index products" commit id: "search page" checkout develop merge feature/search branch release/1.2 checkout release/1.2 commit id: "bump version" checkout main merge release/1.2 tag: "v1.2.0" checkout develop merge release/1.2 checkout main branch hotfix/1.2.1 checkout hotfix/1.2.1 commit id: "fix tax rounding" checkout main merge hotfix/1.2.1 tag: "v1.2.1" checkout develop merge hotfix/1.2.1 ``` ### Trunk-based development ```mermaid gitGraph commit id: "a1f0c3e" branch add-dark-mode checkout add-dark-mode commit id: "theme tokens" checkout main commit id: "ci: cache deps" merge add-dark-mode branch fix-login-redirect checkout fix-login-redirect commit id: "keep return URL" checkout main merge fix-login-redirect tag: "2026.10.14" commit id: "update deps" ``` [All examples](/examples/gitGraph.md) ## Kanban A board of cards in columns, one column for each stage of the work. ### Sprint board for a payments team ```mermaid kanban todo[To do] pay1[Support Apple Pay in checkout]@{ ticket: PAY-412, priority: 'High' } pay2[Retry failed webhooks with backoff]@{ ticket: PAY-398 } doing[In progress] pay3[Move card tokens to the new vault]@{ ticket: PAY-377, assigned: 'Maya', priority: 'Very High' } pay4[Add idempotency keys to the charge API]@{ ticket: PAY-389, assigned: 'Priya' } done[Done] pay5[Show refund status on the order page]@{ ticket: PAY-405, assigned: 'Leo' } pay6[Alert when the decline rate doubles]@{ ticket: PAY-361, assigned: 'Sam', priority: 'Low' } ``` ### Support queue on a Monday ```mermaid kanban new[New] t1[Password reset email never arrives]@{ priority: 'High' } t2[Invoice shows the wrong tax rate] waiting[Waiting on customer] t3[Export to CSV times out]@{ assigned: 'Nora' } solved[Solved] t4[Checkout fails for cards issued in Brazil]@{ assigned: 'Ken', priority: 'Very High' } t5[Dark mode resets after sign-out]@{ assigned: 'Nora', priority: 'Very Low' } ``` [All examples](/examples/kanban.md) ## Mindmap A central idea with topics branching from it, and subtopics from those. ### Planning a product launch ```mermaid mindmap root((Launch v2)) Engineering Feature freeze Load tests Feature flags Marketing Launch post Demo video Newsletter Support Docs Training FAQ Metrics Sign-ups Activation ``` ### Learning Kubernetes ```mermaid mindmap root((Kubernetes)) Workloads Pods Deployments Jobs Networking Services Ingress Storage Volumes Volume claims Configuration ConfigMaps Secrets ``` [All examples](/examples/mindmap.md) ## Packet The fields of a packet or header, each as wide as the bits it takes. ### IPv4 header ```mermaid packet title IPv4 header 0-3: "Version" 4-7: "IHL" 8-15: "Type of service" 16-31: "Total length" 32-47: "Identification" 48-50: "Flags" 51-63: "Fragment offset" 64-71: "Time to live" 72-79: "Protocol" 80-95: "Header checksum" 96-127: "Source address" 128-159: "Destination address" ``` [All examples](/examples/packet.md) ## Pie A whole divided into slices, each as large as its share. ### Where the build minutes go ```mermaid pie title Where the build minutes go "Integration tests" : 42 "Docker image builds" : 23 "Unit tests" : 18 "Linting" : 9 "Waiting for a runner" : 8 ``` [All examples](/examples/pie.md) ## Quadrant chart Points placed on two axes, in a square divided into four quadrants. ### Backlog by effort and impact ```mermaid quadrantChart title Backlog by effort and impact x-axis Low effort --> High effort y-axis Low impact --> High impact quadrant-1 Plan carefully quadrant-2 Do next quadrant-3 Fill gaps quadrant-4 Avoid Saved searches: [0.22, 0.76] Fix flaky tests: [0.3, 0.58] SSO for teams: [0.72, 0.78] Rewrite billing: [0.8, 0.64] Dark mode: [0.25, 0.3] Onboarding tour: [0.7, 0.24] ``` [All examples](/examples/quadrantChart.md) ## Requirement Requirements, the elements that satisfy or verify them, and how they depend on each other. ### Paying at checkout ```mermaid requirementDiagram requirement online_payment { id: "REQ-1" text: Customers can pay for an order online. risk: high verifymethod: test } functionalRequirement card_auth { id: "REQ-1.1" text: A card is authorized before the order is confirmed. risk: high verifymethod: test } performanceRequirement auth_latency { id: "REQ-1.1.1" text: 95% of authorizations finish within 2 seconds. risk: medium verifymethod: analysis } element payment_service { type: service } element checkout_e2e { type: "test suite" } online_payment - contains -> card_auth card_auth - derives -> auth_latency payment_service - satisfies -> card_auth checkout_e2e - verifies -> auth_latency ``` ### Resetting a password ```mermaid requirementDiagram requirement account_recovery { id: "SEC-4" text: Users who forget a password can regain their account. risk: medium verifymethod: demonstration } functionalRequirement reset_link { id: "SEC-4.1" text: A reset link is sent to the verified email address. risk: medium verifymethod: test } designConstraint link_expiry { id: "SEC-4.2" text: A reset link works once and expires after 30 minutes. risk: high verifymethod: inspection } element auth_service { type: service } account_recovery - contains -> reset_link reset_link - derives -> link_expiry auth_service - satisfies -> reset_link auth_service - satisfies -> link_expiry ``` [All examples](/examples/requirement.md) ## Sankey Quantities flowing between nodes, each band as wide as its flow. ### Cloud bill by team and service ```mermaid sankey %% A month's cloud bill in dollars: who spends it, and on what Cloud bill,Checkout team,14000 Cloud bill,Search team,18000 Cloud bill,Data team,16000 Checkout team,Compute,7000 Checkout team,Databases,5000 Checkout team,Network,2000 Search team,Compute,11000 Search team,Storage,3000 Search team,Databases,4000 Data team,Compute,6000 Data team,Storage,8000 Data team,Network,2000 ``` ### What became of trial signups ```mermaid sankey Trial signups,Invited a teammate,900 Trial signups,Used it alone,1000 Trial signups,Never set up,500 Invited a teammate,Paid,540 Invited a teammate,Churned,360 Used it alone,Paid,260 Used it alone,Churned,740 Never set up,Churned,500 ``` [All examples](/examples/sankey.md) ## Sequence Participants side by side, with the messages they send each other in the order they are sent. ### Signing in with OAuth ```mermaid sequenceDiagram autonumber actor User participant App as Web app participant Auth as Identity provider participant API as Profile API User->>App: Click "Sign in" App->>Auth: Redirect with client ID Auth->>User: Show the sign-in page User->>Auth: Enter credentials Auth-->>App: Redirect with a code App->>+Auth: Exchange the code Auth-->>-App: Access and ID tokens App->>+API: GET /me API-->>-App: Profile App-->>User: Dashboard ``` ### Paying for an order ```mermaid sequenceDiagram participant Shop as Checkout service participant Pay as Payment provider participant DB as Orders database Shop->>+Pay: Authorize $84.20 alt Card approved Pay-->>Shop: Authorization ID Shop->>DB: Mark the order as paid Shop->>Pay: Capture the payment else Card declined Pay-->>Shop: Declined, insufficient funds Shop->>DB: Mark the order as failed else No answer in 10 seconds Shop->>Pay: Void the authorization end deactivate Pay opt Customer opted in Shop->>DB: Save the card token end ``` [All examples](/examples/sequence.md) ## State The states a system can be in and the events that move it from one to another. ### A subscription's billing ```mermaid stateDiagram-v2 [*] --> Trialing : sign up Trialing --> Active : first payment succeeds Trialing --> Canceled : trial ends unpaid Active --> Active : renews state retry <> Active --> PastDue : renewal fails PastDue --> retry : retry the card retry --> Active : payment succeeds retry --> PastDue : fails, retries left retry --> Canceled : fails, out of retries Active --> Canceled : customer cancels Canceled --> [*] ``` ### A pull request ```mermaid stateDiagram-v2 [*] --> Draft Draft --> Open : ready for review state Open { [*] --> AwaitingReview AwaitingReview --> ChangesRequested : reviewer asks for changes ChangesRequested --> AwaitingReview : author pushes AwaitingReview --> Approved : reviewer approves Approved --> [*] } Open --> Merged : checks pass Open --> Closed : abandoned Closed --> Open : reopened Merged --> [*] ``` [All examples](/examples/state.md) ## Timeline Events placed in order along a line, grouped by period. ### Checkout API outage ```mermaid timeline title Checkout API outage, minutes from the first alert section Detection 0 min : Error rate alert fires : On-call engineer paged : Status page updated section Response 23 min : Bad config push found : Config rolled back section Recovery 48 min : Error rate back to normal 78 min : Status page resolved : Postmortem scheduled ``` ### Our road to continuous delivery ```mermaid timeline title Our road to continuous delivery 2019 : Releases by hand every two weeks 2020 : CI on every pull request : Automated test suite 2021 : Feature flags : Canary deploys 2023 : Deploy on merge to main : Automatic rollback on errors 2025 : 40 deploys a day ``` [All examples](/examples/timeline.md) ## User journey The steps a user takes to do a task, scored by how each one felt. ### Shipping a first deploy ```mermaid journey title A new engineer's first deploy section Set up Install the toolchain: 2: Engineer Get access to staging: 1: Engineer, Platform team section Change Fix a typo on the pricing page: 5: Engineer Wait for CI: 2: Engineer section Ship Get a review: 4: Engineer, Reviewer See the fix in production: 5: Engineer ``` [All examples](/examples/journey.md) ## XY chart Bars and lines of values on a horizontal and a vertical axis. ### Monthly active users ```mermaid xychart title "Monthly active users and goal, 2025" x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] y-axis "Users (thousands)" 0 --> 120 bar [42, 45, 51, 56, 58, 63, 61, 66, 74, 82, 91, 98] line [40, 46, 52, 58, 64, 70, 76, 82, 88, 94, 100, 106] ``` ### p95 latency by region ```mermaid xychart horizontal title "p95 API latency by region" x-axis "Region" [us-east, us-west, eu-west, eu-central, ap-south, ap-east, sa-east] y-axis "Latency (ms)" 0 --> 400 bar [118, 142, 165, 171, 296, 254, 338] ``` [All examples](/examples/xychart.md) ## Agentflow (beta) The tasks, tools and decisions of AI agents, and how they hand work to each other. ### A code review agent ```mermaid agentflow-beta TB connector github["GitHub API"] github@{ protocol: "http", endpoint: "https://api.github.com" } pr["Pull request opened"]@{ shape: input } flow reviewer["Review agent"] read["Read the diff"]@{ shape: task } tests["run_tests"]@{ shape: tool, returns: "TestReport" } lint["run_linter"]@{ shape: tool, returns: "Findings" } guide["Style guide"]@{ shape: refdoc } weigh["Weigh the findings"]@{ shape: task } ok{"Ready to merge?"}@{ shape: decision } read --> tests --> weigh read --> lint --> weigh read -.- guide weigh --> ok end reviewer@{ instruction: "Review the change for bugs, missing tests and style." } approve["Approve the pull request"]@{ shape: action } comment["Request changes"]@{ shape: action } post["post_review"]@{ shape: tool, connectorRef: "github.create_review" } pr --> read ok -- yes --> approve ok -- no --> comment approve --> post comment --> post ``` ### Support tickets handed between agents ```mermaid agentflow-beta TB ticket["New support ticket"]@{ shape: input } flow triage["Triage agent"] classify["Classify the ticket"]@{ shape: task } kind{"Billing or technical?"}@{ shape: decision } classify --> kind end flow billing["Billing agent"] invoice["lookup_invoice"]@{ shape: tool } refund["issue_refund"]@{ shape: tool } policy["Refund policy"]@{ shape: refdoc } invoice --> refund refund -.- policy end flow tech["Technical agent"] logs["search_logs"]@{ shape: tool } kb["Known issues"]@{ shape: refdoc } diagnose["Diagnose the fault"]@{ shape: task } logs --> diagnose diagnose -.- kb end reply["Reply to the customer"]@{ shape: action } ticket --> classify kind -- billing --> invoice kind -- technical --> logs billing --> reply tech --> reply ``` [All examples](/examples/agentflow.md) ## Architecture (beta) Services and resources grouped by where they run, and how they connect. ### A web app in the cloud ```mermaid architecture-beta service users(internet)[Users] group vpc(cloud)[Production VPC] service lb(server)[Load balancer] in vpc service app(server)[App servers] in vpc service db(database)[PostgreSQL] in vpc service cache(database)[Redis] in vpc service files(disk)[S3 uploads] users:R --> L:lb lb:R --> L:app app:R --> L:db app:T --> B:cache app:B --> T:files ``` ### A seaweed farm's telemetry ```mermaid architecture-beta group farm(cloud)[Kelp farm] service buoy_north(server)[North line buoy] in farm service buoy_south(server)[South line buoy] in farm service hub(internet)[Shore gateway] in farm group platform(cloud)[Data platform] service ingest(server)[Ingest API] in platform service tsdb(database)[TimescaleDB] in platform service archive(disk)[Raw archive] in platform buoy_north:B --> T:hub buoy_south:T --> B:hub hub:R --> L:ingest ingest:R --> L:tsdb ingest:B --> T:archive ``` [All examples](/examples/architecture.md) ## Cynefin (beta) Situations sorted into the domains of the Cynefin framework, from clear to chaotic. ### Sorting a platform team's backlog ```mermaid cynefin-beta title Platform team backlog clear "Rotate TLS certificates" "Bump the Go version" complicated "Tune Postgres for the new load" "Plan the region failover" complex "Cut cloud spend by a third" "Adopt a service mesh" chaotic "Payments are down in production" confusion "Flaky tests nobody owns" ``` [All examples](/examples/cynefin.md) ## Ishikawa (beta) The causes of a problem, grouped into categories along the bones of a fish. ### Slow checkout page ```mermaid ishikawa-beta Checkout takes 6 seconds Frontend Large script bundle Uncompressed images Fonts block rendering Backend Tax API called twice No cache for prices Database No index on orders Lock waits at peak Third parties Slow payment widget Ads load first ``` [All examples](/examples/ishikawa.md) ## Radar (beta) Several series of values on axes that radiate from one center. ### Skills across two teams ```mermaid radar-beta title Skills across two teams axis fe["Frontend"], be["Backend"], infra["Infrastructure"] axis data["Data"], sec["Security"], test["Testing"] curve web["Web team"]{5, 3, 2, 2, 3, 4} curve platform["Platform team"]{2, 4, 5, 3, 4, 3} max 5 min 0 ``` ### Choosing a database ```mermaid radar-beta title Choosing a database axis reads["Read speed"], writes["Write speed"], scale["Scaling out"] axis tools["Tooling"], cost["Low cost"], ops["Easy to run"] curve managed["Managed Postgres"]{4, 3, 3, 5, 2, 5} curve selfhosted["Self-hosted Postgres"]{4, 3, 3, 5, 4, 2} curve docs["Document store"]{3, 5, 5, 3, 3, 3} graticule polygon max 5 min 0 ``` [All examples](/examples/radar.md) ## Railroad (beta) The rules of a grammar drawn as tracks, which a valid input follows from start to end. ### A JSON number ```mermaid railroad-ebnf-beta title "JSON number" number = [ "-" ] integer [ fraction ] [ exponent ] ; integer = "0" | onenine { digit } ; fraction = "." digit { digit } ; exponent = ( "e" | "E" ) [ "+" | "-" ] digit { digit } ; onenine = ? a digit from 1 to 9 ? ; digit = "0" | onenine ; ``` ### A small expression grammar ```mermaid railroad-ebnf-beta title "Arithmetic with calls" expr ::= term (("+" | "-") term)* ; term ::= factor (("*" | "/" | "%") factor)* ; factor ::= "-"? (number | call | name | "(" expr ")") ; call ::= name "(" (expr ("," expr)*)? ")" ; ``` [All examples](/examples/railroad.md) ## Swimlane (beta) A process laid out in lanes, one for each person or team that does its steps. ### Incident response across teams ```mermaid swimlane-beta TB subgraph Monitoring alert([Error rate spikes]) end subgraph oncall [On-call] ack[Acknowledge the page] assess{Customers affected?} mitigate[Roll back the deploy] end subgraph commander [Commander] declare[Declare an incident] review[Run the postmortem] end subgraph Support status[Post a status update] close[Close the status page] end alert --> ack --> assess assess -->|No| mitigate assess -->|Yes| declare declare --> status declare --> mitigate mitigate --> close --> review ``` ### From pull request to production ```mermaid swimlane-beta LR subgraph Developer open[Open a pull request] revise[Address comments] end subgraph Reviewer review{Approve?} end subgraph CI [CI pipeline] test[Run the tests] build[Build the image] end subgraph Release stage[Deploy to staging] prod[Deploy to production] end open --> review review -->|Changes requested| revise --> review review -->|Approved| test --> build --> stage --> prod ``` [All examples](/examples/swimlane.md) ## Tree view (beta) A hierarchy indented as a tree, as of the folders and files of a project. ### A Go web service ```mermaid treeView-beta orders-api/ cmd/ server/ main.go ## starts the HTTP server internal/ orders/ handler.go :::highlight ## routes and JSON handler_test.go store.go ## Postgres queries config/ config.go ## reads the environment migrations/ 0001_create_orders.sql go.mod go.sum Dockerfile README.md ``` ### A monorepo, drawn with box characters ```mermaid treeView-beta storefront/ ├── apps/ │ ├── web/ │ │ ├── src/ │ │ └── package.json │ └── docs/ │ └── package.json ├── packages/ │ ├── ui/ │ │ └── package.json │ └── tsconfig/ ├── pnpm-workspace.yaml └── turbo.json ``` [All examples](/examples/treeView.md) ## Treemap (beta) A hierarchy of values as nested rectangles, each sized by its value. ### A month of cloud costs ```mermaid --- config: treemap: valueFormat: '$0,0' --- treemap-beta "Compute" "Kubernetes nodes": 14200 "Batch jobs": 4100 "CI runners": 3300 "Databases" "Postgres": 7800 "Redis": 1900 "Storage" "Object storage": 5600 "Backups": 2400 "Network" "Data transfer out": 3900 "Load balancers": 1200 ``` ### What is in the JavaScript bundle ```mermaid treemap-beta "Our code (KB)" "Pages": 180 "Components": 120 "State": 40 "Dependencies (KB)" "UI framework": 140 "Charts": 210 "Date library": 70 "Icons": 90 "Polyfills": 50 ``` [All examples](/examples/treemap.md) ## Use case (beta) The actors outside a system and the use cases they take part in. ### A public library's lending system ```mermaid usecase-beta direction LR actor Member actor Librarian systemBoundary library["Lending system"] Search("Search the catalog") Borrow("Borrow a book") Renew("Renew a loan") Hold("Place a hold") Return("Check in a return") Catalog("Add a new title") Card("Verify the card") end Member --> Search Member --> Borrow Member --> Renew Member --> Hold Librarian --> Return Librarian --> Catalog Borrow ..> : include Card Renew ..> : include Card ``` ### A ride-hailing app ```mermaid usecase-beta direction LR actor Rider actor Driver actor Payments("Payment provider") systemBoundary app["Ride app"] Request("Request a ride") Accept("Accept a trip") Track("Track the car") Pay("Pay for the trip") Rate("Rate the trip") end Rider --> Request Rider --> Track Rider --> Rate Driver --> Accept Driver --> Rate Pay --> Payments Request ..> : include Pay ``` [All examples](/examples/usecase.md) ## Venn (beta) Sets as overlapping circles, with what they share where they overlap. ### Where platform engineering sits ```mermaid venn-beta title Where platform engineering sits set Dev["Software engineering"] set Ops["Operations"] set Sec["Security"] union Dev,Ops["DevOps"] union Ops,Sec["SecOps"] union Dev,Sec["AppSec"] union Dev,Ops,Sec["Platform"] ``` ### Where the checkout code runs ```mermaid venn-beta title Where the checkout code runs set Browser text form["Card form"] text badge["Cart badge"] set Server text pay["Payments"] text tax["Tax rules"] union Browser,Server["Both"] text valid["Input checks"] text price["Price format"] ``` [All examples](/examples/venn.md) ## Wardley map (beta) The components of a value chain, placed by how visible they are and how far they have evolved. ### A video streaming service ```mermaid wardley-beta title Video streaming service anchor Viewer [0.95, 0.70] component Watch a show [0.86, 0.62] component Recommender [0.72, 0.38] (build) component Video player [0.68, 0.72] (buy) component Catalog [0.55, 0.55] component Viewing history [0.45, 0.30] component Encoding [0.38, 0.65] component CDN [0.25, 0.85] (outsource) component Compute [0.10, 0.92] (market) Viewer -> Watch a show Watch a show -> Recommender Watch a show -> Video player Recommender -> Catalog Recommender -> Viewing history Video player -> CDN Catalog -> Encoding Encoding -> Compute Viewing history -> Compute CDN -> Compute evolve Recommender 0.55 ``` ### A seaweed farm's value chain ```mermaid wardley-beta title Seaweed farm anchor Restaurants [0.95, 0.55] anchor Fertilizer buyers [0.92, 0.84] component Fresh kelp [0.80, 0.45] component Dried kelp [0.76, 0.76] component Harvest [0.60, 0.50] component Drying [0.55, 0.84] component Grow lines [0.42, 0.35] component Seed stock [0.30, 0.15] (inertia) component Boats [0.30, 0.86] component Cold chain [0.14, 0.72] Restaurants -> Fresh kelp Fertilizer buyers -> Dried kelp Fresh kelp -> Harvest Fresh kelp -> Cold chain Dried kelp -> Drying Drying -> Harvest Harvest -> Grow lines Harvest -> Boats Grow lines -> Seed stock note "Hatchery skills are rare" [0.10, 0.04] ``` [All examples](/examples/wardley.md)