mirror of
https://github.com/tt-a1i/archify.git
synced 2026-09-28 15:04:37 +08:00
2316 lines
109 KiB
HTML
Generated
2316 lines
109 KiB
HTML
Generated
<!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="assets/archify-mark.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">
|
|
<img class="nav-logo-text brand-lockup" src="assets/archify-lockup-light.svg" alt="Archify" width="117" height="32">
|
|
<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 focus, reach, and path exploration, shareable links, dark/light rendering, self-contained export, and a machine-readable quality receipt." data-zh="每个场景都支持聚焦、上下游与路径探索、可分享链接、深浅主题、自包含导出和机器可读质量凭证。">Every scenario has focus, reach, and path exploration, shareable links, 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</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&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="547616757791698b1f52ea3f9addf3fc86004bc56494226a8832722dee1655bb">547616757791</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/agent-tool-call.workflow.html#focus=planner" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="718299eae00d36d9e5dd2c6ba49b1908ddcb60104c6833551e4faf2506bfd316">718299eae00d</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/production-deployment.architecture.html#focus=gateway" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="94959bf649035115ba07be3970d0fb788c51b5d791cc6afe5ceb28fa27774cef">94959bf64903</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/cache-miss.sequence.html#focus=redis" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="be2d94d95e2880fc420a0c4f1f1e587a9b56bea061174db0a04c421f9c20a4db">be2d94d95e28</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/release-delivery.workflow.html#focus=approval" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="5828bebe770e893a1ef1552568da2370d713e8b66f8869ab9578e91f3e22c7d0">5828bebe770e</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/incident-response.workflow.html#focus=triage" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="b2d4cff4a3f2815dd31faf0f840acd32636929d9d59bd8327a10af78f29e25e2">b2d4cff4a3f2</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/product-analytics.dataflow.html#focus=consent" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="03be1cf3cfc3a1ac5d7ee0855b93ddc186133cf8d7c5feb17b4c5289555a52d6">03be1cf3cfc3</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/async-job-roundtrip.sequence.html#focus=queue" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="66ccf103dc7cb7516a8719acc693d86b5c3334d4d90a327cecb7efc0836569d9">66ccf103dc7c</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/event-stream.dataflow.html#focus=orders" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="ccdf424337985d2b33920e877a05c9e60d5095d2559db4c22f9625f8f0a90c58">ccdf42433798</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/agent-run.lifecycle.html#focus=approval" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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 · 11E</span></div>
|
|
<div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="2b0075864aa796392c9dd507569e0f1e3a05d16d921cb5c15153ae83bb2e450f">2b0075864aa7</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/deployment-release.lifecycle.html#focus=live" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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</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&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="4ffd3028ca685ea49b1abaf6794edb1b5f344c3e691aa2c65effd9c65f0fc9ba">4ffd3028ca68</span></div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="card-link primary" href="gallery/artifacts/web-app.architecture.html#focus=api" target="_blank" rel="noopener" data-en="Explore focus ↗" data-zh="探索聚焦路径 ↗">Explore focus ↗</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&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",
|
|
"schemaVersion": 2,
|
|
"visualPreset": "signal-flow",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 12,
|
|
"edgeCount": 11,
|
|
"artifactBytes": 767777,
|
|
"artifactSha256": "547616757791698b1f52ea3f9addf3fc86004bc56494226a8832722dee1655bb",
|
|
"sourceBytes": 4939,
|
|
"sourceSha256": "d67965d50872c97e4ff3476271e645bf19fab6b3ab44e111bdb44b063e3aa36f",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 29,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 6.788321167883212,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"id": "approval-check",
|
|
"from": "router",
|
|
"to": "approval",
|
|
"label": "needs approval?",
|
|
"collectionIndex": 0,
|
|
"artifactIndex": 1
|
|
},
|
|
"bends": 3,
|
|
"stretch": 1.184
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "user"
|
|
},
|
|
"minimumSourceTextPx": 8,
|
|
"minimumProjectedTextPx": 6.788321167883212,
|
|
"semanticTextCount": 29
|
|
},
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "blueprint",
|
|
"animation": "trace",
|
|
"engineeringProfile": "deployment-ownership",
|
|
"nodeCount": 12,
|
|
"edgeCount": 12,
|
|
"artifactBytes": 770504,
|
|
"artifactSha256": "718299eae00d36d9e5dd2c6ba49b1908ddcb60104c6833551e4faf2506bfd316",
|
|
"sourceBytes": 4734,
|
|
"sourceSha256": "cb54bad2dfd0c2d02aa5b496bde6839789a0f07f23062343c4458b8d38806c13",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 36,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 7.5,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": []
|
|
},
|
|
"leadingSpace": {
|
|
"measured": true,
|
|
"emptyTopPx": 85,
|
|
"emptyTopRatio": 0.117,
|
|
"occupiedTop": 85,
|
|
"viewBoxTop": 0,
|
|
"canvasHeight": 728,
|
|
"typicalNodeHeight": 62,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "recognized-declared-wide",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 1290,
|
|
"actualBudgetPx": 1290,
|
|
"actualReaderWidth": 1320,
|
|
"desiredReaderWidth": 1320,
|
|
"viewportCap": 1376,
|
|
"limit": "source-size",
|
|
"requestedTargetPx": 7.5,
|
|
"requestedTargetMet": true,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "edge",
|
|
"id": null,
|
|
"from": "clients",
|
|
"to": "edge"
|
|
},
|
|
"minimumSourceTextPx": 8,
|
|
"minimumProjectedTextPx": 7.5,
|
|
"semanticTextCount": 38
|
|
},
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "classic",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 7,
|
|
"edgeCount": 12,
|
|
"artifactBytes": 762283,
|
|
"artifactSha256": "94959bf649035115ba07be3970d0fb788c51b5d791cc6afe5ceb28fa27774cef",
|
|
"sourceBytes": 3805,
|
|
"sourceSha256": "f8486daa803fff6c295cecca4604c561fbbf9acb2e83326022b5a87639e8afe6",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 8,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 6.027777777777779,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": []
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "user"
|
|
},
|
|
"minimumSourceTextPx": 7,
|
|
"minimumProjectedTextPx": 6.027777777777779,
|
|
"semanticTextCount": 26
|
|
},
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "classic",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 10,
|
|
"edgeCount": 10,
|
|
"artifactBytes": 763291,
|
|
"artifactSha256": "be2d94d95e2880fc420a0c4f1f1e587a9b56bea061174db0a04c421f9c20a4db",
|
|
"sourceBytes": 4510,
|
|
"sourceSha256": "dbd5c174af66296caec372e7214cf4df7158b50a563508e16826b95ab8d1cd6c",
|
|
"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": 1
|
|
},
|
|
"metrics": {
|
|
"properCrossings": 0,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 36.3,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 1,
|
|
"minProjectedNodeTextPx": 6.2,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": []
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "rollback"
|
|
},
|
|
"minimumSourceTextPx": 6.2,
|
|
"minimumProjectedTextPx": 6.2,
|
|
"semanticTextCount": 24
|
|
},
|
|
"issues": [
|
|
{
|
|
"severity": "warning",
|
|
"code": "composition/viewport-height",
|
|
"readerFit": null,
|
|
"viewBoxWidth": 720,
|
|
"viewBoxHeight": 900,
|
|
"viewportWidth": 1440,
|
|
"viewportHeight": 900,
|
|
"ratio": 0.8,
|
|
"wideRatio": 1.55,
|
|
"svgWidthPx": 1346,
|
|
"svgHeightPx": 1683,
|
|
"fixedChromePx": 126,
|
|
"pageHeightPx": 1809,
|
|
"overflowPx": 909,
|
|
"detail": "[composition/viewport-height] Preserve every node, relationship, and label. This 720x900 canvas (ratio 0.8) declares no intrinsic-height fit and is below the 1.55 wide ratio, so the desktop Reader can neither narrow it nor accept vertical scroll: it renders 1683px tall at the full 1346px width and the page reaches 1809px before cards against 900px, a certain visual-check failure. Either compact vertical spacing so meta.viewBox height is at most 464 at this width, or spread content sideways so the width is at least 1395 at this height; for architecture, omitting meta.viewBox lets the renderer size the canvas and declare the fit."
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "signal-flow",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 11,
|
|
"edgeCount": 10,
|
|
"artifactBytes": 760611,
|
|
"artifactSha256": "5828bebe770e893a1ef1552568da2370d713e8b66f8869ab9578e91f3e22c7d0",
|
|
"sourceBytes": 4723,
|
|
"sourceSha256": "630be98449925d2716ecb8439f404b2bff5fe65ba905b0ad0baea6d96890c526",
|
|
"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": 1
|
|
},
|
|
"metrics": {
|
|
"properCrossings": 0,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 119,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 1,
|
|
"minProjectedNodeTextPx": 7.7,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"from": "page",
|
|
"to": "triage",
|
|
"label": "",
|
|
"collectionIndex": 1,
|
|
"artifactIndex": 2
|
|
},
|
|
"bends": 2,
|
|
"stretch": 1.8
|
|
},
|
|
{
|
|
"relationship": {
|
|
"from": "contain",
|
|
"to": "recover",
|
|
"label": "",
|
|
"collectionIndex": 3,
|
|
"artifactIndex": 4
|
|
},
|
|
"bends": 2,
|
|
"stretch": 1.914
|
|
},
|
|
{
|
|
"relationship": {
|
|
"from": "declare",
|
|
"to": "update",
|
|
"label": "",
|
|
"collectionIndex": 7,
|
|
"artifactIndex": 8
|
|
},
|
|
"bends": 3,
|
|
"stretch": 3.465,
|
|
"directCorridorBlockers": [
|
|
{
|
|
"id": "contain",
|
|
"label": "Contain",
|
|
"box": [
|
|
394,
|
|
341,
|
|
72,
|
|
52
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "triage"
|
|
},
|
|
"minimumSourceTextPx": 7.7,
|
|
"minimumProjectedTextPx": 7.7,
|
|
"semanticTextCount": 23
|
|
},
|
|
"issues": [
|
|
{
|
|
"severity": "warning",
|
|
"code": "composition/viewport-height",
|
|
"readerFit": null,
|
|
"viewBoxWidth": 720,
|
|
"viewBoxHeight": 900,
|
|
"viewportWidth": 1440,
|
|
"viewportHeight": 900,
|
|
"ratio": 0.8,
|
|
"wideRatio": 1.55,
|
|
"svgWidthPx": 1346,
|
|
"svgHeightPx": 1683,
|
|
"fixedChromePx": 126,
|
|
"pageHeightPx": 1809,
|
|
"overflowPx": 909,
|
|
"detail": "[composition/viewport-height] Preserve every node, relationship, and label. This 720x900 canvas (ratio 0.8) declares no intrinsic-height fit and is below the 1.55 wide ratio, so the desktop Reader can neither narrow it nor accept vertical scroll: it renders 1683px tall at the full 1346px width and the page reaches 1809px before cards against 900px, a certain visual-check failure. Either compact vertical spacing so meta.viewBox height is at most 464 at this width, or spread content sideways so the width is at least 1395 at this height; for architecture, omitting meta.viewBox lets the renderer size the canvas and declare the fit."
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "classic",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 10,
|
|
"edgeCount": 10,
|
|
"artifactBytes": 764611,
|
|
"artifactSha256": "b2d4cff4a3f2815dd31faf0f840acd32636929d9d59bd8327a10af78f29e25e2",
|
|
"sourceBytes": 5035,
|
|
"sourceSha256": "8a635db9e51a5b1a8d2955b9d66f5b9a450e0a298432ce8f2e2f0be11f372e05",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 44.3,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 6.027777777777779,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"id": "consent-enrichment",
|
|
"from": "edge",
|
|
"to": "consent",
|
|
"label": "identity + consent",
|
|
"collectionIndex": 2,
|
|
"artifactIndex": 3
|
|
},
|
|
"bends": 3,
|
|
"stretch": 1.369
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "web"
|
|
},
|
|
"minimumSourceTextPx": 7,
|
|
"minimumProjectedTextPx": 6.027777777777779,
|
|
"semanticTextCount": 30
|
|
},
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "signal-flow",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 7,
|
|
"edgeCount": 14,
|
|
"artifactBytes": 761370,
|
|
"artifactSha256": "03be1cf3cfc3a1ac5d7ee0855b93ddc186133cf8d7c5feb17b4c5289555a52d6",
|
|
"sourceBytes": 3766,
|
|
"sourceSha256": "b8c6c52f1763ede2933c77deb8da59b3e06917bc41d27e66df896136456b859a",
|
|
"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": 1
|
|
},
|
|
"metrics": {
|
|
"properCrossings": 0,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 22,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 1,
|
|
"minProjectedNodeTextPx": 7,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": []
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "client"
|
|
},
|
|
"minimumSourceTextPx": 7,
|
|
"minimumProjectedTextPx": 7,
|
|
"semanticTextCount": 28
|
|
},
|
|
"issues": [
|
|
{
|
|
"severity": "warning",
|
|
"code": "composition/viewport-height",
|
|
"readerFit": null,
|
|
"viewBoxWidth": 820,
|
|
"viewBoxHeight": 920,
|
|
"viewportWidth": 1440,
|
|
"viewportHeight": 900,
|
|
"ratio": 0.89,
|
|
"wideRatio": 1.55,
|
|
"svgWidthPx": 1346,
|
|
"svgHeightPx": 1510,
|
|
"fixedChromePx": 126,
|
|
"pageHeightPx": 1636,
|
|
"overflowPx": 736,
|
|
"detail": "[composition/viewport-height] Preserve every node, relationship, and label. This 820x920 canvas (ratio 0.89) declares no intrinsic-height fit and is below the 1.55 wide ratio, so the desktop Reader can neither narrow it nor accept vertical scroll: it renders 1510px tall at the full 1346px width and the page reaches 1636px before cards against 900px, a certain visual-check failure. Either compact vertical spacing so meta.viewBox height is at most 529 at this width, or spread content sideways so the width is at least 1426 at this height; for architecture, omitting meta.viewBox lets the renderer size the canvas and declare the fit."
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "signal-flow",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 12,
|
|
"edgeCount": 12,
|
|
"artifactBytes": 768531,
|
|
"artifactSha256": "66ccf103dc7cb7516a8719acc693d86b5c3334d4d90a327cecb7efc0836569d9",
|
|
"sourceBytes": 4769,
|
|
"sourceSha256": "3bdd77674282009c7c68d588cf8a3c495bc98a3be1b9c45327fd1801a6f83a23",
|
|
"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": 1
|
|
},
|
|
"metrics": {
|
|
"properCrossings": 0,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 9,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 1,
|
|
"minProjectedNodeTextPx": 6.027777777777779,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"from": "validate",
|
|
"to": "dlq",
|
|
"label": "invalid event",
|
|
"collectionIndex": 8,
|
|
"artifactIndex": 9
|
|
},
|
|
"bends": 4,
|
|
"stretch": 2.663
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "checkout"
|
|
},
|
|
"minimumSourceTextPx": 7,
|
|
"minimumProjectedTextPx": 6.027777777777779,
|
|
"semanticTextCount": 36
|
|
},
|
|
"issues": [
|
|
{
|
|
"severity": "warning",
|
|
"code": "composition/viewport-height",
|
|
"readerFit": null,
|
|
"viewBoxWidth": 1080,
|
|
"viewBoxHeight": 780,
|
|
"viewportWidth": 1440,
|
|
"viewportHeight": 900,
|
|
"ratio": 1.38,
|
|
"wideRatio": 1.55,
|
|
"svgWidthPx": 1346,
|
|
"svgHeightPx": 972,
|
|
"fixedChromePx": 126,
|
|
"pageHeightPx": 1098,
|
|
"overflowPx": 198,
|
|
"detail": "[composition/viewport-height] Preserve every node, relationship, and label. This 1080x780 canvas (ratio 1.38) declares no intrinsic-height fit and is below the 1.55 wide ratio, so the desktop Reader can neither narrow it nor accept vertical scroll: it renders 972px tall at the full 1346px width and the page reaches 1098px before cards against 900px, a certain visual-check failure. Either compact vertical spacing so meta.viewBox height is at most 696 at this width, or spread content sideways so the width is at least 1209 at this height; for architecture, omitting meta.viewBox lets the renderer size the canvas and declare the fit."
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "classic",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 10,
|
|
"edgeCount": 6,
|
|
"artifactBytes": 758921,
|
|
"artifactSha256": "ccdf424337985d2b33920e877a05c9e60d5095d2559db4c22f9625f8f0a90c58",
|
|
"sourceBytes": 3405,
|
|
"sourceSha256": "230242a7557663877766c43a9fe7cffe8b4fb66e4866457dccd24c63175b4917",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": null,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 6.320388349514563,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"id": "failed-retry",
|
|
"from": "failed",
|
|
"to": "executing",
|
|
"label": "",
|
|
"collectionIndex": 3,
|
|
"artifactIndex": 5
|
|
},
|
|
"bends": 3,
|
|
"stretch": 3.267,
|
|
"directCorridorBlockers": [
|
|
{
|
|
"id": "approval",
|
|
"label": "Needs Approval",
|
|
"box": [
|
|
339,
|
|
278,
|
|
126,
|
|
58
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"relationship": {
|
|
"id": "approval-cancelled",
|
|
"from": "approval",
|
|
"to": "cancelled",
|
|
"label": "",
|
|
"collectionIndex": 5,
|
|
"artifactIndex": 7
|
|
},
|
|
"bends": 3,
|
|
"stretch": 2.368,
|
|
"directCorridorBlockers": [
|
|
{
|
|
"id": "failed",
|
|
"label": "Failed",
|
|
"box": [
|
|
339,
|
|
356,
|
|
126,
|
|
58
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "queued"
|
|
},
|
|
"minimumSourceTextPx": 7,
|
|
"minimumProjectedTextPx": 6.320388349514563,
|
|
"semanticTextCount": 20
|
|
},
|
|
"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",
|
|
"schemaVersion": 2,
|
|
"visualPreset": "signal-flow",
|
|
"animation": "trace",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 11,
|
|
"edgeCount": 11,
|
|
"artifactBytes": 765976,
|
|
"artifactSha256": "2b0075864aa796392c9dd507569e0f1e3a05d16d921cb5c15153ae83bb2e450f",
|
|
"sourceBytes": 3507,
|
|
"sourceSha256": "f565a8acfebdb21453e2bccd82d3760b4736e38fe194fb2f0804b57817eba813",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 21,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 6.91449814126394,
|
|
"maxBends": 2,
|
|
"routesOverSuggestedBends": 0,
|
|
"maxStretch": 1,
|
|
"routesOverSuggestedStretch": 0,
|
|
"minSegmentPx": 60,
|
|
"minInteriorSegmentPx": 174,
|
|
"shortSegmentCount": 0,
|
|
"shortEndpointSegmentCount": 0,
|
|
"shortInteriorSegmentCount": 0,
|
|
"microSegmentCount": 0
|
|
},
|
|
"suggestedLimits": {
|
|
"bendsPerRelationship": 2,
|
|
"stretch": 1.35,
|
|
"segmentPx": 16,
|
|
"microSegmentPx": 8
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": []
|
|
},
|
|
"leadingSpace": {
|
|
"measured": false,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "legacy-930",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 930,
|
|
"actualBudgetPx": 930,
|
|
"limit": "legacy",
|
|
"requestedTargetPx": null,
|
|
"requestedTargetMet": null,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "node",
|
|
"id": "queued"
|
|
},
|
|
"minimumSourceTextPx": 8,
|
|
"minimumProjectedTextPx": 6.91449814126394,
|
|
"semanticTextCount": 24
|
|
},
|
|
"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",
|
|
"schemaVersion": 1,
|
|
"visualPreset": "classic",
|
|
"animation": "static",
|
|
"engineeringProfile": null,
|
|
"nodeCount": 10,
|
|
"edgeCount": 9,
|
|
"artifactBytes": 762317,
|
|
"artifactSha256": "4ffd3028ca685ea49b1abaf6794edb1b5f344c3e691aa2c65effd9c65f0fc9ba",
|
|
"sourceBytes": 3197,
|
|
"sourceSha256": "95e051b27a9e4a3307e194c0f666fca4af51470be7e2228d400ff48aea5b353b",
|
|
"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,
|
|
"resolvedCrossovers": 0,
|
|
"ambiguousCorridors": 0,
|
|
"arrowheadCollisions": 0,
|
|
"containerBorderRuns": 0,
|
|
"labelRouteClearanceIssues": 0,
|
|
"labelCanvasOverflowIssues": 0,
|
|
"minLabelRouteClearance": 20,
|
|
"desktopReadabilityIssues": 0,
|
|
"viewportHeightIssues": 0,
|
|
"minProjectedNodeTextPx": 7.5,
|
|
"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
|
|
},
|
|
"routeReview": {
|
|
"crossings": [],
|
|
"detours": [
|
|
{
|
|
"relationship": {
|
|
"id": "jwt-verification",
|
|
"from": "auth",
|
|
"to": "api",
|
|
"label": "verify JWT",
|
|
"collectionIndex": 1,
|
|
"artifactIndex": 2
|
|
},
|
|
"bends": 3,
|
|
"stretch": 1
|
|
}
|
|
]
|
|
},
|
|
"leadingSpace": {
|
|
"measured": true,
|
|
"emptyTopPx": 110,
|
|
"emptyTopRatio": 0.187,
|
|
"occupiedTop": 110,
|
|
"viewBoxTop": 0,
|
|
"canvasHeight": 588,
|
|
"typicalNodeHeight": 60,
|
|
"reviewSuggested": false
|
|
},
|
|
"desktopReadability": {
|
|
"budgetBasis": "recognized-declared-wide",
|
|
"readerContract": "declared-wide-v1",
|
|
"availableDiagramWidth": 1012.5,
|
|
"actualBudgetPx": 1012.5,
|
|
"actualReaderWidth": 1042.5,
|
|
"desiredReaderWidth": 1042.5,
|
|
"viewportCap": 1376,
|
|
"limit": "source-size",
|
|
"requestedTargetPx": 7.5,
|
|
"requestedTargetMet": true,
|
|
"hardFloorPx": 6,
|
|
"hardFloorMet": true,
|
|
"minimumOwner": {
|
|
"kind": "edge",
|
|
"id": "users-to-cdn",
|
|
"from": "users",
|
|
"to": "cdn"
|
|
},
|
|
"minimumSourceTextPx": 8,
|
|
"minimumProjectedTextPx": 7.5,
|
|
"semanticTextCount": 28
|
|
},
|
|
"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>
|