DayuanJiang/next-ai-draw-io · error · Error

No diagram element found

Error message

No diagram element found

What it means

After HTML-entity-decoding the SVG's content attribute and parsing it as XML, no <diagram> element was found. The embedded content is expected to be a draw.io <mxfile> containing one or more <diagram> elements. This means the decoded payload is XML but not draw.io diagram XML — the content attribute held something else.

Source

Thrown at lib/utils.ts:1707

        if (!encodedContent) {
            throw new Error("SVG element does not have a 'content' attribute.")
        }

        // 3. Decode HTML entities (using a minimal function)
        function decodeHtmlEntities(str: string) {
            const textarea = document.createElement("textarea") // Use built-in element
            textarea.innerHTML = str
            return textarea.value
        }
        const xmlContent = decodeHtmlEntities(encodedContent)

        // 4. Parse the XML content
        const xmlDoc = parser.parseFromString(xmlContent, "text/xml")
        const diagramElement = xmlDoc.querySelector("diagram")

        if (!diagramElement) {
            throw new Error("No diagram element found")
        }
        // 5. Extract base64 encoded data
        const base64EncodedData = diagramElement.textContent

        if (!base64EncodedData) {
            throw new Error("No encoded data found in the diagram element")
        }

        // 6. Decode base64 data
        const binaryString = atob(base64EncodedData)

        // 7. Convert binary string to Uint8Array
        const len = binaryString.length
        const bytes = new Uint8Array(len)
        for (let i = 0; i < len; i++) {
            bytes[i] = binaryString.charCodeAt(i)
        }

View on GitHub (pinned to 155ef4f7ac)

Solutions

  1. Decode the content attribute yourself and inspect what XML it actually contains
  2. Verify the decoded root element is <mxfile> (or directly <mxGraphModel> for single-diagram files) and wrap accordingly
  3. Re-export the diagram from draw.io to get a canonical embedded payload
  4. If entity decoding is the culprit, ensure the payload wasn't already decoded upstream

Example fix

// before
extractDiagramFromSvg(dataUri) // content attr holds non-drawio XML

// after: normalize the payload first
const inner = decodeHtmlEntities(svgEl.getAttribute('content'))
const wrapped = `<mxfile><diagram>${inner}</diagram></mxfile>` // only if inner is mxGraphModel
Defensive patterns

Strategy: validation

Validate before calling

const xml = decodeEntities(svgEl.getAttribute('content')!)
const parsed = new DOMParser().parseFromString(xml, 'text/xml')
if (parsed.querySelector('parsererror') || !parsed.querySelector('diagram')) throw new Error('embedded content is not drawio mxfile xml')

Type guard

function isDrawioEmbeddedXml(doc: Document): boolean {
  return Boolean(doc.querySelector('mxfile > diagram'))
}

Try / catch

try { extract(dataUri) } catch (e) { if ((e as Error).message === 'No diagram element found') throw new Error('svg content attribute holds non-drawio XML; inspect it manually') }

Prevention

When it happens

Trigger: An SVG whose content attribute contains arbitrary embedded XML (metadata, foreign tool's format), entity decoding that failed or double-decoded and corrupted the markup, or a truncated content attribute.

Common situations: Third-party tools that reuse a 'content' attribute on <svg> for their own payload; hand-crafted SVGs mimicking draw.io's format; partially transferred files where the attribute got clipped.

Related errors


AI-assisted analysis of DayuanJiang/next-ai-draw-io@155ef4f7ac (2026-08-27). Data as JSON: /api/errors/b2aa778d8306f41e. Report an issue: GitHub.