Skip to content
Merlion

Showcase

Hand-written diagrams from docs/src/gallery/showcase.json. The wide pipeline renders at 1600 px (width=1600 in its fence), wider than the page, so <merlion-view> shows its zoom controls.

Viewer fixture: a wide pipeline

Section titled “Viewer fixture: a wide pipeline”
Release pipeline Flowchart, left to right. 11 nodes, 10 edges. Commit → Lint Lint → Unit tests Unit tests → Build wasm Build wasm → wasm-opt wasm-opt → Hash check Hash check → Sign tag Sign tag → Attest Attest → Publish npm Publish npm → Publish crates Publish crates → Announce Commit Lint Unit tests Build wasm wasm-opt Hash check Sign tag Attest Publish npm Publish crates Announce
Release pipeline
Diagram source
flowchart LR
  accTitle: Release pipeline
  commit[Commit] --> lint[Lint] --> test[Unit tests] --> build[Build wasm] --> opt[wasm-opt] --> hash[Hash check] --> sign[Sign tag] --> attest[Attest] --> npm[Publish npm] --> crates[Publish crates] --> announce[Announce]

Build pipeline

Section titled “Build pipeline”
Build pipeline Flowchart, left to right. 5 nodes, 4 edges. Source .md → Has mermaid? Has mermaid? → Render SVG [yes]; → Pass through [no] Render SVG → Cache yes no Source .md Has mermaid? Render SVG Pass through Cache
Build pipeline
Diagram source
flowchart LR
  accTitle: Build pipeline
  src[Source .md] --> has{Has mermaid?}
  has -->|yes| render[Render SVG]
  has -->|no| pass[Pass through]
  render --> cache[(Cache)]

Release with subgraphs

Section titled “Release with subgraphs”
Flowchart diagram Flowchart, top to bottom. 8 nodes, 7 edges. CI: lint → test CI: test → build CI: build → tag Release: tag → Verify signature Release: Verify signature → publish Release: publish → npm; → crates.io CI lint test build Release tag Verify signature publish npm crates.io
Diagram source
flowchart TB
  subgraph ci[CI]
    lint --> test --> build
  end
  subgraph release[Release]
    tag --> verify[Verify signature] --> publish
  end
  build --> tag
  publish --> npm[(npm)]
  publish --> crates[(crates.io)]

Request lifecycle

Section titled “Request lifecycle”
Request lifecycle Flowchart, left to right. 6 nodes, 8 edges. Client → Edge cache Edge cache → Client [hit]; → App server [miss] App server → Database; → Queue; → Edge cache Queue → Worker Worker → Database hit miss Client Edge cache App server Database Queue Worker
Request lifecycle
Diagram source
---
title: Request lifecycle
---
flowchart LR
  client([Client]) --> edge[Edge cache]
  edge -->|hit| client
  edge -->|miss| app[App server]
  app --> db[(Database)]
  app --> queue[[Queue]]
  queue --> worker[Worker]
  worker --> db
  app --> edge