ChartCode: A Flowchart-Centric Educational Tool for Introductory Programming

Abstract

This paper presents ChartCode, a web-based interactive programming environment designed to support introductory programming courses. ChartCode integrates flowchart-based visual program construction, multi-language code generation, expression parsing, and execution simulation within a single cohesive platform. Students build programs by constructing flowcharts, which are automatically translated into syntactically correct source code in Python, Java, C, and C++. A built-in expression parser generates syntax trees to help students understand operator precedence and subexpression structure. The system includes a client-side simulation engine that executes code step-by-step, dynamically highlighting control flow and visualizing changes in variable states during execution. ChartCode is publicly available at https://chartcode.org and features twenty scaffolded lessons covering core programming topics, along with a sandbox mode for open-ended exploration. The system has been deployed in university courses and high school summer camps and supports formative assessments through instructor-defined constraints on available programming constructs. This paper describes the system architecture, implementation details, instructional use cases, and plans for future enhancements to broaden its impact on computing education.