Spec Studio

A diagram is laid out from graph values into SVG with a text equivalent

spec:consumers.spec-studio.diagramsContract · storyready floor ready

Changed since the base graph base da4b141: design.boxTargets; design.cellWrap; design.density; design.diagramElement; design.edgeKinds; design.edgeRouting; design.elementIds; design.labelMetrics; design.omittedDrawing; design.shortId; design.svgMarkup; design.textEquivalent; design.widthBudget; narrative; rule.layoutInputs; rule.noFoldBelowComponent; rule.panZoomOnly; rule.realizationBands

Base input: schema 0.11.0, 405 Specs.

Packs: pack:self-hosting-v1, pack:spec-studio-v1

Design: 14 design entries · 4 pinned declarations · 1 decision

Findings: no errors, no warnings

specs/consumers/spec-studio.diagrams.sdp.md

No open questions and no blocking questions; implementation binding present, verifier binding present, and expected-outcome oracle present.

Every Studio diagram is laid out in the engine when the page set is built, so a page draws it with no script and the same inputs draw the same bytes. The architecture grid, component members and one-hop trace retain their readings; the Spec page's requirement drawing replaces realization, and other pages name their supplied drawing answers. Words carry every reading the picture shows, and its text equivalent states every box and edge.

Intent
outcome
Draw the Studio's diagrams as inline SVG that reads without script, prints, and stays the same bytes for the same graph, with every box and edge also stated in words.
Contract
rule.buildTime line 24 · specs/consumers/spec-studio.diagrams.sdp.md:24
The build lays out each diagram and writes it into its page as inline SVG; no diagram is laid out in the browser, and a page draws every diagram with no script.

spec:consumers.spec-studio.diagrams.within-bound · enabled

rule.layoutInputs line 25 · specs/consumers/spec-studio.diagrams.sdp.md:25
A layout reads only the boxes, each with its id, words and supplied grouping, and edges, each with its two ends, exact kind and claim, optional reason and aggregation count, taken from the reader values and recipe answers its page names; it reads no font, file, clock or random value, measures text by character count and writes whole-pixel coordinates. Depth, reach and component resolution belong to those answers, never layout.

spec:consumers.spec-studio.diagrams.within-bound · enabled

rule.sameBytes line 26 · specs/consumers/spec-studio.diagrams.sdp.md:26
One graph and the same inputs draw byte-identical SVG on every build and every machine.

spec:consumers.spec-studio.diagrams.folds-by-context · enabled, spec:consumers.spec-studio.diagrams.within-bound · enabled

rule.architectureGrid line 27 · specs/consumers/spec-studio.diagrams.sdp.md:27
The architecture diagram places each component in the column of its recorded context, contexts in code-unit order and then a column for components that state none, and in the band of its layer, in the order edge, application, domain, adapter, infrastructure, then a band for components that state none; a cell holds its components in id order.

spec:consumers.spec-studio.diagrams.within-bound · enabled

rule.aggregatedUses line 28 · specs/consumers/spec-studio.diagrams.sdp.md:28
An architecture edge joins two components and carries the count of unit uses edges between them, as the component rows of spec:consumers.spec-studio.lenses.architecture#design.componentRows count them: each end of a unit uses edge resolves to its component, directly or through memberOf, and a use within one component draws nothing.

no example exercises it

rule.relationBands line 29 · specs/consumers/spec-studio.diagrams.sdp.md:29
A trace graph draws the Spec in a band of its own, the Specs its declared relations name above it in one band per relation type, in the order refines, dependsOn, constrainedBy, decidedBy, verifies, supersedes, and the Specs whose declared relations name it below in bands of the same order; a Spec related more than one way sits in the band of its first relation, and each relation is its own edge.

no example exercises it

rule.memberBands line 30 · specs/consumers/spec-studio.diagrams.sdp.md:30
A member diagram draws a component's members in bands by how deep uses among members reaches, a member that uses another sitting above it, and the units and components outside the component that members use in a last band of their own.

no example exercises it

rule.bound line 31 · specs/consumers/spec-studio.diagrams.sdp.md:31
A diagram draws at most the boxes and edges the bound names.

spec:consumers.spec-studio.diagrams.folds-by-context · enabled, spec:consumers.spec-studio.diagrams.folds-by-layer · enabled

rule.foldByContext line 32 · specs/consumers/spec-studio.diagrams.sdp.md:32
An architecture diagram over the bound with more than one context draws one box per context, with the uses between contexts aggregated and counted, and then each context's own diagram in a section of its own, where every other context it uses or is used by is one folded box in a band of its own.

spec:consumers.spec-studio.diagrams.folds-by-context · enabled

rule.foldByLayer line 33 · specs/consumers/spec-studio.diagrams.sdp.md:33
A diagram of one context still over the bound draws one box per layer of that context, and then each layer's components in a section of their own.

spec:consumers.spec-studio.diagrams.folds-by-layer · enabled

rule.boundFallback line 34 · specs/consumers/spec-studio.diagrams.sdp.md:34
A drawing still over the bound after these folds, the context overview, one context's diagram or one layer's, writes no SVG; its text equivalent lists every box and edge the drawing would hold and then says the drawing was omitted because it exceeds the bound.

no example exercises it

rule.foldGroups line 35 · specs/consumers/spec-studio.diagrams.sdp.md:35
A trace graph over the bound folds its largest relation group first, ties broken by direction and then by relation type, into one box that names the count and the relation and links to the Spec page's relations, until the drawing fits.

no example exercises it

