A github repo for generating mind maps in JavaScript

github address:https://github.com/dundalek/markmap

The author's readme is written very simply.

Today, a colleague asked how the example provided by the author ran. Here I will write a more detailed step out.

First look at the content of example.parse.js:

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));

Use nodejs named node example.parse.js to execute this code: the code reads the local file gtor.md containing the mind map, parses and converts it to generate the local file gtor.json.

Then look at example.view.js and find that the author uses d3 for 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
  });
});

If you directly 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 cannot be accessed:

This example must be deployed to the server to run.

For simplicity, I made a simple wrapper. If you want to run the example to see the effect, just download my project to the local:https://github.com/i042416/jerrylist

Start the server directly locally with the nodejs command line:

node local.js

Then localhost:3000/mindmap can see the effect of mind map

To get more original technical articles from Jerry, please follow the public account "Wang Zixi" or scan the QR code below: