You can convert markdown list to mindmap.
- First, use simple-markdown to parse markdown into a tree structure.
type MapTree = {
title: string
children: MapTree[]
}-
Then, recursively render the nodes and their children until children is empty.
-
Finally, we have node DOM, use ref to get the DOM element position and size, use svg to connect them.
You can
-
dynamically add/remove/update nodes
-
render multiple mindmap
-
control the connection line
- curved
- direct
- rectilinear
- control the line if animated
run
yarn test
to test the parse function and the render function.
on branch feature/parse, I wrote a custom parse function to parse markdown into a tree structure. It's simple and fast, but only works with list, not like simple-markdown.