Use with Node.js
We can easily render a Markmap as a PNG image using Node.js by leveraging node-html-to-image, which uses Puppeteer under the hood.
import { Transformer } from 'markmap-lib';
import { fillTemplate } from 'markmap-render';
import nodeHtmlToImage from 'node-html-to-image';
import { writeFile } from 'node:fs/promises';
async function renderMarkmap(markdown: string, outFile: string) {
const transformer = new Transformer();
const { root, features } = transformer.transform(markdown);
const assets = transformer.getUsedAssets(features);
const html =
fillTemplate(root, assets, {
jsonOptions: {
duration: 0,
maxInitialScale: 5,
},
}) +
`
<style>
body,
#mindmap {
width: 2400px;
height: 1800px;
}
</style>
`;
const image = await nodeHtmlToImage({
html,
});
await writeFile(outFile, image);
}
renderMarkmap(markdown, 'markmap.png');
Note: Puppeteer may use a lot of memory.