你知道，当你忙于一个复杂算法时，不得不返工一百万次，因为你没有正确地掌握细节？或者在你读某人的代码时，你不能确定它在做什么？此时，我们希望拥有代码可视化（code visualization）工具，因为这会让编程生活如此简化。

本文，我将讨论一些现有的用于代码可视化的工具及其缺点，然后尽量总结它们背后的想法。为了创造得体的代码可视化工具、以及如何达到这个程度，接着我会分享必备条件，我将给出应该采取的最初几步。

工具

有很多不同的、显示代码可视化有用的情况。理解复杂的算法、理解其他人的函数，或在一个总体的不同范围下，理解一个新的代码库、或类、或函数集合。对于某些情况，可视化已经存在了。对于项目或代码级别的范围，有UML，各种图表。在算法的范围，有些网站企图可视化一部分最通用的算法。这些工具是伟大的，但是它们有一个大问题，使用它们要花费很长时间。在严峻的时间下，我们只有两周来开发下一个Facebook，你没有时间画复杂的UML图。第二个问题，即使通用算法可能有可视化了，而自定义算法可能从来不会有。

也有一些工具和编程语言采用了不同的方式，你编程一部分，很快就能看到交互、或至少你正在做的可视化的结果。我在讨论dat.GUI，你知道的，你在很多demo里看到过黑色和彩色控制面板吗？你能够看到我的优雅的文本生成器示例（不要在较慢的设备上打开）。另一个例子是Gooey，把Python命令行程序自动生成GUI，无需从技术上理解的、用户友好性。我过去在讨论的一种编程语言是JavaScript，从JavaScript刚刚出现的时候，它就与一种名叫HTML的接口结合在一起了。

允许你可视化代码（非自动地）的第一套工具，允许你把现有代码/配置转化成接口（自动地）的第二套工具。问题在于，我们是否能够自动产生接口，包括输入和输出。可视化只是输出。那么，我们为什么没有尽量可视化代码以使其易于理解的工具？听说过一个对象图表吗？它们是可视化了当前程序或程序子集的状态的图表。具有三种“水果”类型的对象的列表看起来是这样的：

我对接口的定义是，它有输入、输出或二者都有，几乎任何东西都能用一到两种方式定义为接口，石头、键盘、乐器、人类……

实际上所有这些工具在做的，都是把一个想法、用代码或图表表达的想法，转化成一个或多个不同种类的接口。编程语言把想法（以文本形式）转化成不同的接口，可以是HMTL、可以是传统的GUI、命令行应用程序或app。UML把想法转化成优雅的可视化概括。dat.GUI用HTML把配置代码转化成清晰的配置GUI。Gooey把命令行程序转化成传统的GUI。

它们都使用一个接口，然后转化成一个或多个不同的接口。我乐于给出更多的例子，只是本文篇幅会过长。如果你对有趣的接口转化的更多例子感兴趣，看看Slava Akhmechet关于lisp的文章，它讨论了把任何编程语言转化为另一种语言的通用接口。或者Philip C Monk的博文，他讨论了树、图像编程（他有demo）等等。

想法

好吧，下一步，我们明白了代码可视化的一些工具和方法。代码可视化是把代码或其子集可视化的过程。这可以在高等级（代码库或项目），中等级（函数文件、类、庞大的类）或低等级（函数级别，算法）。每个等级需要不同的分析代码的方法和不同的细节等级。

在最低的等级，我们需要的是至少可视化最基本的数据类型的方法，最常见的是布尔值、字符串、数字、list和对象（或字典、hashmap、任何你调用的东东）。还有，一种获取可视化所需数据的方法。但是如果我们这样做了，我们仍然面临现有工具同样的问题。然而，通用算法可能已经有可视化了，自定义算法可能从来不存在。数据类型同样如此，而list的可视化或许容易，当一个list包含数千个item，或你无法使用内置list，比如双端队列（栈），链表时，很快就变得复杂了。在有对象时，甚至更难，因为它们很快变得比程序的其它任何地方都要复杂。

然而不是不可能，弄清楚程序员在用哪种数据类型会是极端困难的（特别是没有自定义类型的JavaScript之类的语言）。这就是为什么我们需要在两个地方交互的工具。第一个是在程序运行（程序配置）之前，比如定义你在使用的数据类型，第二种就是在程序运行的时候，缩放、padding、隐藏列表items中的10000个等等。

限于篇幅，方便交流起见，我忽略了中等级和高等级的细节。

偏题

本文原本是关于代码可视化的，现在变成了随笔，是关于：每样事物都是一些事物的接口、电子信号是大脑和手之间的接口、键盘是手和电脑之间的接口、文本编辑器是键盘和编程语言之间的接口、编程语言是想法和其它更多想法之间的抽象接口！我喜爱探索接口的想法，更普遍地推广，因此我们可以用不同的方式使用它们。

为什么我认为它是有用的，因为它不仅仅是有用的思想，而是一种不同的方法，产生了不同的解决方案、思路等等，而且它可以被用在优化以及概念或现有想法的产生上。

我希望本文能有一点点意义，激发人们随后用不同的方式思考这个世界，我也打算写更多的关于接口、不同种类的接口、接口之间的交互方面的文章。

• 注1：双端队列（deque，全名double-ended queue）是一种具有队列和栈性质的数据结构。双端队列中的元素可以从两端弹出，插入和删除操作限定在队列的两边进行。
  http://zh.wikipedia.org/wiki/%E5%8F%8C%E7%AB%AF%E9%98%9F%E5%88%97