Github address: github.com/dundalek/ma…

The author’s readme is simple.

Today, a colleague asked the author how to run the example. I’m just going to do a more detailed step here.

Take a look at example.parse.js first:

var fs = require('fs'); var parse = require('.. /parse.markdown'); var transform = require('.. /transform.headings'); var text = fs.readFileSync('gtor.md', 'utf-8'); var headings = parse(text); var root = transform(headings); console.log(root); fs.writeFileSync('gtor.json', JSON.stringify(root));Copy the code

Use nodejs to name node example.parse.js to execute this code: the code reads the local file gtor.md that contains the mind map, parses and transforms to generate the local file gtor.json.

Then look at example.view.js and find that the author used D3 to do the UI rendering.

d3.json("gtor.json", function(error, data) {

if (error) throw error;

  markmap('svg#mindmap', data, {

      preset: 'default', // or colorful

      linkShape: 'diagonal' // or bracket
  });
});Copy the code

If you double-click the index.html file in the examples folder to open it in the browser, a cross-domain error will occur and the local file gtor.json will not be accessible:

This example must be deployed to run on the server.

For simplicity, I’ve made a simple wrapper. If you would like to run the example and see the effect, just download my project locally: github.com/i042416/jer…

Start the server directly from the nodejs command line:

node local.js

Then localhost:3000/mindmap to see the mindmap effect

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: