Hugoで図式

Hugoを使って図式をリアルタイム描画する方法を検討する。¹

TikZは普通に使える！

まずheaderに次を追記する。

<script src="https://tikzwolke.com/v1/tikzwolke.js"></script>

そのあと、たとえば次をmarkdown中に書き込むと動く²

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

なので頑張れば図式を書ける³

<script type="text/tikz">
  \begin{tikzpicture}
    \draw[->] (0.5,0) -- (2.5,0);
    \draw[->] (3,-0.5) -- (3,-2.5);
    \draw[->] (0.3,-0.3) -- (2.7,-2.7);
    \node at (0,0) {$a$};
    \node at (3,0) {$b$};
    \node at (3,-3) {$c$};
    //circlerightarrowの代替
    \draw[-] (2.1,-1) arc [start angle = 0, end angle = 330, radius = 0.15];
    \draw[->] (2.1,-1) -- (2.102,-1.005);
  \end{tikzpicture}
</script>