Diagrams and Explanatory Graphics

By the end of this lesson, you will be able to...

• choose a small set of relationships that answers one explanatory question;

• give nodes, lines, containers, labels, and uncertainty distinct visual jobs;

• build and critique a diagram whose structure is legible without claiming more certainty than the supplied evidence supports.

Idea in one sentence: A useful diagram is an argument about relationships made visible, with every line and visual distinction earning its place.

Core Insight

Imagine an editor asks for one graphic inside the feature “The Last Night Train.” The source material includes a route sketch, a worker's account, the timetable boundary, and a policy question: what happens when service ends before the last shift finishes? A designer can draw a beautiful map, but beauty alone does not answer the question. The graphic must show which actors connect, where a break occurs, and which parts are documented versus inferred.

This lesson follows the first-glance discipline from 005, but changes the object. A poster compresses one idea into a fast entry. A diagram unfolds selected relations so the reader can inspect them. The grid, hierarchy, rhythm, and type roles from lessons 001–004 still matter. They now support a path through nodes, connectors, annotations, and legends.

The central trade-off is direct: diagrams reveal structure, but they can overstate certainty. A thick arrow can make a possibility look like a guaranteed cause. A large node can make an actor look quantitatively dominant even when the source only says that the actor is present. The diagram is not neutral tracing. It is a selective model, so the selection and its limits must remain visible.

Begin with One Question

Do not start by drawing boxes. Start by writing the question the graphic must help answer. For this article, choose one of these bounded questions:

• Where does a late-shift worker's journey depend on the sequence of services?
• Which handoffs connect the last train to a safe return home?
• Where does the article move from an individual experience to a civic decision?

Each question needs a different graphic. The first invites a flow. The second may need a chain of handoffs with conditions. The third is a relationship diagram between evidence, experience, and policy. If you try to answer all three at once, the page becomes a miniature encyclopedia and the reader cannot tell what to inspect first.

Write a one-sentence claim beside the question. For example: “When the final train leaves before a shift ends, the worker's route depends on a transfer that the current service does not guarantee.” This is a provisional claim, not new editorial copy. It gives the diagram a test: every visual relation should support, qualify, or deliberately challenge this sentence.

Inventory the Relations

Separate what the source gives you from what you want the graphic to imply.

This inventory stops a diagram from silently converting a question into a fact. Use a solid node for a documented entity, a dashed outline for an interpretation, and a note when a relation is uncertain or applies only to the example route. The exact marks can vary; the rule must be learnable.

A Small Visual Grammar

Treat the diagram as a visual sentence. Define its grammar before polishing it.

• Node: a person, place, service, event, or decision. Give nodes a shared shape when they share a role.
• Connector: a relationship. A directed arrow means the source says that the relation has direction. A plain line means association only.
• Container: a meaningful boundary such as “worker's shift” or “policy decision.” Do not use containers merely to fill space.
• Label: names the entity or tells the reader how to read a connector. Labels should sit close enough to the relation they describe.
• Annotation: supplies a date, quote fragment, condition, or source note. It should not become a second paragraph competing with the diagram.
• Legend: defines any symbol whose meaning is not obvious. Place it near the first use, not hidden at the bottom.

Use type roles from lesson 001: question/title, node label, annotation, and source note. Use the grid from lesson 002 to align nodes and text. Use the priority ladder from lesson 003 so the question and main path lead before secondary evidence. Use rhythm from lesson 004: a reader should have a clear entry, a continuation path, a pause at a branch, and a way to return to the main relation.

The Naive Diagram and Its Break

The obvious response to a complex article is a field of equal boxes connected by arrows. It feels complete because every noun appears. But equal boxes hide role differences, crossing arrows imply relationships the source never named, and the reader spends more time decoding the drawing than understanding the claim.

Another failure is to use position as if it were measurement. Placing a station twice as far from another station may suggest twice the distance even when the graphic is only a schematic. Unless scale is supported and needed, label the drawing “schematic” and use spacing for readability rather than false precision.

A better diagram performs three reductions:

1. it reduces the source to one explanatory question;
2. it reduces the vocabulary to entities and relations needed for that question;
3. it reduces visual variation to a grammar the reader can learn.

The result may contain fewer objects than the article. It should contain more inspectable relationships.

Worked Path: From Evidence to a Schematic

Build a small diagram for the claim about the last train. Follow the intermediate states so you can see where interpretation enters.

1. Select the path

The source describes a worker whose shift ends after the final train. The relevant path is:

shift ends -> station reached -> final train departs -> transfer available? -> return home

The question mark matters. The source confirms the worker and train schedule; it does not guarantee the transfer. Do not erase that uncertainty to make the arrow sequence look smooth.

2. Assign roles

Use rounded nodes for places or services, a time band for the shift, and a dashed branch for the unconfirmed transfer. Put the policy decision outside the path because it can change the service but is not an event in the worker's described journey.

