{"record":{"id":"c0904dcb36c412ae","repo":"mrdoob/three.js","slug":"no-diagram-name","errorCode":null,"errorMessage":"no diagram ${name}","messagePattern":"no diagram (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"manual/resources/threejs-align-html-elements-to-3d.js","lineNumber":359,"sourceCode":"\t};\n\n\tfunction advanceText( ctx, color, str ) {\n\n\t\tctx.fillStyle = color;\n\t\tctx.fillText( str, 0, 0 );\n\t\tctx.translate( ctx.measureText( str ).width, 0 );\n\n\t}\n\n\t[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( createDiagram );\n\n\tfunction createDiagram( base ) {\n\n\t\tconst name = base.dataset.diagram;\n\t\tconst info = diagrams[ name ];\n\t\tif ( ! info ) {\n\n\t\t\tthrow new Error( `no diagram ${name}` );\n\n\t\t}\n\n\t\tinfo.create( { elem: base } );\n\n\t}\n\n}\n\n\n","sourceCodeStart":341,"sourceCodeEnd":370,"githubUrl":"https://github.com/mrdoob/three.js/blob/da05705fa31f02710c19772a2aa70c7454807f0c/manual/resources/threejs-align-html-elements-to-3d.js#L341-L370","documentation":"Thrown by the threejs-align-html-elements-to-3d lesson when an element in the page carries a data-diagram attribute whose value has no matching entry in the file's diagrams object. The lesson enumerates every [data-diagram] element and looks up diagrams[name]; a missing key means the HTML and the JS registry are out of sync.","triggerScenarios":"Adding <div data-diagram=\"foo\"> to the lesson HTML but not defining diagrams.foo in the script. Renaming a diagram key in JS without updating the HTML attribute (or the reverse). A typo in the data-diagram value.","commonSituations":"Authoring or forking a three.js manual lesson: you copy a diagram element as a template and forget to register the new diagram. Translating/adapting a lesson and changing identifiers inconsistently.","solutions":["Open the lesson HTML and the script side by side; for every data-diagram=\"X\" ensure diagrams.X exists.","Register the missing diagram in the diagrams object with a create({elem}) function.","If the element is not meant to be a diagram, remove the data-diagram attribute or rename it."],"exampleFix":"// HTML: <div data-diagram=\"tooltip\"></div>\n// before — diagrams has no 'tooltip' key -> throws\nconst diagrams = {\n  css3d: { create: makeCss3d },\n};\n\n// after\nconst diagrams = {\n  css3d: { create: makeCss3d },\n  tooltip: { create: makeTooltip },\n};","handlingStrategy":"validation","validationCode":"// Reconcile the page's data-diagram values with the diagrams registry up front.\nfunction assertDiagramsRegistered( diagrams ) {\n  const missing = [ ...document.querySelectorAll( '[data-diagram]' ) ]\n    .map( el => el.dataset.diagram )\n    .filter( name => ! diagrams[ name ] );\n  if ( missing.length ) throw new Error( `Unregistered diagrams: ${missing.join( ', ' )}` );\n}","typeGuard":"function isDiagramInfo( v ) {\n  return v !== null && typeof v === 'object' && typeof v.create === 'function';\n}","tryCatchPattern":"[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( base => {\n  const info = diagrams[ base.dataset.diagram ];\n  if ( ! info ) { console.warn( 'skipping unknown diagram:', base.dataset.diagram ); return; }\n  try { info.create( { elem: base } ); } catch ( e ) { console.error( base.dataset.diagram, e ); }\n} );","preventionTips":["Treat data-diagram values and diagrams keys as a single contract; change both together.","Add a dev-mode assertion that lists every data-diagram value not found in diagrams.","Code-review lesson HTML for stray data-diagram attributes left from copying a template."],"tags":["manual","diagram","lesson","dom-driven"],"backgroundTag":null,"analyzedSha":"da05705fa31f02710c19772a2aa70c7454807f0c","analyzedAt":"2026-08-12T22:51:37.160Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}