DEV Community: Chris

Communication Through Diagrams: A Six-Layer Decomposition, Creation Framework, and Evaluation Model

Chris — Fri, 11 Sep 2026 14:14:00 +0000

Author: Kimi K3

Executive summary

This report investigates a single question from the literature rather than from a preset taxonomy: what are the fundamental dimensions, decisions, mechanisms, constraints, and processes that govern whether information is successfully communicated through a diagram? Surveying cognitive science, vision science, logic and the philosophy of representation, information visualization, human–computer interaction, software engineering, educational psychology, and the recent literature on AI-generated diagrams, the report arrives at four deliverables. First, a six-layer decomposition of diagrammatic communication: Frame (audience, task, success criterion), Content and Abstraction (selection and granularity), Structural Schema (the spatial form that mirrors the dominant relations), Encoding (the assignment of meaning to visual variables and symbols), Composition and Layout (arrangement, grouping, flow), and Perceptual Surface (legibility, discriminability, salience, clutter). Each layer is a transformation at which information can be preserved, distorted, or lost, and each has characteristic, diagnosable failure modes.

Second, the report derives an operational creation framework: a seven-step loop (frame the contract, audit the information, choose the schema, design the encoding, compose the layout, render the surface, verify and diagnose) that a human or an AI agent can apply to an arbitrary information set and communication objective. Third, it provides a map of the controllable variables — the "control surface" a diagram creator actually manipulates — with the measured effect of each variable, known interactions, and typical failure modes. Fourth, it decomposes the vague notion of a "good diagram" into a three-tier measurable evaluation framework: outcome measures (task accuracy, time, recall, decision quality), process measures (eye-tracking, cognitive-load instruments), and artifact-level computational proxies (syntax validity, node/edge precision–recall, channel-effectiveness compliance, crossing/bend/continuity costs, clutter metrics, label-adjacency distances, LLM-judge rubrics used with caution). Every proposed measure is explicitly graded as an established empirical measure, an established theoretical principle, a professional convention, an adapted measure, or a proposed metric.

Two conclusions deserve emphasis up front. The first is that the literature strongly supports a computational rather than informational theory of diagram value: a diagram succeeds not because it contains more information but because of how the information is indexed, grouped, and made available to cheap perceptual inference (Larkin & Simon 1987, Shimojima 2015). The second is that quality is not a single axis: "clear," "accurate," "easy," and "too complicated" decompose into distinct, separately measurable properties located at different layers of the framework, and a diagram can be excellent on one and broken on another. A diagram that is semantically faithful but visually cluttered, or perceptually clean but structurally mismatched to the task, fails in a specific, locatable, repairable way — which is precisely what makes the framework operational for both creators and evaluators.

1. The research problem and the evidence base

The research brief forbids starting from a predefined taxonomy of diagram types or a checklist of design maxims, and the literature itself justifies that constraint. Classifications of visual representations have been built many times — Lohse and colleagues empirically derived eleven categories (graphs, tables, graphical tables, time charts, networks, structure diagrams, process diagrams, maps, cartograms, icons, pictures) from viewers' similarity judgments (Lohse et al. 1994), and Blackwell and Engelhardt showed that existing taxonomies disagree because they classify along different hidden dimensions (graphic vocabulary, graphic structure, meaning, correspondence, abstraction, task, cognitive processes, social context) (Blackwell & Engelhardt 2002). The meta-taxonomic lesson is that a list of types is not an explanation. What generalizes across a flowchart, an ER diagram, an architecture overview, a comparison chart, and an editorial illustration is not the category membership but the underlying machinery: something must be selected, structured, encoded, arranged, rendered, and then recovered by a viewer with a task and a certain stock of knowledge.

The evidence base assembled here spans eleven distinct research traditions, which is itself a finding: the problem of diagrammatic communication has been studied independently and repeatedly under different names. Cognitive psychology contributed the computational theory of external representations and the empirical study of graph comprehension; vision science contributed preattentive processing and perceptual grouping; logic and philosophy contributed the semantics of diagrams (free rides, specificity, well-matchedness); cartography and information design contributed the semiology of visual variables; human–computer interaction contributed cognitive fit and evaluation methodology; software engineering contributed notation design and maintainability experiments; educational psychology contributed cognitive-load and multimedia-learning experiments with unusually large and well-replicated effect sizes; and machine-learning research contributed benchmarks for diagram understanding and generation that double as operational evaluation harnesses. Where these traditions disagree — for instance, on whether decorative embellishment harms communication — the disagreement is examined rather than suppressed, because the structure of the disagreement is itself diagnostic of which quality dimension is at stake.

Methodologically, the report follows the deep-research protocol: iterative broad search across disciplines, preference for primary peer-reviewed sources and foundational works, extraction of quantitative findings where they exist (effect sizes, regression coefficients, psychometric parameters), and synthesis into a model that was not assumed in advance. Where no adequate metric exists in the literature for a property that clearly matters — for example, the spatial adjacency of labels to their referents — the gap is flagged, and a derived measure is proposed and labeled as such. The generalization analysis in Section 8 then stress-tests the framework against the eight substantially different communication problems named in the research brief, from explaining a software feature to creating an editorial visual.

2. Why diagrams work at all: the computational account

2.1 Informational equivalence is the wrong benchmark

The foundational result of the field is that two representations can contain exactly the same information yet differ enormously in what a person can do with them. Larkin and Simon's classic analysis defined informational equivalence (all information in one representation is inferable from the other) and computational equivalence (inferences that are easy in one are easy in the other), and showed that diagrammatic and sentential representations of the same physics problems are informationally but not computationally equivalent (Larkin & Simon 1987). This single distinction does more explanatory work than any catalog of design tips, because it relocates the value of a diagram from what it says to what it lets you do cheaply. A wiring diagram, a paragraph of netlists, and a table of connections may be informationally identical; they are not interchangeable artifacts.

Zhang and Norman generalized the point into a methodology: tasks have hierarchical levels of representation, each level's abstract structure can be implemented by different isomorphic representations, and the representational effect on behavior is analyzed level by level — asking, for each level, which properties (internal vs. external, visual vs. spatial) carry which dimensions of the task (Zhang & Norman 1994). Their Tower of Hanoi experiments showed that rules physically embedded in the external representation are obeyed almost without error, while rules held only internally generate systematic violations — an early, clean demonstration that where information physically resides determines how reliably it is used. Scaife and Rogers folded these results into the concept of computational offloading, distinguishing three mechanisms: re-representation (the same abstract structure rendered easier or harder), graphical constraining (graphical relations restricting permissible inferences), and temporal/spatial constraining (making relevant aspects of processes salient in space and time) (Scaife & Rogers 1996).

The implication for the research question is direct. If the value of a diagram is computational, then the quality of a diagram must be decomposed into the factors that determine computational cost for the viewer: search, recognition, and inference. This is the load-bearing insight for the entire framework, and it explains why purely aesthetic judgments of diagrams correlate so poorly with measured task performance — the artifact's virtues are relational (representation × task × viewer), not intrinsic. It also explains the otherwise puzzling empirical finding, reported across the instructional literature, that merely handing learners an external representation does not reliably help them: in studies of pre-structured drawings and tables for word problems, providing a representation was not sufficient in general, and benefits depended on problem type and on the learner's diagram literacy (Reuter, Schnotz & Rasch 2015, via SCIRP). A diagram pays its computational dividend only to a viewer who commands the operators that exploit it, which is why the audience belongs in the framework from the very first layer.

2.2 The three computational mechanisms: search, recognition, inference

Larkin and Simon identified three specific mechanisms by which diagrams reduce computational cost, and thirty-five years of subsequent work has refined rather than replaced them. The first mechanism is locality and search reduction: diagrams group together, at one or adjacent locations, all the information needed for a single inference, so problem solving proceeds by smooth traversal rather than symbolic look-up; location itself serves as an index, eliminating the need to match labels across a list (Larkin & Simon 1987). The second is recognition: perceptual processes identify configurations (alternate interior angles, a loop, a bottleneck) at negligible cost, where the sentential reasoner must compute them. The third is perceptual inference: certain conclusions are literally read off the display rather than derived.

Shimojima supplied the logical analysis of the third mechanism. In his framework of constraint-based semantics, expressing a set of facts in a diagrammatic system can automatically express consequential facts, so the viewer "skips" deductive steps and simply perceives the consequence — the celebrated free ride (Shimojima 2015). Draw that node A connects to B and B to C, and the transitivity-relevant fact that a path exists from A to C is present in the drawing without further work. Free rides are not guaranteed; they obtain when the representational system's own constraints track the semantic constraints of the domain, which is why the choice of structure (Section 3.3) is so consequential. Stapleton, Jamnik and Shimojima later formalized the adjacent notion of observational advantages and showed they can be measured and compared across set-visualization designs (Stapleton et al. 2017/2021).

