SchemaGraph is a MySQL database schema visualization tool inspired by Schemaball. Recently I've been working on a personal project that has a complex schema structure; it has many tables and dozens of foreign key constraints among them. I need a tool which displays all of the tables at once and all of the interrelationships among them so that I can keep track of what is going on. I would have used Schemaball instead of developing a new solution, but I found a couple disadvantages with Schemaball: it generates static raster images when I wanted a dynamic vector images, and its requirements include several dependencies on Perl modules which can be a hassle to install. I really liked the format that Schemaball used to visualize a database schema, but I just wanted to have a standalone script which I could place on a web server, point it at a database, and have it generate an interactive SVG image. To use with future projects, I wanted maximum portability and minimal configuration with immediate results.
SchemaGraph, like Schemaball, queries the MySQL information_schema database to get all of the necessary information about a database's (InnoDB) tables to construct a graph; this graph is then output as an interactive SVG image (see example) with the following features:
- Tables in the schema are placed equidistantly around a circle.
- Clicking the image causes the graph to rotate.
- Foreign key constraints are represented by bézier curves connecting table labels.
- Hovering over a table or a constraint causes the table's label to highlight along with all of its constraint paths (both incoming and outgoing).
- The paths representing incoming foreign key constraints are highlighted in a different color than outgoing constraints.
- Multiple constraints between the same two tables are prevented from overlapping by giving a unique curve to each of the lines.
- Hovering over a constraint produces a tooltip which shows the names of the fields that are linked by the constraint.
To use this tool, simply place schemagraph.php on a web server and provide values for the constants needed to establish the database connection. You may also modify the constants for the circle radius, font size, and image dimensions. Since the script outputs plain SVG with inline CSS and JavaScript, you may further customize it as needed to get the desired style or behavior.
The code is released under the GNU General Public License 2.0.
(I have put redirects from my blog to GitHub, so the comments on my blog are no longer accessible there. For archive purposes, I've posted the raw comments to gh-pages.)
Developed by Weston Ruter (@westonruter).