Skip to content

ERDGraph

KeyAction
Pan viewport up
Pan viewport down
Pan viewport left
Pan viewport right
hJump focus to nearest table left
jJump focus to nearest table below
kJump focus to nearest table above
lJump focus to nearest table right
TabCycle focus to next table
Shift+TabCycle focus to previous table
cCenter viewport on the focused table
EnterSelect focused table (fires onSelect)

Arrow keys pan the viewport; h/j/k/l jump the focused table to a spatial neighbor.

erd := components.NewERDGraph()
erd.SetData(&components.ERDData{
Tables: []components.ERDTable{
{
Name: "users",
Columns: []components.ERDColumn{
{Name: "id", Type: "bigint", PrimaryKey: true},
{Name: "email", Type: "varchar"},
},
},
},
Relations: []components.ERDRelation{
{From: "orders.user_id", To: "users.id"},
},
})

Foreign key lines are drawn automatically between related columns.

ERDGraph preview

ERDGraph is a 2D ERD visualization component that shows database tables with their columns and foreign key relationships.

Constructor func NewERDGraph() *ERDGraph

Usage

users := &components.ERDTable{
ID: "users",
Name: "users",
Columns: []components.ERDColumn{
{Name: "id", Type: "bigint", IsPK: true},
{Name: "email", Type: "varchar"},
},
}
orders := &components.ERDTable{
ID: "orders",
Name: "orders",
Columns: []components.ERDColumn{
{Name: "id", Type: "bigint", IsPK: true},
{Name: "user_id", Type: "bigint", IsFK: true, FKTarget: "users.id"},
},
}
erd := components.NewERDGraph().
SetData(
[]*components.ERDTable{users, orders},
[]*components.ERDRelation{
{FromTable: "orders", FromColumn: "user_id", ToTable: "users", ToColumn: "id"},
},
).
SetFit(true)
fmt.Println(erd != nil)

Methods

Method Signature Description
FocusedTable func (g *ERDGraph) FocusedTable() *ERDTable FocusedTable returns the currently focused table, or nil.
SetData func (g *ERDGraph) SetData(tables []*ERDTable, relations []*ERDRelation) *ERDGraph SetData replaces the graph data with the given tables and relations, recomputes the layout, and schedules an auto-center on the next draw.
SetFit func (g *ERDGraph) SetFit(fit bool) *ERDGraph SetFit makes the initial viewport center the bounding box of all nodes rather than the focused node. Useful for read-only/thumbnail views where all tables should be visible at once.
SetFocusedTable func (g *ERDGraph) SetFocusedTable(id string) SetFocusedTable changes the focused table and centers the viewport on it.
SetNodeWidth func (g *ERDGraph) SetNodeWidth(width int) *ERDGraph SetNodeWidth sets the minimum node width.
SetOnSelect func (g *ERDGraph) SetOnSelect(fn func(table *ERDTable)) *ERDGraph SetOnSelect sets the callback fired when the user presses Enter on a focused table.
SetSpacing func (g *ERDGraph) SetSpacing(h, v int) *ERDGraph SetSpacing sets horizontal and vertical spacing between grid cells.
TableOrder func (g *ERDGraph) TableOrder() []string TableOrder returns the ordered list of table IDs.

Types

type ERDRelation struct ERDRelation represents a foreign key relationship between two tables.
FieldTypeDescription
FromTable string
FromColumn string
ToTable string
ToColumn string
Cardinality ERDCardinality
Type ERDRelationType
type ERDTable struct ERDTable represents a table node in the ERD.
FieldTypeDescription
ID string
Name string
Columns []ERDColumn
Data any arbitrary user data
type ERDCardinality ERDCardinality describes the cardinality of a relationship.
ConstantDescription
OneToOne
OneToMany
ManyToMany
type ERDRelationType ERDRelationType describes the visual style of a relationship line.
ConstantDescription
ERDSolid
ERDDashed
type ERDColumn struct ERDColumn represents a single column in an ERD table node.
FieldTypeDescription
Name string
Type string
IsPK bool
IsFK bool
FKTarget string "schema.table.column" or "table.column"