Customising the output

Django-spaghetti-and-meatballs makes heavy use of the vis.js network library, so most customisation is either based on django template modification and overrides or changes to the vis.js settings. Knowing how to use both will make customisation a breeze, but below are some simple recipes to get you started.

Serving up a new template

The default template is a frugal dish that serves spaghetti with no extras. To serve the spaghetti in a fancier setting, just override the django_spaghetti/plate.html template in your projects templates directory.

You’ll probably want your plate to look similar to that served by django_spaghetti, which can be viewed on github

However, the important things when making a plate are:

• make sure you import vis.js and vis.css before the script that creates the graph.
• make your your script loads the meatballs (nodes) and spaghetti (edges) with the safe django template filter

Changing how vis.js is loaded

By default Django-spaghetti-and-meatballs loads vis.js from the Cloudflare CDN, but this might not be appropriate for your project and may want to load it locally.

You can do this by following the above instructions and just changing the extra_scripts block.

Changing how vis.js lays out the graph

Dealing vis.js network customisation is beyond the scope of this project, but vis.js has comprehensive documentation of their network library available online. In the plate.html template you can make changes to the settings when you setup the graph. By default django-spaghetti-and-meatballs uses a hierarchical layout, but any setup should work. For example, to turn off hierarchical layout you can use the settings:

"layout": {
    hierarchical: false,
},

New flavours of meatballs

By default, django-spaghetti-and-meatballs shows a model with all its fields and the documentation from the docstring in a hover over pop-up pane. The layout for this box is included in the django_spaghetti/meatball.html template. To change how models are shown on hover, just override the django_spaghetti/meatball.html template in your projects templates directory.

You’ll probably want your meatball to taste similar to that served by django_spaghetti, which can be viewed on github

For example, to show just the models name, number of fields and its documentation your template would look like this:

<div style="max-width:350px;white-space: normal;">
    <div style="border-bottom:1px solid black">
        Model: {{ model.model }}<br>
        # of fields: {{ fields|length }}
    </div>
    <tt style="white-space:pre-line">
        {{ model.doc }}
    </tt>
</div>