在网页上使用TikZ!

TikZ是LaTeX users极为热爱的绘图工具。基于LaTeX，编程化的排版语言，TikZ在诸多图形绘制中相比传统的计算机绘制方法有较大优势。这里介绍几种网页中绘制图形的方法。

直接截图

这恐怕是绝大多数网友使用的方法。使用多种绘图软件绘制图形，然后通过保存或者截图工具获得图像，放入图床网站然后导入网页中。
这种方法不免有所繁琐，但是这是需要前置知识最少的方法，简单粗暴。

使用广泛的JS绘图库

有一些特定的图表，已经被他人实现并编写成JavaScript库可供使用，例如

  • flowchart.js提供了流程图(Flow Chart)的绘图工具
  • JS-Sequence提供了时序图(Sequence DIagrams)的绘图工具
  • mermaid提供了甘特图、类图等常见图形的绘制方法

这些在许多Markdown插件中已经移植过了，比如Markdown Preview Enhanced。但是毕竟网页上的显示方法和本地的Markdown插件还是有区别的。为了更好的视觉效果，自主在网页中添加上述库也是没有什么坏处的。有可能加载速度会变慢？本网站部署在GitPages上，加载速度本来就慢，无所谓了。

使用TikZJax在网页中加载TikZ

这才是本篇杂谈的重点内容。TikZJax的工作原理是，将TeX代码交由Web2js编译，将编译结果转换成svg插入网页，从而实现了在网页中加载TikZ的功能。

要想使用本功能，需要在HTML的<head>区域加载如下代码

1
2
<link rel="stylesheet" type="text/css" href="http://tikzjax.com/v1/fonts.css">
<script src="http://tikzjax.com/v1/tikzjax.js"></script>

然后就可以使用如下代码框架绘制图形了。

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

如果网络连接良好，可以得到渲染图如下。

值得注意的是，该程序使用的TeX有如下内容

1
2
3
\documentclass[margin=0pt]{standalone}
\def\pgfsysdriver{pgfsys-ximera.def}
\usepackage{tikz}

所以目前是无法使用其他TikZ宏包的。这是从一个使用者的角度出发的。学习知识并改善之是当前互联网精神的重要内核之一。将来会仔细研究相关知识，现在就先用着简单功能吧！