[worker's shift]
        |
        v
(station reached) --> (final train) --?--> (transfer) --> (home)
                              ^
                              |
                     [policy decision]

The rough sketch already exposes two decisions. The policy decision influences the service, but the source does not say that a policy change occurred. The transfer is a condition, not a confirmed step. A legend can state: solid arrow = described sequence; dashed arrow = possible dependency; bracket = decision outside the reported journey.

3. Add evidence without crowding the path

Attach a short annotation to the final train: “last scheduled departure in the described timetable.” Attach a source note to the transfer: “availability varies by route; verify before generalizing.” Do not paste the whole worker quotation into the diagram. Use the quotation in the surrounding article and let the graphic explain the relation it makes visible.

4. Arrange on the spread grid

Give the main path one horizontal reading direction. Align node labels to a shared baseline and reserve a second column for evidence notes. Place the policy bracket above the train rather than below the home node, so the reader does not mistake it for another travel step. Keep the dashed branch visually distinct without relying on color alone: use line style and a text label.

5. Test the reading order

Read only the title and node labels. Can you state the question? Follow the solid path. Can you tell which step is documented? Now read the notes. Do they qualify the claim, or do they introduce a second argument? Finally, remove the arrows and read the labels as a list. If the list still suggests a causal sequence, your placement or wording may be doing hidden work that the visual grammar should make explicit.

6. Compare a misleading and a bounded output

7. Walk the output and its boundary

Ask what the diagram proves, what it illustrates, and what it leaves open. It illustrates a dependency in one described journey. It does not prove that every worker has the same route, that the transfer always fails, or that one policy will solve the problem. Those boundaries are part of the graphic's honesty.

Checks Before Approval

Check: A designer adds arrows between every pair of entities so no relationship is omitted. What should happen first?

Think first, then reveal.

Answer: Return to the single explanatory question. Keep only relations that help answer it, and label the relation type. A complete vocabulary is not the same as a useful model.

Check: A dashed line is changed to solid because the page looks cleaner. What information was lost?

Think first, then reveal.

Answer: The distinction between possible or inferred and documented or directed was lost. Visual polish cannot justify stronger evidence than the source provides.

Check: A node is drawn larger because it is important to the story. When is that safe?

Think first, then reveal.

Answer: It is safe when size is explicitly a role or emphasis signal, not when readers could mistake it for quantity, geographic scale, or measured impact. Add a label or legend if ambiguity remains.

Check: The diagram is easy to decode, but the article's main question is hard to find. What is missing?

Think first, then reveal.

Answer: The diagram has a grammar without a hierarchy. Give the question or claim a clear entry role, then make the main relation more prominent than annotations and secondary branches.

Trade-offs, Limits, and Common Confusions

• Selection versus omission: fewer relations make a path legible, but omitted context can change interpretation. State the scope beside the diagram.
• Legibility versus detail: a dense graphic can contain more evidence, but small labels and crossing lines raise the decoding cost.
• Direction versus ambiguity: arrows clarify sequence or influence, but they can imply causation that the source does not establish.
• Consistency versus nuance: a shared grammar helps readers learn the marks, while different evidence statuses may require different line styles or notes.
• Visual authority versus uncertainty: strong contrast and large shapes attract attention, but they should not make a tentative claim look settled.

Confusion: Every arrow means cause

An arrow may mean sequence, movement, influence, or a reading direction. Define it. If the relation is only association, use a line. If the source does not establish direction, do not add a directional arrow because it looks dynamic.

Confusion: A box is just a neutral container

A box can imply an entity, a category, a boundary, or a process. Choose one job and repeat it. If the same box means “station,” “time interval,” and “policy,” the reader has to guess the grammar.

Confusion: Position is harmless decoration

Readers infer order, scale, closeness, and importance from position. Use the grid for alignment and reading order, but label a schematic when spatial distance is not data. Do not let an attractive diagonal become an accidental claim.

Confusion: Unknown means leave it blank

An empty gap can look like an omission or a mistake. Mark uncertainty with a dashed relation, question mark, or concise note, and explain the mark in the legend. Visible uncertainty is more informative than invisible uncertainty.

Confusion: One diagram should explain the whole article

A diagram earns clarity by being bounded. If the article needs a second question, make a second small graphic or let the prose handle it. Adding layers until every idea fits usually hides the main relation.

Practice: Diagram One Relationship Honestly

Choose a supplied article, service description, exhibition guide, or lecture handout that contains at least five entities and one uncertain or conditional relation. Stay within the content; do not invent statistics or a new argument.

1. Write one explanatory question and one provisional claim.
2. Inventory entities, relations, evidence status, and the relation type you intend each line to mean.
3. Sketch two forms: a flow or sequence, and a relationship or influence diagram. Choose the one that answers the question with fewer decoding steps.
4. Add a visual grammar: node roles, connector meanings, uncertainty mark, hierarchy, and legend.
5. Arrange the selected form on a grid. Test title-only, path-only, and notes-only reading orders.
6. Ask a reader to name what is documented, what is inferred, and what remains open. Revise any visual distinction they cannot explain.

A strong submission includes the question, inventory, rough and bounded diagrams, legend, and a short boundary note. It names one relation deliberately omitted and explains why including it would weaken the answer. The goal is not to make complexity look impressive. It is to make one structure inspectable without overstating the evidence.

Connections

Lessons 001–004 established typographic roles, a grid, hierarchy, and sustained reading. Lesson 005 showed how a supplied claim can survive a fast public or editorial glance. This lesson reuses those tools for relational explanation: the reader enters through a question, follows a main path, pauses at a branch, and checks an annotation. Lesson 007 will turn these individual decisions into reusable visual-system rules, including when an exception is justified.

Resources

• [BOOK/TUTORIAL] The Elements of Typographic Style Applied to the Web — Focus: hierarchy, spacing, alignment, and readable labels in dense explanatory layouts.
• [ARTICLE] WCAG 2.2: Understanding Meaningful Sequence — Focus: preserve a meaningful reading order when a diagram rearranges prose into a visual path.
• [ARTICLE] WCAG 2.2: Understanding Contrast Minimum — Focus: keep labels, legends, and uncertainty marks distinguishable without relying on color alone.

Key Takeaways

• A diagram begins with one explanatory question, not with boxes, arrows, or a software tool.
• Select entities and relations deliberately, then give each node, connector, annotation, and legend one learnable job.
• Visual grammar must distinguish sequence, association, influence, evidence, and uncertainty.
• A schematic can clarify structure without representing geographic scale, measured quantity, or universal causation.
• The central trade-off is clarity versus certainty: a confident-looking graphic must not claim more than its source supports.