rule.noFoldBelowComponent line 36 · specs/consumers/spec-studio.diagrams.sdp.md:36
A member diagram over the bound writes no SVG; its text equivalent lists every member and every use edge, and then says the drawing was omitted because it exceeds the bound.

no example exercises it

rule.wordsBesideStyle line 37 · specs/consumers/spec-studio.diagrams.sdp.md:37
Every reading a fill, outline or line style marks is also in words: bands and columns carry labels, a planned component reads planned, a folded box reads folded, and an aggregated edge's count is in its text equivalent. A drawing whose edges all have one relation names it once in its legend and draws no edge label; solid uses and dashed plans to use share the use relation, with the planned wording also in the legend. A drawing with several relations keeps its labelled bands and edge labels.

no example exercises it

rule.textEquivalent line 38 · specs/consumers/spec-studio.diagrams.sdp.md:38
Each diagram is followed by its text equivalent, which states every box with its words and every edge as a sentence naming its two ends and its kind, and the SVG names it as its description.

spec:consumers.spec-studio.diagrams.within-bound · enabled

Cited at

  • test/skills.test.ts:1935
rule.panZoomOnly line 39 · specs/consumers/spec-studio.diagrams.sdp.md:39
The diagram element adds only pan, zoom and pinch by changing the SVG's view box; it never moves a box or edge. At viewport widths of at least 720 CSS pixels the SVG starts at natural size inside a keyboard-accessible scroll region, with overflow inside the figure. Below that width the responsive contract fits the same drawing to the screen. Reset restores the initial view and scroll position. Without script the drawing, scrolling, links and text equivalent remain usable. Print fits the drawing to paper and exposes its text equivalent.

no example exercises it

0 unkeyed rules.

Verifying examples

An architecture over the bound folds by context · spec:consumers.spec-studio.diagrams.folds-by-context · ready floor ready

Executable Spec

Given an architecture of {components: 45} components spread over {contexts: 3} contexts and {layers: 5} layers, with {edges: 0} uses edges between components
When the build lays the architecture diagram out twice
Then the two drawings are byte-identical: {identical: true}
Then the diagram folds by {fold: "context"}
Then the first drawing holds {drawn: 3} boxes
Then its text equivalent names {named: 3} boxes and edges

Open example

One context over the bound folds by layer · spec:consumers.spec-studio.diagrams.folds-by-layer · ready floor ready

Executable Spec

Given an architecture of {components: 50} components spread over {contexts: 1} contexts and {layers: 5} layers, with {edges: 0} uses edges between components
When the build lays the architecture diagram out twice
Then the two drawings are byte-identical: {identical: true}
Then the diagram folds by {fold: "layer"}
Then the first drawing holds {drawn: 5} boxes
Then its text equivalent names {named: 5} boxes and edges

Open example

An architecture within the bound draws in one diagram, the same bytes twice · spec:consumers.spec-studio.diagrams.within-bound · ready floor ready

Executable Spec

Given an architecture of {components: 12} components spread over {contexts: 3} contexts and {layers: 4} layers, with {edges: 20} uses edges between components
When the build lays the architecture diagram out twice
Then the two drawings are byte-identical: {identical: true}
Then the diagram folds by {fold: "nothing"}
Then the first drawing holds {drawn: 12} boxes
Then its text equivalent names {named: 32} boxes and edges

Open example

Example space

Given an architecture of {components:number} components spread over {contexts:number} contexts and {layers:number} layers, with {edges:number} uses edges between components
When the build lays the architecture diagram out twice
Then the two drawings are byte-identical: {identical:boolean}
Then the diagram folds by {fold:"nothing"|"context"|"layer"}
Then the first drawing holds {drawn:number} boxes
Then its text equivalent names {named:number} boxes and edges
Design
bound line 42 · specs/consumers/spec-studio.diagrams.sdp.md:42
40 boxes and 100 edges per diagram, counting every box a drawing holds, folded and planned boxes included, and every edge it draws.

no citation recorded

density line 43 · specs/consumers/spec-studio.diagrams.sdp.md:43
For requirement, trace, capability and dependency drawings, trigger the existing folds before the hard bound when deterministic layout height exceeds 2000 logical pixels. Measure height from the box and lane layout before routing, using the same label metrics and width budget as the drawing. A fold triggered by these limits must strictly lower that height and hold at least two boxes, keeping the same scope, claims and complete text equivalent. If no lawful fold fits the height budget, omit the SVG and open the text equivalent.
labelMetrics line 44 · specs/consumers/spec-studio.diagrams.sdp.md:44
A title or recorded label leads at fourteen pixels, followed by the displayed id at twelve pixels and remaining words such as a component's member count. Title lines hold at most 28 characters and id lines 30, with an eight-pixel character advance. Wrap at spaces or id punctuation, then by code point, and calculate box height from every line.
cellWrap line 45 · specs/consumers/spec-studio.diagrams.sdp.md:45
Wrap a cell's boxes within the fixed logical width budget instead of a fixed box count; retain context columns with local scrolling when they exceed it. Layout reads no browser or font measurement.
widthBudget line 46 · specs/consumers/spec-studio.diagrams.sdp.md:46
880 logical pixels for a band or grid, band labels included above their band; 264 per context cell when several contexts share a grid, the full band budget when only one context is shown, and 24 between boxes. Routing gutters may widen the SVG to preserve distinct lanes. A drawing wider than 880 scrolls inside its figure and receives the build-written instruction Scroll horizontally to read the whole drawing.

no citation recorded

