Quickstart

Get started with ModelVisualizer, with CDN and a template starter page.

Browser scripts

You can get the latest browser-ready script:

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://altwalker.github.io/model-visualizer/build/model-visualizer.css">

JavaScript

Place the following <script> s near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://altwalker.github.io/model-visualizer/build/model-visualizer.js"></script>

Dependencies

Required Dependencies

Optional Dependencies

Milligram (Optional) - for the forms design.

Initialize the ModelVisualizer

The following code initializes ModelVisualizer in editMode inside the element with the id visualizer, using default models defined in the library.

let visualizer = new ModelVisualizer({container: "visualizer", editMode: false});

Yo can find a working example here.

Starter Template

Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
    <head>
        <title>ModelVisualizer - Starter Template</title>

        <!-- ModelVisualizer CSS -->
        <link rel="stylesheet" href="https://altwalker.github.io/model-visualizer/build/model-visualizer.css">

        <!-- Optional Milligram CSS -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
    </head>
    <body>
        <div id="visualizer">
        </div>

        <!-- VueJS -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

        <!-- lodash -->
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

        <!-- Model-Visualizer -->
        <script src="https://altwalker.github.io/model-visualizer/build/model-visualizer.js"></script>

        <!-- Main JS -->
        <script>
            let visualizer = new ModelVisualizer({container: "visualizer", editMode: false});
        </script>
    </body>
</html>