Skip to content
Merlion

Test fixtures

Every file in crates/merlion-render/tests/fixtures/flowcharts/, the inputs of the core’s snapshot tests. Fixtures with deliberate mistakes (llm-repairs, llm-typographic, llm-unquoted-labels) render through the parser’s repairs.

Ci pipeline

Section titled “Ci pipeline”
Flowchart diagram Flowchart, left to right. 10 nodes, 12 edges. git push → Lint; → Unit tests; → Build Lint → All green? Unit tests → All green? Build → All green? All green? → Deploy to staging [yes]; → Notify author [no] Deploy to staging → E2E suite E2E suite → Manual approval Manual approval → Production [approved]; → Notify author [rejected] yes no approved rejected git push Lint Unit tests Build All green? Deploy to staging Notify author E2E suite Manual approval Production
Diagram source
flowchart LR
  push([git push]) --> lint[Lint]
  push --> test[Unit tests]
  push --> build[Build]
  lint & test & build --> gate{All green?}
  gate -->|yes| deploy_staging[Deploy to staging]
  gate -->|no| notify[Notify author]
  deploy_staging --> e2e[E2E suite]
  e2e --> approve{Manual approval}
  approve -->|approved| prod[(Production)]
  approve -. rejected .-> notify

Data pipeline

Section titled “Data pipeline”
Flowchart diagram Flowchart, left to right. 10 nodes, 9 edges. Ingest: Web events → Queue Ingest: Queue → Parse Ingest: Mobile events → Queue Process: Parse → Enrich Process: Enrich → Deduplicate Process: Deduplicate → Data lake Store: Data lake → Nightly ETL Store: Warehouse → BI dashboards Nightly ETL → Warehouse Ingest Web events Queue Mobile events Process Parse Enrich Deduplicate Store Data lake Warehouse Nightly ETL BI dashboards
Diagram source
flowchart LR
  subgraph ingest [Ingest]
    src1[Web events] --> q[[Queue]]
    src2[Mobile events] --> q
  end
  subgraph process [Process]
    q --> parse[Parse] --> enrich[Enrich] --> dedupe[Deduplicate]
  end
  subgraph store [Store]
    lake[(Data lake)]
    wh[(Warehouse)]
  end
  dedupe --> lake
  lake --> etl[Nightly ETL] --> wh
  wh --> bi[/BI dashboards/]

Decision tree

Section titled “Decision tree”
Flowchart diagram Flowchart, top to bottom. 8 nodes, 10 edges. Start → Is it raining? Is it raining? → Do you have an umbrella? [Yes]; → Walk [No] Do you have an umbrella? → Walk [Yes]; → Is it far? [No] Walk → Arrive Is it far? → Take the bus [Yes]; → Run [No] Take the bus → Arrive Run → Arrive Yes No Yes No Yes No Start Is it raining? Do you have an umbrella? Walk Is it far? Take the bus Run Arrive
Diagram source
flowchart TD
  start((Start)) --> q1{Is it raining?}
  q1 -->|Yes| q2{Do you have an umbrella?}
  q1 -->|No| walk[Walk]
  q2 -->|Yes| walk
  q2 -->|No| q3{Is it far?}
  q3 -->|Yes| bus[Take the bus]
  q3 -->|No| run[Run]
  walk & bus & run --> done(((Arrive)))
Section titled “Edge gallery”
Flowchart diagram Flowchart, left to right. 28 nodes, 13 edges. a1 → b1 a2 — b2 a3 → b3 a4 → b4 a5 → b5 a6 → b6 a7 ↔ b7 a8 ↔ b8 a9 ↔ b9 a10 b10 a11 → b11 a12 → b12 [label] a13 → b13 [thick label] a14 → b14 [dotted label] label thick label dotted label a1 b1 a2 b2 a3 b3 a4 b4 a5 b5 a6 b6 a7 b7 a8 b8 a9 b9 a10 b10 a11 b11 a12 b12 a13 b13 a14 b14
Diagram source
flowchart LR
  a1 --> b1
  a2 --- b2
  a3 -.-> b3
  a4 ==> b4
  a5 --o b5
  a6 --x b6
  a7 <--> b7
  a8 o--o b8
  a9 x--x b9
  a10 ~~~ b10
  a11 ----> b11
  a12 -- label --> b12
  a13 == thick label ==> b13
  a14 -. dotted label .-> b14

Git branching