shortId line 47 · specs/consumers/spec-studio.diagrams.sdp.md:47
Drop the namespace and leading dotted segments every id in the figure shares, marking elision with …; keep more segments on collisions. A displayed id carries a namespace only when shown in full. Full ids remain in link titles, the text equivalent and source.
edgeRouting line 48 · specs/consumers/spec-studio.diagrams.sdp.md:48
Reserve boxes and labels as obstacles, route orthogonally with distinct ports and lanes eight pixels apart, and never share a collinear segment or overlap labels. Crossings are permitted only at free points. Keep exact relations and claims through the words-beside-style rule. A deterministic finite routing failure omits the SVG, opens its text equivalent and explains the failure; the build owns search mechanics.
edgeKinds line 49 · specs/consumers/spec-studio.diagrams.sdp.md:49
uses for a realized use, drawn solid; plans to use for a use a component design states, drawn dashed; on a trace graph the relation's type; an arrow points from the unit or Spec that uses or declares to the one it names.

no citation recorded

svgMarkup line 50 · specs/consumers/spec-studio.diagrams.sdp.md:50
the svg carries role="img", a title, aria-describedby naming its text equivalent and a viewBox of its own size; a box is a g with class node and data-id, plus data-planned="true" or data-folded="true" when it is planned or folded, holding a link to the box's target; an edge is a g with class edge, data-from, data-to and data-kind; a band is a g with class band and data-label, a column a g with class lane and data-label, each also drawing its label as text. An edge also carries data-claim and a stable data-edge-key when its label uses a legend key; route and label coordinates are presentation values and mint no graph edge.
boxTargets line 51 · specs/consumers/spec-studio.diagrams.sdp.md:51
a component's box links to its detail on the architecture lens, a planned component's to its component design's Spec page, a context's or layer's folded box to its section on the same page, a Spec's to its page, and a folded relation group's to the Spec page's relations.
textEquivalent line 52 · specs/consumers/spec-studio.diagrams.sdp.md:52
a details element closed by default, summary The diagram as text, holding one li per box, <id>: <words>, followed by · folded members: <ids> when folded identities are present, and then one li per edge, <from> <kind> <to>, followed by · <claim> when present, (<n> unit edges) when the edge aggregates more than one, and — <reason> when present.
diagramElement line 53 · specs/consumers/spec-studio.diagrams.sdp.md:53
sdp-diagram with subject, the rooted Spec, Pack, component or context id, or architecture, wraps one figure containing its caption and legend, any build-written scroll instruction, a keyboard-focusable named .diagram-scroll region containing the SVG, its text equivalent and, when offered, its closed Mermaid-source disclosure with labelled read-only textarea and sdp-copy. Caption, legend and source stay outside the scroll region. On upgrade it adds Zoom in, Zoom out and Reset buttons and handles drag, a wheel with Control or Command held, and pinch; it adds no layout or copy behavior.

no citation recorded

elementIds line 54 · specs/consumers/spec-studio.diagrams.sdp.md:54
a diagram's text equivalent has the id diagram.<subject>.text and its arrow has the id diagram.<subject>.arrow. A page that draws a second view of one subject inserts that view's name before text or arrow, so the Spec page's realization drawing uses diagram.<subject>.realization.text and diagram.<subject>.realization.arrow; its trace graph keeps the unqualified ids. Every id is unique on its page.
omittedDrawing line 55 · specs/consumers/spec-studio.diagrams.sdp.md:55
A drawing over the bound keeps its figure and caption, writes Shown as text: this drawing exceeds the bound of <b> boxes and <e> edges., and opens its text equivalent. A routing failure instead writes Shown as text: a distinct route or label could not be placed within the routing budget. and opens the same complete box-and-edge reading. A drawing still above the height budget after lawful folds instead writes Shown as text: this drawing exceeds the height budget of <h> pixels after folding. and opens its text equivalent. No omission offers partial Mermaid source.
Verification

