Jupyter Notebook中集成nomnoml渲染UML图报错无法显示

核心现象 #

尝试在Jupyter中通过%%html、%%javascript魔法命令集成nomnoml实现UML图绘制时，相同代码可在Jupyter Lab环境下正常渲染，仅在传统Jupyter Notebook环境下输出空白，无法正常完成图形绘制。

复现代码与对应报错 #

• CDN 引入依赖的测试代码：

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

运行后页面输出完全空白，浏览器开发者工具控制台可捕获两类报错：
Uncaught ReferenceError: nomnoml is not defined
Uncaught ReferenceError: graphre is not defined

• 本地文件引入依赖的测试代码：
  将graphre.js、nomnoml.js存储到当前Jupyter笔记本所在的工作目录下，单元格运行代码如下：

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

该段代码单独保存为本地HTML文件后，可在普通浏览器中正常渲染出目标UML图形，但放入Jupyter Notebook单元格中运行时依旧无法正常显示内容。

内容的提问来源于stack exchange，提问作者jayveesea