Section titled “Git branching”
Flowchart diagram Flowchart, left to right. 6 nodes, 7 edges. main → feature/login; → hotfix/crash; → v1.2.0 feature/login → PR review hotfix/crash → PR review PR review → main [squash] PR review → main [merge] squash merge main feature/login hotfix/crash PR review PR review v1.2.0
Diagram source
flowchart LR
  main[main] --> feat[feature/login]
  main --> fix[hotfix/crash]
  feat --> pr1{{PR review}}
  fix --> pr2{{PR review}}
  pr1 -->|squash| main
  pr2 -->|merge| main
  main --> tag>v1.2.0]

Github actions matrix

Section titled “Github actions matrix”
Flowchart diagram Flowchart, top to bottom. 8 nodes, 9 edges. pull_request → Checkout and cache Checkout and cache → ubuntu-latest; → macos-latest; → windows-latest Test matrix: ubuntu-latest → Upload coverage Test matrix: macos-latest → Upload coverage Test matrix: windows-latest → Upload coverage Upload coverage → Required checks Required checks → Merge Test matrix ubuntu-latest macos-latest windows-latest pull_request Checkout and cache Upload coverage Required checks Merge
Diagram source
flowchart TB
  trigger[pull_request] --> setup[Checkout and cache]
  subgraph matrix [Test matrix]
    direction LR
    linux[ubuntu-latest]
    mac[macos-latest]
    win[windows-latest]
  end
  setup --> linux & mac & win
  linux & mac & win --> report[Upload coverage]
  report --> status{{Required checks}}
  status ==> merge([Merge])

Llm repairs

Section titled “Llm repairs”
Flowchart diagram Flowchart, top to bottom. 7 nodes, 6 edges. User Request → Valid input: yes? Valid input: yes? → Process (async) [Yes]; → Return error [No] Workers: Process (async) → end; → Queue Workers: Queue → F Workers: F Workers Process (async) Queue F Yes No User Request Valid input: yes? Return error end
Diagram source
```mermaid
flowchart TD
    A[“User Request”] --> B{Valid input: yes?}
    B -->|Yes| C[Process (async)]
    B -->|No| D[Return error]
    C --> end
    subgraph Workers
        C --> E[(Queue)]
        E --> F
```

Llm typographic

Section titled “Llm typographic”
Flowchart diagram Flowchart, top to bottom. 4 nodes, 4 edges. Begin → Ready? Ready? → Go [Yes]; → Wait [No] Wait → Ready? Yes No Begin Ready? Go Wait
Diagram source
flowchart TD
    start[“Begin”] --> check{“Ready?”}
    check -->|“Yes”| go[‘Go’]
    check -->|“No”| wait[Wait]
    wait --> check

Llm unquoted labels

Section titled “Llm unquoted labels”
Flowchart diagram Flowchart, left to right. 5 nodes, 5 edges. Client (browser) → API: v2 API: v2 → Cache hit? Cache hit? → Return cached [yes]; → Database [primary] [no] Database [primary] → Return cached yes no Client (browser) API: v2 Cache hit? Return cached Database [primary]
Diagram source
graph LR
    Client[Client (browser)] --> API[API: v2]
    API --> Cache{Cache hit?}
    Cache -->|yes| Resp[Return cached]
    Cache -->|no| DB[(Database [primary])]
    DB --> Resp

Login flow

Section titled “Login flow”
Login flow How a user signs in with a password or a magic link. yes no password magic link no yes Open app Session valid? Home Method Enter password Enter email Check inbox Click link Correct?
Login flow
Diagram source
flowchart TD
  accTitle: Login flow
  accDescr: How a user signs in with a password or a magic link.
  open[Open app] --> signed{Session valid?}
  signed -->|yes| home[Home]
  signed -->|no| choose{Method}
  choose -->|password| pw[Enter password]
  choose -->|magic link| email[Enter email]
  email --> inbox[Check inbox] --> link[Click link]
  pw --> verify{Correct?}
  verify -->|no| pw
  verify -->|yes| home
  link --> home
  click home href "https://example.com/home" _blank

Markdown labels