Verifier bindings

  • spec:consumers.spec-studio.diagrams.folds-by-context · An architecture over the bound folds by context · declared · example enabled · specs/consumers/spec-studio.diagrams.folds-by-context.sdp.md

    External run evidence from test/studio-s1.test.ts

    Test anchors: test:protocol.studio-architecture-planned-apart, test:protocol.studio-coverage-literal, test:protocol.studio-coverage-number, test:protocol.studio-diagram-folds-context, test:protocol.studio-diagram-folds-layer, test:protocol.studio-diagram-within-bound, test:protocol.studio-lenses, test:protocol.studio-tests-coverage-row. Specs verified by those bindings: spec:consumers.agent-surface.example-space-coverage, spec:consumers.agent-surface.example-space-coverage.number-not-enumerable, spec:consumers.agent-surface.example-space-coverage.uncovered-literal, spec:consumers.spec-studio.data.recipe-answers, spec:consumers.spec-studio.diagrams, spec:consumers.spec-studio.diagrams.folds-by-context, spec:consumers.spec-studio.diagrams.folds-by-layer, spec:consumers.spec-studio.diagrams.within-bound, spec:consumers.spec-studio.lenses, spec:consumers.spec-studio.lenses.architecture, spec:consumers.spec-studio.lenses.architecture.planned-apart, spec:consumers.spec-studio.lenses.evidence, spec:consumers.spec-studio.lenses.packs, spec:consumers.spec-studio.lenses.tests, spec:consumers.spec-studio.lenses.tests.coverage-row.

    Run 1: external run evidence from vitest 4.1.10

    Build: CI 380 · Branch: feature/roadmap-and-slices-v0 · Commit: 34909918bf0be0e849959644401797191cae379f · Start: 2026-10-22T17:40:31.456Z · Stop: 2026-10-22T17:42:16.171Z

    NameSuiteResultDuration
    bounds and folds 12 componentsStudio diagramspassed21.4 ms
    bounds and folds 45 componentsStudio diagramspassed4.18 ms
    bounds and folds 50 componentsStudio diagramspassed10.57 ms
    keeps every edge in an open text fallbackStudio diagramspassed1.76 ms
    orders grid contexts and layers and wraps cells within the fixed width budgetStudio diagramspassed3.65 ms
    draws planned-use edges dashed independently of planned box outlinesStudio diagramspassed0.48 ms
    checks the edge bound even when boxes fitStudio diagramspassed0.41 ms
    places folded contexts and layers in their own bands below the gridStudio diagramspassed3.19 ms
    places outgoing relation bands above the subject and folds ties in relation orderStudio diagramspassed9.26 ms
    folds trace relation groups and leaves member overflow as textStudio diagramspassed2.95 ms
    keeps recipe and diagram edges in code-unit order under forced Czech collationStudio lensespassed116.83 ms
    publishes all five ordered lenses and honest evidence without scriptStudio lensespassed33.06 ms
    reads verifier binding from the delivery fact and gives absent coverage its own filter valueStudio lensespassed18.02 ms
    labels a primitive-only space with no examples not measurable and hides it under coveredStudio lensespassed14.75 ms
    classifies 'number' with points [ '1' ] and mixed=false as 'not-measurable'Studio lensespassed26.11 ms
    classifies 'string' with points [ '"a"' ] and mixed=false as 'not-measurable'Studio lensespassed22.83 ms
    classifies 'boolean' with points [ 'true' ] and mixed=false as 'not-measurable'Studio lensespassed11.69 ms
    classifies '"a"|"b"' with points [] and mixed=false as 'uncovered'Studio lensespassed9.5 ms
    classifies '"a"|"b"' with points [ '"a"' ] and mixed=false as 'uncovered'Studio lensespassed11.11 ms
    classifies '"a"|"b"' with points [ '"a"', '"b"' ] and mixed=false as 'covered'Studio lensespassed15.58 ms
    classifies '"a"|"b"' with points [ '"a"' ] and mixed=true as 'uncovered'Studio lensespassed16.25 ms
    classifies '"a"|"b"' with points [ '"a"', '"b"' ] and mixed=true as 'covered'Studio lensespassed20.2 ms
    renders member subjects, code spans, used-by counts, differences and empty componentsStudio lensespassed14.17 ms
    describes evidence sources as not trackedStudio lensespassed2.87 ms
    executes the bound example against a fresh worldAn architecture within the bound draws in one diagram, the same bytes twice (spec:consumers.spec-studio.diagrams.within-bound)passed13 ms
    executes the bound example against a fresh worldAn architecture over the bound folds by context (spec:consumers.spec-studio.diagrams.folds-by-context)passed7.68 ms
    executes the bound example against a fresh worldOne context over the bound folds by layer (spec:consumers.spec-studio.diagrams.folds-by-layer)passed8.85 ms
    executes the bound example against a fresh worldA component design no anchor realizes draws planned beside the built one (spec:consumers.spec-studio.lenses.architecture.planned-apart)passed26.33 ms
    executes the bound example against a fresh worldA Spec's row on the tests lens counts its exercised keyed rules (spec:consumers.spec-studio.lenses.tests.coverage-row)passed13.82 ms
    executes the bound example against a fresh worldA literal no example binds is reported uncovered, and an unbound child is named (spec:consumers.agent-surface.example-space-coverage.uncovered-literal)passed4.85 ms
    executes the bound example against a fresh worldA number slot is not enumerable and reports no uncovered value (spec:consumers.agent-surface.example-space-coverage.number-not-enumerable)passed3.01 ms
    reuses the build's reader and validation findings during Studio recipe evaluationnot recordedpassed3.94 ms
    documents the component and member fields recipe 17 addsnot recordedpassed1.22 ms
    evaluates each shipped recipe once for its assigned parameters and shares Pack totals, with base falsenot recordedpassed14.63 ms
    evaluates each shipped recipe once for its assigned parameters and shares Pack totals, with base truenot recordedpassed20.61 ms
    keeps label lines bounded and orders member depths numerically with outside units lastnot recordedpassed2.32 ms
    labels planned uses, reports unreadable designs and keeps unknown structure visiblenot recordedpassed8.33 ms
    gives unstated context and layer folds addressable text descriptionsnot recordedpassed1.14 ms
    names a single edge relation once in the legend and preserves its text equivalentnot recordedpassed1.75 ms
    names solid and planned uses once without repeating edge labelsnot recordedpassed0.63 ms
  • spec:consumers.spec-studio.diagrams.folds-by-layer · One context over the bound folds by layer · declared · example enabled · specs/consumers/spec-studio.diagrams.folds-by-layer.sdp.md
  • spec:consumers.spec-studio.diagrams.within-bound · An architecture within the bound draws in one diagram, the same bytes twice · declared · example enabled · specs/consumers/spec-studio.diagrams.within-bound.sdp.md
  • test:protocol.studio-diagram-core · anchored · test anchor binding present · test/studio-diagram-core.test.ts:37

    External run evidence from test/studio-diagram-core.test.ts

    Test anchors: test:protocol.studio-copy-source, test:protocol.studio-diagram-core. Specs verified by those bindings: spec:consumers.spec-studio.diagram-kinds.edge-routing, spec:consumers.spec-studio.diagram-kinds.legibility, spec:consumers.spec-studio.diagram-kinds.mermaid-source, spec:consumers.spec-studio.diagram-kinds.requirement-trace, spec:consumers.spec-studio.diagrams, spec:consumers.spec-studio.page-elements.

    Run 1: external run evidence from vitest 4.1.10

    Build: CI 380 · Branch: feature/roadmap-and-slices-v0 · Commit: 34909918bf0be0e849959644401797191cae379f · Start: 2026-10-22T17:40:31.456Z · Stop: 2026-10-22T17:42:16.171Z

    NameSuiteResultDuration
    wraps by code point and shortens shared segments without collisionsshared diagram corepassed8.25 ms
    wraps boxes within the width budget and writes an instruction only for final wide drawingsshared diagram corepassed6.1 ms
    routes forward, backward and same-band edges with distinct ports and no shared segmentsshared diagram corepassed14.15 ms
    fails closed when routing cannot fit, retaining complete text and no partial sourceshared diagram corepassed50.17 ms
    serializes full identities, exact claims, reasons, counts and folds as inert Mermaid datashared diagram corepassed1.98 ms
    copies the current value of the labelled textarea and selects that same area on clipboard failurenot recordedpassed55.84 ms
    keeps the full box and edge bound routable with obstacles, separate lanes and edge labelsnot recordedpassed430.81 ms
    offers deterministic Mermaid source for each existing drawing and pins the safe text syntaxnot recordedpassed5.63 ms
    folds reason-bearing trace groups without attributing a member reason to the groupnot recordedpassed8.01 ms
    uses the full band budget for a single context and routes adjacent bands inside itnot recordedpassed0.59 ms
    prints exact short relation words and reserves keys for wording that cannot fitnot recordedpassed6.46 ms
    names viewport and instruction ids for trace and secondary viewsnot recordedpassed3.43 ms
    names the architecture syntax and serializes aliases in displayed box ordernot recordedpassed0.34 ms
    routes the current Protocol architecture and recorded adopter architecture with distinct ports and segmentsnot recordedpassed74.94 ms
    extends overflow rails past earlier labels on the adopter's dense tracesnot recordedpassed4.75 ms
    keeps high-degree boxes inside their cells when contexts share a gridnot recordedpassed1.15 ms
    folds nine refining verifiers with their tests within the band budget and keeps every text rownot recordedpassed2.68 ms
    names folded declared refiners by their relation and claim without an internal subtitlenot recordedpassed2.03 ms
    keeps examples apart from refiners when dense requirement groups foldnot recordedpassed1.09 ms
    names refines folds in plain words and preserves directionnot recordedpassed1.31 ms
    names satisfies folds in plain words and preserves directionnot recordedpassed1.09 ms
    names verifies folds in plain words and preserves directionnot recordedpassed1.46 ms
    keeps a short drawing unfolded even with many boxes and incident edgesnot recordedpassed1.77 ms
    packs disjoint endpoint intervals into shared horizontal lanesnot recordedpassed0.89 ms
    uses a legend key before spending overflow width on exact wordsnot recordedpassed1.18 ms

