Draw a Drupal site's content model as an interactive diagram - entirely in your browser.
Nexus is a static web app. Drop a Drupal exported configuration folder onto the page and it reconstructs the site's logical content model - bundles, fields and entity-reference relationships - and draws it on an infinite, pannable canvas. Everything runs client-side: your configuration never leaves the browser. Nothing is uploaded to any server, which makes it safe to point at client work.
- 100% client-side. Parsing and rendering happen in the browser; no backend, no upload, no install.
- Drop a folder. Choose or drag a config sync directory (or a module's
config/install). Reads only*.ymllocally. - Faithful visual language. Bundles as coloured boxes; single / multi / system / calculated fields and Event / API / Callback annotations, each with their own shape (see the legend).
- Browsable. Starts as an entity-only overview, with tools to reveal fields, filter by entity type, focus an entity, read a searchable field table and toggle machine names.
- Customisable & remembered. Recolour entity types from a picker; choices persist in your browser and apply to every diagram you open.
- Export. Save the whole canvas as PNG or SVG, or the field table as CSV - all client-side.
- Open the app (or run it locally - see Development).
- Choose a config folder or drag one onto the drop zone - the folder of
*.ymlfiles exported from a Drupal site (its config sync directory), or a module'sconfig/install. Or click Try the example. - Explore with the toolbar; export as PNG, SVG or CSV.
Add an annotations.yml file to the folder to overlay events, APIs and callbacks.
The page renders a legend describing every symbol. Nexus derives entities, fields and references from configuration; Event, API, Callback and Calculated symbols come from an optional annotation overlay.
| Symbol | Meaning | Source |
|---|---|---|
| Rounded rectangle (coloured by type) | An entity bundle - content type, vocabulary, media, paragraph, block, user | Config |
| Ellipse, solid border | Single-value field | Config |
| Ellipse, double border | Multi-value field | Config |
| Ellipse, dashed border | System (base) field | Curated per entity type |
| Ellipse, yellow fill | Calculated field | Annotation |
| Diamond | Event | Annotation |
| Hexagon | API | Annotation |
| Rectangle with a method | Callback | Annotation |
The diagram opens as an entity-only overview. The toolbar offers:
- Zoom / Fit / Reset and wheel-zoom with drag-to-pan (infinite canvas).
- Show fields - reveal every field ellipse for the full model.
- Layout: LR / TB - switch the flow direction.
- Machine names - show each bundle/field machine name in monospace beneath its symbol.
- Entities - an index with per-type filters and field counts; click a bundle to focus it or open its fields.
- Table - a searchable table of all fields (or one entity's) with type, cardinality, requiredness and references.
- Legend and Settings (entity colours).
- PNG / SVG / CSV - export the whole canvas or the field table.
Some architecture is not expressed in Drupal configuration - integration callbacks, external APIs and domain events. Include a YAML overlay named annotations.yml in the folder (or as the example ships one):
title: 'Example content model'
nodes:
- { id: omny_api, kind: api, label: 'Omny Studio API' }
- { id: create_episodes, kind: callback, label: 'Create future episodes', method: POST, attach: node.program }
- { id: episode_published, kind: event, label: EpisodePublished, attach: node.episode }
edges:
- { from: episode_published, to: omny_api, label: notifies }
computed_fields:
node.episode:
- { name: audio_url, label: 'Audio URL' }nodesadd Event (event), API (api) or Callback (callback) nodes;attachdraws an edge from an existing entity,methodlabels a callback.edgesdraw explicit links between any two nodes.computed_fieldsadd calculated fields to an entity, keyed by itsentity_type.bundleid.
No build step - it is static ES modules plus vendored libraries under assets/vendor/. ES modules require HTTP (not file://), so use the dev server:
npm install # dev dependencies (Playwright) for the tests
npm start # serve at http://127.0.0.1:8000
npm run test:unit # Node's built-in test runner - the parser/model/annotations
npm run test:e2e # Playwright - the app end to end (upload, render, export)
npm test # bothassets/{parser,model,base-fields,annotations}.js- the offline model builder (pure, dependency-free).assets/render.js- the Cytoscape renderer.assets/{app,export}.js- folder loading and PNG/SVG/CSV export.
Publishing a GitHub release builds and deploys the static site to GitHub Pages via .github/workflows/release.yml (assembles index.html, assets/ and examples/, and stamps the release tag as the app version). Pushes to main only run the tests - they never deploy. Enable Pages once with the "GitHub Actions" source.
Nexus has no backend. The configuration you import and the diagrams you build stay in your browser (in memory and localStorage) and are never uploaded to or processed by any server. Nexus is provided as is, without warranty of any kind, and the authors accept no responsibility or liability for any data you load into it or create with it.
Nexus is free software, released under the GNU General Public License, version 2 (GPL-2.0-or-later), matching the Drupal ecosystem it serves.
Rendered with Cytoscape.js and Dagre; YAML via js-yaml.