ใส่คำอธิบายประกอบซอร์สโค้ดที่มีไดอะแกรมเป็นความคิดเห็น

ฉันเขียนโค้ด (c ++ และ javascript) เป็นจำนวนมากซึ่งสัมผัสกับเรขาคณิตและกราฟิกการคำนวณและหัวข้อเหล่านั้นดังนั้นฉันจึงพบว่าไดอะแกรมภาพนั้นเป็นส่วนที่ขาดไม่ได้ของกระบวนการแก้ปัญหา

ฉันได้ตัดสินใจแล้วว่า "โอ้ไม่น่าอัศจรรย์ถ้าฉันสามารถแนบแผนภาพวาดด้วยมือกับชิ้นส่วนของรหัสเพื่อแสดงความคิดเห็น" และนี่จะทำให้ฉันกลับมามีบางสิ่งที่ฉันทำ วัน, สัปดาห์, เดือนก่อนหน้านี้และไกลโพ้นอัลกอริทึมของฉันอีกครั้งอย่างรวดเร็ว

ในฐานะผู้เรียนรู้ภาพฉันรู้สึกว่าสิ่งนี้มีศักยภาพในการปรับปรุงประสิทธิภาพการทำงานของฉันด้วยการเขียนโปรแกรมเกือบทุกประเภทเนื่องจากแผนภาพง่าย ๆ สามารถช่วยให้เข้าใจและให้เหตุผลเกี่ยวกับโครงสร้างข้อมูลที่ไม่สำคัญ กราฟตัวอย่าง ในระหว่างชั้นเรียนทฤษฎีกราฟที่มหาวิทยาลัยฉันสามารถเข้าใจความสัมพันธ์ของกราฟที่จริง ๆ แล้วฉันสามารถวาดภาพตัวแทนของแผนภาพ

ดังนั้น...

ไม่มี IDE ให้ความรู้ของฉันช่วยให้คุณบันทึกภาพเป็นความคิดเห็นในการรหัส

ความคิดของฉันคือการที่ฉันหรือคนอื่นสามารถใช้เครื่องมือที่ใช้งานง่ายพอสมควรซึ่งสามารถแปลงรูปภาพให้เป็นสตริงไบนารีพื้นฐาน 64 ซึ่งฉันสามารถแทรกลงในรหัสของฉันได้

หากกระบวนการแปลง / แทรกสามารถเพิ่มความคล่องตัวได้มากพอจะทำให้สามารถเชื่อมต่อระหว่างไดอะแกรมและรหัสจริงได้ดีกว่าดังนั้นฉันไม่จำเป็นต้องค้นหาตามลำดับเวลาในโน้ตบุ๊คของฉันอีกต่อไป น่าประทับใจยิ่งกว่า: ปลั๊กอินสำหรับ IDE ในการแยกวิเคราะห์และแสดงภาพโดยอัตโนมัติ ไม่มีอะไรยากเกี่ยวกับสิ่งนี้จากมุมมองทางทฤษฎี

ฉันเดาว่ามันจะใช้เวลาเพิ่มสำหรับฉันที่จะคิดออกว่าจะขยาย IDEs ที่ชื่นชอบและดูแลปลั๊กอินเหล่านี้ได้อย่างไรดังนั้นฉันจึงมีความสุขกับโค้ดโพสต์โปรเซสเซอร์ซึ่งจะแยกวิเคราะห์และ การเรนเดอร์รูปภาพและแสดงภาพแบบเคียงข้างกันด้วยโค้ด, ภายในเบราว์เซอร์หรือบางสิ่งบางอย่าง ตั้งแต่ฉันเป็นโปรแกรมเมอร์จาวาสคริปต์โดยการค้า

คนอื่นคิดอย่างไร ใครบ้างที่จ่ายสำหรับสิ่งนี้ ฉันจะ แต่บางทีฉันอาจจะชี้ให้เห็นว่าไม่ว่าฉันหรือเพื่อนร่วมงานจำนวนมากของฉันจะจ่ายเงินสำหรับสิ่งนั้นวิธีเดียวที่สิ่งนั้นมีแนวโน้มที่จะประสบความสำเร็จก็คือผ่านการเปิดตัวโอเพนซอร์ส

สิ่งที่เกี่ยวกับภาพแทรกปลั๊กอินสำหรับ Visual Studio ?

หากคุณกำลังใช้ IDE ที่แตกต่างกันและอาจไม่รองรับภาพที่ฝังอยู่หรือคุณไม่มีเวลาที่จะขยายมันดังนั้นการวางลิงค์ไปยังภาพในความคิดเห็นในขณะที่ภาพนั้นจะอยู่ที่อื่นในที่เก็บ ?

หากคุณไม่ใช่ศิลปิน ASCIIคุณสามารถใช้doxygenเป็นเครื่องมือเอกสารร่วมกับdot / 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 พิมพ์โหมดศิลปินและกดปุ่มย้อนกลับ ปุ่มกลางของเมาส์จะปรากฏเมนูขึ้นมา ปุ่มลัดสำหรับตัดและวางไม่ใช่หน้าต่างปกติตามค่าเริ่มต้น แต่คุณสามารถเปิดโหมด CUA เพื่อเปลี่ยนได้

คนอื่นคิดอย่างไร ใครบ้างที่จ่ายสำหรับสิ่งนี้ ฉันจะ

ZOMG ฉันพอดีกับหมวดหมู่ที่คล้ายกันในขณะที่คุณและชอบคุณลักษณะดังกล่าวโดยตรงใน IDE

ตอนนี้ฉันแค่ทำ ASCII "ศิลปะ" แบบนี้:

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