Example space

  • components · number · declared by an architecture of {components} components spread over {contexts} contexts and {layers} layers, with {edges} uses edges between components
  • contexts · number · declared by an architecture of {components} components spread over {contexts} contexts and {layers} layers, with {edges} uses edges between components
  • layers · number · declared by an architecture of {components} components spread over {contexts} contexts and {layers} layers, with {edges} uses edges between components
  • edges · number · declared by an architecture of {components} components spread over {contexts} contexts and {layers} layers, with {edges} uses edges between components

Bound points

Oracle binding: present · oracle:protocol.studio-diagrams · test/studio-s1.test.ts:564

Coverage

components: 45 · spec:consumers.spec-studio.diagrams.folds-by-context; 50 · spec:consumers.spec-studio.diagrams.folds-by-layer; 12 · spec:consumers.spec-studio.diagrams.within-bound · not enumerable

contexts: 3 · spec:consumers.spec-studio.diagrams.folds-by-context, spec:consumers.spec-studio.diagrams.within-bound; 1 · spec:consumers.spec-studio.diagrams.folds-by-layer · not enumerable

layers: 5 · spec:consumers.spec-studio.diagrams.folds-by-context, spec:consumers.spec-studio.diagrams.folds-by-layer; 4 · spec:consumers.spec-studio.diagrams.within-bound · not enumerable

edges: 0 · spec:consumers.spec-studio.diagrams.folds-by-context, spec:consumers.spec-studio.diagrams.folds-by-layer; 20 · spec:consumers.spec-studio.diagrams.within-bound · not enumerable

Unbound

  • components: None
  • contexts: None
  • layers: None
  • edges: None
Design view

Requirement drawing

Requirement drawing for spec:consumers.spec-studio.diagrams
  • E8: refines, verifies · declared (3 per relation)
