mrdoob/three.js · error · Error

no diagram ${name}

Error message

no diagram ${name}

What it means

Thrown by the threejs-post-processing-3dlut lesson's createDiagram() when a page element has a data-diagram attribute with no matching entry in that file's diagrams object. Identical pattern to the other lessons, but this lesson calls info.init(base) (rather than info.create) once the diagram is resolved.

Source

Thrown at manual/resources/threejs-post-processing-3dlut.js:132

							break;

					}

				}, 500 );

			},
		},
	};

	[ ...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.init( base );

	}

}

View on GitHub (pinned to da05705fa3)

Solutions

1. List every data-diagram value in the lesson HTML and confirm each has a key in the diagrams object.
2. Add the missing diagram entry, exposing an init(base) method (this lesson calls info.init, not info.create).
3. Remove the attribute from elements that are not diagrams.

Example fix

// before
const diagrams = {
  lut: { init: initLut },
};
// HTML: <div data-diagram="original"> -> throws

// after
const diagrams = {
  lut: { init: initLut },
  original: { init: initOriginal },
};

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.init === 'function';
}

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

When it happens

Trigger: A data-diagram attribute in the 3D LUT lesson page whose value is not a key in the local diagrams map. Renaming the diagrams object keys without updating the HTML, or adding a demo element without registering it.

Common situations: Adapting the post-processing LUT lesson: you add a second comparison canvas with a new data-diagram name and forget to define diagrams.<name> with an init(base) method.

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