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
| Column | Description |
|---|---|
| Referenced By | The source bundle that owns the reference field, with its bundle type badge |
| Field | The human-readable label of the entity reference field |
| Machine Name | The field machine name (e.g. field_related_articles) |
| Cardinality | How 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 cardinalityEmbedEdge— represents a text format that lists a bundle in itsembeddable_typesFieldReuseEdge— represents a deliberate field reuse relationship, tracked via thereused_fromprovenance markerSharedFieldEdge— represents fields sharing the same machine name on the same entity type across different bundles