The diagram as text
  • spec:consumers.spec-studio.diagrams: A diagram is laid out from graph values into SVG with a text equivalent · declared Spec
  • spec:consumers.spec-studio.diagram-kinds: The Studio chooses diagram kinds from graph values · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.edge-routing: Edges route around boxes with deterministic orthogonal paths · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.legibility: A diagram preserves readable labels before zoom · declared Spec
  • spec:consumers.spec-studio.diagrams.folds-by-context: An architecture over the bound folds by context · declared Spec
  • spec:consumers.spec-studio.diagrams.folds-by-layer: One context over the bound folds by layer · declared Spec
  • spec:consumers.spec-studio.diagrams.within-bound: An architecture within the bound draws in one diagram, the same bytes twice · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.capability-tree: A refinement drawing follows the capability map · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.dependency: A dependency drawing shows the declared footing of a Spec set · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.maturity-picture: The maturity map is drawn as a grid of counts · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.mermaid-source: A diagram offers Mermaid source as copyable text · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.requirement-trace: A requirement drawing separates intent from realization and verification · declared Spec
  • spec:consumers.spec-studio.diagram-kinds.scoped-architecture: A Spec set draws the architecture it touches · declared Spec
  • spec:consumers.spec-studio.components: The Studio's custom elements each hold one view the build renders · declared Spec
  • impl:protocol.studio-architecture-diagrams: architecture grids and bounded context and layer folds · anchored code · src/projections/studio/diagrams/architecture.ts:4
  • impl:protocol.studio-architecture-lens: renders recipe component rows and planned designs as architecture and member diagrams · anchored code · src/projections/studio/pages/architecture-page.ts:50
  • impl:protocol.studio-capability-diagrams: places refinement occurrences and bounded branches from the capability map · anchored code · src/projections/studio/diagrams/capability.ts:101
  • impl:protocol.studio-diagram-element: adds view-box pan, zoom and pinch to build-rendered SVG without changing its layout · anchored code · src/studio-elements/diagram.ts:23
  • impl:protocol.studio-diagram-layout: title-first box placement, wrapping and band sizing for desktop and phone · anchored code · src/projections/studio/diagrams/layout.ts:140
  • impl:protocol.studio-diagram-model: shared diagram boxes, edges and drawing bounds · anchored code · src/projections/studio/diagrams/model.ts:1
  • impl:protocol.studio-diagram-routing: port, channel and overflow-rail edge routes around boxes and labels · anchored code · src/projections/studio/diagrams/routing.ts:38
  • impl:protocol.studio-diagram-source: escaped Mermaid flowchart and mindmap source in placed box order · anchored code · src/projections/studio/diagrams/mermaid.ts:13
  • impl:protocol.studio-diagrams: deterministic grid and band layouts with bounded folds and full text equivalents · anchored code · src/projections/studio/diagrams/svg.ts:73
  • impl:protocol.studio-maturity-map: places resolved Pack members by their stated rung and floor in authored order · anchored code · src/projections/studio/pages/maturity-map.ts:7
  • impl:protocol.studio-relation-diagrams: relation and member bands and bounded relation folds · anchored code · src/projections/studio/diagrams/bands.ts:10
  • impl:protocol.studio-requirement-diagram: folds requirement bindings by relation direction and claim and serializes exact relations · anchored code · src/projections/studio/diagrams/requirement.ts:12
  • impl:protocol.studio-slice-architecture: selected component grid with distinct planned identities and complete unit edges · anchored code · src/projections/studio/diagrams/slice.ts:219
  • impl:protocol.studio-slice-dependencies: supplied depth bands with protected boundary boxes and lossless text · anchored code · src/projections/studio/diagrams/slice.ts:10
  • oracle:protocol.studio-diagrams: oracle:protocol.studio-diagrams · anchored oracle binding · test/studio-s1.test.ts:564
  • test:protocol.studio-diagram-catalog: test:protocol.studio-diagram-catalog · anchored test binding · binding present · test/studio-diagram-catalog.test.ts:12
  • test:protocol.studio-diagram-core: test:protocol.studio-diagram-core · anchored test binding · binding present · test/studio-diagram-core.test.ts:37
  • test:protocol.studio-diagram-folds-context: test:protocol.studio-diagram-folds-context · anchored test binding · binding present · test/studio-s1.test.ts:675
  • test:protocol.studio-diagram-folds-layer: test:protocol.studio-diagram-folds-layer · anchored test binding · binding present · test/studio-s1.test.ts:681
  • test:protocol.studio-diagram-within-bound: test:protocol.studio-diagram-within-bound · anchored test binding · binding present · test/studio-s1.test.ts:669
  • spec:consumers.spec-studio.diagram-kinds refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagram-kinds.capability-tree refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagram-kinds.dependency refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagram-kinds.edge-routing refines spec:consumers.spec-studio.diagram-kinds · declared — arrows that cover no label serve the readable drawings the diagram kinds state
  • spec:consumers.spec-studio.diagram-kinds.edge-routing refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagram-kinds.legibility refines spec:consumers.spec-studio.diagram-kinds · declared — readable labels are part of the outcome the diagram kinds state
  • spec:consumers.spec-studio.diagram-kinds.legibility refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagram-kinds.maturity-picture refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagram-kinds.mermaid-source refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagram-kinds.requirement-trace refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagram-kinds.scoped-architecture refines spec:consumers.spec-studio.diagram-kinds · declared
  • spec:consumers.spec-studio.diagrams refines spec:consumers.spec-studio.components · declared
  • spec:consumers.spec-studio.diagrams.folds-by-context refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-context verifies spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-layer refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-layer verifies spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.within-bound refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.within-bound verifies spec:consumers.spec-studio.diagrams · declared
  • impl:protocol.studio-architecture-diagrams satisfies spec:consumers.spec-studio.diagrams · anchored
  • impl:protocol.studio-architecture-lens satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-capability-diagrams satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-diagram-element satisfies spec:consumers.spec-studio.diagrams · anchored
  • impl:protocol.studio-diagram-element satisfies spec:consumers.spec-studio.diagram-kinds.legibility · anchored
  • impl:protocol.studio-diagram-layout satisfies spec:consumers.spec-studio.diagram-kinds.legibility · anchored
  • impl:protocol.studio-diagram-layout satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-diagram-model satisfies spec:consumers.spec-studio.diagrams · anchored
  • impl:protocol.studio-diagram-routing satisfies spec:consumers.spec-studio.diagram-kinds.edge-routing · anchored
  • impl:protocol.studio-diagram-source satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-diagrams satisfies spec:consumers.spec-studio.diagrams · anchored
  • impl:protocol.studio-diagrams satisfies spec:consumers.spec-studio.diagram-kinds.edge-routing · anchored
  • impl:protocol.studio-diagrams satisfies spec:consumers.spec-studio.diagram-kinds.legibility · anchored
  • impl:protocol.studio-diagrams satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-maturity-map satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-relation-diagrams satisfies spec:consumers.spec-studio.diagrams · anchored
  • impl:protocol.studio-requirement-diagram satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-slice-architecture satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • impl:protocol.studio-slice-dependencies satisfies spec:consumers.spec-studio.diagram-kinds · anchored
  • oracle:protocol.studio-diagrams models spec:consumers.spec-studio.diagrams · anchored
  • test:protocol.studio-diagram-catalog verifies spec:consumers.spec-studio.diagram-kinds · anchored
  • test:protocol.studio-diagram-core verifies spec:consumers.spec-studio.diagram-kinds.legibility · anchored
  • test:protocol.studio-diagram-core verifies spec:consumers.spec-studio.diagram-kinds.edge-routing · anchored
  • test:protocol.studio-diagram-core verifies spec:consumers.spec-studio.diagrams · anchored
  • test:protocol.studio-diagram-folds-context verifies spec:consumers.spec-studio.diagrams.folds-by-context · anchored
  • test:protocol.studio-diagram-folds-layer verifies spec:consumers.spec-studio.diagrams.folds-by-layer · anchored
  • test:protocol.studio-diagram-within-bound verifies spec:consumers.spec-studio.diagrams.within-bound · anchored
