矢量画图神器pikchr

先看一副通用沙漏设计模式图：

切换你的浏览器的深色/浅色模式，看看这幅图有啥不同？你一定会发现：

1. 图的背景透明
2. 图的前景色随文字前景色变化而变化。

这是怎么实现的呢？嗯，用浏览器的开发模式看，这幅图是SVG。SVG的好处：

1. 矢量图形，任意缩放无质量损失
2. 可内嵌到HTML页面里面
3. 支持CSS

因此可以做到在不同的主题下有不同的显示。而这幅图又是怎么画出来的呢？我并没有用任何图形界面程序来画，而仅仅是用代码生成的。啥，这么神奇？如果了解 graphviz，应该就没那么惊讶了。而今天我介绍的这款 pikchr ，比graphviz更为通用一些。一般来说，graphviz专注于实体和实体的关系，而布局全靠算法；而pikchr简直可以画任意的矢量图形了，其布局可以精确控制。例如上面沙漏设计模式图的代码如下

A: dot invis
B: dot invis at 4cm south of A 
C: dot invis at 3cm east of B
D: dot invis at 3cm east of A
E: dot invis at 1/2<A, C>
E1: dot invis at 1/2<A, B>
E2: dot invis at 1/2<C, D>

F: dot invis at 0.5cm south of E
G: dot invis at 1cm south of E
H: dot invis at 1cm north of E
G1: dot invis at 1/2<E1, B>
G2: dot invis at 1/2<E2, C>
H1: dot invis at 1/2<A, E1>
H2: dot invis at 1/2<D, E2>
S1: spline  from A to H1 then to F then to G1 then to B
S2: spline  from D to H2 then to F then to G2 then to C
line from A to D
line from B to C
define split_line {
  $2: line dotted from 3.5cm west of $1 to 1.5cm east of $1 
}

split_line(E, SE)
split_line(G, SG)
split_line(H, SH)


"layer 1" ljust at 0.5cm south of SG.w
"layer 2" ljust "spanning layer" ljust color red at 0.5cm south of SE.w
"layer 3" ljust at 0.5cm south of SH.w
"layer 4" ljust at 0.5cm north of SH.w

想不想试试？把上面的代码复制到 pikchrshow 里看看吧！

想学习，嗯，去pikchr主页，很简单。有问题可以在这里问我。