DBML for TechDocs

Backstage TechDocs addon that replaces dbml code fences in TechDocs pages with interactive entity-relationship diagrams. Parsing is done with @dbml/core, rendering with React Flow: draggable tables, crow's foot relationship edges, collapsible tables and table groups, note tooltips and enum chips, a syntax-highlighted code view, and a near-fullscreen expand dialog — all themed from the active Backstage theme.

Full documentation: https://panda-coop.github.io/backstage-plugin-techdocs-addon-dbml/

Install

yarn --cwd packages/app add backstage-plugin-techdocs-addon-dbml

Quick start (new frontend system)

import techdocsAddonDbml from 'backstage-plugin-techdocs-addon-dbml/alpha';

export default createApp({
  features: [techdocsAddonDbml],
});

As of @backstage/plugin-techdocs 1.18.1 the new frontend system registers TechDocs addons but never renders them; until that is fixed upstream an entity-tab override is required — see Usage for the full workaround and the classic frontend system wiring. Authoring rules (which code blocks are claimed and how) are covered in Authoring.

License

GPL-3.0-or-later. Copyright (C) 2026 PANDA Coop.