Mermaid source

Copyable source; the Studio draws static SVG.

Preferred syntax: requirementDiagram. Chosen syntax: flowchart TB because models, folds require exact labels unavailable in requirement syntax.

Decisions

Runtime
  • component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

    Uses

    • component:protocol.extract · the carrier and source pipeline · src/extract/index.ts:192 · layer application · context protocol
    • component:protocol.graph · the one graph and its semantic decisions · src/graph/schema.ts:34 · layer domain · context protocol
    • component:protocol.model · the authored contracts and stable ids · src/model/anchors.ts:100 · layer domain · context protocol
    • component:protocol.notation · the leaf step codec · src/notation/slots.ts:261 · layer domain · context protocol
    • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
    • component:protocol.validate · one finding currency and ordered checks · src/validate/validators.ts:72 · layer domain · context protocol
  • component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

    Uses

    • component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol
    • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
  • impl:protocol.studio-architecture-diagrams · architecture grids and bounded context and layer folds · src/projections/studio/diagrams/architecture.ts:4

    Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

    Uses

    None.

  • impl:protocol.studio-diagram-element · adds view-box pan, zoom and pinch to build-rendered SVG without changing its layout · src/studio-elements/diagram.ts:23

    Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

    Uses

    None.

  • impl:protocol.studio-diagram-model · shared diagram boxes, edges and drawing bounds · src/projections/studio/diagrams/model.ts:1

    Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

    Uses

    None.

  • impl:protocol.studio-diagrams · deterministic grid and band layouts with bounded folds and full text equivalents · src/projections/studio/diagrams/svg.ts:73

    Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

    Uses

    • impl:protocol.studio-diagram-model · shared diagram boxes, edges and drawing bounds · src/projections/studio/diagrams/model.ts:1
  • impl:protocol.studio-relation-diagrams · relation and member bands and bounded relation folds · src/projections/studio/diagrams/bands.ts:10

    Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

    Uses

    None.

Runtime observation: not tracked.

Evidence

Runtime observation: not tracked.

Build attestations: not tracked.

Deployments: not tracked.

Bills of materials: not tracked.

Impact
Relations of spec:consumers.spec-studio.diagrams

Shown as text: this drawing exceeds the height budget of 2000 pixels after folding.

The diagram as text
  • spec:consumers.spec-studio.components: The Studio's custom elements each hold one view the build renders
  • spec:consumers.spec-studio.data: The Studio renders from the reader's values and embeds only what its script reads
  • spec:consumers.spec-studio.diagram-kinds: The Studio chooses diagram kinds from graph values
  • spec:consumers.spec-studio.diagram-kinds.edge-routing: Edges route around boxes with deterministic orthogonal paths
  • spec:consumers.spec-studio.diagram-kinds.legibility: A diagram preserves readable labels before zoom
  • spec:consumers.spec-studio.diagrams: A diagram is laid out from graph values into SVG with a text equivalent
  • spec:consumers.spec-studio.diagrams.folds-by-context: An architecture over the bound folds by context
  • spec:consumers.spec-studio.diagrams.folds-by-layer: One context over the bound folds by layer
  • spec:consumers.spec-studio.diagrams.within-bound: An architecture within the bound draws in one diagram, the same bytes twice
  • spec:consumers.spec-studio.lenses.architecture: The architecture lens draws components by context and layer, the planned beside the built
  • spec:consumers.spec-studio.slice-page: A slice page shows a Pack's design as one whole
  • spec:consumers.spec-studio.spec-page: A Spec page shows one Spec in collapsible panels, in a fixed order
  • spec:decisions.architectural-annotation: Architectural significance is annotated where it is realized
  • spec:decisions.studio-diagram-renderer: The engine lays out every Studio diagram as static SVG when the page set is built
  • spec:extraction.determinism: Committed source derives byte-identical output
  • spec:consumers.spec-studio.diagrams constrainedBy spec:extraction.determinism · declared
  • spec:consumers.spec-studio.diagrams decidedBy spec:decisions.studio-diagram-renderer · declared
  • spec:consumers.spec-studio.diagrams dependsOn spec:consumers.spec-studio.data · declared — a diagram is laid out from the values and recipe answers its page renders
  • spec:consumers.spec-studio.diagrams dependsOn spec:decisions.architectural-annotation · declared — the architecture grid reads the layer and context a component anchor states
  • spec:consumers.spec-studio.diagrams refines spec:consumers.spec-studio.components · declared
  • spec:consumers.spec-studio.lenses.architecture dependsOn spec:consumers.spec-studio.diagrams · declared — the lens's drawings are the architecture grid and the member diagrams
  • spec:consumers.spec-studio.slice-page dependsOn spec:consumers.spec-studio.diagrams · declared — both drawings keep the diagram contract, bound and text equivalent included
  • spec:consumers.spec-studio.spec-page dependsOn spec:consumers.spec-studio.diagrams · declared — the design view and impact panel draw requirement traceability and the one-hop trace graph
  • spec:consumers.spec-studio.diagram-kinds refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagram-kinds.edge-routing refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagram-kinds.legibility refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-context refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-layer refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.within-bound refines spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-context verifies spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.folds-by-layer verifies spec:consumers.spec-studio.diagrams · declared
  • spec:consumers.spec-studio.diagrams.within-bound verifies spec:consumers.spec-studio.diagrams · declared

