GraphvizFigure Test
关于HTML转义
由于Graphviz的源代码需要>等特殊的HTML字符，所以不能对这类字符进行转义。因此，应当使用：
let src = this.innerHTML;
来原样取出所有的HTML代码。
但实际上，上面的代码将导致HTML中的>等特殊字符被转化为>。因此，需要将它们转换回来：
src = src.replace(/</g, '<')
.replace(/>/g, '>');
Simple
在HTML页面中编写下面代码：
digraph {
a -> b;
c -> d;
}
即可显示：
digraph {
a -> b;
c -> d;
}
HTML-Like Label
而对于类似于下面的带有table的代码时：
digraph {
struct1 [shape=plaintext, label=<
<TABLE>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
>];
}
在使用：
let src = this.innerHTML;
时，代码将会变成：
即自动加上了tbody标签。而Graphivz不认识此标签，从而导致编译出错。因此，可使用：
src = src.replace(/</g, '<').replace(/>/g, '>')
.replace(/<tbody>/g, '')
.replace(/<\/tbody>/g, '');
来将它们替换为空字符串。
显示：
digraph {
struct1 [shape=plaintext, label=<
>];
}
支持亮色主题的转换
由于GraphvizFigure被设计为尽可能轻量级的组件，因此将被广泛应用。而当用户切换亮色主题时，如若不能智能地随之而切换颜色，将不可忍受。因此，先预定义了两种主题的源代码：
this.srcLight = ...;
this.srcDark = ...;
在本站中，当用户单击亮色主题的按钮时，将触发一个自定义事件：
window.parent.dispatchEvent(new CustomEvent('color-scheme-changed', { detail: eventDetail }));
GraphvizFigure可响应此事件：
window.addEventListener('color-scheme-changed', (evt) => {
this.decideScheme();
this.render();
});
decideScheme() {
if (getCurrColorTheme() === 'dark') {
this.src = this.srcDark;
} else {
this.src = this.srcLight;
}
}
调整亮色主题后，重新渲染即可。剩下的问题，便是如何才能设计好两套亮色主题的问题了。