The same logic explains the diagram's liability side. Shimojima's analysis includes over-specificity: a diagram cannot easily leave spatial facts unspecified, so it is forced to commit to particulars (exact positions, counts, orderings) that may be irrelevant or misleading — text can say "some A are B" without saying how many, while a drawn token must be somewhere (Shimojima 2015). Stenning and Oberlander built their cognitive theory of graphical versus linguistic reasoning on exactly this asymmetry: graphical representations limit abstraction and thereby aid "processibility," because specificity collapses the space of situations the reasoner must consider, while linguistic representations preserve ambiguity that graphics cannot easily express (Stenning & Oberlander 1995). The creator's abstraction choices (Section 3.2) are therefore not cosmetic: they decide which inferences the viewer gets for free and which spurious commitments the drawing will smuggle in.

2.3 Correspondence quality: the well-matchedness criterion

Between the abstract content and the visible marks sits a mapping, and the quality of that mapping has its own name in the logical literature: well-matchedness (Gurr), or iconicity in the Peircean sense — the property that relations among graphical elements directly reflect relations among the things represented, so that containment, overlap, and separateness of circles mirror subsumption, intersection, and disjointness of sets (Gurr 1999, via Jamnik et al.). Well-matchedness is the structural precondition for free rides: when the syntax–semantics correspondence is tight, the diagram's own geometry does part of the reasoning. When it is loose or arbitrary, the viewer must maintain the mapping in working memory, and the representational advantage evaporates.

Tversky's program on the cognitive origins of graphic conventions shows how much of this correspondence is grounded in natural rather than stipulated mappings. In production and interpretation experiments, people spontaneously converge on a small vocabulary of schematic figures whose forms suggest meanings: lines function as paths and connectors and are therefore used for trends and routes, closed forms (blobs, bars) function as containers and are used for discrete categories, crosses mark intersections, and arrows mark directed action (Tversky, Zacks, Lee & Heiser 2000). In the bar-versus-line studies, students interpreted lines as trends and bars as discrete comparisons even when the displayed variable was held constant — the graphic form itself carried an ontological suggestion (Zacks & Tversky 1999, in Tversky et al. 2000). Alikhani and colleagues later summarized the computational-linguistic evidence under the slogan that "arrows are the verbs of diagrams" (Alikhani et al. 2018).

This literature yields a general principle with direct design force: a diagram communicates best when the type of visual relation (connection, containment, adjacency, direction, magnitude) is congruent with the type of domain relation (dependency, membership, proximity, causality, quantity). Violations are not merely inelegant; they actively mislead, because viewers extract the suggestion carried by the form whether or not the creator intended it. A trend rendered as separated bars invites discrete comparison; unrelated entities joined by a connecting line invite a relational reading; an arrow placed for decoration invites a causal one. This is one of the mechanisms by which a diagram can be informationally accurate and communicatively false at the same time — every fact it states is checkable and true, yet the form whispers an additional, unintended proposition that the viewer receives for free. Controlling the artifact therefore means controlling not only what it asserts but what it suggests, and suggestion lives in the choice of spatial relation types, not in the legend.

3. The decomposition: six layers of diagrammatic communication

The model proposed here was arrived at by asking, across the surveyed traditions, a simple question: between "having information" and "a viewer recovering intended meaning," what must happen, in what order, and what can go wrong at each step? The traditions independently converge on the same stratification. Bertin separated the information from the graphic system that encodes it, and separated the plane from the retinal variables inscribed above it (Bertin 1967/1983). Mackinlay separated expressiveness (can the language state the facts at all, and only those facts) from effectiveness (does the particular sentence exploit the medium and the visual system) (Mackinlay 1986). Zhang and Norman separated abstract structure from isomorphic implementations (Zhang & Norman 1994). Moody separated semantic design from visual-syntax design and showed software notations are routinely evaluated on the former while neglecting the latter (Moody 2009). The six layers below are the synthesis; they are ordered by the direction of creation, and comprehension traverses them in reverse.

3.1 Layer 0 — Frame: objective, audience, task, context

No diagram property is meaningful except relative to a frame: who will look, for what task, with what prior knowledge, in what medium, under what time budget, and against what success criterion. Vessey's cognitive fit theory established experimentally that performance improves when the representation's emphasized information (spatial vs. symbolic) matches the task's required information, and that this fit dominates user preference and even user skill as a predictor of performance (Vessey 1991, Vessey & Galletta 1991). Moody's principle of cognitive fit similarly insists that notations be adapted to audience and medium — novices struggle to recall and discriminate large symbol sets, so a dialect appropriate for experts can be unsuitable for newcomers (Moody 2009).

The frame layer also captures the strongest evidence in the whole literature that "good diagram" is viewer-relative: roughly one third of representative adult samples in the US and Germany had both low graph literacy and low numeracy, and people with low graph literacy do not benefit from standard visual displays that help everyone else (Galesic & Garcia-Retamero 2011). Even elementary operations are not universal: in those samples, about 15–17% of adults could not read a value off a fully labeled bar chart, and only about one in six noticed when two charts were not comparable because their axes were unlabeled (Galesic & Garcia-Retamero 2011). A diagram cannot be evaluated in the abstract; it can only be evaluated for a specified viewer population and task. Failure at this layer is total and invisible from the artifact: the wrong question was answered beautifully, or the right question was answered for a viewer who does not exist.

3.2 Layer 1 — Content and abstraction: selection, omission, granularity

Before anything is drawn, the creator decides what subset of the available information the diagram exists to convey, and at what granularity. This is the least discussed and most consequential layer. The coherence principle from multimedia learning — people learn better when extraneous material is excluded, supported in 23 of 23 experimental tests with a median effect size of 0.86 — is content selection evidence (Mayer, Cambridge Handbook chapter). So is the seductive-details literature: interesting but irrelevant additions reliably depress retention and transfer (small-to-medium and medium effects respectively across 39 experimental effects), apparently because they divert schema activation toward the irrelevant content (Rey 2012 meta-analysis, Kienitz et al. 2023).

Abstraction level is the second decision. Stenning and Oberlander's specificity analysis shows that committing to specifics aids processibility but forfeits generality (Stenning & Oberlander 1995); Moody's graphic economy principle operationalizes the same trade-off as a budget on distinct symbols, recommending roughly half a dozen before discriminability and recall degrade (Moody 2009, summarized in Ziehmann et al. 2020). The working-memory side of the constraint is element interactivity: intrinsic load rises with the number of elements a viewer must hold simultaneously to understand the message, so a diagram whose comprehension requires integrating fifteen simultaneous entities is a different cognitive object from one requiring four — even if both are "correct." Content-layer failures are therefore of three kinds: omission (needed information absent), excess (unneeded information present and taxing), and over/under-specificity (the granularity commits to more or less than the message requires).

3.3 Layer 2 — Structural schema: the spatial form of the dominant relations

Given selected content, the creator must choose the abstract spatial schema: Is this a linear sequence, a branching flow with cycles, a containment hierarchy, a network of typed relations, a juxtaposition for comparison, a scaled magnitude mapping, a spatial likeness? The brief asked us not to start from a taxonomy of types, and the literature shows why the schema choice is better understood as a structural mapping decision than as picking from a catalog. Gurr's well-matchedness criterion evaluates precisely this layer: does the visual relation structure mirror the semantic relation structure (Gurr 1999)? Vessey's cognitive fit supplies the task side (Vessey 1991), and Shimojima's free-ride analysis predicts the payoff when the match is tight (Shimojima 2015).

Empirically, the schema decision dominates downstream effort. Shah, Mayer and Hegarty showed that the same dataset displayed so that the relevant comparisons form perceptually unified visual chunks (connected points on a line, adjacent bars) is interpreted correctly far more often than a display in which the relevant information is scattered across chunks — and that this effect of perceptual organization is stronger than the effect of graphic format (bar vs. line) itself (Shah, Mayer & Hegarty 1999). In other words, what determines comprehension is whether the schema makes the task-relevant relational structure coincide with the perceptual group structure. Cheng's program on Law-Encoding Diagrams shows the extreme of schema power: representational systems that capture the laws of a domain in their spatial structure (thermodynamic diagrams, and historically Galileo's kinematic diagrams) support whole repertoires of reasoning that unencoded diagrams cannot (Cheng 1996, Cheng 1997). Schema failure is the deepest failure mode: no amount of careful rendering repairs a structure that forces the viewer to compute what could have been shown.

3.4 Layer 3 — Encoding: assigning meaning to visual variables and symbols

Encoding is the layer where the tradition of graphic semiology lives. Bertin's analysis separated the plane (two positional dimensions, the strongest variables) from the retinal variables (size, value, texture, hue, orientation, shape) and characterized each variable by its level of organization — whether it can express association (difference), selection, order, or quantity — establishing, for instance, that only size and position can carry quantity directly while hue is an unordered, associative variable (Bertin 1967/1983). Mackinlay turned this into a computable criterion: a design must be expressive (encode all and only the intended facts, with no spurious implications) and effective (rank channels by how accurately the visual system decodes them for the data type at hand) (Mackinlay 1986).

