From Text to Visuals: Using LLMs to Generate Math Diagrams with Vector Graphics

TL;DR

The paper tackles the challenge of visually supporting math problem solving by automatically generating SVG-based diagrams that accompany textual hints. It formalizes the task with $\\mathcal{P}$ and hints $\\mathcal{H}=\{(T_i,D_i)\}$, where $D_i$ are diagrams in SVG, and aims to produce $\\hat{D_i}$ aligned to $T_i$. An in-context learning–driven pipeline uses SVG as an intermediate representation and is evaluated via a Visual Question Answering framework, including ablations across diagram format, hint generation order, and on-task demonstrations. Results show SVG-based diagram generation is viable and often close to ground truth, while pixel-based generation via T2I underperforms, highlighting the value of structured vector graphics for math education and the importance of context and prompts in diagram synthesis. The work points to future directions such as comparing SVG with TikZ and Wolfram formats, targeted fine-tuning, and human-in-the-loop improvements to enhance pedagogical effectiveness and robustness of diagram generation and evaluation.

Abstract

Advances in large language models (LLMs) offer new possibilities for enhancing math education by automating support for both teachers and students. While prior work has focused on generating math problems and high-quality distractors, the role of visualization in math learning remains under-explored. Diagrams are essential for mathematical thinking and problem-solving, yet manually creating them is time-consuming and requires domain-specific expertise, limiting scalability. Recent research on using LLMs to generate Scalable Vector Graphics (SVG) presents a promising approach to automating diagram creation. Unlike pixel-based images, SVGs represent geometric figures using XML, allowing seamless scaling and adaptability. Educational platforms such as Khan Academy and IXL already use SVGs to display math problems and hints. In this paper, we explore the use of LLMs to generate math-related diagrams that accompany textual hints via intermediate SVG representations. We address three research questions: (1) how to automatically generate math diagrams in problem-solving hints and evaluate their quality, (2) whether SVG is an effective intermediate representation for math diagrams, and (3) what prompting strategies and formats are required for LLMs to generate accurate SVG-based diagrams. Our contributions include defining the task of automatically generating SVG-based diagrams for math hints, developing an LLM prompting-based pipeline, and identifying key strategies for improving diagram generation. Additionally, we introduce a Visual Question Answering-based evaluation setup and conduct ablation studies to assess different pipeline variations. By automating the math diagram creation, we aim to provide students and teachers with accurate, conceptually relevant visual aids that enhance problem-solving and learning experiences.

Figures (4)

• Figure 1: A math problem on the topic "distributive property of multiplication". The left side shows the problem, and step-by-step hints, while the right side shows the diagram in the first-step hint in SVG format.
• Figure 2: An overview of our pipeline for vector image generation and evaluation. $r(\cdot)$ represents rasterization, where a vector image is rendered into a pixel image. Problem statement $\mathcal{P}$ is removed due to spatial constraints. Rounded boxes correspond to text $T$, parallelograms correspond to diagrams $D$, either in SVG code format or pixel-based image format.
• Figure 3: Two math problems and their corresponding generated diagrams in a hint step, showing cases of successful and unsuccessful diagram generation.
• Figure 4: A math problem on the topic "commutative property of multiplication": (a) shows the first hint diagram, (b) shows the second hint diagram, and (c) shows the second hint diagram generated by the pipeline.