组件文档管理工具

需求来源

我们做可视化组件,经常被应用方吐槽文档太烂,甚至没有文档,给他们使用造成了很大的困扰,因此必须搞个人把我们的Demo和文档、问题库做起来。

这个事情感觉还是需要我自己来,我之前不是很擅长写文档么,我写的东西都会站在业务方角度考虑,因此我应该是最合适的人了。

首先我得自己去用这些组件,我自己都不用,肯定不知道业务方的痛点,这和XX不用虚拟机一样。

我们可以录制视频,讲解一些概念和规范、如何接入,甚至搞个公开课给大家讲一下。

专门投入一个人搞这个,都不为过。

各个可视化库对于文档的管理方式和工具

站在巨人的肩膀上前进,是最好的方案,因此我先做了个简单的文档调研,看看几个牛逼的可视化库怎么管理文档和Demo的。

ECharts

可以切换风格,可以分享配置

特性和使用手册,是用的类似VuePress,基于MarkDown,方便后续迁移

文档包括changelog、常见问题、升级指南等

AntV

配置文档和Demo调试页面合二为一,感觉是使用最方便的形式(当然前提是你得有一个大屏幕):

https://g2.antv.vision/zh/examples/case/column#column2

可以切换移动端模式,这个很赞。

工具对比

storybook

有插件机制,可以自行根据需求扩展,也有丰富的现成插件开箱即用

支持主流的前端框架React、Vue等,也有支持原生JS组件的HTML模式

可以在线调试组件

支持搜索

能导出静态资源

https://storybook.js.org/docs/html/writing-docs/mdx

有可视化组件使用的案例:

https://5eb04da4d1d2d10022dc9c73-erqplppltb.chromatic.com/?path=/story/charts-sankey-plot--autosize

VuePress

VuePress的定位感觉就是纯文档,没有在线调试功能,不大适合我们的需求场景。

DataV

我们当前的DataV平台,是一系列工具的整合。

这种模式更适合我们。

一些思考

单个工具难以满足需求,我们需要组合多个工具

每个开源工具都是专注于解决某一个/几个特定问题,放到我们的业务场景来看,可能就不适合了。

因此我们需要的是组合多个工具,来满足我们的需求。

数据和渲染分离

文档一定要用Markdown写,这样后面如果我们换了个文档管理工具,只需要迁移下Markdown文件即可。