DBML for TechDocs¶
A Backstage TechDocs addon (backstage-plugin-techdocs-addon-dbml) that
replaces dbml code fences in TechDocs pages with interactive
entity-relationship diagrams. Parsing is done with
@dbml/core, rendering with React Flow.
| Capability | Notes |
|---|---|
| Interactive diagram | Draggable tables, pan/zoom, auto-layout (dagre) |
| Crow's foot edges | Cardinality derived from the Ref operator |
| Table groups | TableGroup renders as tinted containers with collapse |
| Collapsible tables | Chevron in the table header |
| Code view | Context-aware DBML syntax highlighting |
| Expand dialog | Near-fullscreen modal sharing the diagram/code view |
| Theming | Colors resolve from the active Backstage MUI theme |
Where to go next:
- Installation — add the package to your app.
- Usage — wire the addon into the new or classic frontend system.
- Authoring — how DBML blocks in TechDocs pages are detected.
- Features — what the rendered diagram can do.
- Reference — package exports, claimed markup, DBML support matrix, theming.
- Examples — live sample pages (these also serve as the development fixture for this repo).