{"id":13880682,"url":"https://github.com/sqlhabit/sql_schema_visualizer","last_synced_at":"2026-03-11T15:19:43.190Z","repository":{"id":65282853,"uuid":"589262718","full_name":"sqlhabit/sql_schema_visualizer","owner":"sqlhabit","description":"SQL schema visualisation built with ReactFlow.","archived":false,"fork":false,"pushed_at":"2025-12-20T14:43:56.000Z","size":4957,"stargazers_count":264,"open_issues_count":2,"forks_count":42,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-12-22T16:53:35.323Z","etag":null,"topics":["db-schema","graph","react","sql","typescript","visualization"],"latest_commit_sha":null,"homepage":"https://sqlhabit.github.io/sql_schema_visualizer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sqlhabit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-15T16:02:50.000Z","updated_at":"2025-12-20T14:42:26.000Z","dependencies_parsed_at":"2024-03-13T05:34:10.548Z","dependency_job_id":"e5daea45-d741-4c59-b484-bd50c9d7fe5e","html_url":"https://github.com/sqlhabit/sql_schema_visualizer","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/sqlhabit/sql_schema_visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlhabit%2Fsql_schema_visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlhabit%2Fsql_schema_visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlhabit%2Fsql_schema_visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlhabit%2Fsql_schema_visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sqlhabit","download_url":"https://codeload.github.com/sqlhabit/sql_schema_visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqlhabit%2Fsql_schema_visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30385570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T14:10:17.325Z","status":"ssl_error","status_checked_at":"2026-03-11T14:09:37.934Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["db-schema","graph","react","sql","typescript","visualization"],"created_at":"2024-08-06T08:03:23.379Z","updated_at":"2026-03-11T15:19:43.143Z","avatar_url":"https://github.com/sqlhabit.png","language":"TypeScript","readme":"![SQL Schema Visualizer snapshot](https://raw.githubusercontent.com/sqlhabit/sql_schema_visualizer/main/docs/snapshot.png)\n\n\u003cdiv align=\"center\"\u003e\n\n# SQL Schema Visualizer\n\n![GitHub License MIT](https://img.shields.io/github/license/sqlhabit/sql_schema_visualizer?color=%2347A3F3)\n![GitHub release (latest by date)](https://img.shields.io/github/v/release/sqlhabit/sql_schema_visualizer?color=%2347A3F3)\n\nA relational database schema visualizer built with React and [ReactFlow](https://github.com/wbkd/react-flow).\n\nOriginally built for [the SQL Habit course](https://www.sqlhabit.com/), it's available for everyone. Enjoy :heart:\n\n[:mag: How to visualize your schema](https://github.com/sqlhabit/sql_schema_visualizer#how-to-visualize-your-schema) | [:microscope: How it works](https://github.com/sqlhabit/sql_schema_visualizer#under-the-hood) | [:handshake: Contributing](https://github.com/sqlhabit/sql_schema_visualizer#contributing)\n\n\u003c/div\u003e\n\n## Features\n\n:dash: **Easy to start**: you can import your schema(s) in 1.5 minutes.\n\u003cbr\u003e\n:checkered_flag: **Easy to finish**: you only need to configure edges and table positions.\n\u003cbr\u003e\n:wrench: **Customizable**: add table/column descriptions and schema colors.\n\u003cbr\u003e\n:rocket: **Make it yours**: you get the whole React app, so you can change everything.\n\n### Highlight specific tables and columns via a URL param\n\nYou can highlight tables and columns via the `highlights` URL param. Here's an example URL:\n\nhttps://sqlhabit.github.io/sql_schema_visualizer/databases/bindle?highlights=users:id,email,signup_date;purchases:user_id,created_at\n\n:mag: Note that tables are followed by semicolons `:` and column names are separated with commas `,`. Here's how it looks like:\n\n\u003cimg src=\"https://raw.githubusercontent.com/sqlhabit/sql_schema_visualizer/main/docs/table_highlights.png\" width=\"400px\"\u003e\n\n## How to visualize your schema(s)\n\nSchema Visualizer can visualize multiple schemas – each schema will have its own URL.\n\nA schema configuration lives in [its own folder](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases) and contains a bunch of [simple JSON files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle).\n\nHere's how you can import your schema:\n\n### Step 1. Clone and set up the repo\n\nClone the repo:\n\n```bash\ngit clone https://github.com/sqlhabit/sql_schema_visualizer.git\n\ncd sql_schema_visualizer\n```\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\n:bulb: You might need to install [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) as well to make sure you're not using an old Node version.\n\n### Step 2. Reset schema configuration\n\nBy default, Schema Visualizer contains [SQL Habit's](https://www.sqlhabit.com) dataset schemas. Let's delete all before we import new schemas:\n\n```bash\nnpm run reset\n```\n\n### Step 3. Export your schema into a CSV file\n\nA schema config consists of [tables](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables), [edges](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json), [table positions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) and [schema colors](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json).\n\nGood news is that we can import tables using an SQL query. :rocket:\n\nPick a query for your database type and save the output to a CSV file like `my_schema.csv`. Put it to the root folder (next to [the `schema.csv.template` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/schema.csv.template)).\n\n#### Postgres / Redshift\n\n```sql\nSELECT\n  t.table_schema,\n  t.table_name,\n  c.column_name,\n  c.data_type,\n  c.ordinal_position\nFROM information_schema.tables t\nLEFT JOIN information_schema.columns c\n  ON t.table_schema = c.table_schema\n    AND t.table_name = c.table_name\nWHERE\n  t.table_schema NOT IN ('information_schema', 'pg_catalog')\n  AND t.table_name NOT IN ('schema_migrations', 'ar_internal_metadata')\nORDER BY 1, 2, 5\n```\n\n#### BigQuery\n\n```sql\nSELECT\n  c.table_schema,\n  c.table_name,\n  c.column_name,\n  c.data_type,\n  c.ordinal_position\nFROM %PROJECT_NAME%.%DATASET_NAME%.INFORMATION_SCHEMA.COLUMNS c\nJOIN %PROJECT_NAME%.%DATASET_NAME%.INFORMATION_SCHEMA.TABLES t\n  ON c.table_schema = t.table_schema\n  AND c.table_name = t.table_name\nWHERE\n  c.table_schema NOT IN ('INFORMATION_SCHEMA')\nORDER BY 1, 2, 5\n```\n\n:mag: Make sure to replace `%PROJECT_NAME%.%DATASET_NAME%` with proper values.\n\n#### Snowflake\n\n```sql\nSELECT\n  c.table_schema,\n  c.table_name,\n  c.column_name,\n  c.data_type,\n  c.ordinal_position\nFROM information_schema.columns c\nJOIN information_schema.tables t\n  ON c.table_schema = t.table_schema\n  AND c.table_name = t.table_name\nWHERE\n  c.table_schema NOT IN ('INFORMATION_SCHEMA')\n  AND t.table_type = 'BASE TABLE'\nORDER BY 1, 2, 5\n```\n\n#### MySQL\n\n```sql\nSELECT\n  c.table_schema,\n  c.table_name,\n  c.column_name,\n  c.data_type,\n  c.ordinal_position\nFROM information_schema.columns c\nLEFT JOIN information_schema.views v\n  ON v.table_schema = c.table_schema\n    AND v.table_name = c.table_name\nWHERE\n  c.table_schema NOT IN ('sys','information_schema', 'mysql', 'performance_schema')\n  AND c.table_name NOT IN ('schema_migrations', 'ar_internal_metadata')\nORDER BY 1, 2, 5\n```\n\n#### [SAP ASE](https://github.com/sqlhabit/sql_schema_visualizer/issues/8)\n\n```sql\nSELECT\n  'public' as table_schema,\n  so.name as table_name,\n  sc.name as column_name,\n  sc.type as data_type,\n  sc.colid as ordinal_position\nFROM syscolumns sc\nINNER JOIN sysobjects so\n  ON sc.id = so.id\nWHERE so.type = 'U'\n```\n\n### Step 4. Import schema\n\nNow we can import tables. The argument of the `npm run import` command is your CSV file name:\n\n\n```bash\nnpm run import my_schema\n```\n\nYou should see table JSON files added to the `src/config/databases/my_schema/tables` folder.\n\nLet's spin up a dev server and see our tables [in the browser](http://localhost:3000/):\n\n```bash\nnpm run start\n```\n\n### Step 5. Configure your schema\n\n#### A. Set primary keys\n\nTo show a :key: icon next to the column name, add the `key` param to a column definition. Here's an example from [the `users` table](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tables/users.json):\n\n```json\n{\n  \"name\": \"id\",\n  \"key\": true,\n  \"description\": \"Unique identifier of a user.\",\n  \"type\": \"number\"\n}\n```\n\n#### B. Add edges\n\nDefine edges in [the `src/config/edges.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json):\n\nHere's an example for **has one** relation:\n\n```json\n{\n  \"source\": \"users\",\n  \"sourceKey\": \"id\",\n  \"target\": \"profiles\",\n  \"targetKey\": \"user_id\",\n  \"relation\": \"hasOne\"\n}\n```\n\nand **has many** relation:\n\n```json\n{\n  \"source\": \"users\",\n  \"sourceKey\": \"id\",\n  \"target\": \"purchases\",\n  \"targetKey\": \"user_id\",\n  \"relation\": \"hasMany\"\n}\n```\n\n#### C. Add schema colors\n\nYou can set custom header colors for tables that belongs to the same schema in [the `schemaColors.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json). Here's an example:\n\n```json\n{\n  \"DEFAULT\": \"#91C4F2\",\n  \"public\": \"#BEB8EB\",\n  \"adjust\": \"#AFA2FF\",\n  \"helpers\": \"#75C9C8\",\n  \"web_analytics\": \"#F6BDD1\",\n  \"mobile_analytics\": \"#FFD791\"\n}\n```\n\n#### D. Add table positions\n\nTable positions are defined in the [`tablePositions.json` file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json):\n\n```json\n{\n\"adjust.callbacks\": {\n  \"x\": 864,\n  \"y\": -192\n},\n\"helpers.dates\": {\n  \"x\": 512,\n  \"y\": 528\n},\n\"mobile_analytics.events\": {\n  \"x\": 656,\n  \"y\": -336\n}\n```\n\nAfter you import a schema, every table will have a default position set in the [`tablePositions.json`](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) file.\n\nThere's no need to update them manually. Instead:\n\n1. Open Schema Visualizer [http://localhost:3000](http://localhost:3000).\n2. Drag table nodes around to find a perfect arrangement.\n3. **CTRL** + **P**. It copies node positions JSON to your clipboard.\n4. Paste (**CMD** + **V**) JSON with positions to the [`tablePositions.json`](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json) file of your schema.\n5. PROFIT :beers:\n\n#### E. Add table and column descriptions\n\nTable and column descriptions are visible if you press `CMD` key and hover over a table or column name.\n\nAdd custom copy to the `\"description\"` keys [in table config files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables/users.json). Here's an example:\n\n```json\n{\n  \"name\": \"users\",\n  \"description\": \"This table contains all user records of Bindle.\",\n  \"columns\": [\n    {\n      \"name\": \"id\",\n      \"key\": true,\n      \"description\": \"Unique identifier of a user.\",\n      \"type\": \"number\"\n    }\n  ]\n}\n```\n\n### Publish your schema online\n\n#### Building your Schema Visualizer\n\nOnce you're finished with config file, build the project and upload the files from the [`/build`](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/build) folder to your hosting of choice:\n\n\n```sh\nnpm build\n```\n\nI highly recommend https://surge.sh/. It'll take you ~2 minutes to deploy your schema online:\n\n1. `npm install --global surge`.\n2. `cd build`\n3. `surge`\n4. PROFIT :beers:\n\n## Contributing\n\nYou're more than welcome to contribute. In fact, I'm really looking forward to it! :rocket:\n\nJust make sure to check out the [contribution guidelines](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/CONTRIBUTING.md). :pray:\n\n## Under the hood\n\nSchema Visualizer is built with [ReactFlow](https://reactflow.dev/).\n\nEvery table is a ReactFlow [Custom Node](https://reactflow.dev/docs/guides/custom-nodes/) with custom [Markers](https://reactflow.dev/docs/examples/edges/markers/) (those SVG icons with dot and fork).\n\nHere's [a ReactFlow sandbox example](https://github.com/wbkd/react-flow-example-apps/tree/main/reactflow-create-react-app) of Custom Nodes.\n\n### Config files\n\nIt all starts with plain [JSON config files](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config). There're 4 of them:\n\n* [tables](https://github.com/sqlhabit/sql_schema_visualizer/tree/main/src/config/databases/bindle/tables)\n* [edges](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/edges.json)\n* [tablePositions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/tablePositions.json)\n* [schemaColors](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/config/databases/bindle/schemaColors.json)\n\nLater they're translated into Nodes and Edges digestible by ReactFlow.\n\n### Nodes and Handles\n\nReactFlow draws SVG edges between custom [Table Nodes](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/components/TableNode.tsx#L64).\n\nThose edges start and end in ReactFlow Handle's. Every table column row has 2 handles – left and right. :bulb: A handle could be either **source** (for an outgoing edge) or a **target** (for an incoming edge). Handles are configured [based on the edges config](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/initializeNodes.ts#L4).\n\n### Edges\n\nAs you can see, edges are dynamically change handles and orientation depending on relative node positions. That way it's less config to maintain, here're [helper](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/calculateTargetPosition.ts) [functions](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/helpers/calculateSourcePosition.ts) that take care of that.\n\n### More details\n\n[Here's the entry file](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/src/Visualizer/index.tsx) to the ReactFlow app.\n\nHave fun exploring the app, it was a pleasure to build! If you have a question – open a [new issue](https://github.com/sqlhabit/sql_schema_visualizer/issues/new/choose). :beers:\n\n## Development\n\nYou'll need to install dependencies and start a dev server:\n\n```sh\nnpm install\n\nnpm start\n```\n\nYou'll find the running visualizer at [http://localhost:3000](http://localhost:3000).\n\n## Testing\n\nTests are written with the [React Testing Library](https://testing-library.com/docs/react-testing-library/example-intro). Run all of them via\n\n\n```sh\nnpm test\n```\n\n## Maintainers\n\nSchema Visualizer is a project of Anatoli of [SQL Habit](https://www.sqlhabit.com/). Hi from Berlin! :wave: :beers:\n\nAnatoli Makarevich • [Twitter](https://twitter.com/makaroni4) • [Github](https://github.com/makaroni4)\n\n\n## License\n\nSQL Schema Visualizer is [MIT licensed](https://github.com/sqlhabit/sql_schema_visualizer/blob/main/LICENSE).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqlhabit%2Fsql_schema_visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsqlhabit%2Fsql_schema_visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqlhabit%2Fsql_schema_visualizer/lists"}