Skip to content

altwalker/model-visualizer

Repository files navigation

Model-Visualizer

A JavaScript library for visualizing and visually editing JSON models for AltWalker and GraphWalker.

Installation

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">

JS

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>

Required Dependencies

Optional Dependencies

  • Milligram (Optional) - for the forms design.

Example

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.

Setting Up a Development Environment

Install the npm dependencies:

$ npm install

Running locally

$ npm run dev

Now you can visit http://localhost:8080/ and you should see a live demo.

Building

$ npm run build

Will create a build inside the public/ directory.

Running Tests

$ npm run test

Support

For help, discussion about best practices, sharing ideas, projects, or any other conversation that benefits from being searchable:

For casual chit-chat with us or with other members of the community:

License

This project is licensed under the GNU General Public License v3.0.