I'd like to draw UML diagrams within jupyter and I've been trying to achieve this using nomnoml with one of the jupyter magics %%javascript or %%html but I can't seem to get it to render.
For instance using this simple example from nomnoml:
%%html
<script src="//unpkg.com/graphre/dist/graphre.js"></script>
<script src="//unpkg.com/nomnoml/dist/nomnoml.js"></script>
<canvas id="target-canvas"></canvas>
<script>
var canvas = document.getElementById('target-canvas');
var source = '[nomnoml] is -> [awesome]';
nomnoml.draw(canvas, source);
</script>
...the output is blank and using browser inspection I noticed these errors:
Uncaught ReferenceError: nomnoml is not defined
Uncaught ReferenceError: graphre is not defined
Also tried a slight variation with graphre.js and nomnoml.js saved to my notebook directory. This snippet in an html file renders properly in the browser but not from a jupyter cell.
%%html
<html>
<script src="graphre.js"></script>
<script src="nomnoml.js"></script>
<canvas id="target-canvas"></canvas>
<script>
var canvas = document.getElementById('target-canvas');
var source = '[nomnoml] is -> [awesome]';
nomnoml.draw(canvas, source);
</script>
</html>
UPDATE: the problem only appears to be with jupyter notebook, with jupyter lab both variants work as expected.