The accuracy ranking is one of the best-replicated empirical results in the field. Cleveland and McGill's experiments ordered elementary perceptual tasks: position on a common scale most accurate, then position on nonaligned scales, then length/direction/angle, then area, then volume/curvature, then shading and saturation least accurate (Cleveland & McGill 1984). Heer and Bostock replicated the ranking with crowdsourced subjects and extended it (rectangular area judgments match circular ones on average but degrade at extreme aspect ratios), simultaneously validating a cheap methodology for perceptual evaluation (Heer & Bostock 2010). Complementary evidence comes from preattentive vision research: features such as hue, orientation, size, and motion are processed in parallel within roughly 50–250 ms and support "pop-out," whereas conjunctions of features require serial search — so a distinction encoded in a single preattentive channel is nearly free, and one encoded as a conjunction is expensive (Healey, Perception in Visualization, Treisman via CUNY chapter).

The symbol side of encoding is governed by semiotic constraints that Moody codified as the first three principles of notation design: semiotic clarity (a one-to-one mapping between symbols and concepts; he names the four failure modes symbol redundancy, overload, excess, and deficit), perceptual discriminability (symbols must be visually distinguishable, with shape the primary variable — the "primacy of shape"), and semantic transparency (the appearance of a symbol should suggest its meaning where possible) (Moody 2009). Tversky's findings add that some encodings are pre-empted by natural graphic conventions — lines, blobs, crosses, and arrows arrive with meanings attached (Tversky et al. 2000). Encoding failures split into ambiguity (one mark, several meanings), opacity (meaning must be looked up for every mark), mis-assignment (quantitative data on an unordered channel; nominal data on a magnitude channel), and convention violation (arrows that do not mean direction; connecting lines between things meant to be contrasted).

3.5 Layer 4 — Composition and layout: arrangement, grouping, and the path of attention

Composition determines what is seen together, in what order, and with what effort. The grounding regularities are the Gestalt grouping principles — proximity, similarity, good continuation, closure, common fate, and the newer, experimentally validated principles of common region and element/uniform connectedness, for which quantitative laws and additive-combination results now exist (Wagemans et al. 2012). Grouping is not decoration: because viewers encode a diagram as a set of visual chunks, the grouping decides which comparisons are easy; Shah, Mayer and Hegarty's demonstration that chunk-congruent displays yield correct trend descriptions while chunk-incongruent ones do not is the canonical evidence (Shah, Mayer & Hegarty 1999).

For node-link compositions — the family that covers architectures, ER models, networks, and flowcharts — the empirical literature is unusually direct about costs. Purchase's experiments established that minimizing edge crossings is "by far the most important" aesthetic for graph-reading performance, followed by bends, with symmetry inconclusive and minimum-angle and orthogonality insignificant in her comparisons (Purchase 1997/2002, summarized in Huang & Eades). Ware, Purchase, Colpoys and McGill then built an actual cost model with regression: on a shortest-path task, 100 degrees of path bendiness added about 1.7 seconds and each crossing on the path about 0.65 seconds of response time, so one crossing costs about as much as 38° of continuity loss — and, crucially, crossings on the task-relevant path mattered, not the total crossings in the drawing (Ware et al. 2002). Follow-up eye-tracking work added crossing angle as a factor (performance degrades as crossings become more acute) and refined the picture with a caveat worth remembering: for some tasks, general disarrangement rather than local crossings is what slows comprehension (Huang et al., IEEE SMC).

Attention guidance is the third sub-decision of composition. The signaling principle — cues that highlight the organization of essential material improve learning, median effect size 0.41 across 24/28 tests — and the split-attention effect — learners forced to integrate physically separated but mutually referring information (a numbered key beside a diagram) incur extraneous load and learn less than when text is physically integrated at the point of reference — are among the most replicated results in instructional psychology (Mayer, Cambridge Handbook, Chandler & Sweller tradition). Spatial contiguity (words near the picture parts they explain) carries a median effect size of 1.10, one of the largest in the entire multimedia literature. Composition failures are the familiar ones: unfindable entry points, reading order fighting the layout, related elements scattered, labels exiled to legends, and flow that crosses itself into illegibility.

3.6 Layer 5 — Perceptual surface: legibility, discriminability, salience, clutter

The final layer is the rendering surface at which the visual system actually meets the artifact: sizes, contrasts, fonts, colors, densities. The governing constraint is simply that no semantic or structural virtue survives illegibility. Empirical anchors here include the discriminability work underlying Moody's principles (visual distance, redundant coding, perceptual pop-out) (Moody 2009) and the computational clutter literature: Rosenholtz and colleagues operationalized feature congestion (the difficulty of adding a new salient item to a display), subband entropy, and edge density as image-computable clutter measures that predict visual search times and human clutter judgments, with the clutter–search-time relationship approximately exponential (Rosenholtz et al. 2007).

A 2025 crowdsourced study of 1,800 visualization images sharpened the picture: perceived visual complexity is predicted by both low-level image properties and object-level structure — edge density dominates for node-link diagrams, feature congestion dominates where color and texture vary, and the number of corners and distinct colors are robust general predictors; notably, text showed a U-shaped relation, moderate annotation reducing perceived complexity and excessive annotation increasing it (What Makes a Visualization Complex, 2025). Surface-layer failures are the most visible to a naive critic but — and this matters for evaluation — they are the least diagnostic of communication failure: a clean, beautiful diagram can still fail at every deeper layer, while an unpolished one can succeed at all of them.

3.7 Why layers, not types

The decomposition is deliberately not a taxonomy of diagram species, because the evidence shows that the same six decision-points recur under every species label, while the species labels themselves bundle different layers inconsistently. "Flowchart" is a schema choice (directed process graph) plus a convention set; "ER diagram" is a schema choice (typed network) plus a notation; "infographic" is a frame choice (broad audience, low guaranteed literacy) plus surface styling. Blackwell and Engelhardt's meta-taxonomy shows that any flat classification silently picks one or two of the operative dimensions and ignores the rest (Blackwell & Engelhardt 2002); Engelhardt's visual-grammar work shows that arbitrary graphics decompose into nested spaces and objects with syntactic functions, confirming that compositionality, not category, is the right unit of analysis (Engelhardt 2002).

The practical payoff of the layered model is diagnostic resolution. When a diagram fails, the framework locates the failure: frame (wrong task/audience), content (omission/excess/wrong granularity), schema (structural mismatch, lost free rides, false implications), encoding (ambiguity, mis-assigned channels, broken conventions), composition (search cost, crossings, split attention, overload), or surface (illegibility, clutter, crowding). Because each layer has its own evidence base and its own metrics (Section 7), diagnosis translates directly into repair instructions — which is what the brief demanded of an operational model. The same resolution is what makes the model usable by AI agents as well as humans: an agent generating a diagram can audit each layer in turn with cheap, mostly mechanical checks (does the spec compile? is every symbol unique? how many crossings on task paths? how distant are labels?), whereas a type-based answer ("make it a better flowchart") gives an agent nothing actionable to test. Layers convert criticism into a procedure.

4. The viewer's side: the comprehension pipeline and its moderators

A complete model must explain the inverse process: how a viewer recovers meaning. The dominant cognitive models of graph and diagram comprehension — Bertin's task analysis, Pinker's schema theory, and the Shah–Carpenter process account — converge on a staged pipeline (Shah & Freedman 2009, Freedman & Shah 2002, via CogSci proceedings). First, preattentive perception registers primitive features in parallel; second, parsing and chunking group the marks into visual objects under Gestalt principles; third, schema activation brings learned diagram conventions to bear (a line going up means increase; an arrow means flow); fourth, referent mapping connects visual relations to domain relations; fifth, inference and integration update the viewer's mental model. The early stages are fast, automatic, and roughly uniform across viewers; the later stages are slow, knowledge-hungry, and highly variable.

Three findings about the late stages have direct design consequences. Shah and Carpenter showed that even line-graph comprehension has conceptual limits: viewers err precisely when the required answer demands a mental transformation rather than a pattern association (Shah & Carpenter 1995, in Shah & Freedman 2009). Gattis and Holyoak showed that referent mapping itself is directional and structured: people map conceptual relations onto spatial relations preferring mappings that respect the spatial structure's natural directionality (Gattis & Holyoak 1996, in Shah & Freedman 2009). And the literacy instruments — the 13-item graph literacy scale, Boy et al.'s IRT-based tests, the 53-item VLAT and its 12-item Mini-VLAT — demonstrate that comprehension skill is a measurable, widely distributed viewer trait that moderates whether any given display works at all (Galesic & Garcia-Retamero 2011, Boy et al. 2014, Lee et al. 2017).

The creator-side implication is a design asymmetry that the framework exploits throughout: invest in making early-stage processing free (preattentive encoding, clean grouping, immediate legibility), because that capacity is universal; and assume as little late-stage machinery as the frame permits (minimize required transformations, honor existing conventions, teach nothing that need not be taught), because that capacity varies. Every replicated design principle in the literature — spatial contiguity, signaling, channel ranking, crossing minimization — can be re-derived from this asymmetry, which is evidence that the pipeline model, not the principle list, is the real generalization. The asymmetry also explains the mixed track record of design advice: maxims that happen to align with early-stage machinery ("minimize crossings," "put labels next to what they name") replicate robustly across domains, while maxims that depend on late-stage machinery ("avoid 3D," "never use pie charts," "always show the full detail") succeed or fail with the audience's literacy and the task, which is why the literature on them reads as decades of conflicting exceptions. The framework's advice is therefore stated conditionally — against viewer, task, and layer — rather than absolutely.

