{"record":{"id":"d1967b1b8996ba8b","repo":"affaan-m/ECC","slug":"mermaid-render-skipped","errorCode":null,"errorMessage":"Mermaid render skipped:","messagePattern":"Mermaid render skipped:","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"scripts/lib/plan-canvas/ui.js","lineNumber":47,"sourceCode":"function mermaidLoaderScript(url) {\n  return `<script type=\"module\">\n  try {\n    const mermaid = (await import(${JSON.stringify(url)})).default;\n    mermaid.initialize({\n      startOnLoad: false,\n      securityLevel: 'strict',\n      theme: 'dark',\n      fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif\",\n      themeVariables: {\n        primaryColor: '#13161e', primaryBorderColor: '#6885e8', primaryTextColor: '#dfe2e9',\n        lineColor: '#80859a', secondaryColor: '#191d2a', tertiaryColor: '#101218',\n        background: '#080a0e', mainBkg: '#13161e', clusterBkg: '#0d0f14'\n      }\n    });\n    await mermaid.run({ querySelector: '.mermaid' });\n  } catch (err) {\n    document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-unrendered'));\n    console.warn('Mermaid render skipped:', err && err.message);\n  }\n</script>`;\n}\n\n// Design tokens shared by the chrome and the markdown artifact template.\nconst TOKENS_CSS = `\n  :root{\n    --bg:#080a0e; --bg2:#0d0f14; --bg3:#13161e; --bg4:#191d2a;\n    --surface:#101218; --surface-hover:#171a24; --border:#1d2130; --border-light:#272c3e;\n    --text:#dfe2e9; --text2:#80859a; --text3:#4c5168;\n    --accent:#6885e8; --accent-glow:rgba(104,133,232,0.15); --accent-dim:#3d5ab8;\n    --green:#4acb8a; --green-glow:rgba(74,203,138,0.15);\n    --orange:#eca85a; --orange-glow:rgba(236,168,90,0.15);\n    --pink:#e26a9e; --pink-glow:rgba(226,106,158,0.15);\n    --red:#e86060; --red-glow:rgba(232,96,96,0.15);\n    --teal:#4acbbe; --teal-glow:rgba(74,203,190,0.15);\n    --radius:8px; --radius-sm:5px;\n    --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;","sourceCodeStart":29,"sourceCodeEnd":65,"githubUrl":"https://github.com/affaan-m/ECC/blob/8321021c54d670126ce3b2969d5deb880b4b0c2a/scripts/lib/plan-canvas/ui.js#L29-L65","documentation":"The plan-canvas markdown artifact embeds a browser script that renders Mermaid diagrams via mermaid.run(). If Mermaid throws (syntax error in a diagram, parse failure, loader problem), the catch block marks all .mermaid elements with the `mermaid-unrendered` class and logs `Mermaid render skipped: <message>` via console.warn. This is a graceful-degradation warning, not a fatal error.","triggerScenarios":"A ```mermaid code block in the artifact contains invalid Mermaid syntax (bad arrows, undefined nodes, unsupported diagram type); mermaid.initialize options conflict with the diagram; the bundled mermaid loader script fails to load.","commonSituations":"Plans embedding hand-written diagrams with typos; diagrams generated by LLMs with slight syntax drift; older mermaid versions not supporting a newer diagram type (e.g. mindmap, gitGraph); content copied from editors that mangle special characters.","solutions":["Read the console.warn message to identify which diagram failed and validate its syntax at mermaid.live.","Check that .mermaid elements still display via the `mermaid-unrendered` fallback class styling.","Upgrade/pin the mermaid loader version to one supporting the diagram types used.","Escape problematic characters (quotes, HTML entities) inside mermaid blocks before rendering.","Wrap each diagram individually or pre-validate mermaid blocks when generating the artifact HTML."],"exampleFix":null,"handlingStrategy":"fallback","validationCode":"// Pre-validate mermaid blocks when generating the artifact\nfor (const block of mermaidBlocks) {\n  if (!/^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie)\\b/.test(block.trim())) {\n    console.warn('skipping unrecognized mermaid block');\n  }\n}","typeGuard":"function isRenderableMermaid(block) {\n  return typeof block === 'string' && block.trim().length > 0 &&\n    /^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie)\\b/.test(block.trim());\n}","tryCatchPattern":"try {\n  await mermaid.run({ querySelector: '.mermaid' });\n} catch (err) {\n  document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-unrendered'));\n  console.warn('Mermaid render skipped:', err && err.message);\n}","preventionTips":["Validate mermaid blocks at generation time (mermaid.parse where available).","Keep the mermaid-unrendered CSS fallback styled so raw code remains readable.","Pin the mermaid version to one that supports every diagram type your plans emit.","Escape/strip characters known to break Mermaid (quotes, <, >) in generated diagrams.","Test artifact rendering with a corpus of LLM-generated diagrams to catch syntax drift."],"tags":["mermaid","frontend","diagram","rendering"],"backgroundTag":"unsupported-operation","analyzedSha":"8321021c54d670126ce3b2969d5deb880b4b0c2a","analyzedAt":"2026-09-16T10:08:13.343Z","contentChangedAt":"2026-09-16T10:08:13.343Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}