日常开发过程中，时常会遇到一个类似的需求：将某些二维数据可视化。比如，时间与系统内存、时间与CPU、通道与距离等等。

往常我的做法是在代码中嵌入相关的打印，输出到文件中，然后通过其他语言，比如Python解析并可视化，或者直接使用Python解析并可视化。

长期以往，发现这种做法总是写了很多重复的代码。能不能有一个工具，直接输入数据，然后可视化呢？所以，我写了painter。

基本原理

恰逢VSCode更新Copilot Edit功能，于是我就用copilot写了这个工具。我仅做少部分修改，然后按照自己的想法一步一步输入需求，大部分代码都是copilot生成的。

painter的大致实现原理是：

使用Flask（老朋友了）作为后端，前端通过SSE与后端通信，持续接收后端发送的数据，然后通过chart.js进行可视化。App在启动Flask时，也会启动另一个Server线程，用于监听用户发送的数据；用户通过nc/ncat之类的工具向App Server对应的Port发送数据，App Server接收到数据、整理后保存到内存，然后Flask的SSE路由会将数据发送给前端。数据统计等工作则是前端完成。

使用

使用方法非常简单，比如先通过pip或pipx下载painter：

1

pipx install git+https://github.com/caibingcheng/painter.git

然后启动app：

最后通过nc/ncat向App Server发送数据，发送格式为x,y1,y2,y3,…，比如：

1

seq 0 0.1 10 | awk '{print $1, $1^2, $1^3}' | ncat localhost 5001

“x,y1,y2,y3,…“格式并非固定的，后端会从每一行中提取数据。

上面的例子可以得到：

上述是简单的示例，在我设想的应用场景下，这些数据是来自程序的日志输出，这个程序可以运行在本机或者其他可以与本级通信的机器上。实时日志一般通过grep、awk、sed等工具处理后，再通过nc/ncat发送给App Server。对于外部的机器，如果无法使用nc，可以使用channle这个工具做数据透传。

比如记录系统内存变化，以检测内存泄漏，输出时间戳和使用内存：

1

while true; do echo $(date +%s) $(free -m | awk 'NR==2{print $3}'); sleep 1; done | ncat localhost 5001

可以得到：

（刚刚想到，可以用与来输出一些图形，比如一个爱心，：））

总结

在此之前，似乎只听过chart.js，但是我并不需要对这个库过多了解，也能写下painter这样的小工具；暂且不管代码实现是否优美/合理，至少可以在预期内工作。

在AI时代，如果不以此（比如专业渲染？）为职业，对这些横向的技术所需的知识将会越来越少。要我说，更多还是要基础知识的扩充；比如尽管不了解chart.js，但是我需要了解JavaScript、Python，否则给AI提出的需求可能不完善，或者只能被动接收AI提供的代码，而无法给出更好的建议；如果知识面再扩展一些，你就可以告诉AI，可以使用SSE来实现通信，而不是使用WebSocket或者HTTP轮询等方式；或者告诉他，不要用chart.js，改用其他某个库。

总之，以我目前的体验来看，当前时代，在业余领域，除了基础知识外，横向的宽度将比横向深度更重要（即横向知识，不要过分追求细节）。