tableau/query-graphs(opens in a new tab)
Language: TypeScript
A visualizer for queries - Hyper, Postgres, Tableau
- stars
- 105
- watchers
- 7
- forks
- 32
- open issues
- 9
- Last updated
- 10/29/2026
Language: TypeScript
A visualizer for queries - Hyper, Postgres, Tableau
Helping people see and understand queries - Visualize your own query!
"Query graphs" visualizes query plans for PostgreSQL, DuckDB, Hyper, Umbra/CedarDB, and Tableau logical queries and can easily be extended for other database systems.
Query graphs is based on the experience of Tableau and the Hyper team with debugging complex OLAP queries. In contrast to many competing plan visualizers, query graphs:
For a first impression, see our list of example visualizations. A few examples are:
You can use https://tableau.github.io/query-graphs/, you do not need to install anything. If you still need a local deployment, see the build and deployment guide.
Note that we never upload your query plan. All processing happens directly inside your browser. The query plans never leave your machine - we value your privacy ;)
Supported query plan formats:
EXPLAIN (FORMAT JSON). It is particularly useful with EXPLAIN (ANALYZE, FORMAT JSON).EXPLAIN (FORMAT JSON) or EXPLAIN (FORMAT JSON), and optimizer-stage output.EXPLAIN (VERBOSE) queries to obtain query plans. See dump-plans.py for an example.Pull requests welcome!
In particular, we would be happy about support for additional query plan formats from additional database systems. New core functionality is also welcome, but you might want to open a GitHub issue first and get some feedback, before spending considerable amounts of time on cool new features.
To get started hacking on query graphs, see the developer documentation.
Query Graphs uses the amazing react-flow library for rendering. For layouting the query plan, we use d3-flextree.