Math Diagram Generation for HKDSE 3D Geometry

I. TL;DR

TRIAL

Both direct SVG and TikZ-via-node-tikzjax work for generating HKDSE 3D geometry diagrams from structured diagramSpec JSON. The key insight: because we feed LLMs well-structured specs—not freeform prompts—our accuracy far exceeds the ~73.9% benchmark for general K-12 diagram generation³. Recommendation: start with SVG for speed, validate with TikZ for academic polish. Do not use image-generation AI (DALL-E, Midjourney) for geometric accuracy—they cannot reliably produce labelled vertices, angle marks, or dashed hidden edges.

II. Executive Assessment

Applicability

Should Eric learn this now? Yes. Time to basic competence: 2–4 hours. Key risk: edge cases with complex auxiliary constructions (perpendicular feet, parametric constraints).

III. Technology Landscape

Eight approaches exist for generating mathematical diagrams programmatically. Only two are practical for our use case: LLM-generated SVG and LLM-generated TikZ rendered via node-tikzjax. The rest fail on either output format, dependency weight, or problem fit.

1. LLM → SVG (Direct)

The LLM generates raw SVG markup from a diagramSpec JSON. Zero dependencies. Full control over styling, label placement, and dashed/solid line rendering. Output is larger (~2–4KB per figure) but embeds directly in HTML. Uses system fonts (no LaTeX typography). For structured specs with explicit vertex coordinates, this produces clean, accurate output on the first attempt.

2. LLM → TikZ → SVG (node-tikzjax)

The LLM generates TikZ code, which is rendered server-side to SVG via node-tikzjax⁷. Inherits LaTeX's Computer Modern fonts, giving diagrams an academic look that teachers recognize. The TikZ 3D library⁸ provides native support for oblique projections. Trade-off: node-tikzjax is single-threaded (no concurrent renders) and requires an npm dependency.

3. DeTikZify (NeurIPS 2024)

A specialized model trained on 360K+ TikZ–image pairs¹. Outperforms GPT-4V and Claude on figure-to-TikZ conversion tasks. However, it solves the inverse problem: raster image → TikZ code. Our pipeline goes spec → code, so DeTikZify is architecturally misaligned. It also requires GPU inference.

4. Three.js + SVGRenderer

Browser-native 3D rendering with SVG output¹⁰. Supports interactive rotation, which is appealing for web demos. But for static worksheet diagrams it introduces unnecessary complexity: a full 3D scene graph, camera setup, and lighting for what amounts to a wireframe with labels.

5. GeoGebra API

GeoGebra's Apps API⁹ provides programmatic 3D geometry construction. The fatal flaw: 3D view export is bitmap-only (PNG). No SVG export path exists for 3D scenes. Dead end for print-quality vector output.

6. Asymptote & 7. Manim

Asymptote produces publication-grade vector graphics but requires a full TeX installation. Manim (3Blue1Brown's engine) is animation-focused—designed for explanatory videos, not static exam figures. Both are significantly over-engineered for our needs.

8. DiagramIR (Nov 2025)

An evaluation framework² for scoring LLM-generated diagrams against reference images. Useful for systematic quality assessment but does not generate diagrams. Could be adopted later to score our pipeline output at scale.

IV. Spike Test Results

We ran a controlled spike with 3 HKDSE past-paper figures, generating each via both SVG and TikZ pipelines from identical diagramSpec inputs. Full results at research.ericsan.io/talentcoop_diagram_spike.html.

The rectangular box case (8 vertices + 2 auxiliary points M and N) was the most complex. SVG handled it cleanly because we could control absolute positioning. TikZ produced correct geometry but missed a small angle arc at vertex A—a prompt refinement issue, not a fundamental limitation.

V. Real-World Constraints

LLM accuracy benchmarks

Stanford's Spring 2025 evaluation found GPT-4o and Claude 3.5 Sonnet achieve only 73.9% accuracy on K-12 diagram generation tasks³. Separately, geometric element recognition by LLMs scores just 53% accuracy on standard benchmarks⁴. Recent SVG-specific evaluations⁵ confirm that while LLMs can produce syntactically valid SVG, spatial accuracy degrades with complexity.

Technical constraints

What the benchmarks don't capture

DiagramIR² proposes a multi-dimensional evaluation (spatial accuracy, label placement, style adherence), but no benchmark yet tests the structured-spec paradigm. Our results are promising but n=3 is not statistically significant. The hardest HKDSE cases—tetrahedra with ground-plane elevation angles, truncated pyramids with internal diagonals—remain untested.

VI. Critical Assessment

The honest risk: We tested 3 simple cases. The hardest HKDSE 3D geometry (2024 tetrahedron-on-ground with elevation angles, 2019 frustum with internal diagonal) haven't been tested. The pipeline's ceiling is unknown. Pre-computing coordinates in the diagramSpec mitigates most failures, but at some point the spec itself becomes harder to write than the diagram.

VII. Implementation Guide

Recommended pipeline

The production path uses SVG as the primary output format, with TikZ as an optional upgrade for academic contexts.

Prerequisites

Node.js 18+, node-tikzjax (npm)⁷, Claude API key or Cursor agent. No TeX installation required—node-tikzjax bundles its own WASM-compiled TeX engine.

diagramSpec structure

The spec is a JSON object with explicit vertex coordinates (projected to 2D), edge lists with visibility flags, label positions, and optional decorations (angle arcs, right-angle marks, dashed lines). The LLM translates this to SVG or TikZ—it does not compute geometry.