Diagram Types

This page collects the current diagram families, their status, and links to available examples.

See the node and edge reference for a compact list of content available to each diagram type.

IA (Information Architecture) / Place Map

Source of truth for product structure: what exists, where it lives, and how it connects.

This view shows Areas and Place nested with CONTAINS, with NAVIGATES_TO connections between Places.

Examples:

outcome_to_ia_trace_example Simple Profile

place_viewstate_transition_example Strict Profile

billSage app Simple Profile

UI Contracts

UI composition and state changes, per Place (and optionally per component).

In this view, Places and View States act as containers for UI structure; View State or component State transitions show behavior inside those scopes, with events, data bindings, and system dependencies shown as supporting contracts.

Examples:

place_viewstate_transition_example Strict Profile

ui_state_fallback_example Strict Profile

Scenario Flow

Step-by-step UI-level activities (but without collapsing the world into screens).

The x-axis shows horizontal progressions ("bands"). The y-axis shows lanes for Steps, Places and View States, with tracks for branch alternatives.

Example:

scenario_branching_example Simple Profile

Journey Map

User / customer journey, expressing the high-level sequence of interactions with the product. (Steps also appear in the more technical service blueprint, see above.)

Stages contain source-ordered Steps, while PRECEDES relationships define journey flow.

Examples:

branching_journey_example Simple Profile

outcome_to_ia_trace_example Simple Profile

service_blueprint_slice_example Simple Profile

Outcome-Opportunity Map

Product intent, explicit and traceable: what the product solves, and how to know it works.

The x-axis shows columns for Initiatives, Opportunities, Outcomes, Metrics. The y-axis displays a band for each Outcome, stacking rows when a column contains multiple entries.

Examples:

outcome_to_ia_trace_example Strict Profile

metric_event_instrumentation_example Simple Profile

multiple_outcomes Simple Profile

Service Blueprint

Connects user experience steps to the layers needed to realize it.

The x-axis shows customer journey progression over time: Anchor bands (columns) for steps connect a customer step the frontstage and backstage operations that make the step happen. Steps are ordered by PRECEDES. Additional interstitial bands are shown for work that advances between customer steps. The y-axis shows fixed service lanes: customer, frontstage, backstage, support, system, and policy.

Note: a single column is sometimes called a slice, but a slice can also be broader, covering an entire feature.

Example:

Service Blueprint Slice example Strict Profile