Markvis - 在 markdown 中生成可视化图表

geekplux — Fri, 14 Jul 2017 19:22:24 +0800

今天在这里给大家分享一个 markdown-it 插件，能让你在 markdown 中通过几行代码就生成一个可视化图表📊。

项目主页： https://markvis.js.org/
在线编辑器体验一下： https://markvis-editor.js.org/
源码： https://github.com/geekplux/markvis

为什么要做这个工具

有时候写文章需要插入一些数据来增强说服力，但是单纯的数字又不直观，所以可视化图表是必须的。紧接着就会出现一个问题：如何把图表添加到文章中。通常的做法是用一些现成的工具生成图片，然后把图片贴到文章中。这样一来就非常繁琐，尤其是用 markdown 写作时你还得把图片先上传到一个图床中。另一方面，访客阅读文章时，图片的加载比网页元素肯定更耗时。一旦加载过慢就会给阅读造成非常不好的体验。

怎么使用

如果你的编辑器用了 markdown-it 来做解析器，那就可以非常方便的使用 markvis。和一般的 markdown-it 插件一样：

const md = require('markdown-it')()
const vis = require('markvis')
const d3 = require('d3')  // in browser environment
const d3node = require('d3-node') // in node environment

md.use(vis).render(`
  your makrdown content
`, {
  d3,    // in browser environment
  d3node // in node environment
})

这里的选项可以参考文档。

现状

目前这个项目是我业余抽时间写的，还比较简陋，只提供三种最常用的图表：条形图，折线图和饼状图。但是不要担心，你可以通过 API 来自定义新的图表。只要你会一点 d3，就都可以轻松开发出一个新的图表布局（将来可以整合更多的可视化库和 markdown 解析器）。欢迎大家来完善目前的三种基本图表，也欢迎添加你觉得有用的图表。

另外，小弟快毕业了，要找工作，求收留

geekplux (GeekPlux)

Markvis - 在 markdown 中生成可视化图表

为什么要做这个工具

怎么使用

现状