Rests on

Rested on by

Distance 1

Distance 2

Distance 3

Relations

Relation and directionOther endClaimReasonExercised keys
constrainedBy · outgoingCommitted source derives byte-identical output
spec:extraction.determinism · resolves
declaredNoneNone
decidedBy · outgoingThe engine lays out every Studio diagram as static SVG when the page set is built
spec:decisions.studio-diagram-renderer · resolves
declaredNoneNone
dependsOn · outgoingThe Studio renders from the reader's values and embeds only what its script reads
spec:consumers.spec-studio.data · resolves
declareda diagram is laid out from the values and recipe answers its page rendersNone
dependsOn · outgoingArchitectural significance is annotated where it is realized
spec:decisions.architectural-annotation · resolves
declaredthe architecture grid reads the layer and context a component anchor statesNone
refines · outgoingThe Studio's custom elements each hold one view the build renders
spec:consumers.spec-studio.components · resolves
declaredNoneNone
dependsOn · incomingThe architecture lens draws components by context and layer, the planned beside the built
spec:consumers.spec-studio.lenses.architecture · resolves
declaredthe lens's drawings are the architecture grid and the member diagramsNone
dependsOn · incomingA slice page shows a Pack's design as one whole
spec:consumers.spec-studio.slice-page · resolves
declaredboth drawings keep the diagram contract, bound and text equivalent includedNone
dependsOn · incomingA Spec page shows one Spec in collapsible panels, in a fixed order
spec:consumers.spec-studio.spec-page · resolves
declaredthe design view and impact panel draw requirement traceability and the one-hop trace graphNone
refines · incomingThe Studio chooses diagram kinds from graph values
spec:consumers.spec-studio.diagram-kinds · resolves
declaredNoneNone
refines · incomingEdges route around boxes with deterministic orthogonal paths
spec:consumers.spec-studio.diagram-kinds.edge-routing · resolves
declaredNoneNone
refines · incomingA diagram preserves readable labels before zoom
spec:consumers.spec-studio.diagram-kinds.legibility · resolves
declaredNoneNone
refines · incomingAn architecture over the bound folds by context
spec:consumers.spec-studio.diagrams.folds-by-context · resolves
declaredNoneNone
refines · incomingOne context over the bound folds by layer
spec:consumers.spec-studio.diagrams.folds-by-layer · resolves
declaredNoneNone
refines · incomingAn architecture within the bound draws in one diagram, the same bytes twice
spec:consumers.spec-studio.diagrams.within-bound · resolves
declaredNoneNone
verifies · incomingAn architecture over the bound folds by context
spec:consumers.spec-studio.diagrams.folds-by-context · resolves
declaredNonebound, foldByContext, sameBytes
verifies · incomingOne context over the bound folds by layer
spec:consumers.spec-studio.diagrams.folds-by-layer · resolves
declaredNonebound, foldByLayer
verifies · incomingAn architecture within the bound draws in one diagram, the same bytes twice
spec:consumers.spec-studio.diagrams.within-bound · resolves
declaredNonebuildTime, layoutInputs, sameBytes, architectureGrid, textEquivalent

Bindings

Implementation binding: present

  • impl:protocol.studio-architecture-diagrams · architecture grids and bounded context and layer folds · src/projections/studio/diagrams/architecture.ts:4 · role projection · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-diagram-element · adds view-box pan, zoom and pinch to build-rendered SVG without changing its layout · src/studio-elements/diagram.ts:23 · role interaction · component component:protocol.studio-elements · layer edge · context protocol
  • impl:protocol.studio-diagram-model · shared diagram boxes, edges and drawing bounds · src/projections/studio/diagrams/model.ts:1 · role contract · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-diagrams · deterministic grid and band layouts with bounded folds and full text equivalents · src/projections/studio/diagrams/svg.ts:73 · role projection · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-relation-diagrams · relation and member bands and bounded relation folds · src/projections/studio/diagrams/bands.ts:10 · role projection · component component:protocol.projections · layer edge · context protocol

Design reference: none

Verifier binding: present

Expected-outcome oracle: present

  • oracle:protocol.studio-diagrams · test/studio-s1.test.ts:564

Runtime observation: not tracked.

Run results: not recorded in the graph.

Findings

None.

Composing (0)

Composing needs the script.