{"record":{"id":"29c5811f6de1a52c","repo":"mrdoob/three.js","slug":"no-diagram-name-29c581","errorCode":null,"errorMessage":"no diagram: ${name}","messagePattern":"no diagram: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"manual/resources/threejs-lesson-utils.js","lineNumber":165,"sourceCode":"\t\t\t} else {\n\n\t\t\t\trafRunning = false;\n\n\t\t\t}\n\n\t\t} );\n\n\n\t},\n\taddDiagrams( diagrams ) {\n\n\t\t[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( ( elem ) => {\n\n\t\t\tconst name = elem.dataset.diagram;\n\t\t\tconst info = diagrams[ name ];\n\t\t\tif ( ! info ) {\n\n\t\t\t\tthrow new Error( `no diagram: ${name}` );\n\n\t\t\t}\n\n\t\t\tthis.addDiagram( elem, info );\n\n\t\t} );\n\n\t},\n\taddDiagram( elem, info ) {\n\n\t\tthis.init();\n\n\t\tconst scene = new THREE.Scene();\n\t\tlet targetFOVDeg = 60;\n\t\tconst aspect = 1;\n\t\tconst near = 0.1;\n\t\tconst far = 50;\n\t\tlet camera = new THREE.PerspectiveCamera( targetFOVDeg, aspect, near, far );","sourceCodeStart":147,"sourceCodeEnd":183,"githubUrl":"https://github.com/mrdoob/three.js/blob/da05705fa31f02710c19772a2aa70c7454807f0c/manual/resources/threejs-lesson-utils.js#L147-L183","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before\nthreejsLessonUtils.addDiagrams( {\n  diagram1: { create: makeOne },\n} );\n// HTML has <div data-diagram=\"diagram2\"> -> throws\n\n// after\nthreejsLessonUtils.addDiagrams( {\n  diagram1: { create: makeOne },\n  diagram2: { create: makeTwo },\n} );","handlingStrategy":"validation","validationCode":"function assertDiagramsCovered( diagrams ) {\n  const wanted = [ ...document.querySelectorAll( '[data-diagram]' ) ].map( e => e.dataset.diagram );\n  const missing = wanted.filter( n => ! diagrams[ n ] );\n  if ( missing.length ) throw new Error( `addDiagrams missing: ${missing.join( ', ' )}` );\n}","typeGuard":"function isDiagramInfo( v ) {\n  return v !== null && typeof v === 'object' && typeof v.create === 'function';\n}","tryCatchPattern":"try {\n  threejsLessonUtils.addDiagrams( diagrams );\n} catch ( err ) {\n  if ( /^no diagram:/.test( err.message ) ) {\n    console.error( 'Lesson diagrams incomplete:', err.message );\n  } else throw err;\n}","preventionTips":["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."],"tags":["manual","diagram","lesson-utils","dom-driven"],"backgroundTag":null,"analyzedSha":"da05705fa31f02710c19772a2aa70c7454807f0c","analyzedAt":"2026-08-12T22:51:37.160Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}