ค่าหลักที่ฉันพบคือการเห็นชื่อตัวแปรที่สอดคล้องกับไดอะแกรมภาพโดยเฉพาะอย่างยิ่งเมื่อเราใช้ traversals ที่ซับซ้อนของตาข่ายและเช่นสำหรับอัลกอริทึมตาข่ายใหม่ เคล็ดลับในการสร้างกราฟออกซิเจนนี้ที่แสดงในคำตอบอย่างใดอย่างหนึ่งนั้นยอดเยี่ยมมาก - ฉันควรลองอีกครั้ง

มีหลายสิ่งหลายอย่างที่ง่ายต่อการสื่อสารด้วยภาพและไม่จำเป็นต้องใช้กราฟ ตัวอย่าง:

... หรือสิ่งนี้ (เปรียบเทียบอัลกอริทึมของฉันฉันกำลังเรียก "hook subdivision" กับส่วนย่อย CC มาตรฐานที่ใช้โดย Pixar):

มันจะให้รหัสบริบทมากเพียงเพื่อดูว่าการดำเนินการเหล่านี้ทำและวิธีที่พวกเขาแตกต่างกันในรหัสเพราะบางสิ่งที่แสดงให้เห็นได้ดีที่สุด รูปภาพสามารถจับคำพันคำได้

ดังนั้นฉันจึงมีความฝันที่จะมี IDE ที่ให้ฉันดูโค้ดและภาพเคียงข้างกันทำให้ฉันสามารถฝังรูปภาพลงในซอร์สโค้ดได้

โดยเฉพาะอย่างยิ่งเมื่อเราคิดค้นอัลกอริทึมใหม่มันยากที่จะหาวิธีที่ดีในการอธิบายอย่างแม่นยำมาก (จากมุมมองด้านเทคนิคไม่ใช่มุมมองของผู้ใช้) โดยไม่ต้องทำตามขั้นตอนวิธีเนื่องจากไม่มีอะไรมาเปรียบเทียบโดยตรง ภาพก่อนและหลังเหล่านี้มีแนวโน้มที่จะแสดงสิ่งที่คุณคาดหวังได้จากอัลกอริทึมทันที

อีกสิ่งหนึ่งที่ฉันฝันถึงคือตัวดีบักภาพที่ให้ฉันตั้งโปรแกรมเพื่อให้ฉันสามารถสร้างชนิดข้อมูลของฉันส่งออกภาพไปยังตัวดีบักตัวอย่างเช่นเพื่อดูผลลัพธ์ทางสายตาในขณะที่ฉันกำลังก้าวผ่านโค้ดและทำให้แน่ใจว่าอัลกอริธึม ฉันพยายามที่จะประดิษฐ์ทำงานอย่างถูกต้องในทุกขั้นตอนและจับคู่วิธีที่ฉันวาดมันลงบนกระดาษ ตัวอย่างเช่นทำให้โครงสร้างตาข่ายข้อมูลของฉันแสดงผลภาพที่แสดงในหน้าต่างดูการดีบักเกอร์ - เหมาะอย่างยิ่งถ้าฉันสามารถหมุนมุมมองและมุมมองนั้นได้

นอกจากนี้เมื่อทำงานในฐานรหัสขนาดใหญ่มาก (หลายสิบล้าน LOC) ที่เขียนโดยทีมหลวม ๆ ที่มีปลั๊กอินหนึ่งพันครั้งบางครั้งมันอาจเป็นฝันร้ายที่จะคิดวิธีใช้รหัสที่เรากำลังมองหาอยู่ ปลั๊กอินที่ไม่ค่อยได้ใช้จาก UI มันจะยอดเยี่ยมมากในกรณีที่รหัสสามารถฝังภาพหน้าจอขนาดเล็กที่แสดงวิธีเรียกใช้รหัสนั้นจากส่วนต่อประสานผู้ใช้ (อาจมีแนวโน้มที่จะล้าสมัยเป็นครั้งคราว แต่โดยทั่วไปแล้ว UIs จะไม่เสถียรตลอด รุ่นที่ใช้แสดงผลภาพหน้าจอในอดีตไร้ประโยชน์)

ใครบ้างที่จ่ายสำหรับสิ่งนี้ ฉันจะ

ดังนั้นใช่เลยโดยสิ้นเชิง! ฉันต้องการสิ่งนั้น!!!

เสียงเหมือนกรณีใช้งานสำหรับการเขียนโปรแกรม Literateซึ่งคุณสามารถเพิ่มไดอะแกรมและอะไรก็ได้ในเอกสารของคุณ

Doxygen ช่วยให้คุณสามารถแทรกภาพในความคิดเห็นเช่นนี้:

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

น่าเสียดายที่ดูเหมือนว่าไม่มี IDEs จะแสดงภาพเหล่านี้แบบอินไลน์ แต่ฉันคิดว่ามันคงไม่ยากเกินไปที่จะเขียนส่วนขยาย VSCode เพื่อทำตัวอย่าง

ผมไม่ยังหานามสกุล VSCode หนึ่งที่มีอยู่แล้วการสนับสนุนนี้มีไวยากรณ์ที่แตกต่างกันcommentimg สิ่งนี้ทำได้ผ่านโฮเวอร์:

VSCode กำลังเพิ่มคุณสมบัติที่อนุญาตให้รูปภาพแบบอินไลน์ - "โค้ดแทรก" - แต่ดูเหมือนว่ายังไม่พร้อม

นี่คือภาพหน้าจอจากส่วนขยายตัวอย่าง (ซึ่งฉันไม่พบจริง ๆ แล้ว - ยังไม่ได้วางจำหน่ายเนื่องจากรหัสสิ่งที่ใส่ API ยังไม่วางจำหน่าย)