Documentation

Learn how to use DiagramDB tools effectively

Getting Started

DiagramDB is a collection of free, browser-based tools for database design and SQL manipulation. All tools run entirely in your browser - no data is sent to our servers, and no signup is required.

What can you do?

  • • Format and beautify SQL queries with customizable options
  • • Create ER diagrams from text-based definitions
  • • Convert SQL DDL to ER diagrams automatically
  • • Validate SQL syntax across multiple dialects
  • • Minify SQL by removing whitespace and comments
  • • Visualize database schemas with multiple view modes

Privacy & Data

All processing happens in your browser using JavaScript. Your SQL code, diagrams, and data never leave your device. We use localStorage and IndexedDB to save your work locally - you can clear this anytime from your browser settings.

SQL Formatter

How to Use

  1. Paste your unformatted SQL code in the left panel
  2. Adjust formatting options (indent size, keyword case, etc.)
  3. Click "Format SQL" or press Ctrl+Enter
  4. Copy the formatted SQL from the right panel

Formatting Options

  • • Indent Size: 2 spaces, 4 spaces, or tabs
  • • Keyword Case: UPPERCASE, lowercase, or Title Case
  • • SQL Dialect: MySQL, PostgreSQL, SQL Server, Oracle, SQLite

Supported Features

  • • Complex nested queries with proper indentation
  • • JOIN alignment for readability
  • • Preserves comments
  • • Auto-save to localStorage
  • • Query history (last 50 queries)

ER Diagram Maker

DBML Syntax

DBML (Database Markup Language) is a simple, readable language for defining database schemas. 

Table users {
  id integer [primary key]
  username varchar(50) [not null, unique]
  email varchar(100) [not null]
  created_at timestamp
}

Table posts {
  id integer [primary key]
  user_id integer [ref: > users.id]
  title varchar(200)
  content text
}

// Relationship syntax: [ref: > table.column]

Column Attributes

  • • primary key - Primary key column
  • • not null - Cannot be NULL
  • • unique - Must be unique
  • • default: value - Default value
  • • ref: > table.column - Foreign key relationship

Advanced DBML Examples

More complex database patterns including composite keys, indexes, and self-referencing relationships.

Composite Primary Keys

Table order_items {
  order_id integer
  product_id integer
  quantity integer
  price decimal

  indexes {
    (order_id, product_id) [primary key]
  }
}

Ref: order_items.order_id > orders.id
Ref: order_items.product_id > products.id

Indexes for Performance

Table products {
  id integer [primary key]
  sku varchar(50) [unique]
  name varchar(200) [not null]
  category varchar(50)
  price decimal
  created_at timestamp

  indexes {
    category [name: 'idx_category']
    (category, price) [name: 'idx_category_price']
    created_at [name: 'idx_created']
  }
}

Self-Referencing Relationships

Table employees {
  id integer [primary key]
  name varchar(100)
  manager_id integer
  department varchar(50)
}

// Self-referencing: employee reports to manager
Ref: employees.manager_id > employees.id

Many-to-Many Relationships

Table students {
  id integer [primary key]
  name varchar(100)
}

Table courses {
  id integer [primary key]
  name varchar(100)
}

// Junction table for many-to-many
Table enrollments {
  student_id integer
  course_id integer
  enrolled_at timestamp
  grade varchar(2)

  indexes {
    (student_id, course_id) [primary key]
  }
}

Ref: enrollments.student_id > students.id
Ref: enrollments.course_id > courses.id

Templates

Use pre-built templates for common database patterns: E-commerce, Blog, SaaS, and CRM. Select from the template dropdown to load example schemas.

Relationship Notation

Our ER diagrams use standard cardinality notation to show relationships between tables:

  • →
    One-to-Many: Shown with arrow pointing from the "one" side to the "many" side. Example: One user can have many posts.
  • PK
    Primary Key: Indicated by "PK" badge next to the column name. Uniquely identifies each row in a table.
  • FK
    Foreign Key: Indicated by "FK" badge. References a primary key in another table to create relationships.
  • ref:
    Defining Relationships: Use ref: > table.column in DBML to create a foreign key relationship. The arrow direction shows the "many" side.

💡 Tip: Hover over relationship lines in the diagram to see which columns are connected!

Crow's Foot Notation Guide

Crow's Foot notation is the industry-standard method for representing database relationships in ER diagrams. Understanding these symbols helps you quickly interpret the cardinality (how many) of relationships between tables.

Cardinality Symbols

One-to-Many (1:N)

The crow's foot (fork) indicates "many". Example: One customer can have many orders.

Many-to-Many (N:M)

Crow's feet on both sides. Requires a junction table. Example: Students enroll in many courses, courses have many students.

One-to-One (1:1)

Single bars on both sides. Example: One employee has one desk assignment.

Optionality Symbols

Mandatory (Required)

Double bar means the relationship is required. Every record must have a related record.

Optional

Circle (O) means the relationship is optional. A record may or may not have a related record.

📚 Reading Relationships:

Read from left to right or top to bottom: "One [table A] has many [table B]" or "Many [table A] belong to one [table B]". The symbols closest to a table describe that table's participation in the relationship.

Keyboard Shortcuts

ActionWindows/LinuxMac
SQL Formatter
Format SQLCtrl+EnterCmd+Enter
Copy formatted outputCtrl+CCmd+C
Select all text in editorCtrl+ACmd+A
ER Diagram Editor
Zoom in+ or Scroll up
Zoom out- or Scroll down
Reset zoom0 or click Reset button
Pan diagramClick and drag on canvas background
General Navigation
Navigate pagesTab to cycle through links
Skip to main contentTab from page load, then Enter
Activate focused button/linkEnter or Space
Schema Builder
Drag tableClick and drag table header
Edit columnClick edit icon on column hover
Save column editEnter in edit form

Troubleshooting

SQL Formatter not working

Symptoms: Clicking "Format SQL" button does nothing or shows an error.

Solutions:

  • Check that you've entered valid SQL syntax
  • Try selecting a different SQL dialect that matches your code
  • Clear your browser cache and reload the page
  • Disable browser extensions that might interfere with JavaScript

ER Diagram not generating

Symptoms: DBML schema entered but diagram doesn't appear.

Solutions:

  • Verify your DBML syntax is correct (check for missing braces or brackets)
  • Make sure table names and column names don't contain special characters
  • Check that relationship syntax uses ref: > table.column
  • Try using one of the templates first to ensure the tool is working

Export to PNG/PDF fails

Symptoms: Export button shows error or downloads empty file.

Solutions:

  • Ensure you've generated a diagram first before exporting
  • Try a different export format (SVG is most reliable)
  • For large diagrams, try zooming out before exporting
  • Check that your browser allows file downloads

Lost my work / History is empty

Symptoms: Previously saved queries or diagrams are missing.

Solutions:

  • Check if you cleared your browser data (localStorage/IndexedDB)
  • Make sure you're using the same browser and device
  • Private/Incognito mode doesn't save history
  • Use the Share button to create permanent links for important work

Share link not working

Symptoms: Shared link doesn't restore the diagram or SQL.

Solutions:

  • Make sure you copied the complete URL (they can be quite long)
  • Try pasting the link in a new browser tab/window
  • Very large schemas may create URLs that exceed browser limits
  • For large content, consider exporting to file instead

Keyboard shortcuts not working

Symptoms: Ctrl+Enter or Cmd+Enter doesn't format SQL.

Solutions:

  • Make sure the cursor is focused in the input textarea
  • Check for conflicting browser extensions that override shortcuts
  • On Mac, use Cmd+Enter instead of Ctrl+Enter
  • Try clicking the button directly if shortcuts don't work

Frequently Asked Questions

Is my data safe?

Yes! All tools run entirely in your browser. Your SQL code, diagrams, and data never leave your device. We use localStorage for auto-save, which you can clear anytime.

Do I need to create an account?

No! All features are available without signup. Your work is saved locally in your browser.

Which SQL dialects are supported?

We support MySQL, PostgreSQL, SQL Server, Oracle, and SQLite. The formatter adjusts syntax rules based on your selected dialect.

Can I export my diagrams?

Yes! ER diagrams can be exported as PNG images, SVG vectors, PDF documents, or SQL DDL statements.

Is DiagramDB free?

Yes, all core features are completely free with no hidden costs or premium tiers.

How do I share my work with others?

Click the Share button on any tool page to generate a shareable link. The link encodes your SQL query or diagram schema in the URL, so recipients can view and edit your work instantly without any signup.

Can I use DiagramDB offline?

Most features work offline after the initial page load since everything runs in your browser. However, you'll need an internet connection to initially load the page and to access external resources like fonts.

Where can I find my query history?

Click the History button on the SQL Formatter or ER Diagram pages. Your last 50 queries/diagrams are automatically saved in your browser's IndexedDB storage. You can click any history entry to restore it.

What is DBML syntax?

DBML (Database Markup Language) is a simple, readable syntax for defining database schemas. It's used by DiagramDB for the ER Diagram tool. Check the DBML Syntax Guide section above for examples and syntax rules.

Can I import existing SQL schemas?

Yes! Use the SQL to ERD tool to convert your CREATE TABLE statements into visual ER diagrams. The tool parses your SQL and generates an interactive diagram automatically.

What keyboard shortcuts are available?

The most useful shortcuts are Ctrl+Enter (or Cmd+Enter on Mac) to format SQL, and Ctrl+C to copy results. See the Keyboard Shortcuts section above for the complete list of available shortcuts across all tools.

How do I report a bug or request a feature?

DiagramDB is actively maintained and we welcome feedback! Since all processing happens client-side, most issues are browser-specific. Try clearing your browser cache or using a different browser first. For persistent issues, check the Troubleshooting section above.

Does DiagramDB work on mobile devices?

Yes! DiagramDB is fully responsive and works on tablets and smartphones. However, for the best experience with complex diagrams and editing, we recommend using a desktop or laptop with a larger screen.

Can I customize the formatting style?

Yes! The SQL Formatter includes options for indent size (2-8 spaces), keyword case (uppercase/lowercase), and lines between queries. Click the Options panel on the formatter page to customize these settings.