Use VSCode to write your document and MindMap with MarkDown

VSCode, Mindmap and MarkDown are 3 of the useful tool that I used frequently. You might have used multiple of them as well.

• Use VSCode to program and edit files
• Use MindMap to organize your thoughts and generate ideas
• Use Markdown to create documents

But recently I am thinking of more of creating the MindMap and document with the same MarkDown (MD) file. It would save quite a bit of effort and would be interesting to see things from different angles. I am going to show you how.

Install VSCode

Why VSCode?

• Why VSCode?
  • Cross platform 
  • Rich Feature
  • Extendable with extensions  
  • Free
• Download: [https://code.visualstudio.com/Download]
• Install Extensions  
  • Select “Extensions” on the left  
  • CTRL + SHIFT + X–

Enable Markdown Extensions

Enable Markdown Preview

If you only want to do simple Markdown edit and preview, then “Markdown All in One” is pretty much all you want. You can edit text, add equation, preview outcome and even print to HTML files. It also has the auto complete function to make you edit more easier. But if you would like to do more, then the next few sections are for you.

Enable dedicated Markdown Math Equation Editing (Latex style)

If you would like to use more sophisticated Math equation, then the “Markdown + Math” extension is what you need. You would need to isable math.enabled option of Markdown All in One extension to use it.

Enable Markdown Linting and Style Check

The markdownlint extension can be your grace saver when it comes to style, it also provide hint on how to fix things and enforce good style through out the document.

Enable Markdown Export (PDF/HTML/JPG/PNG)

As usual, there is an extension that can do it for you: “Markdown PDF“. By default, it could not render math equation. Here is how you could configure it.

Enable Rendering of Math Equation Using MathJax

Step 1: Open “C:\Users\user\.vscode\extensions\yzane.markdown-pdf-1.4.4\template\template.html”

Step 2: Add the following 2 lines of code to the end of the file

Enable Generating MindMap

Install and run markmap-lib

To generate the MindMap, I choose to use a Node.js base application “markmap-lib“. After installation, the generation can be done with command line. You can download my MD version of this post (vscode_markdown_mindmap.md) to test out.

The outcome HTML looks like this

What is Included in the MindMap?

The items that are added to the mindmap includes most of the hierarchical items:

• Headings (hierarchical)
• Numbered List
• Unordered List
• The List items also could include separate equations (not the embedded ones)

What is NOT Included in the MindMap?

Normal text and comments in the Markdown file are not included in the created MindMap. The comments are also not included in the PDF exports.

In case you don’t know how to include the comments in the Markdown. Here is a short example:

This is all you need to do to use Markdown to generate your document and MindMap.

Please let us know if it works well for you too.