mrdoob/three.js · error · Error

no diagram ${name}

Error message

no diagram ${name}

What it means

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.

Source

Thrown at manual/resources/threejs-align-html-elements-to-3d.js:359

	};

	function advanceText( ctx, color, str ) {

		ctx.fillStyle = color;
		ctx.fillText( str, 0, 0 );
		ctx.translate( ctx.measureText( str ).width, 0 );

	}

	[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( createDiagram );

	function createDiagram( base ) {

		const name = base.dataset.diagram;
		const info = diagrams[ name ];
		if ( ! info ) {

			throw new Error( `no diagram ${name}` );

		}

		info.create( { elem: base } );

	}

}

View on GitHub (pinned to da05705fa3)

Solutions

1. Open the lesson HTML and the script side by side; for every data-diagram="X" ensure diagrams.X exists.
2. Register the missing diagram in the diagrams object with a create({elem}) function.
3. If the element is not meant to be a diagram, remove the data-diagram attribute or rename it.

Example fix

// HTML: <div data-diagram="tooltip"></div>
// before — diagrams has no 'tooltip' key -> throws
const diagrams = {
  css3d: { create: makeCss3d },
};

// after
const diagrams = {
  css3d: { create: makeCss3d },
  tooltip: { create: makeTooltip },
};

// Reconcile the page's data-diagram values with the diagrams registry up front.
function assertDiagramsRegistered( diagrams ) {
  const missing = [ ...document.querySelectorAll( '[data-diagram]' ) ]
    .map( el => el.dataset.diagram )
    .filter( name => ! diagrams[ name ] );
  if ( missing.length ) throw new Error( `Unregistered diagrams: ${missing.join( ', ' )}` );
}

function isDiagramInfo( v ) {
  return v !== null && typeof v === 'object' && typeof v.create === 'function';
}

[ ...document.querySelectorAll( '[data-diagram]' ) ].forEach( base => {
  const info = diagrams[ base.dataset.diagram ];
  if ( ! info ) { console.warn( 'skipping unknown diagram:', base.dataset.diagram ); return; }
  try { info.create( { elem: base } ); } catch ( e ) { console.error( base.dataset.diagram, e ); }
} );

When it happens

Trigger: 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.

Common situations: 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.

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/c0904dcb36c412ae. Report an issue: GitHub.