用图作为注释注释源代码

我编写了许多（主要是c ++和javascript）代码，涉及计算几何和图形以及此类主题，因此我发现视觉图表已成为解决问题过程中不可或缺的一部分。

我现在已经确定，“哦，如果我能以某种方式将手绘图附加到一段代码上作为注释，那岂不是太棒了”，这将使我回到自己从事的工作上，数天，数周，数月之前，并且可以更快地重新获得我的算法。

作为一个视觉学习者，我觉得这几乎可以通过每种类型的编程来提高生产率，因为简单的图表可以帮助您理解和推理任何类型的非平凡数据结构。例如图表。在大学的图形理论课上，我只能真正理解我可以实际绘制的图形表示形式的图形关系。

所以...

据我所知，没有IDE可让您将图片保存为代码注释。

我的想法是，我或其他人可以提出一些合理易用的工具，该工具可以将图像转换为base64二进制字符串，然后将其插入代码中。

如果转换/插入过程可以简化，这将使图表与实际代码之间的连接更好，因此，我不再需要按时间顺序搜索笔记本。更棒的是：IDE的插件可以自动解析并显示图像。从理论的角度来看，这绝对没有困难。

我的猜测是，我将需要花费一些额外的时间才能真正弄清楚如何扩展我最喜欢的IDE并维护这些插件，因此，我对一种可以进行相同解析和解析的代码后处理器感到非常满意。渲染图像并在浏览器或其他内容中与代码并排显示。由于我是一名JavaScript程序员。

人们怎么看？有人愿意为此付费吗？我会。但是我也许还会指出，无论我本人还是同龄人中的很多人愿意为这种事情付出代价，这种事情可能成功的唯一途径就是通过开源发行。

什么图像插入插件为Visual Studio？

如果您使用的是其他IDE，或者它不支持嵌入式图像，或者您没有时间扩展它，那么在注释中放置指向图像的链接，而该图像将位于存储库中的某个位置呢？ ？

如果您不是ASCII美术师，则可以将doxygen用作文档工具，并将其集成到点/ graphviz中。

这样就可以编写图形的文字描述，并在文档中进行渲染。

例如，此描述：

digraph finite_state_machine {
    rankdir=LR;
    size="8,5"
    node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
    node [shape = circle];
    LR_0 -> LR_2 [ label = "SS(B)" ];
    LR_0 -> LR_1 [ label = "SS(S)" ];
    LR_1 -> LR_3 [ label = "S($end)" ];
    LR_2 -> LR_6 [ label = "SS(b)" ];
    LR_2 -> LR_5 [ label = "SS(a)" ];
    LR_2 -> LR_4 [ label = "S(A)" ];
    LR_5 -> LR_7 [ label = "S(b)" ];
    LR_5 -> LR_5 [ label = "S(a)" ];
    LR_6 -> LR_6 [ label = "S(b)" ];
    LR_6 -> LR_5 [ label = "S(a)" ];
    LR_7 -> LR_8 [ label = "S(b)" ];
    LR_7 -> LR_5 [ label = "S(a)" ];
    LR_8 -> LR_6 [ label = "S(b)" ];
    LR_8 -> LR_5 [ label = "S(a)" ];
}

呈现为：

您可以尝试emacs艺术家模式。它本身将执行ascii艺术而不是图像，因此它可能是您想要的，也可能不是。特别是，如果您的IDE不使用固定宽度的字体，那么它将没有用。作为纯文本，它将与版本控制一起很好地播放。

这是正在使用的艺术家模式的截屏视频，因此您可以对自己的兴趣有所了解。

要在emacs中启动艺术家模式，请执行Alt-x，键入艺术家模式，然后按回车键。鼠标中键调出菜单。默认情况下，剪切和粘贴的键绑定不是普通的Windows，但是您可以打开CUA模式进行更改。

人们怎么看？有人愿意为此付费吗？我会。

ZOMG，我和您属于一个相似的类别，并且希望直接在IDE中喜欢这样的功能。

现在，我只是倾向于做很多像这样的ASCII“艺术”：

// ******************************************************
// *v3            |e5          v4*           |e6      v6*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |p1        *
// *              |            e1*-----------~----------*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *cen           |p0          v0*           |        v5*
// *--------------~--------------************************
// *e4            |              *           |e7        *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |p2        *
// *              |            e2*-----------~----------*
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *              |              *           |          *
// *v2            |e3          v1*           |e8      v7*
// ******************************************************

我发现的主要价值是看到与可视化图相对应的变量名称，尤其是当我们使用复杂的网格遍历时，例如对于新的网格算法。答案之一中显示的这种生成Doxygen图的技巧非常酷-我应该尝试更多。

还有很多东西也更容易通过视觉传达，即使使用图形也不一定。例：

...或这个（与我算法的比较，我称“钩子细分”为皮克斯使用的标准CC细分）：

它将为代码提供大量上下文，以便仅查看这些操作的功能以及它们在代码内部的区别，因为某些内容只能通过直观的方式显示出来。图片确实可以捕捉一千个单词。

因此，拥有一个IDE可以让我并排查看代码和图像，并允许将图像嵌入到源代码中对我来说完全是梦想。

尤其是当我们发明新算法时，很难找到一种很好的方法来准确地描述它们（从技术角度，而不是从用户角度），而无需深入研究它们的算法步骤，因为没有什么可以直接将它们直接进行比较。这些前后图像往往会立即显示出您对算法的期望。

我梦dream以求的另一件事是可视化调试器，可以对其进行编程，以便可以使某些数据类型将图像输出到调试器中，例如，当我逐步执行代码并确保算法时，以可视方式查看结果我试图发明在每个步骤上都能正常工作，并与我在纸上绘制的方式相匹配。例如，使我的网格数据结构在调试器监视窗口中输出渲染的图像-如果我什至可以在那时然后在那里旋转视图，则是理想的选择。

同样，在由松散的团队编写的具有数千个插件的超大规模代码库（数千万个LOC）中工作时，有时可能只是为了弄清楚如何执行我们正在寻找的代码而造成的噩梦，用户界面中很少使用的插件。在那种情况下，如果代码可以嵌入一个微型屏幕快照，以显示如何从用户界面实际调用该代码，那就太棒了（可能不时会过时，但通常UI并不是那么不稳定版本以使以前的屏幕截图无效）。

有人愿意为此付费吗？我会。

所以，总的来说，是的！我要那个！！！

听起来像是Literate Programming的用例，您可以在其中添加图表或其他内容。

Doxygen允许您在注释中插入图像，如下所示：

  /*! Here is a snapshot of my new application:
   *  \image html application.jpg
   */

不幸的是，似乎没有IDE可以内联显示这些图像，但是我怀疑编写VSCode扩展来做到这一点并不难。

我也确实找到了一个VSCode扩展，该扩展已经通过不同的语法commentimg支持了此扩展。这是通过悬停做到的：

VSCode正在添加一个允许内嵌图像的功能-“代码插入”-但它似乎尚未准备就绪。

这是示例扩展的屏幕截图（我实际上无法找到-可能尚未发布，因为代码插入API尚未发布）