archify-hai / docs /gallery.html
smlflg's picture
Initial upload: archify-hai on HF Hub (part 2)
63b381a verified
Raw History Blame Contribute Delete
95 kB
<!DOCTYPE html>
<html lang="en" data-preview-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="archify gallery 2.17.0-dev.1">
<title>Archify Proof Lab — Generated Diagram Gallery</title>
<meta name="description" content="A generated gallery of validated, self-contained Archify diagrams. Every preview links to its exact JSON source and interactive HTML artifact.">
<meta name="theme-color" content="#eff2f1">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><polygon points='14,2 26,8 26,20 14,26 2,20 2,8' fill='%23083344' stroke='%2322d3ee' stroke-width='1.5'/><circle cx='14' cy='15' r='2.5' fill='%2322d3ee'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site-navigation.css">
<style>
:root {
/* Drafted-sheet palette — shared with the project page */
--paper-site:#eff2f1; --paper-raised:#f8faf9;
--ink-site:#15181b; --ink-soft:#363c41; --muted:#60686d; --dim:#929a9e;
--line:rgba(20,23,26,0.14); --line-hi:rgba(20,23,26,0.3);
--accent-site:#e14a0e; --accent-soft:rgba(225,74,14,0.08);
--plate:#0f1216;
--emerald:#047857;
--font-display:'Fraunces','Songti SC','STSong',Georgia,serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--ease-out:cubic-bezier(.22,1,.36,1);
--content: 1320px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
font-family:var(--font-body);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
background:var(--paper-site); color:var(--ink-site); min-height:100vh; overflow-x:hidden;
}
body::after {
content:''; position:fixed; inset:0; z-index:1000; pointer-events:none;
opacity:.05; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
::selection { background:rgba(225,74,14,.18); color:var(--ink-site); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font:inherit; }
:focus-visible { outline: 2px solid var(--accent-site); outline-offset: 3px; border-radius:4px; }
.grid-bg {
position:fixed; inset:0; z-index:0; pointer-events:none;
background-image:linear-gradient(rgba(20,23,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,23,26,.045) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(ellipse 95% 62% at 50% -6%, black 12%, transparent 75%);
mask-image:radial-gradient(ellipse 95% 62% at 50% -6%, black 12%, transparent 75%);
}
.shell { position:relative; z-index:1; width: min(var(--content), calc(100% - 48px)); margin: 0 auto; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.15rem; border-radius:6px; font-family:var(--font-body); font-size:.8125rem; font-weight:500; letter-spacing:-.005em; cursor:pointer; text-decoration:none; transition:all .2s var(--ease-out); border:1px solid transparent; }
.btn-primary { background:var(--ink-site); color:var(--paper-site); }
.btn-primary:hover { background:#272c31; transform:translateY(-1px); }
/* HERO */
.hero { padding: 10rem 0 4.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr); gap: 4.5rem; align-items: end; }
.lead-label { display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem; font-family:var(--font-mono); font-size:.625rem; font-weight:500; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.lead-label::before { content:''; width:2.75rem; height:1px; background:var(--line-hi); }
.hero h1 {
max-width: 860px;
font-family:var(--font-display); font-optical-sizing:auto;
font-size: clamp(2.75rem, 6vw, 5rem);
font-weight:400; line-height: 1.02; letter-spacing: -.03em;
color:var(--ink-site); text-wrap: balance;
}
.hero h1 em { font-style:italic; color: var(--accent-site); }
.hero-copy { margin-top: 1.5rem; max-width: 640px; color: var(--muted); font-size: .9375rem; line-height: 1.72; text-wrap:pretty; }
.hero-copy strong { color: var(--ink-site); font-weight: 500; }
.proof-board { border:1px solid var(--line-hi); border-radius:12px; background:var(--paper-raised); overflow:hidden; }
.proof-row { min-height: 64px; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap:1rem; padding:.9rem 1.25rem; border-bottom: 1px solid var(--line); }
.proof-row:last-child { border-bottom:0; }
.proof-value { font-family:var(--font-display); font-style:italic; font-optical-sizing:auto; font-weight:400; font-size: 1.625rem; line-height:1; color: var(--ink-site); }
.proof-label { color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.proof-status { display: inline-flex; align-items: center; gap: .5rem; color: var(--emerald); font-style:normal; font-family:var(--font-mono); font-size:.8125rem; font-weight:600; letter-spacing:.08em; }
.proof-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
/* CONTROLS */
.controls { padding: 1.25rem 0; border-top:1px solid var(--line); border-bottom: 1px solid var(--line); }
.controls-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.controls-actions { display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
.filter-button {
min-height: 44px;
padding: 0 .85rem;
border: 1px solid var(--line-hi);
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family:var(--font-mono); font-size:.5625rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
cursor: pointer;
transition:all .18s var(--ease-out);
}
.filter-button:hover { color: var(--ink-site); border-color:var(--ink-site); }
.filter-button[aria-pressed="true"] { color: var(--paper-site); background:var(--ink-site); border-color:var(--ink-site); }
.controls-note { color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
/* GALLERY */
.gallery-section { padding: 4rem 0 6rem; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.75rem; }
.section-intro h2 { font-family:var(--font-display); font-optical-sizing:auto; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight:400; letter-spacing: -.026em; color:var(--ink-site); }
.section-intro p { max-width: 440px; color: var(--muted); font-size: .8125rem; line-height: 1.7; text-align: right; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.showcase-card {
min-width: 0;
position: relative;
overflow: hidden;
border: 1px solid var(--line-hi);
border-radius: 14px;
background: var(--paper-raised);
opacity: 0;
transform: translateY(18px);
transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.showcase-card.visible { opacity: 1; transform: translateY(0); }
.showcase-card:hover { border-color: var(--ink-site); box-shadow:0 22px 54px rgba(20,23,26,.12); }
.showcase-card:target { scroll-margin-top: 86px; border-color: var(--accent, var(--accent-site)); box-shadow: 0 0 0 1px var(--accent, var(--accent-site)), 0 24px 60px rgba(20,23,26,.14); }
.showcase-card.is-featured { grid-column: 1 / -1; }
.showcase-card[hidden] { display: none; }
.card-header { min-height: 76px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.card-index { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--dim); font-family:var(--font-display); font-style:italic; font-optical-sizing:auto; font-size: 1.125rem; }
.card-title-wrap { min-width: 0; padding: 1rem 1.375rem; }
.card-kicker { margin-bottom: .35rem; color: var(--accent, var(--accent-site)); font-family:var(--font-mono); font-size: .5625rem; font-weight:600; letter-spacing: .14em; text-transform: uppercase; }
.card-title { font-family:var(--font-display); font-optical-sizing:auto; font-size: 1.375rem; font-weight:500; letter-spacing: -.02em; color:var(--ink-site); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-mode { margin-right: 1.375rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius:999px; color: var(--muted); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; }
.preview-shell { position: relative; height: 370px; overflow: hidden; background: var(--plate); border-bottom: 1px solid var(--line); }
.showcase-card.is-featured .preview-shell { height: 600px; }
.preview-shell iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: var(--plate); }
.live-flag { position: absolute; z-index: 2; top: .875rem; left: .875rem; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border: 1px solid rgba(52,211,153,.35); border-radius:6px; background: rgba(15,18,22,.82); color: #34d399; font-family:var(--font-mono); font-size: .5rem; font-weight:600; letter-spacing: .14em; text-transform: uppercase; }
.live-flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.card-body { padding: 1.5rem 1.625rem 1.5rem; }
.card-description { min-height: 44px; margin-bottom: 1.25rem; color: var(--muted); font-size: .8125rem; line-height: 1.7; text-wrap:pretty; }
.engineering-proof { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.375rem 0 .875rem; padding: .6rem .8rem; border: 1px solid rgba(4,120,87,.3); border-radius: 8px; background: rgba(4,120,87,.05); color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; }
.engineering-proof strong { color: var(--emerald); font-weight: 600; white-space: nowrap; }
.receipt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius:8px; overflow:hidden; }
.receipt-cell { min-width: 0; padding: .7rem .8rem; border-right: 1px solid var(--line); }
.receipt-cell:last-child { border-right: 0; }
.receipt-label { display: block; margin-bottom: .35rem; color: var(--dim); font-family:var(--font-mono); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.receipt-value { display: block; color: var(--ink-soft); font-family:var(--font-mono); font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipt-value.ok { color: var(--emerald); }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
.card-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .9rem; border: 1px solid var(--line-hi); border-radius: 8px; color: var(--ink-soft); font-size: .75rem; font-weight: 500; text-decoration: none; transition: all .2s var(--ease-out); }
.card-link:hover { color: var(--ink-site); border-color: var(--ink-site); }
.card-link.primary { border-color: var(--ink-site); background:var(--ink-site); color: var(--paper-site); }
.card-link.primary:hover { background:var(--accent-site); border-color: var(--accent-site); color:var(--paper-site); }
.card-link.create-link { margin-left: auto; border-color: rgba(4,120,87,.35); color: var(--emerald); background: rgba(4,120,87,.05); }
.card-link.create-link:hover { border-color: var(--emerald); background: rgba(4,120,87,.1); color:var(--emerald); }
.empty-state { display: none; margin-top:14px; padding: 4rem 1.5rem; border: 1px dashed var(--line-hi); border-radius:14px; color: var(--muted); text-align: center; font-size: .8125rem; }
.empty-state.visible { display: block; }
.community-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-top: 14px; padding: 1.75rem 2rem; border: 1px solid rgba(4,120,87,.3); border-radius:14px; background: rgba(4,120,87,.045); }
.community-callout-copy { max-width: 760px; }
.community-callout-title { display: block; margin-bottom: .5rem; color: var(--ink-site); font-family:var(--font-display); font-optical-sizing:auto; font-size: 1.25rem; font-weight:500; letter-spacing: -.02em; }
.community-callout p { color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.community-callout .card-link { min-width: 220px; border-color: rgba(4,120,87,.4); color: var(--emerald); background: rgba(4,120,87,.06); }
.community-callout .card-link:hover { border-color: var(--emerald); background: rgba(4,120,87,.12); color:var(--emerald); }
/* METHOD */
.method { border-top: 1px solid var(--line); padding: 4.5rem 0; }
.method-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4.5rem; }
.method h2 { font-family:var(--font-display); font-optical-sizing:auto; font-size: clamp(1.5rem,2.6vw,2.25rem); font-weight:400; letter-spacing: -.026em; color:var(--ink-site); }
.method-copy { color: var(--muted); font-size: .8125rem; line-height: 1.8; }
.pipeline { margin-top: 1.75rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-hi); border-radius:12px; overflow:hidden; }
.pipeline-step { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; min-height: 56px; padding: 0 1.125rem; background: var(--paper-raised); }
.pipeline-num { color: var(--accent-site); font-family:var(--font-mono); font-size: .625rem; font-weight:600; }
.pipeline-label { font-size: .8125rem; color:var(--ink-soft); }
.pipeline-state { color: var(--emerald); font-family:var(--font-mono); font-size: .5625rem; font-weight:600; letter-spacing: .12em; text-transform: uppercase; }
.method-code { border: 1px solid var(--ink-site); border-radius:12px; overflow:hidden; background: var(--plate); align-self:start; }
.method-code-bar { display: flex; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid rgba(232,237,242,.1); color: #7d8894; font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; }
.method-code pre { margin: 0; padding: 1.5rem; color: #aab3bb; font: 500 .6875rem/1.9 var(--font-mono); white-space: pre-wrap; }
.method-code .accent { color: var(--accent-site); }
footer { border-top: 1px solid var(--line); padding: 1.75rem 0 2.5rem; color: var(--dim); font-family:var(--font-mono); font-size: .625rem; letter-spacing:.04em; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; }
@media (max-width: 960px) {
.hero-grid, .method-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.proof-board { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-row { grid-template-columns: 1fr; align-content: center; gap: .35rem; border-bottom:0; border-right: 1px solid var(--line); }
.proof-row:last-child { border-right:0; }
.gallery-grid { grid-template-columns: 1fr; }
.showcase-card.is-featured { grid-column: auto; }
.showcase-card.is-featured .preview-shell { height: 440px; }
}
@media (max-width: 640px) {
.shell { width: min(100% - 28px, var(--content)); }
.hero { padding: 7.5rem 0 3rem; }
.hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
.proof-board { grid-template-columns: 1fr; }
.proof-row { grid-template-columns: 72px 1fr; min-height: 54px; border-right: 0; border-bottom:1px solid var(--line); }
.proof-row:last-child { border-bottom:0; }
.controls-inner, .section-intro { align-items: flex-start; flex-direction: column; }
.controls-actions { width:100%; justify-content:space-between; }
.controls-note, .section-intro p { text-align: left; }
.filter-group { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.card-header { grid-template-columns: 48px 1fr; }
.card-mode { display: none; }
.card-title-wrap { padding: .9rem 1rem; }
.card-title { font-size: 1.125rem; }
.preview-shell, .showcase-card.is-featured .preview-shell { height: 310px; }
.card-body { padding: 1.125rem 1rem; }
.engineering-proof { align-items: flex-start; flex-direction: column; gap: .35rem; }
.receipt { grid-template-columns: 1fr 1fr; }
.receipt-cell:nth-child(2) { border-right: 0; }
.receipt-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.card-actions { flex-wrap: wrap; }
.card-link { flex: 1; min-width: 118px; }
.card-link.create-link { margin-left: 0; }
.community-callout { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; }
.community-callout .card-link { width: 100%; min-width: 0; }
.method { padding: 3.25rem 0; }
.footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.showcase-card { opacity:1; transform:none; transition:none; }
}
</style>
</head>
<body>
<div class="grid-bg" aria-hidden="true"></div>
<nav class="site-nav" aria-label="Primary navigation">
<a class="nav-logo" href="./" aria-label="Back to Archify home">
<span class="nav-logo-text">Archify</span>
<span class="nav-logo-path" data-en="/ proof lab" data-zh="/ 验证作品集">/ proof lab</span>
</a>
<div class="nav-right">
<a class="nav-link" href="guide.html" data-en="Guide" data-zh="场景指南">Guide</a>
<a class="nav-link" href="gallery.html" aria-current="page" data-en="Proof Lab" data-zh="验证作品集">Proof Lab</a>
<a class="nav-link" href="start.html" data-en="Start" data-zh="快速上手">Start</a>
<a class="nav-link" href="https://github.com/tt-a1i/archify" target="_blank" rel="noopener">GitHub</a>
<button class="btn-lang" id="language" type="button" aria-label="Switch language">中文</button>
<a class="btn btn-primary nav-cta" href="start.html" data-en="Install Skill" data-zh="安装技能">Install Skill</a>
</div>
</nav>
<main>
<section class="hero">
<div class="shell hero-grid">
<div>
<div class="lead-label" data-en="Generated showcase / verified artifacts" data-zh="自动生成作品集 / 真实验证成品">Generated showcase / verified artifacts</div>
<h1 data-en="Proof,<br><em>not promises.</em>" data-zh="先看成品,<br><em>再谈能力。</em>">Proof,<br><em>not promises.</em></h1>
<p class="hero-copy" data-en="Every frame below is a live Archify artifact—not a mockup. Each one is regenerated from versioned JSON IR, checked for structural integrity, and linked to the exact source that produced it." data-zh="下面每一帧都是可运行的 Archify 成品,不是效果图。它们全部由版本化 JSON IR 重新生成、经过结构检查,并链接到产生它的精确源数据。">Every frame below is a live Archify artifact—not a mockup. Each one is regenerated from versioned JSON IR, checked for structural integrity, and linked to the exact source that produced it.</p>
</div>
<div class="proof-board" aria-label="Gallery quality summary">
<div class="proof-row"><span class="proof-value">11</span><span class="proof-label" data-en="scenario proofs<br>from real IR" data-zh="个场景成品<br>来自真实 IR">scenario proofs<br>from real IR</span></div>
<div class="proof-row"><span class="proof-value">99</span><span class="proof-label" data-en="structural checks<br>passed" data-zh="项结构检查<br>全部通过">structural checks<br>passed</span></div>
<div class="proof-row"><span class="proof-value proof-status">PASS</span><span class="proof-label" data-en="generated from<br>source of truth" data-zh="从源数据<br>自动生成">generated from<br>source of truth</span></div>
</div>
</div>
</section>
<section class="controls" aria-label="Gallery controls">
<div class="shell controls-inner">
<div class="filter-group" role="group" aria-label="Filter diagrams by type">
<button class="filter-button" type="button" data-filter="all" aria-pressed="true" data-en="All / 11" data-zh="全部配方 / 11">All / 11</button>
<button class="filter-button" type="button" data-filter="architecture" aria-pressed="false" data-en="Architecture" data-zh="架构图">Architecture</button>
<button class="filter-button" type="button" data-filter="workflow" aria-pressed="false" data-en="Workflow" data-zh="工作流">Workflow</button>
<button class="filter-button" type="button" data-filter="sequence" aria-pressed="false" data-en="Sequence" data-zh="时序图">Sequence</button>
<button class="filter-button" type="button" data-filter="dataflow" aria-pressed="false" data-en="Data flow" data-zh="数据流">Data flow</button>
<button class="filter-button" type="button" data-filter="lifecycle" aria-pressed="false" data-en="Lifecycle" data-zh="生命周期">Lifecycle</button>
</div>
<div class="controls-actions">
<button class="filter-button" id="preview-theme" type="button">Preview: dark</button>
<div class="controls-note" data-en="Live HTML previews · open any artifact to explore" data-zh="实时 HTML 预览 · 打开任意成品继续探索">Live HTML previews · open any artifact to explore</div>
</div>
</div>
</section>
<section class="gallery-section" id="gallery">
<div class="shell">
<div class="section-intro">
<h2 data-en="Five lenses. Eleven real stories." data-zh="五种视角,十一个真实故事。">Five lenses. Eleven real stories.</h2>
<p data-en="Every scenario has named reader views with a path-aware Story Trail, shareable navigation, dark/light rendering, self-contained export, and a machine-readable quality receipt." data-zh="每个场景都有能辨别真实方向的 Story Trail 命名视图、可分享导航、深浅主题、自包含导出和机器可读质量凭证。">Every scenario has named reader views with a path-aware Story Trail, shareable navigation, dark/light rendering, self-contained export, and a machine-readable quality receipt.</p>
</div>
<div class="gallery-grid" id="gallery-grid">
<article class="showcase-card is-featured" id="proof-agent-tool-call" data-proof-id="agent-tool-call" data-type="workflow" style="--accent:#047857">
<header class="card-header">
<div class="card-index">01</div>
<div class="card-title-wrap">
<div class="card-kicker">Workflow / 12 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Agent Tool Call" data-zh="智能体工具调用">Agent Tool Call</h3>
</div>
<div class="card-mode">signal-flow + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/agent-tool-call.workflow.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/agent-tool-call.workflow.html" title="Agent Tool Call live Archify preview" loading="eager"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Four consolidated lanes trace a policy-aware agent loop across user interaction, agent runtime, policy and recovery, and tool execution with evidence." data-zh="四条整合泳道呈现策略感知的智能体闭环:用户交互、智能体运行时、策略与恢复,以及带证据的工具执行。">Four consolidated lanes trace a policy-aware agent loop across user interaction, agent runtime, policy and recovery, and tool execution with evidence.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 11E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="fc7643fa7f3b0c85250f781f9927a905f518a5b4a8c28ec08afd6f3889f435e4">fc7643fa7f3b</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/agent-tool-call.workflow.html?present=1&amp;play=1#view=happy-path" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/agent-tool-call.workflow.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/agent-tool-call.workflow.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=workflow&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-deployment-ownership" data-proof-id="deployment-ownership" data-type="architecture" style="--accent:#0891b2">
<header class="card-header">
<div class="card-index">02</div>
<div class="card-title-wrap">
<div class="card-kicker">Architecture / 12 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Production Deployment Ownership" data-zh="生产部署与归属">Production Deployment Ownership</h3>
</div>
<div class="card-mode">blueprint + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/production-deployment.architecture.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/production-deployment.architecture.html" title="Production Deployment Ownership live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Regions, private networks, workload owners, state, cross-region replication, audit evidence, and named boundary crossings." data-zh="展示区域、私有网络、工作负载归属、状态、跨区复制、审计证据和明确的边界穿越。">Regions, private networks, workload owners, state, cross-region replication, audit evidence, and named boundary crossings.</p>
<div class="engineering-proof" aria-label="Engineering profile validation"><span>Engineering profile</span><strong>DEPLOYMENT OWNERSHIP · PASS</strong></div>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 12E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="dccd530553b06c10397cf00a23c8f2a04e2bb25548c6d0c29ae912ed0d5a05fe">dccd530553b0</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/production-deployment.architecture.html?present=1&amp;play=1#view=request-boundary" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/production-deployment.architecture.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/production-deployment.architecture.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=architecture&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-cache-miss" data-proof-id="cache-miss" data-type="sequence" style="--accent:#6d28d9">
<header class="card-header">
<div class="card-index">03</div>
<div class="card-title-wrap">
<div class="card-kicker">Sequence / 7 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Cache Miss Request" data-zh="缓存未命中请求">Cache Miss Request</h3>
</div>
<div class="card-mode">classic + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/cache-miss.sequence.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/cache-miss.sequence.html" title="Cache Miss Request live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="A time-ordered request path covering authentication, cache fallback, persistence, return traffic, and async tracing." data-zh="按时间展开鉴权、缓存回退、持久化、返回流量与异步追踪。">A time-ordered request path covering authentication, cache fallback, persistence, return traffic, and async tracing.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">7N · 12E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="7c5c8f5c39c10dc8148591f654cd79a05ff49bb70166a4c45607414ca02cbe3a">7c5c8f5c39c1</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/cache-miss.sequence.html?present=1&amp;play=1#view=cache-fallback" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/cache-miss.sequence.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/cache-miss-request.sequence.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=sequence&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-delivery-workflow" data-proof-id="delivery-workflow" data-type="workflow" style="--accent:#047857">
<header class="card-header">
<div class="card-index">04</div>
<div class="card-title-wrap">
<div class="card-kicker">Workflow / 10 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Release Delivery Workflow" data-zh="研发交付流程">Release Delivery Workflow</h3>
</div>
<div class="card-mode">classic + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/release-delivery.workflow.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/release-delivery.workflow.html" title="Release Delivery Workflow live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="A change moves through reproducible build, blocking gates, human approval, canary verification, communication, and rollback." data-zh="一次变更依次经过可复现构建、阻断检查、人工审批、金丝雀验证、沟通和回滚。">A change moves through reproducible build, blocking gates, human approval, canary verification, communication, and rollback.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 10E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="ebe7c1363e5e7943f885e71029e135b4271b87eeb82255708727692969ec99b7">ebe7c1363e5e</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/release-delivery.workflow.html?present=1&amp;play=1#view=approval-to-production" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/release-delivery.workflow.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/release-delivery.workflow.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=workflow&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-incident-runbook" data-proof-id="incident-runbook" data-type="workflow" style="--accent:#047857">
<header class="card-header">
<div class="card-index">05</div>
<div class="card-title-wrap">
<div class="card-kicker">Workflow / 11 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Incident Response Runbook" data-zh="事故处置 Runbook">Incident Response Runbook</h3>
</div>
<div class="card-mode">signal-flow + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/incident-response.workflow.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/incident-response.workflow.html" title="Incident Response Runbook live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Detection, incident command, mitigation, stakeholder communication, escalation, rollback, and recovery evidence." data-zh="覆盖发现、事故指挥、缓解、干系人沟通、升级、回滚和恢复证据。">Detection, incident command, mitigation, stakeholder communication, escalation, rollback, and recovery evidence.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">11N · 10E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="8a56193e079b25feed917ba33f29dd01e49615c99d5030f582d6ea34bc3d1f27">8a56193e079b</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/incident-response.workflow.html?present=1&amp;play=1#view=mitigate-and-verify" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/incident-response.workflow.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/incident-response.workflow.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=workflow&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-product-analytics" data-proof-id="product-analytics" data-type="dataflow" style="--accent:#b45309">
<header class="card-header">
<div class="card-index">06</div>
<div class="card-title-wrap">
<div class="card-kicker">Data flow / 10 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Product Analytics" data-zh="产品分析数据流">Product Analytics</h3>
</div>
<div class="card-mode">classic + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/product-analytics.dataflow.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/product-analytics.dataflow.html" title="Product Analytics live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Events move through consent, streaming, PII isolation, warehouse sync, and governed downstream consumers." data-zh="事件依次经过用户同意、流处理、PII 隔离、数仓同步和受治理的下游消费者。">Events move through consent, streaming, PII isolation, warehouse sync, and governed downstream consumers.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 10E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="c75c04344269b16e25c72551101e706d05004ee93d298e8d0c4c5bd93d4050e9">c75c04344269</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/product-analytics.dataflow.html?present=1&amp;play=1#view=consent-boundary" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/product-analytics.dataflow.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/product-analytics.dataflow.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=dataflow&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-async-roundtrip" data-proof-id="async-roundtrip" data-type="sequence" style="--accent:#6d28d9">
<header class="card-header">
<div class="card-index">07</div>
<div class="card-title-wrap">
<div class="card-kicker">Sequence / 7 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Async Job Roundtrip" data-zh="异步任务往返链路">Async Job Roundtrip</h3>
</div>
<div class="card-mode">signal-flow + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/async-job-roundtrip.sequence.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/async-job-roundtrip.sequence.html" title="Async Job Roundtrip live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="A fast acknowledgement leads into durable queueing, background work, retry, final-state storage, webhook, and polling fallback." data-zh="快速确认后进入持久队列、后台处理、重试、终态存储、Webhook 和轮询回退。">A fast acknowledgement leads into durable queueing, background work, retry, final-state storage, webhook, and polling fallback.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">7N · 14E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="8fb45b739efdc45b56f7f9a0cf2f7bf95573d382897198731f4b4b2f33567930">8fb45b739efd</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/async-job-roundtrip.sequence.html?present=1&amp;play=1#view=work-and-retry" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/async-job-roundtrip.sequence.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/async-job-roundtrip.sequence.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=sequence&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-event-stream" data-proof-id="event-stream" data-type="dataflow" style="--accent:#b45309">
<header class="card-header">
<div class="card-index">08</div>
<div class="card-title-wrap">
<div class="card-kicker">Data flow / 12 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Order Event-stream Topology" data-zh="订单事件流拓扑">Order Event-stream Topology</h3>
</div>
<div class="card-mode">signal-flow + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/event-stream.dataflow.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/event-stream.dataflow.html" title="Order Event-stream Topology live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Named producers, partitioned topics, consumer groups, idempotent state, dead letters, operator ownership, and controlled replay." data-zh="展示命名生产者、分区 Topic、消费者组、幂等状态、死信、负责人和受控重放。">Named producers, partitioned topics, consumer groups, idempotent state, dead letters, operator ownership, and controlled replay.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 12E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="7cc04cbd1d9a6c9999fb69a8ef226c682be0f32b5c5dbbdfef06a28670f68df5">7cc04cbd1d9a</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/event-stream.dataflow.html?present=1&amp;play=1#view=order-transit" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/event-stream.dataflow.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/event-stream.dataflow.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=dataflow&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-agent-run" data-proof-id="agent-run" data-type="lifecycle" style="--accent:#be123c">
<header class="card-header">
<div class="card-index">09</div>
<div class="card-title-wrap">
<div class="card-kicker">Lifecycle / 10 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Agent Run Lifecycle" data-zh="智能体运行生命周期">Agent Run Lifecycle</h3>
</div>
<div class="card-mode">classic + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/agent-run.lifecycle.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/agent-run.lifecycle.html" title="Agent Run Lifecycle live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="Planning, execution, review, human approval, retry, cancellation, and terminal outcomes in one state model." data-zh="用一套状态模型表达规划、执行、复核、人工审批、重试、取消和终态。">Planning, execution, review, human approval, retry, cancellation, and terminal outcomes in one state model.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 6E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="87b43a172dd3c9292fbc12fb37bcdadc9580171473cec33cffcd5d81b2deea25">87b43a172dd3</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/agent-run.lifecycle.html?present=1&amp;play=1#view=main-lifecycle" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/agent-run.lifecycle.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/agent-run.lifecycle.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=lifecycle&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-deployment-lifecycle" data-proof-id="deployment-lifecycle" data-type="lifecycle" style="--accent:#be123c">
<header class="card-header">
<div class="card-index">10</div>
<div class="card-title-wrap">
<div class="card-kicker">Lifecycle / 11 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Deployment Release Lifecycle" data-zh="部署发布生命周期">Deployment Release Lifecycle</h3>
</div>
<div class="card-mode">signal-flow + trace</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/deployment-release.lifecycle.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/deployment-release.lifecycle.html" title="Deployment Release Lifecycle live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="The deployment object moves through build, verification, approval, promotion, health pause, rollback, and explicit terminal outcomes." data-zh="部署对象经过构建、验证、审批、晋级、健康暂停、回滚和明确终态。">The deployment object moves through build, verification, approval, promotion, health pause, rollback, and explicit terminal outcomes.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">11N · 6E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="cb7939eb251a51138fd748de573402d8272d6cfc3cf31a375850dec39bccb323">cb7939eb251a</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/deployment-release.lifecycle.html?present=1&amp;play=1#view=rollback-outcomes" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/deployment-release.lifecycle.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/deployment-release.lifecycle.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=lifecycle&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
<article class="showcase-card" id="proof-web-app" data-proof-id="web-app" data-type="architecture" style="--accent:#0891b2">
<header class="card-header">
<div class="card-index">11</div>
<div class="card-title-wrap">
<div class="card-kicker">Architecture / 10 nodes / 3 views · play</div>
<h3 class="card-title" data-en="Three-tier Web App" data-zh="三层 Web 应用">Three-tier Web App</h3>
</div>
<div class="card-mode">classic</div>
</header>
<div class="preview-shell">
<div class="live-flag">Live artifact</div>
<iframe src="gallery/artifacts/web-app.architecture.html?embed=1&amp;theme=dark" data-src-base="gallery/artifacts/web-app.architecture.html" title="Three-tier Web App live Archify preview" loading="lazy"></iframe>
</div>
<div class="card-body">
<p class="card-description" data-en="A classic AWS web stack with edge delivery, authentication, API services, cache, persistence, and background work." data-zh="经典 AWS Web 栈:边缘分发、鉴权、API 服务、缓存、持久化与后台任务。">A classic AWS web stack with edge delivery, authentication, API services, cache, persistence, and background work.</p>
<div class="receipt" aria-label="Validation receipt">
<div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
<div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
<div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 9E</span></div>
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="acfb4794ff836ca93ed4139345cce763cdf62514a10133e4a8a32ef1a69066d1">acfb4794ff83</span></div>
</div>
<div class="card-actions">
<a class="card-link primary" href="gallery/artifacts/web-app.architecture.html?present=1&amp;play=1#view=request-path" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
<a class="card-link" href="gallery/artifacts/web-app.architecture.html" target="_blank" rel="noopener" data-en="Full artifact" data-zh="完整成品">Full artifact</a>
<a class="card-link" href="gallery/sources/web-app.architecture.json" target="_blank" rel="noopener">JSON IR</a>
<a class="card-link create-link" href="start.html?type=architecture&amp;source=gallery" data-en="Create this type" data-zh="按此类型开始">Create this type</a>
</div>
</div>
</article>
</div>
<div class="empty-state" id="empty-state" data-en="No proof cards match this filter." data-zh="当前筛选条件下没有成品。">No proof cards match this filter.</div>
<div class="community-callout">
<div class="community-callout-copy">
<strong class="community-callout-title" data-en="Built something real?" data-zh="做出了真实成品?">Built something real?</strong>
<p data-en="Share the redacted source, verified artifact, validation receipt, and visual-review result. Approved work can join the community Proof Lab with attribution." data-zh="提交脱敏源数据、已验证成品、验证凭证和视觉审查结果。通过审核的作品可署名加入社区 Proof Lab。">Share the redacted source, verified artifact, validation receipt, and visual-review result. Approved work can join the community Proof Lab with attribution.</p>
</div>
<a class="card-link" href="https://github.com/tt-a1i/archify/issues/new?template=showcase.yml" target="_blank" rel="noopener noreferrer" data-en="Share a verified diagram ↗" data-zh="提交已验证成品 ↗">Share a verified diagram ↗</a>
</div>
</div>
</section>
<section class="method">
<div class="shell method-grid">
<div>
<div class="lead-label" data-en="Build receipt" data-zh="生成凭证">Build receipt</div>
<h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会和产品事实分叉。">The gallery cannot drift from the product.</h2>
<div class="pipeline" aria-label="Gallery generation pipeline">
<div class="pipeline-step"><span class="pipeline-num">01</span><span class="pipeline-label" data-en="Read versioned JSON IR" data-zh="读取版本化 JSON IR">Read versioned JSON IR</span><span class="pipeline-state">PASS</span></div>
<div class="pipeline-step"><span class="pipeline-num">02</span><span class="pipeline-label" data-en="Run the typed renderer" data-zh="执行类型化 renderer">Run the typed renderer</span><span class="pipeline-state">PASS</span></div>
<div class="pipeline-step"><span class="pipeline-num">03</span><span class="pipeline-label" data-en="Check HTML and SVG structure" data-zh="检查 HTML 与 SVG 结构">Check HTML and SVG structure</span><span class="pipeline-state">PASS</span></div>
<div class="pipeline-step"><span class="pipeline-num">04</span><span class="pipeline-label" data-en="Publish artifact, source, and digest" data-zh="发布成品、源数据与摘要">Publish artifact, source, and digest</span><span class="pipeline-state">PASS</span></div>
</div>
</div>
<div class="method-code">
<div class="method-code-bar"><span>reproduce locally</span><span>zero runtime deps</span></div>
<pre><span class="accent">$ node scripts/build-gallery.mjs</span>
render workflow ✓
render sequence ✓
render dataflow ✓
render lifecycle ✓
render architecture ✓
receipt 99 checks / 11 artifacts / deterministic hashes</pre>
</div>
</div>
</section>
</main>
<footer>
<div class="shell footer-inner">
<span data-en="Generated from Archify's checked-in examples. No hand-authored capability claims." data-zh="由 Archify 仓库内示例自动生成,不手写可能过期的能力声明。">Generated from Archify's checked-in examples. No hand-authored capability claims.</span>
<span data-en="Archify v2.17.0-dev.1 · development · MIT" data-zh="Archify v2.17.0-dev.1 · 开发版 · MIT">Archify v2.17.0-dev.1 · development · MIT</span>
</div>
</footer>
<script id="gallery-manifest" type="application/json">{
"schemaVersion": 1,
"generator": "scripts/build-gallery.mjs",
"archifyVersion": "2.17.0-dev.1",
"entryCount": 11,
"checkCount": 99,
"entries": [
{
"id": "agent-tool-call",
"type": "workflow",
"title": "Agent Tool Call Workflow",
"subtitle": "",
"input": "gallery/sources/agent-tool-call.workflow.json",
"artifact": "gallery/artifacts/agent-tool-call.workflow.html",
"focus": "planner",
"view": "happy-path",
"viewCount": 3,
"viewIds": [
"happy-path",
"safety-gate",
"evidence-loop"
],
"guidedPlayback": true,
"schemaVersion": 2,
"visualPreset": "signal-flow",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 12,
"edgeCount": 11,
"artifactBytes": 817897,
"artifactSha256": "fc7643fa7f3b0c85250f781f9927a905f518a5b4a8c28ec08afd6f3889f435e4",
"sourceBytes": 5687,
"sourceSha256": "4d3f6c23de2ca7d306e05d0041a9506833bb5a164a2bddc2d1984cf4da3ee90c",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 29,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 3,
"routesOverSuggestedBends": 1,
"maxStretch": 1.225,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 16,
"minInteriorSegmentPx": 82,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "deployment-ownership",
"type": "architecture",
"title": "Production Deployment Ownership",
"subtitle": "",
"input": "gallery/sources/production-deployment.architecture.json",
"artifact": "gallery/artifacts/production-deployment.architecture.html",
"focus": "gateway",
"view": "request-boundary",
"viewCount": 3,
"viewIds": [
"request-boundary",
"state-ownership",
"async-operations"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "blueprint",
"animation": "trace",
"engineeringProfile": "deployment-ownership",
"nodeCount": 12,
"edgeCount": 12,
"artifactBytes": 819731,
"artifactSha256": "dccd530553b06c10397cf00a23c8f2a04e2bb25548c6d0c29ae912ed0d5a05fe",
"sourceBytes": 5476,
"sourceSha256": "ec484aa8576664fdb207b543fa49486b23273faccb7a5071e1a0becfb48c22eb",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 36,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 2,
"routesOverSuggestedBends": 0,
"maxStretch": 1.098,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 20,
"minInteriorSegmentPx": 74,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "cache-miss",
"type": "sequence",
"title": "Cache Miss Request Sequence",
"subtitle": "",
"input": "gallery/sources/cache-miss-request.sequence.json",
"artifact": "gallery/artifacts/cache-miss.sequence.html",
"focus": "redis",
"view": "cache-fallback",
"viewCount": 3,
"viewIds": [
"request-and-auth",
"cache-fallback",
"return-and-trace"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "classic",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 7,
"edgeCount": 12,
"artifactBytes": 813020,
"artifactSha256": "7c5c8f5c39c10dc8148591f654cd79a05ff49bb70166a4c45607414ca02cbe3a",
"sourceBytes": 4374,
"sourceSha256": "9a799a3661c16cd6ab4f6373ff6a04da95a9ab70d93b0a349b668466f4912fd7",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 8,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 0,
"routesOverSuggestedBends": 0,
"maxStretch": 1,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 130.2,
"minInteriorSegmentPx": null,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "delivery-workflow",
"type": "workflow",
"title": "Release Delivery Workflow",
"subtitle": "",
"input": "gallery/sources/release-delivery.workflow.json",
"artifact": "gallery/artifacts/release-delivery.workflow.html",
"focus": "approval",
"view": "approval-to-production",
"viewCount": 3,
"viewIds": [
"commit-to-checks",
"approval-to-production",
"rollback-path"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "classic",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 10,
"edgeCount": 10,
"artifactBytes": 814097,
"artifactSha256": "ebe7c1363e5e7943f885e71029e135b4271b87eeb82255708727692969ec99b7",
"sourceBytes": 5164,
"sourceSha256": "e5c880417eac1623923c3dd5461e0c78acd762e1621a28bd53fc14a84cad6a91",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 36.3,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 2,
"routesOverSuggestedBends": 0,
"maxStretch": 1.214,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 13,
"minInteriorSegmentPx": 70,
"shortSegmentCount": 1,
"shortEndpointSegmentCount": 1,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "incident-runbook",
"type": "workflow",
"title": "Incident Response Runbook",
"subtitle": "",
"input": "gallery/sources/incident-response.workflow.json",
"artifact": "gallery/artifacts/incident-response.workflow.html",
"focus": "triage",
"view": "mitigate-and-verify",
"viewCount": 3,
"viewIds": [
"detect-and-triage",
"mitigate-and-verify",
"escalate-and-communicate"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "signal-flow",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 11,
"edgeCount": 10,
"artifactBytes": 811426,
"artifactSha256": "8a56193e079b25feed917ba33f29dd01e49615c99d5030f582d6ea34bc3d1f27",
"sourceBytes": 5375,
"sourceSha256": "5c760c82eee545dfb7da38a4e628059d7891af4cfbfc13c8a7009ea64f69aa1b",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 119,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 3,
"routesOverSuggestedBends": 1,
"maxStretch": 3.465,
"routesOverSuggestedStretch": 3,
"minSegmentPx": 21,
"minInteriorSegmentPx": 70,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "product-analytics",
"type": "dataflow",
"title": "Product Analytics Data Flow",
"subtitle": "",
"input": "gallery/sources/product-analytics.dataflow.json",
"artifact": "gallery/artifacts/product-analytics.dataflow.html",
"focus": "consent",
"view": "consent-boundary",
"viewCount": 3,
"viewIds": [
"collection-path",
"consent-boundary",
"analytics-consumers"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "classic",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 10,
"edgeCount": 10,
"artifactBytes": 815337,
"artifactSha256": "c75c04344269b16e25c72551101e706d05004ee93d298e8d0c4c5bd93d4050e9",
"sourceBytes": 5618,
"sourceSha256": "91411404fb4828a3b7ea358f3a7b9877781c9e9dc9c04b42b6eb4a757281b59f",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 44.3,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 3,
"routesOverSuggestedBends": 1,
"maxStretch": 1.369,
"routesOverSuggestedStretch": 1,
"minSegmentPx": 24,
"minInteriorSegmentPx": 45,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "async-roundtrip",
"type": "sequence",
"title": "Async Job Roundtrip",
"subtitle": "",
"input": "gallery/sources/async-job-roundtrip.sequence.json",
"artifact": "gallery/artifacts/async-job-roundtrip.sequence.html",
"focus": "queue",
"view": "work-and-retry",
"viewCount": 3,
"viewIds": [
"accept-and-enqueue",
"work-and-retry",
"observe-final-state"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "signal-flow",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 7,
"edgeCount": 14,
"artifactBytes": 812111,
"artifactSha256": "8fb45b739efdc45b56f7f9a0cf2f7bf95573d382897198731f4b4b2f33567930",
"sourceBytes": 4370,
"sourceSha256": "545f20920c89b69c2bb1f15508d5543fddbeb15cffba61e102206e04bd5a5cd9",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 22,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 0,
"routesOverSuggestedBends": 0,
"maxStretch": 1,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 94,
"minInteriorSegmentPx": null,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "event-stream",
"type": "dataflow",
"title": "Order Event-stream Topology",
"subtitle": "",
"input": "gallery/sources/event-stream.dataflow.json",
"artifact": "gallery/artifacts/event-stream.dataflow.html",
"focus": "orders",
"view": "order-transit",
"viewCount": 3,
"viewIds": [
"order-transit",
"payment-transit",
"failure-and-replay"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "signal-flow",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 12,
"edgeCount": 12,
"artifactBytes": 819318,
"artifactSha256": "7cc04cbd1d9a6c9999fb69a8ef226c682be0f32b5c5dbbdfef06a28670f68df5",
"sourceBytes": 5433,
"sourceSha256": "a92d6597ddbe164f395da32a7d4b33cfae08edd7d9600a6fb45a2058e5bbb43e",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 9,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 4,
"routesOverSuggestedBends": 1,
"maxStretch": 2.663,
"routesOverSuggestedStretch": 1,
"minSegmentPx": 34,
"minInteriorSegmentPx": 103,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "agent-run",
"type": "lifecycle",
"title": "Agent Run Lifecycle",
"subtitle": "",
"input": "gallery/sources/agent-run.lifecycle.json",
"artifact": "gallery/artifacts/agent-run.lifecycle.html",
"focus": "approval",
"view": "main-lifecycle",
"viewCount": 3,
"viewIds": [
"main-lifecycle",
"human-waits",
"recovery-and-exits"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "classic",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 10,
"edgeCount": 6,
"artifactBytes": 808440,
"artifactSha256": "87b43a172dd3c9292fbc12fb37bcdadc9580171473cec33cffcd5d81b2deea25",
"sourceBytes": 4044,
"sourceSha256": "7c0ad72ee7affbd6c6e4758b7520d61ddd4508c917acf36beabcad3ee7ca3ba7",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": null,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 3,
"routesOverSuggestedBends": 2,
"maxStretch": 3.267,
"routesOverSuggestedStretch": 2,
"minSegmentPx": 18,
"minInteriorSegmentPx": 78,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "deployment-lifecycle",
"type": "lifecycle",
"title": "Deployment Release Lifecycle",
"subtitle": "",
"input": "gallery/sources/deployment-release.lifecycle.json",
"artifact": "gallery/artifacts/deployment-release.lifecycle.html",
"focus": "live",
"view": "rollback-outcomes",
"viewCount": 3,
"viewIds": [
"promotion-rail",
"approval-gate",
"rollback-outcomes"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "signal-flow",
"animation": "trace",
"engineeringProfile": null,
"nodeCount": 11,
"edgeCount": 6,
"artifactBytes": 809982,
"artifactSha256": "cb7939eb251a51138fd748de573402d8272d6cfc3cf31a375850dec39bccb323",
"sourceBytes": 4274,
"sourceSha256": "735c2c5819266e6ea2a71775b6eefce98b53030ce90cb721dc8e1d022ce5be71",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": null,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 0,
"routesOverSuggestedBends": 0,
"maxStretch": 1,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 90,
"minInteriorSegmentPx": null,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
},
{
"id": "web-app",
"type": "architecture",
"title": "Sample Web App",
"subtitle": "",
"input": "gallery/sources/web-app.architecture.json",
"artifact": "gallery/artifacts/web-app.architecture.html",
"focus": "api",
"view": "request-path",
"viewCount": 3,
"viewIds": [
"request-path",
"identity-and-cache",
"async-work"
],
"guidedPlayback": true,
"schemaVersion": 1,
"visualPreset": "classic",
"animation": "static",
"engineeringProfile": null,
"nodeCount": 10,
"edgeCount": 9,
"artifactBytes": 810075,
"artifactSha256": "acfb4794ff836ca93ed4139345cce763cdf62514a10133e4a8a32ef1a69066d1",
"sourceBytes": 3793,
"sourceSha256": "483350f5297df682aba4e4a0fa491307ce3d3abd725ae4df07fab177490752cf",
"checks": [
{
"name": "single_svg",
"ok": true
},
{
"name": "finite_svg",
"ok": true
},
{
"name": "orthogonal_arrows",
"ok": true
},
{
"name": "label_route_clearance",
"ok": true
},
{
"name": "relationship_crossings",
"ok": true
},
{
"name": "relationship_corridors",
"ok": true
},
{
"name": "container_border_runs",
"ok": true
},
{
"name": "route_rhythm",
"ok": true
},
{
"name": "legend_clearance",
"ok": true
}
],
"composition": {
"schemaVersion": 1,
"profile": "showcase",
"status": "pass",
"summary": {
"errors": 0,
"warnings": 0
},
"metrics": {
"properCrossings": 0,
"ambiguousCorridors": 0,
"containerBorderRuns": 0,
"labelRouteClearanceIssues": 0,
"minLabelRouteClearance": 20,
"desktopReadabilityIssues": 0,
"minProjectedNodeTextPx": null,
"maxBends": 3,
"routesOverSuggestedBends": 1,
"maxStretch": 1,
"routesOverSuggestedStretch": 0,
"minSegmentPx": 54,
"minInteriorSegmentPx": 104,
"shortSegmentCount": 0,
"shortEndpointSegmentCount": 0,
"shortInteriorSegmentCount": 0,
"microSegmentCount": 0
},
"suggestedLimits": {
"bendsPerRelationship": 2,
"stretch": 1.35,
"segmentPx": 16,
"microSegmentPx": 8
},
"issues": []
}
}
]
}</script>
<script src="assets/site-language.js"></script>
<script>
(function () {
var cards = Array.prototype.slice.call(document.querySelectorAll('.showcase-card'));
var filterButtons = Array.prototype.slice.call(document.querySelectorAll('[data-filter]'));
var empty = document.getElementById('empty-state');
var previewTheme = 'dark';
var language = ArchifySiteLanguage.read();
function applyLanguage(next) {
language = ArchifySiteLanguage.write(next);
document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
document.querySelectorAll('[data-en][data-zh]').forEach(function (node) {
node.innerHTML = node.getAttribute(language === 'zh' ? 'data-zh' : 'data-en');
});
var languageButton = document.getElementById('language');
languageButton.textContent = language === 'zh' ? 'EN' : '中文';
languageButton.setAttribute('aria-label', language === 'zh' ? 'Switch to English' : '切换到中文');
}
function applyFilter(type, updateUrl) {
var visible = 0;
cards.forEach(function (card) {
var match = type === 'all' || card.getAttribute('data-type') === type;
card.hidden = !match;
if (match) visible += 1;
});
filterButtons.forEach(function (button) {
button.setAttribute('aria-pressed', button.getAttribute('data-filter') === type ? 'true' : 'false');
});
empty.classList.toggle('visible', visible === 0);
if (updateUrl) {
var url = new URL(location.href);
if (type === 'all') url.searchParams.delete('type');
else url.searchParams.set('type', type);
history.replaceState(null, '', url.pathname + url.search + url.hash);
}
}
function applyPreviewTheme(next) {
previewTheme = next === 'light' ? 'light' : 'dark';
document.documentElement.setAttribute('data-preview-theme', previewTheme);
document.getElementById('preview-theme').textContent = 'Preview: ' + previewTheme;
document.querySelectorAll('iframe[data-src-base]').forEach(function (frame) {
frame.src = frame.getAttribute('data-src-base') + '?embed=1&theme=' + previewTheme;
});
}
filterButtons.forEach(function (button) {
button.addEventListener('click', function () { applyFilter(button.getAttribute('data-filter'), true); });
});
document.getElementById('language').addEventListener('click', function () { applyLanguage(language === 'en' ? 'zh' : 'en'); });
document.getElementById('preview-theme').addEventListener('click', function () { applyPreviewTheme(previewTheme === 'dark' ? 'light' : 'dark'); });
var allowed = ['architecture', 'workflow', 'sequence', 'dataflow', 'lifecycle'];
var requested = new URLSearchParams(location.search).get('type') || 'all';
applyFilter(allowed.indexOf(requested) >= 0 ? requested : 'all', false);
applyLanguage(language);
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.08 });
cards.forEach(function (card) { observer.observe(card); });
} else {
cards.forEach(function (card) { card.classList.add('visible'); });
}
})();
</script>
</body>
</html>