{"record":{"id":"72cb021d1c5a6fe4","repo":"mermaid-js/mermaid","slug":"failed-to-load-failed-length-external-diagrams","errorCode":null,"errorMessage":"Failed to load ${failed.length} external diagrams","messagePattern":"Failed to load (.+?) external diagrams","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/mermaid/src/diagram-api/loadDiagram.ts","lineNumber":35,"sourceCode":"          // Register diagram if it is not already registered\n          const { diagram, id } = await loader();\n          registerDiagram(id, diagram, detector);\n        } catch (err) {\n          // Remove failed diagram from detectors\n          log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);\n          delete detectors[key];\n          throw err;\n        }\n      }\n    })\n  );\n  const failed = results.filter((result) => result.status === 'rejected');\n  if (failed.length > 0) {\n    log.error(`Failed to load ${failed.length} external diagrams`);\n    for (const res of failed) {\n      log.error(res);\n    }\n    throw new Error(`Failed to load ${failed.length} external diagrams`);\n  }\n};\n","sourceCodeStart":17,"sourceCodeEnd":38,"githubUrl":"https://github.com/mermaid-js/mermaid/blob/d93e9c88c01a599c062ee6a3f1462e3558ac6b90/packages/mermaid/src/diagram-api/loadDiagram.ts#L17-L38","documentation":"Thrown by loadDiagram when one or more external diagram loaders reject during Promise.allSettled. Each loader is an async module import; if any fails (network error, bad chunk path, runtime error in module), the failed count is aggregated and the whole batch is reported as failed after logging each rejection.","triggerScenarios":"A dynamic import() for an external diagram chunk fails: 404 on the JS file, network offline, CORS block, syntax error in the chunk, or a peer dependency missing at runtime.","commonSituations":"Deploying a mermaid build where chunk paths are wrong (base URL misconfigured), CDN outage, ad-blocker stripping the chunk, or a version mismatch between the host and the external diagram package.","solutions":["Check the browser console/network tab for the failing chunk import (404, CORS, etc.).","Correct the asset base URL / public path so chunks resolve.","Ensure the external diagram package version matches the host mermaid version.","Catch the aggregate error and fall back to built-in diagrams, or retry the load."],"exampleFix":"// before\nawait loadDiagram(loaders);\n\n// after\ntry {\n  await loadDiagram(loaders);\n} catch (e) {\n  console.error('External diagrams failed, continuing with built-ins', e);\n  // degrade gracefully without the external diagrams\n}","handlingStrategy":"fallback","validationCode":"// Verify each chunk URL resolves before batch loading\nasync function probe(url: string) {\n  const res = await fetch(url, { method: 'HEAD' });\n  if (!res.ok) throw new Error(`Missing chunk: ${url}`);\n}\nawait Promise.all(chunks.map(probe));\nawait loadDiagram(loaders);","typeGuard":null,"tryCatchPattern":"try {\n  await loadDiagram(loaders);\n} catch (e) {\n  // log and continue with built-in diagrams only\n  console.error('External diagrams unavailable', e);\n}","preventionTips":["Set the correct asset base/publicPath so dynamic imports resolve.","Pin external diagram package versions to match the host mermaid version.","Provide a CDN fallback for chunk hosting.","Test the production build, not just dev, since chunk paths differ."],"tags":["mermaid","loader","external-diagram","network","dynamic-import"],"backgroundTag":null,"analyzedSha":"d93e9c88c01a599c062ee6a3f1462e3558ac6b90","analyzedAt":"2026-08-12T06:23:11.304Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}