5. The creation framework: a seven-step operational loop

5.1 From model to procedure

The six layers, traversed in creation order, yield a procedure that applies to arbitrary information and arbitrary communication objectives. It is presented as a loop rather than a pipeline because the literature is unanimous that verification re-enters upstream: Shah, Mayer and Hegarty redesigned graphs and re-tested comprehension experimentally (Shah, Mayer & Hegarty 1999), and the graph-drawing community evaluates layouts by task performance, not by fiat (Ware et al. 2002). The loop structure is also what the strongest automated systems converge on independently: DiagrammerGPT generates a diagram plan and then refines it through a planner–auditor feedback cycle before rendering — a machine instantiation of exactly this verify-and-return pattern (DiagrammerGPT 2024). Each step below states the decision, the reasoning operation the creator performs, and the governing evidence; nothing in the procedure requires domain knowledge beyond the content itself, which is what makes it applicable to unfamiliar diagramming problems.

Step 1 — Frame the contract. Write down: the viewer (expertise, diagram literacy, domain knowledge), the task (what the viewer should be able to do or decide after reading), the one-to-three intended messages, the medium and final display size, and a testable success criterion ("a new engineer can name the three services that call the payment API without consulting anyone"). The cognitive-fit results make this step non-optional: representation choice must be derived from task type, not habit, and representation–task fit outweighs both user preference and user skill as a predictor of performance (Vessey 1991, Vessey & Galletta 1991). Concretely, the contract constrains every later step: a low-literacy public audience caps usable conventions at Step 4, a lookup task demands different chunking than a trend task at Step 5, and the success criterion becomes the test instrument at Step 7. An agent that skips this step produces diagrams that are answerable to nothing.

Step 2 — Audit the information. List the entities, relations, quantities, and processes available; rank them by relevance to the contract; identify the element interactivity of the intended message (how many things must be held jointly in mind). Cut what does not serve the message — the coherence and seductive-details results make deletion the highest-yield editing operation available, with median effect sizes around d ≈ 0.86 across dozens of tests (Mayer, Cambridge Handbook, Rey 2012). Then choose the granularity: specific enough to support the intended inferences, no more specific than the message warrants, since every drawn token forces a commitment that prose could have left open — the over-specificity warning from Shimojima (Shimojima 2015). If the audit leaves more elements than one view can carry, plan modularization now (hierarchy, linked views), because no later layout step can rescue an overloaded content set (Moody 2009).

Step 3 — Choose the structural schema. Identify the dominant relation type in the message (sequence/flow, hierarchy/containment, typed network, juxtaposition, magnitude mapping, spatial likeness) and pick the spatial schema whose intrinsic relations mirror it — the well-matchedness test (Gurr 1999). Check the free-ride question explicitly: which intended inferences should be visible rather than computed? A dependency chain that matters should form a traceable path; a containment fact that matters should be drawn as containment; a comparison that matters should align the compared items side by side. If a conclusion matters and the schema does not make it perceptually present, change the schema, not the caption — captions are read serially and late, while structure is perceived first. Cheng's functional-roles framework is a useful checklist here: what forms of reasoning should this artifact support — read-off, search, simulation, comparison, discovery (Cheng 1996)? Where two schemas both fit, prefer the one whose unintended implications are least harmful, because every schema asserts more than you meant it to (Shimojima 2015).

Step 4 — Design the encoding. Assign data types to channels respecting the accuracy ranking (position > length/angle > area > shading) and the level-of-organization constraint (quantity only on position/size; order on size/value; nominal distinction on hue/shape/orientation) (Cleveland & McGill 1984, Bertin 1967/1983). Enforce semiotic clarity — one symbol for one concept, with no symbol overload, redundancy, excess, or deficit — and give the most important distinctions the most discriminable treatments, using redundant coding (two channels for one critical distinction) where confusion would be costly (Moody 2009). Exploit preattentive channels for anything the viewer must find fast, honor natural conventions (lines connect, closed forms contain, arrows direct) or flag deliberate deviations loudly, because viewers will read the convention anyway (Tversky et al. 2000). Finally, keep the distinct-symbol budget near half a dozen; beyond it, recall and discriminability degrade for all but expert users (Moody 2009 via Ziehmann).

Step 5 — Compose the layout. Place elements so that the grouping structure coincides with the message structure (relevant comparisons become visual chunks), the reading order coincides with the inference order, related elements are proximal, labels sit at their referents rather than in a remote key (split-attention elimination), flow runs in one dominant direction, and crossings and bends on task-critical paths are minimized against the measured cost model (Shah, Mayer & Hegarty 1999, Ware et al. 2002, Chandler & Sweller tradition). The chunking decision dominates: what is connected or enclosed together is what the viewer will compare, so group by the comparisons the contract requires, not by the convenience of the drawing tool. Reserve one strong salient entry point — a title block, a start node, a highlighted region — for the viewer's first fixation, because scanpaths need an anchor, and order the remaining attention through alignment and signaling rather than relying on numbered hints (Mayer, Cambridge Handbook).

Step 6 — Render the surface. Verify discriminability at the final display size and medium — shapes, colors, and line weights that are separable on a design canvas may fuse in a slide deck or a printout — using Moody's visual distance and redundant coding, and keep the number of simultaneously strong signals small: a highlight that competes with five others is not a highlight, since salience is relative to local feature congestion (Moody 2009, Rosenholtz et al. 2007). Check clutter with image-computable proxies (feature congestion, edge density) or the simpler corner and color counts validated against perceived complexity (VisComplexity 2025). Add text where it disambiguates or orients — the U-shaped text–complexity relation says moderate annotation reduces perceived complexity — and re-check that rendering did not silently break Step 4's channel assignments: a late color change can demote a quantity from an ordered to an unordered channel without anyone noticing.

Step 7 — Verify and diagnose. Run the expressiveness audit: trace a handful of intended facts and confirm each is readable, then hunt for spurious implications — orderings, magnitudes, adjacencies, and directions the drawing asserts that the content does not (Mackinlay 1986). Follow with a task test: give at least one naive reader from the target population the contract's questions and watch where they look, where they stall, and what they misread; crowdsourced perceptual testing at small scale is a validated and cheap way to do this (Heer & Bostock 2010). Map every observed failure to its layer using the checklist in Section 5.2 and repair at that layer — not at the surface by default, which is the universal amateur error (recoloring a diagram whose problem is structural). For AI agents, the same step is executable as self-critique: parse the generated artifact back into propositions and diff them against the intended content, the strategy that DiagramEval operationalizes as node- and path-alignment precision–recall (DiagramEval 2025).

5.2 The diagnostic table

The loop's value is concentrated in its return path: the mapping from observed symptoms to the layer at fault. Without such a mapping, critique degenerates into undirected restyling — the creator senses that the diagram "isn't working" and changes whatever is easiest to change, usually colors and fonts, while the actual defect sits two layers deeper in the schema or the content selection. The symptom vocabulary below is deliberately behavioral (what a reader does or fails to do) rather than aesthetic (what the artifact looks like), because only behavioral symptoms are observable without begging the question of what a good diagram looks like. The table condenses the framework for operational use, including by an AI agent critiquing its own draft between generation and delivery.

Symptom observed in a reader or audit	Layer at fault	Repair
Reader answers the wrong question confidently	L0 Frame	Rewrite the contract; re-derive schema and encoding from the actual task
Needed fact is absent from the drawing	L1 Content	Add content at the granularity of the intended inference
Reader cannot integrate all relevant parts at once	L1 Content / L4 Composition	Raise abstraction; decompose into modules or multiple views
Conclusion requires multi-step mental computation	L2 Schema	Re-structure so the inference becomes a free ride
Diagram implies something false (order, causality, magnitude)	L2 Schema / L3 Encoding	Remove or correct the spurious spatial implication
Reader confuses two element types	L3 Encoding / L5 Surface	Increase visual distance; redundant coding; re-assign channels
Viewer reads quantity from hue or shape	L3 Encoding	Move quantity to position or size per channel ranking
Long search time; reader scans randomly	L4 Composition	Align chunks with the message; add signaling; establish entry point
Reader flips between drawing and legend	L4 Composition	Integrate labels at referents (split-attention repair)
Path tracing fails; edges untraceable	L4 Composition	Reduce crossings on task paths; straighten continuity (cost model)
"Too busy"; viewer can't say where to look	L5 Surface	Cut elements; reduce feature congestion; restore salience budget
Elements illegible at display size	L5 Surface	Enlarge, increase contrast, simplify marks — then re-audit L4

