What causes "Mermaid render skipped:" in affaan-m/ECC?

Read the console.warn message to identify which diagram failed and validate its syntax at mermaid.live.

Mermaid render skipped:

Error message

Mermaid render skipped:

What it means

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.

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.

Defensive patterns

Strategy: fallback

Validate before calling

// Pre-validate mermaid blocks when generating the artifact
for (const block of mermaidBlocks) {
  if (!/^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie)\b/.test(block.trim())) {
    console.warn('skipping unrecognized mermaid block');
  }
}

Type guard

function isRenderableMermaid(block) {
  return typeof block === 'string' && block.trim().length > 0 &&
    /^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie)\b/.test(block.trim());
}

Try / catch

try {
  await mermaid.run({ querySelector: '.mermaid' });
} catch (err) {
  document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-unrendered'));
  console.warn('Mermaid render skipped:', err && err.message);
}

Prevention

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.

When it happens

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

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

Understand the failure class

Background: UnsupportedOperationException and "is not supported" errors: when a library deliberately refuses a call — this error's family across 30 libraries.

Related errors

template has unfilled placeholders

AI-assisted analysis of affaan-m/ECC@8321021c54 (2026-09-16). Data as JSON: /api/errors/d1967b1b8996ba8b. Report an issue: GitHub.

Appendix: source

Thrown at scripts/lib/plan-canvas/ui.js:47

function mermaidLoaderScript(url) {
  return `<script type="module">
  try {
    const mermaid = (await import(${JSON.stringify(url)})).default;
    mermaid.initialize({
      startOnLoad: false,
      securityLevel: 'strict',
      theme: 'dark',
      fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",
      themeVariables: {
        primaryColor: '#13161e', primaryBorderColor: '#6885e8', primaryTextColor: '#dfe2e9',
        lineColor: '#80859a', secondaryColor: '#191d2a', tertiaryColor: '#101218',
        background: '#080a0e', mainBkg: '#13161e', clusterBkg: '#0d0f14'
      }
    });
    await mermaid.run({ querySelector: '.mermaid' });
  } catch (err) {
    document.querySelectorAll('.mermaid').forEach(el => el.classList.add('mermaid-unrendered'));
    console.warn('Mermaid render skipped:', err && err.message);
  }
</script>`;
}

// Design tokens shared by the chrome and the markdown artifact template.
const TOKENS_CSS = `
  :root{
    --bg:#080a0e; --bg2:#0d0f14; --bg3:#13161e; --bg4:#191d2a;
    --surface:#101218; --surface-hover:#171a24; --border:#1d2130; --border-light:#272c3e;
    --text:#dfe2e9; --text2:#80859a; --text3:#4c5168;
    --accent:#6885e8; --accent-glow:rgba(104,133,232,0.15); --accent-dim:#3d5ab8;
    --green:#4acb8a; --green-glow:rgba(74,203,138,0.15);
    --orange:#eca85a; --orange-glow:rgba(236,168,90,0.15);
    --pink:#e26a9e; --pink-glow:rgba(226,106,158,0.15);
    --red:#e86060; --red-glow:rgba(232,96,96,0.15);
    --teal:#4acbbe; --teal-glow:rgba(74,203,190,0.15);
    --radius:8px; --radius-sm:5px;
    --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;

View on GitHub (pinned to 8321021c54)