Why render a blank

Hi, I operate according to the document, but the rendering result is really blank. I took a look at the document of markmap lib. The first step is to get the data and the second step is to render. However, the rendering relies on DOM elements. I don't know how to solve this problem. Do you encounter such a problem?

<svg class="markmap-svg">{"t":"heading","d":1,"v":"root","c":[{"t":"heading","d":2,"v":"child1","c":[{"t":"list_item","d":3,"v":"child3"}]},{"t":"heading","d":2,"v":"child2","c":[{"t":"list_item","d":3,"v":"child3"}]}]}</svg>

[deiv]

Maybe you lack the transform:

<script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.7.4/dist/browser/view.min.js"></script>
<script>
    const mindmaps = document.querySelectorAll('.markmap-svg');

    for(const mindmap of mindmaps) {
        markmap.markmap(mindmap, JSON.parse(mindmap.innerHTML));
    }
</script>

Thank you very much for your reply. I use Vue framework. I try to solve it according to your instructions. Unfortunately, I don't know how to solve it. Should I write a markdown it rendering rule?

Do you know stackeditor? Stackeeditor is a markdown editor. I want to expand stackedit to realize mind map. However, since stackeeditor is written based on Vue, the document instance writing method is invalid

[deiv]

It runs as javascript in the browser...

Vue, I think is a javascript framework, so it runs in a browser. If it runs in a browser, you have to have the document instance.

think you