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