Two cautions complete the procedural account. First, the framework is evidence-graded, not evidence-uniform: Steps 1–5 rest on replicated experimental results, while parts of Step 6 rest on conventions of professional practice whose empirical base is thinner — the Physics of Notations, for instance, has been shown to be cited far more often than it has been empirically tested (Ziehmann et al. 2020). Second, for diagrams that are working artifacts rather than one-shot messages — an architecture model a team will edit for years — a second family of properties becomes decisive: Green and Petre's cognitive dimensions (viscosity, hidden dependencies, secondary notation, premature commitment, abstraction gradient), which measure the cost of changing a notation instance, not just reading it (Green & Petre 1996). A maintainable diagram is designed under both frameworks at once.

6. The controllable-variable map

6.1 The control surface

The brief asks for the "underlying control surface" available to someone constructing a diagram: what can be manipulated, why it matters, and what consequences different choices have. Aggregating the surveyed evidence yields the map below. Variables are grouped by layer; "effect" columns cite the strongest available evidence, and the final column names the characteristic failure mode. Two cross-cutting observations precede the tables. First, the variables interact multiplicatively rather than additively — Gestalt research shows grouping principles combine at least additively and sometimes override each other (Wagemans et al. 2012), and the multimedia literature shows contiguity and coherence effects compound (Mayer, Cambridge Handbook). Second, nearly every variable exhibits an inverted-U somewhere: some annotation beats none and too much hurts (VisComplexity 2025); some embellishment is harmless or even mnemonic while relevance-mimicking decoration harms (Bateman et al. 2010, Rey 2012).

Frame and content variables (L0–L1).

Variable	Direction of effect	Evidence	Failure mode at the extreme
Task–representation fit	Match spatial tasks to spatial schemas, symbolic to symbolic; fit dominates preference	Vessey 1991	Correct diagram, wrong task: performance collapses
Audience calibration (literacy, expertise)	~1/3 of adults fail basic graph tasks; low-literacy viewers do not benefit from standard displays	Galesic & Garcia-Retamero 2011	Diagram invisible to its actual audience
Content scope	Excluding extraneous material: d ≈ 0.86 (23/23 tests)	Mayer, Cambridge Handbook	Seductive-detail diversion; or austere under-informativeness
Element count / interactivity	Working-memory joint-processing limit; symbol-set budget ≈ 6 distinct types	Moody 2009 via Ziehmann	Comprehension requires holding too much at once
Granularity / specificity	Specificity aids processibility, blocks generality	Stenning & Oberlander 1995	Spurious particulars; or unusable abstraction
Modularization	Explicit complexity-management mechanisms (hierarchy, views) restore tractability at scale	Moody 2009; C4 model	One unreadable mega-diagram

Structure and encoding variables (L2–L3).

Variable	Direction of effect	Evidence	Failure mode at the extreme
Structural correspondence (well-matchedness)	Tight syntax–semantics mapping yields free rides; loose mapping taxes working memory	Shimojima 2015, Gurr 1999	Viewer must compute everything; false implications
Form–relation congruence	Lines read as trends/paths, closed forms as containers/discrete, arrows as verbs	Tversky et al. 2000, Alikhani et al. 2018	Form suggests a meaning the content lacks
Channel assignment	Accuracy ranking: position > length/angle > area > shading; quantity only on position/size	Cleveland & McGill 1984, Heer & Bostock 2010	Magnitudes read from unordered channels
Semiotic clarity (1:1 symbol↔concept)	Redundancy/overload/excess/deficit each degrade learnability and error rate	Moody 2009	Same mark, two meanings; legend look-up for every mark
Semantic transparency	Appearance suggests meaning: faster learning, fewer errors	Moody 2009 via Ziehmann	Opaque or perverse symbols
Redundant encoding (2 channels, 1 distinction)	Improves discriminability; costs channels	Moody 2009	Channel exhaustion; visual noise

Composition and surface variables (L4–L5).

Variable	Direction of effect	Evidence	Failure mode at the extreme
Chunk–message alignment	Comprehension tracks whether task-relevant info forms visual chunks; beats format choice	Shah, Mayer & Hegarty 1999	Right data, wrong groupings: trends invisible
Edge crossings on task paths	≈ +0.65 s per crossing (path task); "by far most important" aesthetic	Ware et al. 2002, Purchase 1997/2002	Untraceable flows
Path continuity (bendiness)	≈ +1.7 s per 100° of accumulated deviation	Ware et al. 2002	Zigzag paths slow search
Crossing angle	Acute crossings degrade performance more than near-orthogonal	Huang et al. IEEE SMC	Ambiguous junctions
Label–referent distance	Split attention: physical integration of mutually referring info improves learning; spatial contiguity d ≈ 1.10	Chandler & Sweller tradition, Mayer, Cambridge Handbook	Legend-driven search-and-match
Signaling / entry point	d ≈ 0.41 for signaling organization	Mayer, Cambridge Handbook	No entry point; random scanpath
Clutter / feature congestion	Exponential rise of search time with congestion; edge density dominates node-link diagrams	Rosenholtz et al. 2007, VisComplexity 2025	Everything salient = nothing salient
Text volume	U-shaped: moderate annotation reduces perceived complexity; excess increases it	VisComplexity 2025	Wall of text, or unlabeled mystery

6.2 Interaction structure

Three interactions recur strongly enough to be stated as rules of the control surface. Scope × layout: as element count grows, composition's degrees of freedom shrink — crossings and congestion rise superlinearly, so content selection is the primary lever on layout quality, not layout algorithms (Rosenholtz et al. 2007, Purchase metrics tradition). Encoding × audience: channels that are preattentive for a literate viewer may be invisible to a novice, because schematic conventions are learned; Galesic and Garcia-Retamero's predictive-validity experiments show identical displays helping high-literacy and failing low-literacy viewers (Galesic & Garcia-Retamero 2011). Salience × signaling: salience is a conserved budget — feature congestion is literally defined as the inability of a new item to draw attention in a busy feature field — so every highlighted element devalues every other (Rosenholtz et al. 2005/2007).

A final, often-missed interaction is convention × transformation cost: violations of deep conventions (left-to-right time, up-is-more, arrows as direction) are not merely slower — they systematically produce wrong answers rather than slow right ones, because the form's suggestion is extracted pre-interpretively (Tversky et al. 2000, Galesic & Garcia-Retamero 2011, item Q12). This asymmetry — confusion costs more than delay — should set the creator's priorities: a layout that is merely slow can be tolerated where the audience has time, but an encoding that invites a confident misreading fails even for patient viewers. The same logic governs the bar-versus-line findings: the graphic form biases the interpretation toward trend or comparison before any deliberate reading begins (Zacks & Tversky 1999, in Tversky et al. 2000). Where the tables above mark a variable as evidence-backed, the failure modes are likewise observed, not conjectured; where the evidence is thinner, the entry says so explicitly.

7. A measurable evaluation framework

7.1 Decomposing "good diagram"

The vague predicates — clear, easy to understand, too complicated — decompose into five measurable properties, each anchored at known layers: fidelity (the diagram states the intended facts, L1–L2), expressive adequacy (it states them without spurious implications, L2–L3), access cost (the time, effort, and errors a viewer spends recovering a specified message, L3–L5), attentional guidance (the viewing sequence reaches the right elements in the right order, L4–L5), and residue (what the viewer retains and can transfer afterward, L0–L1). A diagram can score high on fidelity and high on access cost simultaneously — an accurate but exhausting diagram — which is precisely the phenomenon the single-word predicates cannot express.

