https://ngtkana.hatenablog.com/entry/2025/11/03/151032

https://tikzjax.com を使ってTikZ 図をレンダーするテストです。（ちょっとレンダーが遅い……）

どれくらい遅いかというと、うちの PC をブオォォオと唸らせた挙げ句数秒後にやっとレンダーされます。スマホで見たら 12 秒掛かりました。これはなんですか？

記法

<script type="text/tikz">
<!-- ここに色々書きます -->
</script>

例

様々な B-tree node

2-node	左傾 3-node	右傾 3-node	balanced 4-node

回転

右回転	左回転

コード

ヘッダー

<head>
  <!-- MathJax -->
  <script>
    window.MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']], processEscapes: true}};
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

  <!-- pseudocode.js -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.css">
  <script src="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.js"></script>

  <script> document.addEventListener(
      'DOMContentLoaded',
      function () {
        pseudocode.renderClass(
          "code pseudocode",
          {
            lineNumber: true,
            noEnd: true,
            indentSize: '2em',
          });
        if (window.MathJax && window.MathJax.typeset) {
          MathJax.typeset();
        }
      }); </script>

  <!-- superhtml.js -->
  <link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
  <script src="https://tikzjax.com/v1/tikzjax.js"></script>

</head>

表1

<table>
<tr>
<td>2-node</td>
<td>左傾 3-node</td>
<td>右傾 3-node</td>
<td>balanced 4-node</td>
</tr>
<tr>
<td align="center"><script type="text/tikz">
\usetikzlibrary {positioning}
\tikz [circle] {
  \node [draw,fill=gray] (0) at (0, 0)  {};
}
</script></td>
<td align="center"><script type="text/tikz">
\usetikzlibrary {positioning}
\tikz [circle] {
  \node [draw,fill=gray] (0) at (0, 0)  {};
  \node [draw,fill=pink] (1) at (-1, -0.8) {} edge (0);
}
</script></td>
<td align="center"><script type="text/tikz">
\usetikzlibrary {positioning}
\tikz [circle] {
  \node [draw,fill=gray] (0) at (0, 0)  {};
  \node [draw,fill=pink] (1) at (1, -0.8) {} edge (0);
}
</script></td>
<td align="center"><script type="text/tikz">
\usetikzlibrary {positioning}
\tikz [circle] {
  \node [draw,fill=gray] (0) at (0, 0)  {};
  \node [draw,fill=pink] (1) at (-1, -0.8) {} edge (0);
  \node [draw,fill=pink] (2) at (1, -0.8) {} edge (0);
}
</script></td></tr>
</table>

表2

<table>
<tr>
<td>右回転</td>
<td>左回転</td>
</tr>
<tr>
<td align="center"><script type="text/tikz">
\tikz [circle] {
  \node [draw,fill=gray,label=above:$x$] (0) at (0, 0)  {};
  \node [draw,fill=pink,label=above:$y$] (1) at (-2, -0.8) {} edge (0);
  \node [draw,fill=gray,label=above:$c$,regular polygon,regular polygon sides=3] (2) at (-1, -2) {} edge[dashed] (1);
  \draw[->] (0.5,-1) -- (1.5,-1);
  \node [draw,fill=gray,label=above:$y$] (3) at (2, 0)  {};
  \node [draw,fill=pink,label=above:$x$] (4) at (4, -0.8) {} edge (3);
  \node [draw,fill=gray,label=above:$c$,regular polygon,regular polygon sides=3] (5) at (3, -2) {} edge[dashed] (4);
}</script></td>
<td align="center"><script type="text/tikz">
\tikz [circle] {
  \node [draw,fill=gray,label=above:$x$] (0) at (-2, 0)  {};
  \node [draw,fill=pink,label=above:$y$] (1) at (0, -0.8) {} edge (0);
  \node [draw,fill=gray,label=above:$c$,regular polygon,regular polygon sides=3] (2) at (-1, -2) {} edge[dashed] (1);
  \draw[->] (0.5,-1) -- (1.5,-1);
  \node [draw,fill=gray,label=above:$y$] (3) at (4, 0)  {};
  \node [draw,fill=pink,label=above:$x$] (4) at (2, -0.8) {} edge (3);
  \node [draw,fill=gray,label=above:$c$,regular polygon,regular polygon sides=3] (5) at (3, -2) {} edge[dashed] (4);
}</script></td>
</tr>
</table>