#343·markmap

Question: Replace node <foreignObject> with pure SVG (<rect> + <text>)

Author: saraOrkideCreated Dec 7, 2025Updated Dec 7, 2025

Hi

I’m using markmap to render a mind map in an SVG, and by default each node is rendered inside a that contains an HTML

. For better compatibility and styling (e.g. exporting to other SVG consumers, PDF tools, or environments that don’t fully support foreignObject), I would like to render each node as pure SVG elements, something like:

a for the background (card)

a (or ) for the label

In other words, I’d like to replace the default -based node rendering with a rect + text node renderer.

What I’m doing right now

Right now I’m trying to post-process the SVG after markmap renders: `const SVG_NS = 'http://www.w3.org/2000/svg';

function convertForeignObjectNode( fo: SVGForeignObjectElement, innerDiv: HTMLElement ) { const g = fo.parentElement as SVGGElement | null; if (!g || !innerDiv) return;

const cs = window.getComputedStyle(innerDiv); const rawText = (innerDiv.textContent ?? '').trim();

// Idea: // 1) Measure innerDiv (width/height, padding, etc.) // 2) Create and in the SVG namespace // 3) Copy relevant styles (background, color, font sizes...) // 4) Remove } ` This kind of works, but it feels fragile because I’m trying to reconstruct layout and measurements that markmap already knows internally. I’m also afraid it might break with future changes in markmap’s renderer.

Questions

Is there a recommended / supported way to change how nodes are rendered, so that instead of I can directly render SVG + ?

Does markmap expose any renderer hooks or extension points where I can:

override node rendering,

but still reuse internal layout (x, y, width, height, padding, etc.)?

If there is an example of a custom node renderer (or a plugin) that replaces the default HTML/foreignObject nodes with pure SVG elements, could you point me to it?

If the answer is “not currently possible without post-processing”, is there interest in a feature like: new Markmap(svg, { nodeRenderer: (nodeData, layoutInfo, selection) => { ... } }); or similar, that would let users plug in their own SVG-based node renderer? markmap-view version: (0.18.10)

markmap-lib version: (0.18.11)

Browser: (e.g. Chrome 131, ubuntu / Windows / etc.)