The evaluation architecture has three tiers, ordered by cost and by evidentiary strength: outcome measures (did communication succeed?), process measures (where did the viewer's processing go?), and artifact measures (what proxies can be computed without humans?). This ordering mirrors the evaluation-scenario taxonomy that Lam and colleagues distilled from over 800 information-visualization publications — evaluating user performance, user experience, communication, algorithms, and work practices are distinct scenarios requiring distinct methods (Lam et al. 2012). The tiers are complementary: artifact metrics screen cheaply at scale (the only realistic option for evaluating AI-generated diagrams in bulk), process metrics diagnose causes, and outcome measures are the only ones that certify success.

7.2 Tier A — Outcome measures (established empirical measures)

The gold standard is task performance against the communication contract. Canonical instruments: comprehension-question accuracy on tasks of graded depth — the three-level scheme "read the data / read between the data / read beyond the data" used by the graph-literacy scale, where representative adult samples averaged 85–86% correct on level 1 but only 63–66% on levels 2–3 (Galesic & Garcia-Retamero 2011); time-on-task and error rate, the dependent variables of the graph-aesthetics literature (Ware et al. 2002); free recall and transfer tests, the outcome measures of the multimedia-learning experiments (Mayer, Cambridge Handbook); and downstream decision or maintenance quality, as in the controlled experiment where developers with UML documentation produced changes with a statistically significant 54% higher functional correctness at the cost of an insignificant ~14% time overhead (Arisholm/Dzidek et al., Simula).

Two methodological requirements follow from the literacy findings. Samples must be stratified or screened by viewer literacy — otherwise results mix artifact properties with viewer properties; validated short instruments exist for this (the 13-item graph literacy scale; Mini-VLAT's 12 items, which correlate strongly with the full 53-item VLAT and take only minutes) (Galesic & Garcia-Retamero 2011, Pandey & Ottley, Mini-VLAT). The second requirement is task realism: outcome questions should reproduce the decisions the frame contract names, because accuracy on artificial recall items and accuracy on the intended task can dissociate. And crowdsourced administration is validated: Heer and Bostock showed lab-grade graphical-perception effects replicate on Mechanical Turk at scale, with qualification tasks and verifiable questions preserving data quality — making Tier-A evaluation cheap enough for routine use by teams and by automated pipelines (Heer & Bostock 2010).

7.3 Tier B — Process measures (established empirical measures and instruments)

Process measures locate where a diagram is costing the viewer. Eye tracking supplies the richest battery: fixation counts and dwell time per area of interest (element importance/noticeability), time-to-first-fixation (attention-getting properties), AOI transition matrices (integration demand — repeated diagram↔legend transitions are the signature of split attention), and scanpath regularity (efficiency of search) (Bylinskii et al., fixation metrics, Kurzhals et al., eye-tracking evaluation). Cognitive-load instruments supply the effort dimension: the Paas 9-point mental-effort scale (re-test reliability ≈ 0.90) and NASA-TLX; both are sensitive to intrinsic and extraneous load manipulations in multimedia settings, with the TLX's composite score showing particular sensitivity to extraneous-load differences in at least one controlled comparison (AHRQ cognitive load brief, Wiebe et al. 2010). Saccade-derived metrics add a further diagnostic cue: frequent long saccades indicate the viewer is searching rather than reading, which points the diagnosis at composition rather than encoding (Kurzhals et al. 2015).

Think-aloud and retrospective protocols complete the tier, especially for diagnosing referent-mapping failures (L3) that behavioral measures only hint at: a viewer verbalizing "so the arrow from billing to shipping must mean it ships the bill" reveals an encoding ambiguity that a timer would register only as unexplained slowness. Process measures are best used comparatively — two candidate diagrams, same tasks, same population — because absolute calibration of fixations and effort ratings is weak, while relative differences are robust and actionable; the comparative use is exactly how the split-attention and signaling effects were established experimentally (Chandler & Sweller tradition). For teams without a lab, a five-second exposure test (show the diagram briefly, ask what the viewer noticed first and what they think it says) is a serviceable low-cost substitute that probes preattentive structure and entry points directly, in the spirit of the exposure-duration methods used in preattentive vision research (Healey, Perception in Visualization).

7.4 Tier C — Artifact and proxy measures (computable without humans)

This tier is decisive for the report's applied purpose, because AI-generated diagrams must be evaluable at scale without human judges in the loop for every artifact. The literature supplies a surprisingly rich set of computable proxies, organized below by the quality property each one measures; none of them certifies communication success on its own, but together they form an inexpensive screening battery that catches the large majority of defects the creation framework warns against, and each is labeled with its evidence grade so that downstream users know how much trust to place in it. The organizing principle throughout is that a proxy is only ever as good as the behavioral finding it operationalizes — crossing counts borrow their authority from timed path-tracing experiments, clutter indices from search-time regressions, and channel rankings from proportion-judgment accuracy — so the tier reads as a catalog of effects with formulas attached, not as a list of numerology.

Validity and fidelity (syntax + semantics). For code-generated diagrams (Mermaid, PlantUML, Graphviz, SVG), syntax validity (does the specification compile and render?) is a binary established measure used by current benchmarks, alongside fine-grained structural checks such as activation and error-handling correctness in generated sequence diagrams (MermaidSeqBench, NeurIPS 2025). Semantic fidelity is measured as precision and recall over extracted structure: DiagramEval parses generated diagrams and reference material into directed graphs and computes node-alignment and path-alignment precision/recall — showing healthier distributions than CLIPScore, which is sensitive to superficial layout changes (DiagramEval 2025). VPEval decomposes generated images into object presence, counts, relationship correctness, and text correctness via visual question answering (DiagrammerGPT, COLM 2024).

Expressive adequacy (spurious implications). Following Mackinlay's "all and only the facts" criterion and Shimojima's over-specificity analysis, a computable audit extracts the propositions a viewer could read off (spatial, ordinal, causal) and checks each against the intended content: spurious-implication rate = |readable ∧ unintended| / |readable|. The components are established — expressiveness checking in Mackinlay's sense and free-ride/over-specificity analysis in Shimojima's — while their combination into this scalar is an adapted measure proposed here (Mackinlay 1986, Shimojima 2015). For programmatically generated diagrams the audit is tractable: the generator knows which propositions it intended, and the artifact's geometry can be re-parsed into the propositions it affords; the diff is the error signal. A spurious-implication rate near zero with high intended-fact coverage is the artifact-level analog of factual accuracy in text generation, and it deserves the same gatekeeping role in any evaluation pipeline.

Encoding effectiveness. Channel-rank compliance: for each quantitative mapping, the assigned channel is scored by its position in the Cleveland–McGill/Heer–Bostock accuracy ranking; violations (quantity on hue or shape; nominal distinction on size; order on hue) are counted and weighted by the importance of the encoded variable. The underlying regularity is one of the most replicated empirical results in visualization — the ranking held in the original laboratory experiments and again in crowdsourced replication — while its packaging as a per-diagram score is a proposed metric (Cleveland & McGill 1984, Heer & Bostock 2010). It is straightforward for agents generating diagrams programmatically, since channel assignments are explicit in the code; a linter over the diagram specification can flag mis-assignments deterministically, in the same way Mackinlay's APT system filtered inexpressive and ineffective designs automatically (Mackinlay 1986).

Layout cost. The graph-drawing tradition formalized aesthetic metrics (crossing number, total bends, crossing angles, node distribution, continuity) (Purchase 2002), and Ware et al. attached measured cognitive prices: an operational cost model for a task-critical path p is C(p) = β₁·len(p) + β₂·bendiness(p)/100° + β₃·crossings_on(p) + β₄·branches(p), with β₂ ≈ 1.7 s and β₃ ≈ 0.65 s from the fitted regression — the strongest existing candidate for a computable "readability score" of node-link diagrams (Ware et al. 2002). Crossing angle enters as a secondary correction, since acute crossings degrade performance more than near-orthogonal ones (Huang et al.). Two cautions keep the metric honest: the coefficients were fitted on spring-layout graphs for a shortest-path task, so absolute values should be treated as calibrated estimates rather than constants, and the model prices only path-relevant features — global tidiness is a separate, weaker predictor, as the conflicting crossings literature shows (Purchase 1997/2002).

Clutter and complexity. Feature congestion, subband entropy, and edge density are established image-computable clutter measures validated against both search time and perceived clutter (Rosenholtz et al. 2007); corner count, distinct-color count, and text-ink ratio are cheaper proxies validated against perceived complexity in 1,800 images, with the text relation U-shaped (VisComplexity 2025). Label–referent adjacency: the mean Euclidean distance (normalized by diagram diagonal) between each label and its referent, or the fraction of labels exiled to a remote legend, is a proposed metric operationalizing the split-attention effect, whose behavioral reality is among the most replicated in instructional science (Chandler & Sweller tradition).

Attentional structure. Saliency-model predictions can verify that the intended entry point is among the most salient regions of the artifact and that elements the creator means to highlight exceed the local salience threshold set by the surrounding feature field; the statistical saliency model that underlies the feature-congestion clutter measure provides exactly this machinery, formalizing salience as an outlier score against the local distribution of color, contrast, and orientation (Rosenholtz et al. 2005). This converts the vague instruction "make the important thing stand out" into a checkable inequality. Time-to-first-fixation on the designated entry element, measured on a small human sample, is the validated counterpart for teams that can run even minimal eye-tracking or webcam studies (Bylinskii et al., fixation metrics).

LLM-judge rubrics — with explicit caution. LLM-as-judge scoring on rubric dimensions (faithfulness, completeness, clarity) is now standard practice for generated diagrams (MermaidSeqBench), but 2026 rubric research shows naive rubrics can reduce judge accuracy below a no-rubric baseline, and rubric granularity must match the task type, with detailed rubrics helping reasoning tasks and hurting others; one study reports naive rubrics dropping judge accuracy from 55.6% to 42.9% on a judge benchmark (Rubrics survey 2026). Rubric judging is therefore graded here as an adapted measure requiring validation: before trusting an LLM judge to score diagram quality, its scores must be correlated against Tier-A human outcomes on a held-out sample, and its failure modes (leniency, self-preference, insensitivity to layout defects that VLMs themselves cannot see) must be characterized — current VLMs remain moderate at structured counting and relational grounding in architecture diagrams, which bounds what a VLM judge can even perceive (SADU 2026).

7.5 A composite score and a protocol for AI-generated diagrams

The defensible composite is gated, not averaged: Q = V · (w₁·E + w₂·L + w₃·A + w₄·C), where V is validity (0 if the artifact fails to render or states false content — no aesthetic virtue compensates), E is fidelity/expressiveness (node/edge precision–recall and spurious-implication rate), L is the layout-cost score (normalized inverse of C(p) plus clutter indices), A is attentional structure (entry-point salience, signaling presence), and C is convention/channel compliance. Weights are set per frame (an ER diagram for engineers weights E heavily; an editorial visual weights A and residue). This gating structure is a proposed metric, but each component is individually evidence-anchored, which is what the brief's grading requirement demands.

The full protocol for evaluating an AI diagram generator thus reads: (1) compute Tier-C metrics automatically on a stratified sample of outputs — validity gate first; (2) run a validated rubric-based LLM judge for content coverage, calibrated against human scores on a subset; (3) run a small Tier-A human task test (crowdsourced, literacy-screened) on the subset to estimate the artifact–outcome correlation and calibrate the proxies; (4) report the diagram family's failure-mode distribution across the six layers, not a single number. DiagrammerGPT's error analysis is the template: it found LLM diagram plans scored 4.96/4.72 on object presence/relations while the final rendered diagrams dropped to 2.96/3.36 — localizing the pipeline's failure at the rendering stage, exactly the kind of decomposition this framework is designed to produce (DiagrammerGPT 2024). Benchmarks for the viewer side already exist as well: AI2D for science-diagram understanding and SADU for software-architecture diagram understanding, the latter showing even the best VLMs remain moderate at structured counting and relational grounding (AI2D, SADU 2026).

8. Generalization analysis: the framework against eight different problems

The brief requires testing the framework against substantially different visual-communication problems — explaining a software feature, representing a codebase, documenting a process, representing entities and relationships, explaining a technical concept, comparing two concepts, illustrating an article, and creating an editorial visual — and identifying both what generalizes and where specialization begins. These eight cases are used strictly as test inputs, not as categories the framework adopts. The test method is uniform: for each case, identify which layers dominate the difficulty, check whether the layer-level evidence applies, and note where domain-specific machinery must be added. The table summarizes the eight cases; the analysis follows.

Communication problem	Dominant layers	What generalizes	Where specialization is required
Explain how a software feature works	L1 granularity, L2 process schema, L4 flow	Content pruning (coherence d≈0.86); flow direction; label adjacency	Domain conventions (icons, component vocabulary); level-of-detail ladders
Represent a codebase or architecture	L1 abstraction, L4 layout, working-artifact properties	Crossing/bend costs; modularization into views	Notation semantics (UML/C4); cognitive dimensions for maintenance (Green & Petre 1996)
Document a process or SOP	L2 sequence schema, L4 reading order	Sequence-as-path convention; chunking of steps; signaling	Decision-point formalisms; exception paths; role lanes
Represent entities and relationships	L2 network schema, L3 typing	Node-link cost model; semiotic clarity; edge typing channels	Cardinality/attribute formalisms; notation standards (ER/UML)
Explain a technical concept	L0 audience, L1 analogy choice, L3 transparency	Audience calibration; semantic transparency; free rides	Metaphor selection; mapping limits of the analogy
Compare two concepts	L2 juxtaposition schema, L4 alignment	Aligned juxtaposition enables structural alignment (Gentner & Markman 1997)	Choosing the alignable dimensions; symmetric treatment
Illustrate an article	L0 frame, L5 surface, residue	Fidelity to a caption-level message; clutter control	Editorial engagement goals; style conventions
Editorial / explanatory visual	L0, L1 selection, residue	One dominant message; memorability vs. precision trade	Persuasion ethics; embellishment judgment (see §9)

What generalizes fully. Across all eight cases, four things hold without exception: the frame contract (task and audience precede form, per cognitive fit (Vessey 1991)); content pruning and granularity control (coherence, seductive details, element interactivity); the correspondence requirement (well-matchedness and form–relation congruence, which is what makes arrows read as actions and closed forms as containers everywhere (Tversky et al. 2000)); and the perceptual floor (discriminability, clutter, preattentive channels, grouping). These are not "principles for technical diagrams" — they are consequences of how external representations offload computation and how the human visual system works, which is why they reappear, under different names, in cartography, instructional design, software engineering, and visualization.

Where specialization is unavoidable. Specialization enters at exactly two seams, and both are locatable in the model. The first seam is convention: every mature domain carries a learned symbol vocabulary (UML, BPMN, circuit schematics, musical notation), and the literacy findings imply that convention fluency is part of the audience model — Moody calls the audience-relative version cognitive fit, and the UML maintenance literature shows measurable gains from documentation only among practitioners (Galesic & Garcia-Retamero 2011, Arisholm/Dzidek et al.). The second seam is artifact lifecycle: when the diagram is a living working artifact rather than a one-shot message, editability properties (viscosity, hidden dependencies, secondary notation, premature commitment) become first-class design constraints, and Green and Petre's cognitive dimensions supply the vocabulary (Green & Petre 1996). Notably, both seams plug into layers of the same model — conventions into L3, lifecycle into L1/L4 — which is evidence that the decomposition generalizes even where the specific rules do not.

Worked contrast: architecture vs. editorial. Representing a codebase exercises L1 (abstraction ladders — the C4 model's four zoom levels are a professional-convention solution to complexity management (C4 model guide)) and L4 (crossing/continuity costs dominate, per the node-link evidence (Ware et al. 2002)); fidelity is verifiable against the code itself, so Tier-C node/edge precision–recall is meaningful (DiagramEval 2025). An editorial visual inverts the profile: the message is one sentence, the audience is maximally heterogeneous in literacy, residue (memorability) outranks lookup precision, and the embellishment literature — not the graph-aesthetics literature — is the relevant evidence (Bateman et al. 2010). Same six layers; radically different weight vector. That is the strongest available demonstration that the decomposition, rather than any diagram typology, is the correct level of generality.

9. Where the evidence conflicts — and what the conflict teaches

Embellishment. Tufte's data-ink principle prescribes deleting non-data ink; Bateman and colleagues found Holmes-style embellished charts were described more accurately and remembered significantly better after three weeks, with no comprehension penalty (Bateman et al. 2010); yet the seductive-details literature finds interesting-irrelevant additions reliably harm learning (Rey 2012). The framework dissolves the contradiction rather than picking a side: the studies measure different quality properties. Embellishment improves residue and engagement (Tier-A residue) when it does not compete with task-relevant structure; seductive details harm access and learning when they divert schema activation (L1 content, L4 attention). The operational rule — add no element that competes with the message structure; decoration may pay for itself only in memorability — follows from both literatures jointly, and matches the reconciliation offered by practitioners distinguishing harmless from harmful junk (EU dataviz guide, Few, chartjunk debate).

Crossings, again. Purchase found crossings "by far the most important" layout aesthetic; Ware et al. found only crossings on the task path predicted time; Huang's eye-tracking found crossings barely disturbed scan paths in some layouts; Körner and Albert attributed much of the effect to general disarrangement rather than crossings per se (Purchase 1997/2002, Ware et al. 2002, Huang et al. IEEE SMC). The resolution is task-dependence, which is a frame-layer variable: crossings matter where the task is path-tracing and the crossing lies on the path, while global disarrangement matters for gestalt-level tasks such as cluster identification. The methodological moral is larger than the specific finding: aesthetic variables interact with the viewer's task, so "readability" cannot be scored from the artifact alone. This is why the evaluation framework insists on task-indexed metrics rather than global aesthetic counts, and why composite scores must be weighted per frame rather than fixed once for all diagrams.

Convention vs. natural mapping. Tversky's work shows some graphic forms carry near-universal suggestions (Tversky et al. 2000); the notation literature shows much visual syntax is stipulated and must be learned, and PoN's principles, though influential, are themselves under-tested empirically (Moody 2009, Ziehmann et al. 2020). The synthesis: treat natural mappings as strong defaults (violating them produces systematic misreading), treat stipulated conventions as audience-relative (validate against the actual viewer population), and treat uncited design maxims as hypotheses until measured. This grading discipline — empirical measure vs. theoretical principle vs. professional convention vs. adapted vs. proposed — is applied throughout Section 7 precisely because the field's advice outruns its evidence.

10. Limitations and open problems

Three limitations bound the claims. First, the quantitative anchors are thinner outside graphs, node-link diagrams, and instructional illustrations: the effect-size literature is rich for multimedia learning and graph perception, sparse for ER, architecture, and editorial diagrams, where most evidence is professional convention plus a small set of controlled experiments with questionable external validity — a gap the software-engineering reviewers themselves flag (UML mapping study). Second, the composite score Q in Section 7.5 is a proposed construction: its components are evidence-anchored, but its weights and gating thresholds need empirical calibration against Tier-A outcomes before it should be trusted to rank AI-generated diagrams automatically. Third, viewer-side modeling for AI audiences is embryonic: current VLMs fail at structured counting and relational grounding in architecture diagrams (SADU 2026), so an agent-evaluating-agent pipeline must validate its judges against humans, a methodological requirement that rubric research shows is frequently skipped (Rubrics survey 2026).

The open problems with the highest payoff follow directly. Calibrating the Ware cost model beyond spring-layout shortest-path tasks (other layouts, other tasks, larger graphs) would convert layout scoring from heuristic to engineering; the model's own authors flag the generalization as untested (Ware et al. 2002). A validated split-attention distance metric (label–referent adjacency) tested against eye-movement and learning outcomes would make one of the strongest instructional effects computable on arbitrary diagrams. A cross-domain benchmark pairing generated diagrams with task-based human comprehension outcomes — in the spirit of MermaidSeqBench and DiagramEval but with Tier-A human validation — is the missing infrastructure for quantitative evaluation of AI diagram generators (MermaidSeqBench 2025, DiagramEval 2025). And the deepest theoretical gap is a unified account of convention acquisition: we know literacy moderates comprehension and can be measured, but not yet how quickly specific conventions are learned, which would let creators price the teaching cost of a novel notation against its expressive benefits (Galesic & Garcia-Retamero 2011).

11. Conclusion

Asked what governs whether information is successfully communicated through a diagram, the literature answers with a mechanism, not a checklist. Diagrams are external representations whose value is computational: they place information so that search, recognition, and inference become cheap for a particular viewer on a particular task (Larkin & Simon 1987, Scaife & Rogers 1996). Between information and successful communication stand six transformations — frame, content, structure, encoding, composition, surface — each with its own evidence base, its own controllable variables, and its own characteristic failure modes. The creator's job is to make the intended inference land on a free ride and to spend the viewer's scarce late-stage processing only where the frame permits; the evaluator's job is to measure fidelity, access cost, attentional structure, and residue separately, with task-indexed, literacy-stratified methods, reserving single-number scores for gated composites of validated components. For both humans and AI agents, that is the control surface the brief asked for: every variable on it says what to change, why it matters, what it costs, and how to tell when it has gone wrong.

How Inference Impacts AI Output

Chris — Thu, 03 Sep 2026 00:59:36 +0000

Inference is the process by which a language model generates output.

Context goes in — prompt, system instructions, conversation history — and the model produces a probability distribution of what the most likely output is.

The Agent isn't understanding my request. It isn't considering, planning or weighing. The LLM is playing a guessing-game always asking "which answer is most likely to be correct?"

Inference->Output Path" width="800" height="400">

Where do the probabilities come from?

The probabilities themselves come from training. During training, the model's output is compared against a desired output, and a training signal adjusts the model's parameters — more of this, less of that.

Fine-tuning applies the same process afterward with narrower data, shifting the probabilities again toward specific behaviours, such as instruction-following or a thorough assistant style.

Why Does This Matter?

1 - An agent is almost always going to be wrong.

Outputs are probabilistic and non-deterministic. This means that the same question asked twice, can get two different responses. In my dev projects, what this means is that the agent always misses something. It has a lot of predictions to make, so the likelihood of it missing something is high.

2 - Context Matters

More context increases the difficulty in predictions. I now keep file sizes much smaller. Planning files split into smaller slices <100 lines. Most .ts and .tsx files <250 lines.

When an agent starts to slow down, or give me poor results, it means something has snuck into context that I don't know about.

3 - Rules can backfire.

Because agents are always trying to guess at the "most correct" answer. Clear rules make that easier. But clear rules packaged with a creative task can stifle creativity. Creativity is subjective, so what is right for you might not be right for me.

"Make me a more visually stunning and interactive frontend dashboard. Here are 7 rules to follow...".

It could be a shocking dashboard, but if it follows all the rules the agent still scores 7/8 right.

What's Next

Standardising Prompts. Prompts go into into context. Variability in prompt formatting, language, and tone mean that my output will vary even if my underlying request is the same.

By controlling the input, I can fine-tune the way tasks are communicated, which will improve the reliability of output.

Additionally, creating a prompt schema for different task objectives. The prompt schema and context for a creative brainstorming session is quite different to one which is creating build-specs and architectural diagrams.

Engineering an AI Design System

Chris — Sun, 16 Aug 2026 02:42:16 +0000

Why do AI agents struggle with frontend design?

AI agents can build working interfaces remarkably quickly. Yet the result can still feel generic, visually flat or unlike the experience I had in mind. A single screen might look acceptable in isolation while making no sense within the broader application. Asking for a “better design” often produces another variation without revealing where the first attempt went wrong.

I encounter this problem from a specific position: I am not a frontend designer. I do not have the skill to open Figma and create a visually stunning interface from a blank canvas.

When a design isn't working, I can tell you that it's not right. But I can't tell you how to fix it. So I need to make AI-generated design a more reliable and useful process.

So I can have less of this:

And more of this:

Can frontend design be engineered?

I’m engineering the system around AI coding. Frontend design is one process within that larger investigation. If I can break the work into observable stages with explicit inputs, outputs and feedback loops, I can begin improving the process rather than treating AI-generated frontend design as a black-box lucky dip.

My hypothesis is that separating AI-generated design into explicit stages, handoffs and feedback loops will make AI a more reliable tool for producing frontends that are visually strong and coherent with the wider product.

I want AI-generated design to become more predictable, reliable and globally coherent. New features should preserve the product intent, interaction rules and visual language instead of locally optimising one screen at the expense of the broader experience.

This does not mean eliminating taste or agent creativity. The goal is controlled variation: different creative outcomes produced within a process that reduces unexplained drift and makes intervention possible.

What is an agent actually doing when it designs?

I know my prompting isn't 100% perfect, but I thought I was doing a pretty good job in my prompts.

"Recreate the mission room incorporating react flow, semantic zoom, object-graph mapping adapter, highly interactive using spatial layout techniques, immersive feel as a user with stage inspector, and use a vertical top-down node direction with wires connecting. Nodes to be clickable to expand left to right."

Apparently not.

To understand how the prototype was made, I reviewed the agent transcript. It turns out that the agent had not simply received my prompt and “designed a screen.” Between my request and the working prototype, it had to:

Interpret my request using the accumulated product context.
Translate a broad ambition into a specific design problem.
Decide what a successful experience should achieve.
Inspect the existing application, repository and visual references.
Identify the legitimate product objects.
Define the relationships between those objects.
Define their important attributes and states.
Create realistic data and operational scenarios.
Decide the information hierarchy.
Decide what should appear at different levels of depth.
Identify the components the interface required.
Define their anatomy, variants and states.
Compose the overall screen and spatial layout.
Define node, edge, camera and semantic-zoom behaviour.
Define selection, navigation, focus and inspector behaviour.
Preserve identity and spatial context as the user navigated.
Generate several structurally different design directions.
Choose the typography, colour, material, composition and motion language.
Choose the technical approach, prototype scope and supporting scaffolding.
Construct, exercise, compare, diagnose, revise and verify the prototypes.

Generating UI designs is not one task.

Those twenty steps contain a vast number of assumptions and decisions that the agent quietly makes for me. They were not a formal sequence. I grouped them into six stages so that each decision had an owner and an explicit handoff.

Why didn't better prompts solve the problem?

I had treated AI-generated design as two stages: build something and evaluate it. In this model, those are stages five and six. The first four stages were still happening, but hidden inside the agent's execution.

Incorrect product assumptions, weak experience structure and generic creative direction could therefore compound before I saw the interface. A larger prompt added context, but it did not make the decisions or handoffs visible. I needed explicit boundaries—not simply more words.

The six-stage framework

My current model contains six core stages and one supporting lane:

These are working boundaries, not an established design standard.

1. Product Intent

Product Intent defines what is being built, for whom and why: the problem, scope, desired experience, constraints and non-goals. It supports intent preservation by allowing later agents to distinguish an intentional decision from an attractive invention.

2. Experience Architecture

Experience Architecture defines what exists, how it is organised and how it behaves: objects, relationships, information hierarchy, layout, states and interactions. These rules provide constraint preservation, helping new screens and features remain globally coherent as the product grows.

3. Creative Direction

Creative Direction defines how a candidate should look and feel. It turns references and preferences into a visual thesis covering composition, typography, colour, material, density and motion. Several approaches can then explore controlled variation while preserving the product's broader visual language and design continuity.

4. Implementation Blueprint

The Implementation Blueprint translates the experience and creative direction into a construction plan: data, technical choices, components, scope and verification criteria. It makes the Definition of Done concrete enough to build and inspect.

5. Prototype Construction

Construction turns those decisions into a runnable experience: components, screens, state, interactions, navigation and styling. Builders retain local judgment without silently redefining upstream product, interaction or visual decisions.

6. Prototype Evaluation

A successful build is not automatically a successful prototype.

Evaluation closes the loop. A navigation failure may belong to Experience Architecture; a generic result may belong to Creative Direction; a broken click path may belong to Construction. Evaluation must also consider the broader product, preventing local optimisation of one screen at the expense of the overall experience. The aim is to correct the earliest wrong decision rather than repeatedly patching the final screen.

Supporting lane: Build Scaffolding

Repositories, starter applications, worktrees, shared schemas and conventions are Build Scaffolding. They support design continuity and robustness across iterations and agent handoffs, but are not another creative stage each candidate should repeat.

The framework moves control upstream: from correcting final pixels to shaping the decisions that produce them. A stage may produce a diagram, table, reference or a few explicit decisions. Its value is whether it removes an important ambiguity from the next stage.

Can this work for someone who isn't a designer?

I want agents to propose experience structures and genuinely different creative directions that I can compare against stable product intent. The goal is not deterministic templates. It is enough structure to explore strong ideas without each candidate silently reinventing the product.

Does it actually work?

A series of experiments and tests over the coming weeks will be the judge.