주석으로 다이어그램으로 소스 코드에 주석 달기

계산 기하학과 그래픽 및 이러한 종류의 주제를 다루는 많은 (주로 c ++ 및 javascript) 코드를 작성하므로 시각적 다이어그램이 문제 해결 과정에서 없어서는 안될 부분이라는 것을 알았습니다.

나는 "오, 손으로 그린 ​​다이어그램을 어떤 방식으로 코드에 주석으로 첨부 할 수 있다면 환상적 이지 않을 것"이라고 지금 막 결정 했다. 며칠, 몇 주, 몇 달 전에 훨씬 더 빠르게 알고리즘을 다시 살펴 봅니다.

시각적 학습자로서, 간단한 다이어그램은 모든 유형의 사소한 데이터 구조에 대한 이해와 추론을 도울 수 있기 때문에 거의 모든 유형의 프로그래밍에서 생산성을 향상시킬 수 있다고 생각합니다. 예를 들어 그래프. 대학에서 그래프 이론 수업을하는 동안 저는 실제로 다이어그램으로 표현할 수있는 그래프 관계를 완전히 이해할 수있었습니다.

그래서...

내 지식에 IDE가 없으므로 그림을 주석에 코드로 저장할 수 있습니다.

내 생각은 나 또는 다른 사람이 이미지를 base64 이진 문자열로 변환하여 코드에 삽입 할 수있는 합리적으로 사용하기 쉬운 도구를 만들 수 있다는 것입니다.

변환 / 삽입 프로세스를 능률화 할 수 있다면 다이어그램과 실제 코드 사이를 훨씬 더 잘 연결할 수 있으므로 더 이상 내 노트를 통해 시간순으로 검색 할 필요가 없습니다. 훨씬 더 훌륭합니다 : IDE 용 플러그인은 이미지를 자동으로 파싱하고 표시합니다. 이론적 인 관점에서 이것에 대해 전혀 어려운 것은 없습니다.

내 생각에 내가 좋아하는 IDE를 확장하고 이러한 플러그인을 유지 관리하는 방법을 실제로 알아내는 데 약간의 시간이 걸릴 것이므로 동일한 파싱을 수행하는 일종의 코드 포스트 프로세서에 완전히 만족할 것입니다. 이미지 렌더링 및 브라우저 내부 또는 코드 내부의 코드와 나란히 표시합니다. 나는 무역에 의해 자바 스크립트 프로그래머이기 때문에.

사람들은 어떻게 생각합니까? 누구든지 이것을 지불 하시겠습니까? 그렇습니다. 그러나 필자는 또한 본인이나 상당수의 동료가 그러한 비용을 지불할지 여부에 관계없이 이러한 성공 가능성이있는 유일한 방법은 오픈 소스 릴리스를 통해서만 가능하다는 점을 지적 할 것입니다.

무엇에 대한 비주얼 스튜디오에 대한 이미지 삽입 플러그인 ?

다른 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 art)를 수행하므로 찾고있는 것이거나 아닐 수도 있습니다. 특히, IDE가 고정 폭 글꼴을 수행하지 않으면 유용하지 않습니다. 일반 텍스트이기 때문에 버전 제어 기능이 매우 훌륭합니다.

다음 은 아티스트 모드 의 스크린 캐스트 입니다. 관심이 있거나없는 경우 아이디어를 얻을 수 있습니다.

emacs에서 아티스트 모드를 시작하려면 Alt-x를 수행하고 아티스트 모드를 입력 한 다음 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*
// ******************************************************

내가 찾은 주요 값은 시각적 다이어그램에 해당하는 변수 이름을 보는 것입니다. 특히 복잡한 메쉬 순회를 사용하는 경우와 새로운 메쉬 알고리즘에 특히 유용합니다. 답변 중 하나에 표시된이 독소 그래프 생성 트릭은 매우 훌륭합니다. 나는 더 시도해야합니다.

그래프를 사용하지 않아도 시각적으로 쉽게 의사 소통 할 수있는 많은 것들이 있습니다. 예:

... 또는 이것 (Pixar에서 사용하는 표준 CC 세분화로 "후크 세분화"를 호출하는 알고리즘과 비교) :

이러한 작업이 수행하는 작업과 코드 내에서 어떻게 다른지 시각적으로 가장 잘 보여주기 때문에 코드에 많은 컨텍스트를 부여 할 수 있습니다. 그림은 실제로 수천 단어를 캡처 할 수 있습니다.

따라서 코드와 이미지를 나란히 볼 수있는 이미지를 소스 코드에 포함시킬 수있는 IDE를 사용하는 것은 정말 꿈이 될 것입니다.

특히 새로운 알고리즘을 개발할 때는 알고리즘 단계를 거치지 않고 기술적 인 관점에서 직접 정확하게 비교할 수있는 방법이 없기 때문에 기술적 인 관점에서 정확하게 설명 할 수있는 좋은 방법을 찾기가 어렵습니다. 이러한 종류의 전후 이미지는 알고리즘에서 즉시 기대할 수있는 것을 완전히 보여주는 경향이 있습니다.

내가 꿈꾸는 또 다른 것은 비주얼 디버거로 프로그래밍 할 수있게하여 데이터 유형 중 일부를 이미지를 디버거로 출력하도록 만들 수 있습니다. 예를 들어 코드를 단계별로 진행하면서 알고리즘을 확인하면서 결과를 시각적으로 볼 수 있습니다. 나는 모든 단계에서 올바르게 작동하고 종이에 어떻게 그려 넣었는지 발명하려고합니다. 예를 들어, 메쉬 데이터 구조 출력을 디버거 조사 식 창에서 렌더링 된 이미지로 만듭니다. 뷰를 바로 회전 할 수있는 경우에 이상적입니다.

또한 수천 개의 플러그인으로 느슨한 팀이 작성한 대규모 코드베이스 (수백만 LOC)에서 작업 할 때 때로는 모호한 코드를 실행하는 방법을 알아내는 것이 악몽 일 수 있습니다. UI에서 거의 사용하지 않는 플러그인. 코드가 실제로 사용자 인터페이스에서 해당 코드를 호출하는 방법을 보여주는 미니어처 스크린 샷을 포함 할 수있는 경우에는 정말 멋질 것입니다. 이전 스크린 샷을 쓸모 없게 만드는 버전).

누구든지 이것을 지불 하시겠습니까? 그렇습니다.

어쨌든 그래요! 나는 것을 원하는!!!

Literate Programming 의 유스 케이스처럼 들리며 다이어그램 및 기타 문서를 추가 할 수 있습니다.

Doxygen을 사용하면 다음 과 같이 주석에 이미지를 삽입 할 수 있습니다 .

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

불행히도 IDE에서 이러한 이미지를 인라인으로 표시하지 않는 것처럼 보이지만 VSCode 확장을 작성하여 예를 들어 너무 어렵지 않을 것입니다.

또한 다른 구문 commentimg로 이미 이것을 지원하는 하나의 VSCode 확장을 찾았습니다 . 이것은 호버를 통해 수행됩니다.

VSCode는 인라인 이미지 ( "code inset")를 허용하는 기능을 추가하고 있지만 아직 준비되지 않은 것으로 보입니다.

다음은 샘플 확장 의 스크린 샷입니다 (실제로는 찾을 수 없었습니다-아마도 코드 삽입 API가 아직 릴리스되지 않았기 때문에 아직 릴리스되지 않았을 것입니다)