strataDocs

Content Model

The Content Model page gives you a bird's-eye view of your project's content architecture — every bundle, every reference, and every shared field rendered as an interactive visualization.

Overview

Open the Content Model page from the Content Model link in the project sidebar. The page has three tabs — Graph, References, and Chord — each offering a different lens on the same underlying data. The data is built from all fieldable bundle entries in your project (content types, media types, taxonomy vocabularies, block types, paragraph types) and the entity reference fields that link them together.

Graph tab

The default tab renders an interactive node-and-edge graph powered by ReactFlow with automatic left-to-right layout via the dagre algorithm. Each bundle in your project appears as a colored card showing its label, machine name, bundle type, and the fields it contains. Arrows between cards represent entity reference fields — the arrow points from the bundle that owns the reference field to the target bundle.

Node cards

Every card is color-coded by bundle type (content types, media types, taxonomy vocabularies, block types, paragraph types). The card displays the bundle's label, its machine_name, the bundle type badge, and a list of its fields. Clicking a card navigates you to that bundle's detail page.

Reference edges

Edges appear between bundles whenever a field of type entity_reference or entity_reference_revisions on one bundle targets another. The edge label shows the field's machine name (and reference label, if set). When multiple reference fields connect the same pair of bundles, their labels are merged into a single edge.

Interaction

  • Drag and drop — reposition any node by dragging it
  • Zoom and pan — scroll to zoom, drag the canvas to pan (zoom range: 10% to 200%)
  • Minimap — a minimap in the corner shows the full graph at a glance, with nodes colored by bundle type
  • Filter by type — click a bundle type in the legend bar to toggle its visibility; click Show all to reset
  • Click to navigate — click any bundle card to jump to its detail page in the project

Saving layout

When you drag nodes to new positions, a prompt appears at the bottom of the canvas with Save and Reset buttons. Saving persists your custom layout server-side so it is restored the next time anyone opens the graph for this project. Reset returns to the automatic dagre layout. The saved layout is stored per-project in the project settings.

References tab

The References tab presents the same entity reference data as a structured table, grouped by target bundle. For every bundle that is referenced by at least one other bundle, a card lists all incoming references with their source bundle, field label, field machine name, and cardinality.

Table columns

ColumnDescription
Referenced ByThe source bundle that owns the reference field, with its bundle type badge
FieldThe human-readable label of the entity reference field
Machine NameThe field machine name (e.g. field_related_articles)
CardinalityHow many values the field allows: 1, a specific number, or Unlimited

Embed relationships

Below the reference rows, an Embeddable via section shows any text formats whose embeddable_types list includes this bundle. This makes it easy to see which entities can be embedded inline in rich text fields, in addition to being referenced via entity reference fields.

Filtering

A legend bar at the top lets you toggle visibility by bundle type, just like the Graph tab. Click a bundle type to hide or show its sections, and click Show all to reset.

Chord tab

The Chord tab renders a D3 chord diagram that shows relationships between bundles as arcs around a circle, connected by ribbons. It supports three relationship modes, selectable via a toggle in the top-right corner.

Entity References mode

Shows the same entity reference relationships as the Graph tab, but visualized as a chord diagram. Each arc represents a bundle, and ribbons between arcs represent reference fields. This view is especially useful for spotting bundles with many incoming or outgoing references at a glance.

Field Reuse mode

Shows fields that have been deliberately reused across bundles. Reuse is tracked via the reused_from provenance marker — it is never inferred from matching machine names. A ribbon between two bundles means one or more fields on one bundle were explicitly created by reusing a field from the other. See Reusing fields for details on how field reuse works.

Shared Fields mode

Shows fields that share the same machine name on the same entity type across different bundles, regardless of whether they were created via the reuse workflow. This helps you see Drupal's shared field storage relationships — fields that happen to use the same storage table because they share a machine name and entity type.

Reading the diagram

  • Arcs — each arc around the circle represents a bundle, color-coded by bundle type. The arc width is proportional to the number of connections.
  • Ribbons — ribbons connecting two arcs show relationships between those bundles. The ribbon width corresponds to the number of fields involved.
  • Hover — hover over an arc to highlight all its connections and see the bundle's name, type, machine name, and total connection count. Hover over a ribbon to see the specific fields involved in that relationship.
  • Legend — a color legend below the mode toggle shows which color represents each bundle type.

Use cases

  • Architecture review — use the Graph tab to walk through the content model with your team, verifying that reference fields point to the right targets and that bundles are connected as expected.
  • Impact analysis — use the References tab to see every bundle that references a given entity before renaming or removing it.
  • Field reuse auditing — switch to the Chord tab's Field Reuse mode to verify that shared fields were created intentionally via the reuse workflow rather than by coincidence.
  • Stakeholder communication — the visual graph and chord diagram make it easy to communicate the content model to non-technical stakeholders, content strategists, and clients.
  • Documentation — save a well-organized graph layout to serve as a living diagram that stays in sync with the project as the architecture evolves.

Data model

The content model visualization is built from the same entry data you manage in the project tabs. The server action queries all fieldable bundle entries (content types, media types, taxonomy vocabularies, block types, paragraph types) and their child field entries to construct the graph. The key data structures are:

  • GraphNode — represents a bundle or field, with its label, machine name, bundle type, and optional field metadata (type, cardinality, required)
  • GraphEdge — represents an entity reference relationship from a source bundle to a target bundle, with the field label and cardinality
  • EmbedEdge — represents a text format that lists a bundle in its embeddable_types
  • FieldReuseEdge — represents a deliberate field reuse relationship, tracked via the reused_from provenance marker
  • SharedFieldEdge — represents fields sharing the same machine name on the same entity type across different bundles