コメントとして図を使用してソースコードに注釈を付ける

私は、計算幾何学やグラフィックス、およびこれらの種類のトピックに触れる多くの（主に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アーティストモードを試すことができます。画像そのものではなくアスキーアートを行うので、探しているものとそうでないものがあります。特に、IDEが固定幅フォントを実行しない場合、役に立ちません。プレーンテキストなので、バージョン管理で非常にうまく機能します。

使用されているアーティストモードのスクリーンキャストを以下に示します。興味があるかどうかにかかわらず、アイデアを得ることができます。

emacsでアーティストモードを起動するには、Alt-xを実行し、artist-modeと入力してReturnキーを押します。マウスの中ボタンでメニューが表示されます。カットアンドペーストのキーバインドは、デフォルトでは通常のウィンドウのキーバインドではありませんが、CUAモードをオンにして変更できます。

人々はどう思いますか？誰もこれにお金を払うでしょうか？私は...するだろう。

ZOMG、私はあなたと同様のカテゴリーに属し、IDEでそのような機能を直接好きになります。

今のところ、私はこのような多くのASCII「アート」を行う傾向があります。

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

私が見つけた主な価値は、特に新しいメッシュアルゴリズムにメッシュなどの複雑なトラバーサルを使用している場合に、ビジュアルダイアグラムに対応する変数名を見ることです。回答の1つに示されているこのdoxygenグラフを生成するトリックは非常にクールです-もっと試してみるべきです。

視覚的にも通信しやすいものがたくさんありますが、必ずしもグラフを使用しているわけでもありません。例：

...またはこれ（Pixarで使用されている標準のCCサブディビジョンと「フックサブディビジョン」を呼び出しているアルゴリズムの比較）：

これらの操作が何をするのか、そしてコード内でどのように異なるのかを見るだけで、コードに非常に多くのコンテキストが与えられ、いくつかの事柄が視覚的に最もよく示されるためです。写真は本当に千の言葉を捉えることができます。

そのため、コードと画像を並べて表示できるIDEがあり、ソースコードに画像を埋め込むことができるのは夢のようです。

特に、新しいアルゴリズムを発明するとき、アルゴリズムのステップに直接入るのではなく、アルゴリズムのステップに入らずに、非常に正確に（技術的な観点から、正確にユーザーの観点から）それらを記述する良い方法を見つけることは困難です。これらの種類の前後の画像は、アルゴリズムからすぐに期待できるものを完全に示す傾向があります。

私が夢見るもう1つのことは、コードをステップ実行してアルゴリズムを確認しながら結果を視覚的に確認するなど、一部のデータ型をデバッガーに出力できるようにプログラムできるビジュアルデバッガーです。私が発明しようとしているのは、すべてのステップで正しく動作し、紙の上にそれを描いた方法を一致させることです。たとえば、デバッガのウォッチウィンドウでメッシュデータ構造の出力にレンダリングイメージを作成します。ビューなどをその場で回転させることさえできれば理想的です。

また、1000のプラグインを持つゆるいチームによって書かれた非常に大規模なコードベース（数千万のLOC）で作業する場合、時々、目立たないように探しているコードを実行する方法を見つけるだけで悪夢になります。 UIからはめったに使用されないプラグイン。そのような場合、コードがユーザーインターフェイスからそのコードを実際に呼び出す方法を示すミニチュアスクリーンショットを埋め込むことができれば素晴らしいでしょう（時々、時代遅れになる傾向がありますが、通常、UIはそれほど不安定ではありません）以前のスクリーンショットを役に立たないようにバージョン）。

誰もこれにお金を払うでしょうか？私は...するだろう。

とにかく、そう、完全に！それが欲しいです！！！

図やその他のものをドキュメントに追加できるLiterate Programmingのユースケースのように聞こえます。

Doxygenでは、次のようなコメントに画像を挿入できます。

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

残念ながら、これらの画像をインラインで表示するIDEはありませんが、たとえば、VSCode拡張機能を作成してそれを行うのはそれほど難しくないと思います。

また、私はすでに別の構文でこれをサポートする1つのVSCode延長見つけたcommentimgを。これはホバーを介してそれを行います：

VSCodeは、インラインイメージを許可する機能（「コードインセット」）を追加していますが、まだ準備が整っていないようです。

サンプル拡張機能のスクリーンショットです（実際には見つかりませんでした-コードインセットAPIがまだリリースされていないため、おそらくまだリリースされていません）