Webの表現力はCanvasやSVGによって大きく広がっています。しかし、それらを使いこなすにはプログラミングを駆使する必要があります。例えば、ちょっとした数式を埋め込むダメにプログラミングを行うのは面倒です。 そこで使ってみたいのが外部ライブラリです。今回は可換図式をWebベースで実現するtikzcd-editorを紹介します。

tikzcd-editorの使い方

可換図式というのは二つまたは複数の対象との関連性を図式化したものです。代数などの教科書でよく見たのではないでしょうか。

最初の表示です。

文字を書いて、そこに矢印を引きます。

線も様々な種類があります。

より複雑な図式も可能です。

できあがった図式はエクスポートできます。LaTeXに似ていますが、表現できませんでした。

\begin{tikzcd}
S \arrow[rd, "G"] & H \\
 & L
\end{tikzcd}

tikzcd-editorを使えば可換図式が簡単に描けます。リンクも生成でき、アクセスすればいつでも同じ図を呼び出せます。現時点では画像としての保存などはできませんが、実装はそれほど難しくないでしょう。数学に携わる方にとって非常に役立つエディタと言えそうです。

tikzcd-editorはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

tikzcd-editor yishn/tikzcd-editor: A simple visual editor for creating commutative diagrams.