mrdoob/three.js · error · Error
no diagram: ${name}
Error message
no diagram: ${name} What it means
Thrown by the shared threejs-lesson-utils addDiagrams(diagrams) helper when a page element has a data-diagram attribute not present in the supplied diagrams map. It is the centralized version of the per-lesson check used across the manual: addDiagrams scans every [data-diagram] element and throws on the first unknown name.
Source
Thrown at manual/resources/threejs-lesson-utils.js:165
} else {
rafRunning = false;
}
} );
},
addDiagrams( diagrams ) {
[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( ( elem ) => {
const name = elem.dataset.diagram;
const info = diagrams[ name ];
if ( ! info ) {
throw new Error( `no diagram: ${name}` );
}
this.addDiagram( elem, info );
} );
},
addDiagram( elem, info ) {
this.init();
const scene = new THREE.Scene();
let targetFOVDeg = 60;
const aspect = 1;
const near = 0.1;
const far = 50;
let camera = new THREE.PerspectiveCamera( targetFOVDeg, aspect, near, far );View on GitHub (pinned to da05705fa3)
Solutions
- Cross-check the page's [data-diagram] values against the keys of the object passed to addDiagrams().
- Add the missing builder to the map, each shaped like { create(elem) {...} } (or the form the lesson expects).
- Remove the stray data-diagram attribute if the element is decorative.
Example fix
// before
threejsLessonUtils.addDiagrams( {
diagram1: { create: makeOne },
} );
// HTML has <div data-diagram="diagram2"> -> throws
// after
threejsLessonUtils.addDiagrams( {
diagram1: { create: makeOne },
diagram2: { create: makeTwo },
} ); Defensive patterns
Strategy: validation
Validate before calling
function assertDiagramsCovered( diagrams ) {
const wanted = [ ...document.querySelectorAll( '[data-diagram]' ) ].map( e => e.dataset.diagram );
const missing = wanted.filter( n => ! diagrams[ n ] );
if ( missing.length ) throw new Error( `addDiagrams missing: ${missing.join( ', ' )}` );
} Type guard
function isDiagramInfo( v ) {
return v !== null && typeof v === 'object' && typeof v.create === 'function';
} Try / catch
try {
threejsLessonUtils.addDiagrams( diagrams );
} catch ( err ) {
if ( /^no diagram:/.test( err.message ) ) {
console.error( 'Lesson diagrams incomplete:', err.message );
} else throw err;
} Prevention
- Build the diagrams map from the same source of truth that lists the page's diagram elements.
- Run the lesson under a dev flag that asserts coverage before addDiagrams runs.
- Keep diagram key names identical to the data-diagram attribute values.
When it happens
Trigger: Calling threejsLessonUtils.addDiagrams({...}) with a map that omits a key referenced by a data-diagram attribute in the same page. Adding a new diagram element to a lesson that uses threejsLessonUtils without extending the map passed to addDiagrams.
Common situations: Forking a lesson and adding a diagram element but forgetting to pass its builder to addDiagrams. Renaming a builder key while leaving the old data-diagram attribute in the HTML.
Related errors
- no diagram ${name}
- no diagram ${name}
- no primitive ${name}
- "transform stack empty!
- transform stack not 0
AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12).
Data as JSON: /api/errors/29c5811f6de1a52c.
Report an issue: GitHub.