YourERD User Manual

1. Screen layout

The screen has three main areas. Detailed editing of entities, relationships and memos happens in an editor modal you open when you need it, rather than in a panel permanently pinned to one side (see 4.2, 6.3 and 7.2).

┌─────────────────────────────────────────────────────────────┐
│  ① Top bar (YourERD · undo/redo · save · account)            │
├──────────┬──────────────────────────────────────────────────┤
│          │                                                  │
│ ② Left    │              ③ Canvas (full width)                │
│  sidebar  │    (entities & relationships + editor triggers)   │
│          │           ┌────────┐ ◀ zoom toolbar               │
└──────────┴──────────────────────────────────────────────────┘

2. Top bar (Top Nav)

3. Left sidebar

• Add Entity — adds a new entity (table) to the canvas.
• My diagrams (only when signed in) — the diagrams saved to your account. Click one to switch to it, use ＋ for a new diagram, and hover an item for rename (✎), duplicate (⧉) and delete (🗑). Duplicate asks for a name (defaulting to "<original> copy") and adds an identical diagram to the list, leaving your current canvas untouched.
• Entity List — the entities in the current diagram. Clicking one selects (highlights) it on the canvas. Colors and logical names are shown alongside.
• Start from a sample (shown only when the canvas is empty) — load one of three example diagrams (e-commerce orders, blog, HR org chart) onto the canvas with a click. First-time anonymous visitors get the e-commerce sample loaded automatically once (it won't load itself again after that, but you can always pick one manually from this list). Samples are an unsaved preview — they don't trigger a save or autosave — and the "Example: 《name》" banner above the canvas offers Start fresh to return to a blank canvas. Once you actually start editing it, the banner disappears and it simply becomes your own diagram.
• Collapse / expand — the collapse button (⊟) in the header shrinks the sidebar to a thin rail so the canvas gets more room.
• Bottom menu — Connect MCP (a modal that creates a personal token and gives you a one-line Claude Code connection command after you sign in) · MCP setup guide (connection details, new tab) · Claude prompt guide · Docs (this manual). Below them, in small type, are Home · About · Contact · Privacy · Terms links.

4. Creating entities (tables)

4.1 Adding an entity

Press Add Entity on the left and a new entity appears on the canvas.

4.2 Selecting, previewing and editing an entity

Every entity header carries an ⓘ (info) icon.

• Click — opens the modal for editing the entity (physical name, logical name, description, color and columns).
• Hover — shows a read-only preview you can skim without clicking. It includes information the node body does not show, such as the description and whether a column is UNIQUE.
• Double-click quick edit on the node — double-click an entity's physical or logical name, or a column's name, logical name or data type, to edit it in place without opening the modal (see 5.1).
• Clicking the entity body (outside the header) only selects (highlights) it; no modal opens. Right-click → Edit opens the same modal (see 4.6).

What you can edit in the modal:

4.3 Deleting an entity

Press the 🗑 (delete) button in the modal header, right-click → Delete, or select the entity and press Delete. After you confirm, the entity is removed along with its relationships and any FK columns that were auto-generated in other entities.

4.5 Collapsing and expanding an entity

The collapse icon on the right of an entity header hides its column list region, leaving only the header. When vertical space is tight — a small laptop, for instance — keep the two or three tables you are working on expanded and collapse the rest, and the overall structure and the detail fit on one screen together.

• A collapsed entity shows a column-count badge so you still know how big it is.
• While collapsed, drawing relationships, selecting, deleting and the ⓘ editor modal all keep working.
• The Collapse all / Expand all button in the zoom toolbar switches every entity at once. Collapse everything and then press Auto layout (🌳) — the spacing is recomputed for the smaller nodes, so the diagram packs much tighter.
• Collapsing is a view setting, not part of the diagram: it is not saved, and reopening the diagram starts with everything expanded.

4.6 Right-click context menu

Right-clicking an entity (or a relationship or memo) opens a menu with Edit and Delete. It is an alternative route to the same editor modal as the info and ✎ icons — and for elements without a dedicated icon, such as memos, it is the only way to open the modal.

5. Managing columns (attributes)

Columns and entity information can be edited two ways: double-click quick edit on the canvas node and the detailed modal.

5.1 Double-click quick edit on the node

You can double-click text on a canvas node and change it immediately, without opening the detailed modal (ⓘ icon).

• Column name (physical): double-click the name, edit, press Enter (e.g. coupon_id)
• Logical name: double-click the logical name text (when there is none, hover reveals a +Logical hint you can double-click to add one)
• Data type and size: double-click the type, edit, press Enter (typing VARCHAR(200) or DECIMAL(12,2) automatically splits the type name and the size)
• Entity name: the entity header's physical and logical names are editable the same way.

5.2 Editing in the modal

The Columns section of the entity editor modal manages the detailed properties (PK/FK, NOT NULL, UNIQUE, ordering) in one place — open it with the entity's ⓘ icon. Use Add to add a column; click a row to expand it for detailed editing.

5.5 Reordering columns

Grab the drag handle (⠿) at the left of a column row and drag it up or down to reorder. (Undoable.)

5.6 Supported data types

VARCHAR INT BIGINT BOOLEAN TEXT DATE DATETIME TIMESTAMP DECIMAL FLOAT CHAR SMALLINT TINYINT UUID JSON BLOB

6. Relationships

6.1 Drawing a relationship

• Hover an entity and connection handles appear on its top, bottom, left and right edges.
• Drag from a handle on the parent entity to the child entity.
• Pick the type you want when the relationship type picker opens.

6.2 Relationship types

The picker offers six presets (each with a preview of the line shape), and afterwards you can tune the two halves of the line separately in the editor modal (see 6.3).

Notation (based on Barker notation)

• Crow's foot — marks the "many" end of a 1:many relationship
• Dashed (parent side) — optional participation; solid (child side) — mandatory participation
• Identifier bar (uid bar) — the short perpendicular stroke added on the child side of an identifying relationship

6.3 Editing (per-half settings) and deleting a relationship

Clicking a relationship selects (highlights) it and a small ✎ edit icon appears at the middle of the line. Clicking that icon (or right-click → Edit) opens the relationship properties modal. You can set the parent half and the child half of the line independently (the half nearer each entity, regardless of where they sit on screen), which covers every relationship shape. The modal labels each half with the entity it belongs to.

• Parent / child participation — set each half to solid (mandatory) or dashed (optional). Every combination is possible: solid+solid, dashed+dashed, solid+dashed and dashed+solid.
• Cardinality — switch the child end between 1 (one) and many (crow's foot).
• Identifying — when on, the child FK becomes part of the PK and the identifier bar is drawn. If the child half is dashed (optional), the relationship cannot be identifying, because an identifying FK cannot allow NULL — the checkbox clears itself and is disabled.
• Delete relationship — press Delete relationship at the bottom of the modal, right-click → Delete, or select the line and press Delete (the auto-generated FK columns are cleaned up too).

6.4 Adjusting the line — endpoints and detours

Moving an endpoint — by default a relationship attaches itself automatically based on where the two entities sit. To pin an end somewhere specific, click the line to select it and drag the round handles that appear at each end.

• An endpoint only moves along the border of the entity it is already connected to (it never jumps to a different entity). It snaps to the nearest edge — top, bottom, left or right.
• Moving the entity or resizing it by adding columns keeps the endpoint in its relative position.
• Double-click a handle to return it to automatic placement.
• The position is saved and can be undone with Ctrl+Z. (Self-referencing relationships do not support endpoint dragging.)

Routing around an entity in the way — when entity C sits on top of the line between A and B, drag the line up or down: the segments leaving each entity stretch out and a right-angled path returns at the height you dragged to.

• Only the segment you grab moves. A detoured line has three segments, each draggable along its own axis — the middle detour segment (running across) moves up/down, and the parent-side leg and child-side leg (the perpendicular segments) each move left/right. (For a vertical layout the roles swap.) Moving one leg leaves the other one where it is, so you can decide independently whether to pass in front of an obstacle or beyond it.
• Hovering the line shows a cursor (↕ / ↔) telling you which way that segment can be dragged. A line with no detour yet is all "detour segment", so dragging it up or down bends it.
• The axis comes from how the two entities are laid out, not from which edge the endpoints attach to — so with endpoints pinned to the bottom edge in a left-right layout you still drag up and down.
• You can drag anywhere along the line, including from the ✎ icon that appears in the middle when it is selected. Clicking without moving still opens the editor modal as usual.
• The detour is stored relative to the automatic midpoint, so it follows along when you move the entities.
• Double-click the line or press Clear detour (back to automatic routing) in the relationship editor modal to reset it. Ctrl+Z works too. (Self-referencing relationships do not support detours.)

7. Memos (sticky notes)

Stick a free-form note anywhere on the canvas to record design intent, caveats or TODOs. Memos sit independently of entities and are kept when you save and reload.

7.1 Adding a memo

• Sidebar button — click Add Memo in the left sidebar (created at the center of the canvas)
• Double-click the canvas — double-clicking empty canvas creates a memo where you clicked

7.2 Editing a memo

• Textarea on the node — click the memo and type directly. This is the quickest way and needs no modal.
• Editor modal — memos have no dedicated icon, so open the modal with right-click → Edit. It gives you a larger editing area and lets you pick one of six background colors.

7.3 Changing the color

Click the color dots in the memo's header to change it immediately, or use the Color section of the modal you opened with right-click → Edit to pick one of six colors (yellow, green, blue, red, purple, orange).

7.4 Resizing

Click a memo to select it and resize handles appear on its border. Drag a handle to resize it freely.

7.5 Deleting a memo

• × button on the node — click the × at the right of the memo header (deletes immediately, no confirmation)
• Right-click → Delete — deletes after you confirm
• Editor modal — the Delete button at the bottom of the modal opened with right-click → Edit, then confirm
• Keyboard — select the memo and press Delete, then confirm

8. Working on the canvas (bottom zoom toolbar)

8.1 Fullscreen mode

Press the fullscreen button and the top bar and sidebar disappear so the canvas fills the screen. The zoom toolbar, the minimap and the editor modals all keep working. Leave with Esc or the exit button.

8.2 Minimap

The minimap in the bottom-right corner gives you an overview of the whole structure and lets you jump around quickly. Minimap blocks use each entity's color.

8.3 Panning and zooming

• Pan — drag empty canvas
• Zoom — mouse wheel or the zoom toolbar
• Move an entity — drag the entity

8.4 Selecting and moving several items at once

Hold Shift and drag on empty canvas to draw a selection box. Every entity and memo fully inside it is selected.

• Dragging one selected item moves the rest with it, keeping their relative positions.
• An "N selected" panel appears on the right, with a Delete selected button; the Delete key does the same (connected relationships and auto-generated FK columns are cleaned up too).
• Both group moves and bulk deletes are restored by a single Ctrl+Z.
• Click empty canvas to clear the selection.

9. Saving & loading

9.1 JSON files (no sign-in required)

• Save — downloads the current diagram as a .json file.
• Open (📂) — reopens a .json file you saved.

9.2 Cloud (DB) storage (sign-in required)

• Use the account (👤) button in the top right to sign up or sign in with a username and password.
• Press DB Save in the top bar to store the diagram in your account.
• Saved diagrams can be switched, renamed and deleted from the My diagrams list on the left.

9.3 Sharing and viewing together in real time (sign-in required)

A diagram saved to the database can be shared by link so several people watch it live.

• Open the diagram and press Share in the top bar. (Only diagrams saved to the database can be shared.)
• Create viewer link → a https://.../d/… link is generated. Use copy (⧉) and send it on.
• The recipient can open it without signing in, and the owner's edits appear on their screen in real time.
• Anyone arriving via the link is read-only (marked with a "Read-only" badge). Editing buttons and shortcuts are disabled, and Leave returns them to their own work.
• The participant avatars in the top bar show who is watching, and links can be revoked (🗑) from the list in the share modal.

10. Exporting

11. Keyboard shortcuts

12. Quick start (tutorial)

• Add an entity with Add Entity.
• Click the entity's ⓘ icon to open the editor modal and fill in the physical and logical names (for example user / User).
• Use Columns → Add to add columns, and mark the first one as 🔑 (PK).
• Create a second entity, then drag from the parent's connection handle to the child to create a relationship. → the FK is generated automatically.
• Tidy the layout with Auto layout (🌳) in the zoom toolbar.
• Get your DDL with Export SQL (🗄), or keep the working file with Save.
• (Optional) Sign in and use DB Save to keep it in the cloud.

13. Frequently asked questions

Q. Can I use it without signing in?

Yes. Editing entities and relationships, exporting PNG and SQL, and saving/loading JSON files all work without an account. Only cloud (DB) storage requires signing in.

Q. I picked the wrong relationship type.

Select the line and open the relationship properties modal with the ✎ icon (or right-click → Edit). You can change each half (solid/dashed), the cardinality (one/many) and whether it is identifying at any time. Switching between identifying and non-identifying adjusts the FK constraints (PK membership and NULL handling) automatically.

Q. I deleted a parent entity — what about the child's FK column?

Auto-generated FK columns whose reference disappeared are cleaned up with it. (Undo restores them.)

Q. Is my work saved automatically?

No. You have to press Save (JSON) or DB Save explicitly. Watch the dot (●) next to the name to see whether there are unsaved changes.

Q. Does switching the language change my diagram?

No. The language toggle only changes the interface. Names, logical names and descriptions you typed are your data and are never translated or rewritten — and neither are default names such as Entity1 that the app generates.

14. Interface language (한국어 / English)

Use the 🌐 language button in the top bar to switch the interface between Korean (KO) and English (EN).

• The default is Korean. The browser language is not auto-detected — only your explicit choice is used.
• Your choice is stored in this browser and survives refreshes and return visits.
• The three guide pages in the left sidebar (MCP setup guide · Claude prompt guide · Docs) open in the language you picked. Inside a guide, the 🌐 link at the bottom of the table of contents switches between them.

What switching does not change — everything stored in the diagram stays exactly as it is.