Section titled “Markdown labels”
Flowchart diagram Flowchart, left to right. 4 nodes, 3 edges. Bold start → Line one line two Line one line two → Entity "quoted" and #hash Entity "quoted" and #hash → Break here Bold start Line oneline two Entity "quoted" and #hash Breakhere
Diagram source
flowchart LR
  a["`**Bold** start`"] --> b["`Line one
  line two`"]
  b --> c["Entity #quot;quoted#quot; and #35;hash"]
  c --> d["Break<br/>here"]

Microservices

Section titled “Microservices”
Flowchart diagram Flowchart, left to right. 10 nodes, 11 edges. User → CDN Edge: CDN → API gateway Edge: API gateway → Auth service; → Order service Services: Auth service → Redis Services: Order service → Payment service; → Inventory service; → Kafka Services: Payment service → PostgreSQL Services: Inventory service → PostgreSQL Data: PostgreSQL Data: Redis Data: Kafka → Inventory service Edge CDN API gateway Services Auth service Order service Payment service Inventory service Data PostgreSQL Redis Kafka User
Diagram source
flowchart LR
  user((User)) --> cdn[CDN]
  cdn --> gw[API gateway]
  subgraph edge [Edge]
    cdn
    gw
  end
  subgraph services [Services]
    direction TB
    auth[Auth service]
    orders[Order service]
    payments[Payment service]
    inventory[Inventory service]
  end
  subgraph data [Data]
    pg[(PostgreSQL)]
    redis[(Redis)]
    kafka[[Kafka]]
  end
  gw --> auth & orders
  orders --> payments
  orders --> inventory
  orders --> kafka
  payments --> pg
  inventory --> pg
  auth --> redis
  kafka -.-> inventory

Ml training

Section titled “Ml training”
Flowchart diagram Flowchart, top to bottom. 12 nodes, 14 edges. Data preparation: Raw data → Clean Data preparation: Clean → Split Data preparation: Split → Train set; → Validation set Data preparation: Train set → Model Data preparation: Validation set → Evaluate Training: Model → Loss; → Evaluate Training: Loss → Optimizer Training: Optimizer → Model [update weights] Evaluate → Better than baseline? Better than baseline? → Model registry [yes]; → Tune hyperparameters [no] Tune hyperparameters → Model Data preparation Raw data Clean Split Train set Validation set Training update weights Model Loss Optimizer yes no Evaluate Better than baseline? Model registry Tune hyperparameters
Diagram source
flowchart TB
  subgraph prep [Data preparation]
    raw[(Raw data)] --> clean[Clean] --> split{Split}
    split --> train_set[Train set]
    split --> val_set[Validation set]
  end
  subgraph train [Training]
    train_set --> model[Model] --> loss[Loss] --> opt[Optimizer]
    opt -. update weights .-> model
  end
  val_set --> eval[Evaluate]
  model --> eval
  eval --> better{Better than baseline?}
  better -->|yes| registry[(Model registry)]
  better -->|no| tune[Tune hyperparameters] --> model

Nested architecture

Section titled “Nested architecture”
Flowchart diagram Flowchart, top to bottom. 8 nodes, 8 edges. Cloud account / VPC / Public subnet: Load balancer → API pods Cloud account / VPC / Public subnet: NAT gateway → Internet Cloud account / VPC / Private subnet / Kubernetes cluster: API pods → Primary DB; → Object storage Cloud account / VPC / Private subnet / Kubernetes cluster: Worker pods → Primary DB; → NAT gateway Cloud account / VPC / Private subnet: Primary DB → Read replica [replication] Cloud account / VPC / Private subnet: Read replica Cloud account: Object storage Internet → Load balancer Cloud account VPC Public subnet Load balancer NAT gateway Private subnet Kubernetes cluster API pods Worker pods replication Primary DB Read replica Object storage Internet
Diagram source
flowchart TB
  subgraph cloud [Cloud account]
    subgraph vpc [VPC]
      subgraph public [Public subnet]
        alb[Load balancer]
        nat[NAT gateway]
      end
      subgraph private [Private subnet]
        subgraph cluster [Kubernetes cluster]
          api[API pods]
          worker[Worker pods]
        end
        db[(Primary DB)]
        replica[(Read replica)]
      end
    end
    s3[(Object storage)]
  end
  internet((Internet)) --> alb
  alb --> api
  api --> db
  worker --> db
  db -. replication .-> replica
  api --> s3
  worker --> nat --> internet

Oncall escalation

Section titled “Oncall escalation”
Flowchart diagram Flowchart, top to bottom. 11 nodes, 11 edges. PagerDuty alert → Acked in 5 min? Acked in 5 min? → Triage [yes]; → Page secondary [no] Triage → Severity Page secondary → Acked in 10 min? Acked in 10 min? → Page manager [no]; → Triage [yes] Severity → Open war room [SEV1]; → File ticket [SEV2]; → Backlog [SEV3] Open war room → Postmortem yes no no yes SEV1 SEV2 SEV3 PagerDuty alert Acked in 5 min? Triage Page secondary Acked in 10 min? Page manager Severity Open war room File ticket Backlog Postmortem
Diagram source
flowchart TD
  alert[/PagerDuty alert/] --> ack{Acked in 5 min?}
  ack -->|yes| triage[Triage]
  ack -->|no| secondary[Page secondary]
  secondary --> ack2{Acked in 10 min?}
  ack2 -->|no| manager[Page manager]
  ack2 -->|yes| triage
  triage --> sev{Severity}
  sev -->|SEV1| war[Open war room]
  sev -->|SEV2| ticket[File ticket]
  sev -->|SEV3| backlog[Backlog]
  war --> postmortem[[Postmortem]]

Release train

Section titled “Release train”
Release train Flowchart, left to right. 8 nodes, 8 edges. Code freeze → RC 1 RC 1 → QA pass? QA pass? → Fix blockers [no]; → Tag release [yes] Fix blockers → RC 1 Tag release → Release notes; → Publish packages Publish packages → Announce no yes Code freeze RC 1 QA pass? Fix blockers Tag release Release notes Publish packages Announce
Release train
Diagram source
---
title: Release train
config:
  flowchart:
    curve: stepAfter
---
flowchart LR
  freeze[Code freeze] --> rc1[RC 1]
  rc1 --> qa{QA pass?}
  qa -->|no| fix[Fix blockers] --> rc1
  qa -->|yes| tag[Tag release]
  tag --> notes[/Release notes/]
  tag --> publish[[Publish packages]]
  publish --> announce>Announce]

Semicolons and comments

Section titled “Semicolons and comments”
Flowchart diagram Flowchart, top to bottom. 4 nodes, 4 edges. A → B; → C B → D C → D A B C D
Diagram source
%% Compact style used in many READMEs
graph TD;
    A-->B;
    A-->C;
    B-->D; %% inline comment
    C-->D;
Section titled “Shapes gallery”
Flowchart diagram Flowchart, left to right. 16 nodes, 15 edges. Rectangle → Rounded Rounded → Stadium Stadium → Subroutine Subroutine → Cylinder Cylinder → Circle Circle → Double Double → Asymmetric Asymmetric → Rhombus Rhombus → Hexagon Hexagon → Lean right Lean right → Lean left Lean left → Trapezoid Trapezoid → Inverted Inverted → Document Document → Database Rectangle Rounded Stadium Subroutine Cylinder Circle Double Asymmetric Rhombus Hexagon Lean right Lean left Trapezoid Inverted Document Database
Diagram source
flowchart LR
  r[Rectangle] --> ro(Rounded) --> st([Stadium]) --> sub[[Subroutine]]
  sub --> cy[(Cylinder)] --> ci((Circle)) --> dc(((Double)))
  dc --> as>Asymmetric] --> rh{Rhombus} --> hx{{Hexagon}}
  hx --> pl[/Lean right/] --> pa[\Lean left\] --> tr[/Trapezoid\] --> ta[\Inverted/]
  ta --> n1@{ shape: doc, label: "Document" }
  n1 --> n2@{ shape: cyl, label: "Database" }

State machine like

Section titled “State machine like”
Flowchart diagram Flowchart, left to right. 6 nodes, 7 edges. Idle → Running [start] Running → Paused [pause]; → Done [finish]; → Failed [error] Paused → Running [resume]; → Cancelled [cancel] Failed → Running [retry] start pause resume finish error retry cancel Idle Running Paused Done Failed Cancelled
Diagram source
flowchart LR
  idle((Idle)) -->|start| running[Running]
  running -->|pause| paused[Paused]
  paused -->|resume| running
  running -->|finish| done(((Done)))
  running -->|error| failed[Failed]
  failed -->|retry| running
  paused -->|cancel| cancelled[Cancelled]

Styled classes

Section titled “Styled classes”
Flowchart diagram Flowchart, top to bottom. 4 nodes, 3 edges. Healthy → Degraded Degraded → Down Down → Recovered Healthy Degraded Down Recovered
Diagram source
flowchart TD
  classDef ok fill:#e6ffed,stroke:#22863a,stroke-width:2px
  classDef warn fill:#fff5b1,stroke:#b08800
  classDef bad fill:#ffeef0,stroke:#cb2431,color:#86181d,font-weight:bold
  a[Healthy]:::ok --> b[Degraded]:::warn
  b --> c[Down]:::bad
  c --> d[Recovered]
  class d ok
  style a stroke-dasharray: 5 5
  linkStyle default stroke:#6a737d
  linkStyle 1 stroke:#cb2431,stroke-width:3px

Theme directive

Section titled “Theme directive”
Flowchart diagram Flowchart, left to right. 3 nodes, 3 edges. Draft → Review Review → Publish; → Draft [changes requested] changes requested Draft Review Publish
Diagram source
%%{init: {'theme': 'forest', 'flowchart': {'curve': 'basis'}}}%%
flowchart LR
  a[Draft] --> b[Review] --> c[Publish]
  b -->|changes requested| a

Troubleshooting

Section titled “Troubleshooting”
Flowchart diagram Flowchart, top to bottom. 11 nodes, 11 edges. Service is down → Can you ping the host? Can you ping the host? → Check network [No]; → Is the process running? [Yes] Check network → Escalate to infra Is the process running? → Restart service [No]; → Errors in logs? [Yes] Restart service → Recovered? Errors in logs? → Open incident [Yes]; → Check load balancer [No] Recovered? → Close ticket [Yes]; → Open incident [No] No Yes No Yes Yes No Yes No Service is down Can you ping the host? Check network Is the process running? Restart service Errors in logs? Open incident Check load balancer Escalate to infra Recovered? Close ticket
Diagram source
graph TD
  A[Service is down] --> B{Can you ping the host?}
  B -- No --> C[Check network]
  B -- Yes --> D{Is the process running?}
  D -- No --> E[Restart service]
  D -- Yes --> F{Errors in logs?}
  F -- Yes --> G[Open incident]
  F -- No --> H[Check load balancer]
  C --> I[Escalate to infra]
  E --> J{Recovered?}
  J -- Yes --> K([Close ticket])
  J -- No --> G

Two tier labels

Section titled “Two tier labels”
Flowchart diagram Flowchart, left to right. 13 nodes, 15 edges. cron trigger every minute idempotent run key → lease one run per window 90 s TTL durable workflow: lease one run per window 90 s TTL → due set scan schedules next_at ≤ now durable workflow: due set scan schedules next_at ≤ now → budget 250 push slots per-tenant caps durable workflow: budget 250 push slots per-tenant caps → enqueue batches of 100 dedupe by job id durable workflow: enqueue batches of 100 dedupe by job id → wait sleep until acked or 30 s timeout; → push queue at-least-once visibility 60 s [batch] durable workflow: wait sleep until acked or 30 s timeout → finalize record outcomes advance next_at durable workflow: finalize record outcomes advance next_at → release drop the lease durable workflow: release drop the lease push queue at-least-once visibility 60 s → sender A APNs; → sender B FCM; → sender C web push; → dead letters after 5 attempts kept 14 days [max retries] consumers: sender A APNs → wait sleep until acked or 30 s timeout [ack] consumers: sender B FCM → wait sleep until acked or 30 s timeout [ack] consumers: sender C web push → wait sleep until acked or 30 s timeout [ack] durable workflow leaseone run per window90 s TTL due setscan schedulesnext_at ≤ now budget250 push slotsper-tenant caps enqueuebatches of 100dedupe by job id waitsleep until ackedor 30 s timeout finalizerecord outcomesadvance next_at releasedrop the lease consumers sender AAPNs sender BFCM sender Cweb push batch ack ack ack max retries cron triggerevery minuteidempotent run key push queueat-least-oncevisibility 60 s dead lettersafter 5 attemptskept 14 days
Diagram source
flowchart LR
  cron["**cron trigger**<br/>every minute<br/>idempotent run key"]
  subgraph wf["durable workflow"]
    lease["**lease**<br/>one run per window<br/>90 s TTL"]
    due["**due set**<br/>scan schedules<br/>next_at ≤ now"]
    budget["**budget**<br/>250 push slots<br/>per-tenant caps"]
    enqueue["**enqueue**<br/>batches of 100<br/>dedupe by job id"]
    wait["**wait**<br/>sleep until acked<br/>or 30 s timeout"]
    finalize["**finalize**<br/>record outcomes<br/>advance next_at"]
    release["**release**<br/>drop the lease"]
    lease --> due --> budget --> enqueue --> wait --> finalize --> release
  end
  q[("**push queue**<br/>at-least-once<br/>visibility 60 s")]
  subgraph consumers["consumers"]
    c1["**sender A**<br/>APNs"]
    c2["**sender B**<br/>FCM"]
    c3["**sender C**<br/>web push"]
  end
  dlq[("**dead letters**<br/>after 5 attempts<br/>kept 14 days")]
  cron --> lease
  enqueue -->|batch| q
  q --> c1 & c2 & c3
  c1 & c2 & c3 -.->|ack| wait
  q -->|max retries| dlq