BŪNŌN — ERD Visualizer

BŪNŌN is a zero-dependency, client-side ERD visualizer that runs entirely in the browser. No build tools, no server, no npm — just open index.html and start designing.

Built with the help of AI with human supervision and modification

Features

• Live Editing — left sidebar editor with real-time canvas preview
• Syntax Highlighting — color-coded tokens for entities, fields, relationships, and properties
• Drag & Drop — reposition entities on the canvas; overlap detection nudges them apart; resize entity width with the right-edge handle
• Crow's Foot Notation — <>, >, <, - symbols for Many-to-Many, Many-to-One, One-to-Many, One-to-One
• Zoom & Pan — mouse wheel to pan, Ctrl/Cmd+wheel to zoom, plus zoom buttons and Fit
• Icon Support — six built-in SVG icons to visually distinguish entities
• Color Coding — six entity colors with matching header tints
• PNG Export — download the diagram at 2× resolution
• Text Export — download the ERD definition as .txt
• Session Persistence — editor text, entity positions, and legend position saved to localStorage
• DBML Compatibility — Table entities and Ref: relationships parse alongside native Bunon syntax
• Collapsible Sidebar — toggle the editor panel to maximize canvas space
• Legend Card — draggable legend explaining relationship notations
• Comments — // single-line comments in the ERD definition

Quick Start

Easy: Download & Open

1. Download the index.html, app.css, and app.js and place them in a single folder
2. Open the index.html in any modern browser

👍 It's ready!

Advanced: Git + Local Server

1. Clone the repo:

   git clone https://github.com/yourusername/erd.git
   cd erd

2. Open index.html in any modern browser:

   # macOS
   open index.html
   
   # Or with a quick local server (optional)
   python3 -m http.server 8080
   # then visit http://localhost:8080

That's it. No install step.

ERD Syntax

Entity Definition

EntityName [icon: iconname, color: colorname] {
  fieldName fieldType [pk]
}

Example:

users [icon: user, color: blue] {
  id string pk
  displayName string
  team_role string
  teams string
}

Field Syntax

fieldName fieldType [pk]

• fieldName — column/field name
• fieldType — data type, supports parenthesized parameters (e.g. string(10), varchar(255), decimal(10,2))
• pk (optional) — marks the field as Primary Key (shows a PK badge)

Entity Metadata

Inside the [...] block after the entity name:

Property	Values	Default
icon	user, users, home, folder, message-circle, mail	home
color	blue, green, red, grey/gray, purple, orange	grey

Relationship Definition

fromTable.fromField <symbol> toTable.toField [: properties]

Symbols (Crow's Foot Notation):

Symbol	Meaning
<>	Many to Many
>	Many to One
<	One to Many
-	One to One

Examples:

users.teams <> teams.id
workspaces.folderId > folders.id
invite.inviterId > users.id

Relationship Properties (optional):

users.teams <> teams.id : [color: green]

Color values: green, blue, red, orange (default #94a3b8).

DBML Compatibility

DBML-style entities and references are parsed alongside native Bunon syntax:

Table users {
  id bigInteger [pk, not null]
  email varchar [unique]
}

Ref: users.id > teams.id

• Table name { ... } — entity definition; constraints like [pk], [primary key], [not null] are read from the field line
• Ref: fromTable.field <symbol> toTable.field — relationship definition

Legend Definition

legend {
  [connection: <>, label: Many to Many]
  [connection: >, label: Many to One]
  [connection: <, label: One to Many]
}

The legend card is draggable — place it anywhere on the canvas.

Comments

Use // for single-line comments. These are ignored by the parser.

// This is a comment
users [icon: user] {
  id string pk
}

Keyboard & Mouse Controls

Action	Control
Pan canvas	Scroll wheel
Zoom in/out	Ctrl/Cmd + Scroll wheel
Zoom buttons	Toolbar +/− buttons
Fit all entities	Fit button in toolbar
Indent (editor)	Tab key inserts 2 spaces
Drag entity	Click and drag an entity box
Drag canvas	Click and drag empty space
Toggle sidebar	Sidebar toggle button

Session Management

The Session dropdown (top-right) provides:

• Reset Session — restores the default example diagram
• Empty Session — clears the canvas and editor completely

All work is auto-saved to localStorage as you type and drag.

Export Options

• Export as PNG — bottom-left of canvas; downloads erd-diagram.png at 2× resolution
• Export as Text — bottom of editor panel; downloads erd.txt with your ERD definition

Tests

Zero-dependency browser test suite (no npm, no build — same rules as the app). The runner loads the real app.js against a fixture page and checks the parser, syntax highlighter, layout, relationship routing, rendering, transforms, persistence, UI, exports, and pointer interactions.

tests/
  test.html   # runner page (fixture DOM + results panel)
  tests.js    # assert harness + 68 test cases

Run them:

python3 -m http.server 8080
# then visit http://localhost:8080/tests/test.html

tests/test.html can also be opened directly from file:// in most browsers.

Browser Support

Any modern browser with support for:

• Canvas API
• localStorage
• ES5+ JavaScript
• SVG rendering
• CSS Custom Properties

Tested on Chrome, Firefox, Safari, and Edge (latest versions).

License

MIT