Mermaid JS ER Diagrams

Jump to bottom

jsipahio edited this page Nov 16, 2023 · 2 revisions

create a basic html file for your diagram with the following markup, or simply copy the example.html file

<!DOCTYPE html>
<html>
    <head>
        <title>Example ER Diagram</title>
        <script type="module">
            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
          </script>
    </head>
    <body>
        <pre class="mermaid">
            erDiagram
        </pre>
    </body>
</html>

underneath erDiagram, you can create the entity sets and relationships
the pattern for an entity set is (data types are not needed at this stage):

course{
    id
    title
    credit_hours
}

create entity relations with the following connectors
so course ||--o{ instructor is a 0 to many relation in both directions between instructor and course, as an instructor may be teaching 0 to many courses, and a course (in this example) has only one instructor.