Taking ASCII Drawings Seriously: How Programmers Diagram Code
Honorable MentionAuthors
Title of the Paper
Taking ASCII Drawings Seriously: How Programmers Diagram Code
Bibliographic Information
- Subject Area: Application and analysis of ASCII graphics in software development
- Keywords: programming, graphical representation, ASCII diagrams, software development, documentation tools, design space, open-source code, knowledge transfer
Research Background and Issues
-
Problems and Challenges:
- Most programming tools are text-centric, and programmers often use ASCII diagrams (text-based graphical representations) to visualize concepts. However, there is little academic research on these diagrams, and researchers lack a systematic understanding of why they are created, the contexts in which they are used, and the content they convey.
- Current issues with code documentation include inconsistencies between documentation and code, complexity in updates, maintenance difficulties, and insufficient integration of visualization with text.
-
Significance:
- ASCII diagrams have practical applications throughout the software development lifecycle, including design, testing, code review, and knowledge transfer. A systematic understanding of these practices can improve future tools, enabling tighter integration of text and graphics.
-
Research Motivation and Related Work:
- In recent years, numerous studies have attempted to incorporate visualization into programming education, communication, and development tools, but most focus on specific types of diagrams (e.g., UML). There is limited research on how developers embed visualizations (such as ASCII diagrams) directly into code.
- This study complements and extends Cherubini et al.'s research on the role of diagrams in software development by conducting a systematic analysis of the content and design of ASCII diagrams.
Solution
-
Research Methods:
- Conducted interviews with 9 authors of ASCII diagrams to address research questions regarding the characteristics, roles, and content of ASCII diagrams.
- Collected 507 ASCII diagrams from 4 major open-source projects (Linux, Chromium, LLVM, TensorFlow) and performed a content analysis to develop a design space with seven dimensions.
-
Innovations:
- Combination of Interviews and Content Analysis: Conducted the first systematic analysis of ASCII diagrams as professional documentation tools.
- Design Space Model: Defined seven dimensions to classify these diagrams, detailing their forms of expression and their relationship to code.
-
Implementation Steps and Techniques:
- Data Collection: Manually filtered 2,156 ASCII diagrams from code repositories based on annotation format features.
- Coding and Analysis: Conducted thematic analysis of representative diagrams based on concepts, visualization forms, and relationships with code, summarizing classification dimensions.
- Interviews: Discussed motivations for creating diagrams, design processes, and audience needs, summarizing five practical use cases for diagrams.
Research Findings
-
Specific Results:
- Key Characteristics: ASCII diagrams exhibit dual characteristics of "text" and "visualization."
- As text, they integrate seamlessly with code, facilitating operation, viewing, and collaboration.
- As a visualization form, they better convey concepts that are difficult to describe clearly with code or text alone.
- Roles and Applications:
- Re-express external information (results of offline sketches or reverse engineering).
- Illustrate test cases.
- Assist in code review and validation.
- Provide documentation support for others or for the future self.
- Design Space:
- Covers seven dimensions (concept, visual encoding, annotation, abstraction, omission, scope, reference), reflecting the diversity of content and forms in ASCII diagrams.
- Tool Design Insights: Offers suggestions for designing future tools that integrate text and visualization, such as supporting bidirectional editing (ASCII and vector graphics) and tighter linkage with code.
- Key Characteristics: ASCII diagrams exhibit dual characteristics of "text" and "visualization."
-
Advantages:
- Compared to existing tools (e.g., external documentation or advanced visualization tools), ASCII diagrams are more usable due to their embedded nature, allowing them to integrate seamlessly into existing software development workflows.
- Low creation barrier and broad compatibility (suitable for any text editor, terminal, etc.).
-
Experimental and Evaluation Results:
- Analysis of 2,156 diagrams collected from 4 large open-source codebases revealed that, despite their simplicity, ASCII diagrams exhibit significant diversity in content and visual forms.
- The design space effectively describes the composition and functionality of these diagrams, making it applicable for further research and tool design.
-
Limitations and Future Directions:
- Limitations:
- Only four open-source project samples were selected, which may not comprehensively cover all use cases.
- Data analysis was primarily conducted by researchers with computer science backgrounds, potentially limiting understanding of diagrams in other fields.
- Future Directions:
- Develop tools that support richer media formats while maintaining broad compatibility.
- Explore interactive diagram editors compatible with large-scale programming tools.
- Develop automated tools leveraging natural language processing (e.g., large language models) to generate dynamic visualizations.
- Limitations:
Research Questions / Practical Problems
Question signals indexed for this paper.
Research Questions
3- Why do programmers create ASCII diagrams (character-based graphical representations)?Category: Machine Learning Model Visual AnalyticsSimilar questionsarrow_forward
- What are the characteristics and diversity of ASCII diagram content and form?Category: Machine Learning Model Visual AnalyticsSimilar questionsarrow_forward
- How can a design space model summarize the role and use cases of ASCII diagrams in software development?Category: Machine Learning Model Visual AnalyticsSimilar questionsarrow_forward
Practical Problems
1- Developers struggle to intuitively express complex concepts and logic in code.Category: Machine Learning Model Visual AnalyticsSimilar questionsarrow_forward
- 75%
Visualizing API Usage Examples at Scale
CHI '18· Interactive Data Visualization +1
- 75%
Integrated Development Environment with Interactive Scatter Plot for Examining Statistical Modeling
CHI '20· Interactive Data Visualization +1
- 75%
NBSearch: Semantic Search and Visual Exploration of Computational Notebooks
CHI '21· Interactive Data Visualization +1
- 75%
CoNotate: Suggesting Queries Based on Notes Promotes Knowledge Discovery
CHI '21· Interactive Data Visualization +1
- 75%
Understanding Visual Investigation Patterns Through Digital "Field" Observations
CHI '22· Interactive Data Visualization +1
- 75%
multiverse: Multiplexing Alternative Data Analyses in R Notebooks
CHI '23· Interactive Data Visualization +1
- 75%
Meta-Manager: A Tool for Collecting and Exploring Meta Information about Code
CHI '24· Interactive Data Visualization +1
- 75%
Xavier: Toward Better Coding Assistance in Authoring Tabular Data Wrangling Scripts
CHI '25· Interactive Data Visualization +1
- 75%
ProTAL: A Drag-and-Link Video Programming Framework for Temporal Action Localization
CHI '25· Interactive Data Visualization +1
- 75%
DeepFlow: A Flow-Based Visual Programming Tool for Deep Learning Development
IUI '25· Interactive Data Visualization +1
Based on Jaccard similarity of research subtopics & professions (≥60%)