在 Markdown 中优雅绘图

💡 原文中文,约7500字,阅读约需18分钟。
📝

内容提要

介绍了在Markdown中绘制SVG矢量图的方法,使用了Graphviz/Asymptote/LaTeX三种引擎,以及生成SVG文件的方法和减小SVG文件体积的技巧。最后给出了一个使用PGF/Tikz绘制的饼状图的完整示例。

🎯

关键要点

  • 介绍了在Markdown中绘制SVG矢量图的方法。

  • 使用了Graphviz、Asymptote和LaTeX三种引擎。

  • 绘图功能要求包括输出矢量图、服务端一次生成和直接在Markdown源码中编辑。

  • Mermaid因不支持服务端使用而被放弃。

  • Graphviz是一种静态描述语言,主要用于绘制网状图,支持输出SVG格式。

  • Asymptote是一种专门用于矢量绘图的编程语言,语法类似C++,底层使用LaTeX。

  • LaTeX支持绘制各类图形,PGF/Tikz是最著名的宏包。

  • 新的绘图系统应同时支持Graphviz、Asymptote和LaTeX三种引擎。

  • 技术方案利用lua-filter为每个CodeBlock设置回调函数,提取描述代码生成SVG图片。

  • Graphviz通过运行dot命令生成SVG代码,Asymptote需要创建临时目录并使用xelatex生成SVG。

  • LaTeX生成SVG需要使用dvisvgm转换,并支持中文。

  • SVG文件体积问题可以通过删除内嵌字体描述数据来减小。

  • 提供了使用PGF/Tikz绘制饼状图的完整示例代码。

➡️

继续阅读