![]() ![]() By looping over the results of these two queries and “printing out” the appropriate Mermaid ER diagram syntax into a CLOB, my diagram_text() function returns the data-driven diagram syntax for all tables in the current schema. The USER_TABLES query, using an appropriate MINUS clause, finds me the tables that aren’t already involved in a “parent/child” relationship above. ![]() Where fk.constraint_type = 'R' /* Relationship, a.k.a. On pk.constraint_name = fk.r_constraint_name By joining a second time to the USER_CONSTRAINTS table, I can query both child and parent table names at once like this: select fk.table_name as many_table, The USER_CONSTRAINTS query finds the tables involved in foreign key constraints as a “child” table, and gives the name of the primary key constraint of the “parent” table involved in the relationship. I made quick work of this task in a PL/SQL package function diagram_text() that combined a query over the USER_CONSTRAINTS data dictionary view with another query over the USER_TABLES view. In no time, my APEX page now displayed a text-based Mermaid ER diagram: APEX page including a Mermaid ER diagram based on its text-based syntax Generating Mermaid Diagram Syntax from a QueryĪfter proving out the concept, next I tackled generating the appropriate Mermaid erDiagram syntax based on the tables and relationships in the current APEX application schema. Set the contents of the diagram region to be this element.Render the diagram defined by the text passed in as an SVG drawing.These two lines of “When Page Loads” JavaScript do the following: Then, after including a Static Content region in my page and assigning it a Static Id of diagram, the two lines of JavaScript code I added to the page-level Execute When Page Loads section looked like this: mermaid.initialize() ĭocument.getElementById('diagram').innerHTML = svg In order to reference the current version of the Mermaid JS library on my page, I typed this URL into my page-level JavaScript > File URLs property: After referencing the Mermaid JS library URL, including a diagram into a page in my APEX application took a truly tiny amount of JavaScript: one line to initialize the library and one line to render the diagram from the text syntax. To maximize the usefulness of the diagrams, the Mermaid project provides a simple JavaScript API to incorporate scalable vector graphics ( SVG) renderings of text-based diagrams into any web page or web application. Mermaid Live editor for experimentation at įor example, after consulting their excellent documentation, I immediately tried including column details into my ER diagram for the DEPT table as shown below: Mermaid Live editor showing ER diagram with column info and library of diagram samples Rendering Mermaid Diagrams in Web Pages The handy Mermaid Live site provides a “sandbox” editor experience where you can experiment with all the different kinds of diagrams, explore samples, and instantly see the results. At the time of writing, supported diagram types include Entity/Relationship, Class, Gantt, Flow, State, Mindmap, User Journey, Sequence, Git branch diagrams, and pie charts. Mermaid supports creating many different kinds of diagrams, each using a simple text-based syntax like the ER diagram above. Since Markdown is used to provide check-in comments, on these sites (and others like them) it’s easy to include Mermaid diagrams in the helpful summaries you provide along with every commit. Popular source control repository sites like GitHub and GitLab have also embraced Mermaid diagrams. ![]() For example, editing a Mermaid diagram in a readme file using Typora looks like this: Editing a Mermaid diagram in a WYSIWYG Markdown editor like Typora If your markdown editor offers a WYSIWYG experience, the effect is even more dramatic and productive: you immediately see the results of the diagram you’re editing. ![]() Including a diagram like this into your product doc is as simple as shown below: Adding a Mermaid diagram to a Markdown file The typical README.md file of a software project can include an Entity/Relationship diagram by simply including text like this: erDiagram The Mermaid JS open source project aims to improve software documentation quality with an easy-to-maintain diagram syntax for Markdown files. After recently stumbling on the open source Mermaid JS project, I had a lightbulb moment and set out to build my own data model visualizer app with APEX itself. I often want to visualize my Oracle APEX app’s data model as an Entity/Relationship diagram to remind myself how tables are related and exactly how columns are named. ![]()
0 Comments
Leave a Reply. |