
Convert Markdown to a Mind Map - gera2ld
https://markmap.js.org/
======
dnpp123
Cool!

Slightly related, I also like:
[https://www.diagram.codes/](https://www.diagram.codes/)

~~~
Heliosmaster
I guess it was done on purpose, but essentially it reminds me of the syntax
for graphviz: [https://graphviz.org/](https://graphviz.org/)

~~~
mikeholler
This was my first thought as well. I use graphviz quite a lot for these sorts
of diagrams, and I really like it. Their site, reference materials, etc. need
updating though.

~~~
grafwiz
I use it too but I wouldn't mind a non-ugly layout renderer!

~~~
WorldMaker
There's an interesting art to knowing when neato or twopi are better choices
than dot for layout rendering. Graphviz is interesting because there are
multiple layout renderers and "non-ugly" is a graph-by-graph art form between
the different renderers and different renderer hints in the graph file (spring
constants and what-have-you).

I've had some successes and a lot of failures over the years.

------
robenkleene
I make an app for macOS that makes it easy to make offline viewers for
documents like this ([https://repla.app/](https://repla.app/)). Would anyone
be interested in having an offline viewer for this? E.g., being able to drag a
`mindmap.md` file to the app icon, and have it render the mindmap and
automatically update when you make changes in your text editor.

(I'm aware there are other ways to do offline views like this, happy to
explain the relative pros and cons of Repla's approach versus others as I see
them, if anyone is curious, just ask!)

~~~
robenkleene
Thanks for the input! I'm also looking at supporting Mermaid diagramming
[https://mermaid-js.github.io/](https://mermaid-js.github.io/) I'd love to
hear if people have other good use cases for this model, e.g., of having a
plain text file you edit in a text editor accompanied by a rendered web
document view of the same file.

~~~
mycall
Main problem I've had using mermaid for large flowcharts is that the SVG gets
cut off on the edges sometimes.

------
grafwiz
This is beautiful that's it but this is nothing considered to graphviz. If
Graphviz had a decent, just non-ugly renderer it would be much more popular.

Eg. Mind maps aren't trees- they are bigraphs, this is limited to trees.

Someone needs to plug in this renderer with Graphviz.

~~~
klibertp
> Mind maps aren't trees- they are bigraphs

Yes! So many of the mind-mapping software is limited to just trees, plus
there's no way of styling some paths differently, the interface is far from
ergonomic, in short: I couldn't find an interactive tool for drawing complex
relationships between many kinds of content (I want to be able to put an image
in one place, then paste a bit of some documentation in another, then connect
them in some way, then repeat this 100 times and _then_ have the tool "auto-
layout" all the content.)

Here's the thing I'm currently trying to create:
[https://github.com/piotrklibert/awesome-
config](https://github.com/piotrklibert/awesome-config) \- I need it in SVG so
that the links are working, plus it would be nice to be able to show/hide
portions of the graph. I'm currently using Gliffy, but it's getting slower and
buggier with every box added.

Any advice on what to use for things like these?

~~~
grafwiz
Not sure what gliffy is but Graphviz can conceptually draw the same thing. You
can have box shapes and colors for nodes and edges both. However, the
rendering layout itself is usually unpleasant. You can have some control but
it's really suboptimal. As I said, Graphviz is both simple and very powerful
so no reason to not use it to represent data in concept. Plus it goes in your
VCS.

~~~
klibertp
Gliffy[1][2] is a web app for drawing diagrams and schematics of various
kinds. You get a large library of shapes - most of UML, classic flowchart,
some UI mockups, swimlanes, now also the root of a mindmap - and a few tools
for connecting these shapes to each other; the connections are real
connections, not lines, ie. they follow after the shape if you move it, and
they know when they intersect and can render a "hop" where needed. You get a
lot of freedom in styling the diagrams (change color, thickness, a curvature
of lines and color, background, font, font size, etc. for boxes and text), and
the UI is not that bad. It, however, seems to have some performance issues,
because after a certain size the experience degrades and you need to reload
the page every now and then.

I know and like pure-text diagramming solutions, but they don't work that well
for diagrams designed to span multiple displays in width or height. Or put
another way - my editor, as glorious as it is, is not designed for rapid zoom-
in/zoom-out on various parts of an 80000x80000 rows/cols text file. I want to
be able to work in an interactive environment, where I can rapidly switch
between the overall outline view and the focused, detailed view of just a few
nodes. Moreover, I need to able to embed (and preview if possible) different
kinds of content, from syntax-highlighted text to images to videos, plus it
should render natively in a browser (hence the SVG).

My use case for this is putting together a knowledge-base (think Wikipedia,
just for my personal data), which would use direction, color, line thickness
and kind (dotted, dashed, etc.) to bind related subjects and show the
relations between them in 2 dimensions. Feature-wise Gliffy is close to what I
have in mind, but it doesn't handle a scale big enough to be called a
"knowledge-base" \- "infographic" is the most it can produce.

[1] [https://www.gliffy.com/](https://www.gliffy.com/)

[2] [https://raw.githubusercontent.com/piotrklibert/awesome-
confi...](https://raw.githubusercontent.com/piotrklibert/awesome-
config/master/haxemindmap.png) (made with Gliffy)

~~~
charlieflowers
Some of what you want is offered by Miro.com. It’s not driven by text files
though.

------
fsiefken
Org-mode has an exporter for the Freemind mindmapping tool. Freeplane is a
fork of Freemind
[https://www.freeplane.org/wiki/index.php/Home](https://www.freeplane.org/wiki/index.php/Home)

------
cuillevel3
This looks beautiful, but I guess it's only useful for acyclic maps?
References would be great.

Just learned, that I'm looking for a 'cognitive map'.

~~~
garmaine
It’s my own pet peeve that basically all mind map software assumes acyclic
structure. Makes it pretty useless to me.

------
melicerte
Interesting project. Thank you for sharing. I noticed when using the try it
out that the map on the right is not updated when adding a new sub-level to
one of the flowers. When downloading the html, the sublevel are correctly
rendered. I have not tried the SVG download.

I'm running latest Firefox under Ubuntu 19.10

~~~
kljuka
Same problem (TypeError: t.children is undefined). And none of the navigation
links work then any more. I'm using Firefox on Windows 10.

------
GhostVII
Nice, I always wanted to make something like this for my school notes but
never got around to it. One thing that could be useful is if it would let you
write longer paragraphs of text, which could be expanded on-demand. Ex.

    
    
      # Fruits
      ## Orange
      Oranges were first grown in...
      ## Banana
      Bananas originated in...
    

Then the mind map would have Fruits -> [Orange, Banana], and you could click
on Orange or Banana to expand the full content of the note. This is how I
format my notes at least.

~~~
ObsoleteNerd
Yeah this breaks down if you use anything more than a few words per node,
because it has no wrapping. I think even if you had the text blocks wrap at a
sane width (20% of screen-width or something) then it would be more better, or
expandable/modal blocks like your idea.

------
pimlottc
Interesting. It would be good to have a more complex example as a guide for
how the markdown should be structured.

~~~
HumblyTossed
So far I just think it's headers and lists:

# This

## This branch

### This sub branch

### Another sub branch

## This other

## And another

## One more

### This one has a branch

\- one

\- more

\- thing

### and another branch

\- what

\- is

\- this

~~~
Bedon292
Had to go to other pages to find docs butt you can nest the lists too.

\- melon

    
    
      - test
    
      - test2
    
        - and more
    
        - and more

------
pisipisipisi
Reminds me a neat Windows program from beginning of the century:
[https://www.mind-mapping.org/index.php?title=B-liner_2002](https://www.mind-
mapping.org/index.php?title=B-liner_2002)

------
m4r35n357
Pasted markdown into text area, nothing happened. No button to activate.

------
visarga
These mind maps look like MindNode which I think are the best looking.

~~~
ericax
Yes. Looks like the author made his own with D3 [1]. It does look very nice. I
especially love the colors.

[1]: [https://github.com/gera2ld/markmap-
lib/blob/master/src/view....](https://github.com/gera2ld/markmap-
lib/blob/master/src/view.ts)

------
speedgoose
It's simple and great, I like the animations. One small issue: I zoomed out a
lot and I never found back my mind map. You may need to implement bounds to
the zoom.

------
Multicomp
Hey all - are there any of these systems that can be used offline to take
markdown files and export them to SVG, PNG?

I have a couple wild ideas for CLI and/or CICD usage, but I'm not familiar
enough with reading JS to know if I can just copy something locally and expect
it to work, or if I would need to install a bunch of dependencies.

------
ericax
This looks like really nice! Are you using a open sourced mind map rendering
library, or did you write your own?

It visually looks really familiar, but looking at package.json there only
seems to be d3. I've looked at a bunch of options for rendering mind map, so
I'm particular curious.

~~~
nojvek
They are using only d3

~~~
ericax
Thanks, I looked at the code later and confirmed that too. The visual style is
very similar to MindNode, but it's rebuilt using d3.

------
faraggi
Pretty cool! I suggest adding a github link to
[https://github.com/gera2ld/markmap-lib](https://github.com/gera2ld/markmap-
lib) in the about page and homepage.

------
nilsandrey
Thanks, it's great. I'm a fan of mind mapping[1] to express some ideas.

[1]
[https://en.wikipedia.org/wiki/Mind_map](https://en.wikipedia.org/wiki/Mind_map)

------
webjockey
This looks cool. Is anyone planning to create a SaaS based on this?

------
joombaga
Something similar I used to use to design PBX call flows:
[https://code2flow.com/app](https://code2flow.com/app)

------
stats111
This is great. Is there anyway to have it set vertically?

------
geekodour
I made something several years back:
[https://markmymind.netlify.com](https://markmymind.netlify.com)

------
markstos
Would be nice if it supported circular references.

------
stared
Looks really nice, thanks for sharing!

For me, it is though more like "a dynamic table of contents" (at least, I
would use it in that way).

------
rohan1024
Cool project. One suggestion you could roll out an online service where one
can publish mind maps using some random urls.

------
sturza
Can i create a mindmap from my notion pages?

------
brna
I am not sure how I will use it, I will need to edit my markdown docs for this
to make sense, BUT it is just beautiful!

Thank you!!

------
indysigners
It's absolutely fantastic and very timely for an new IA project of mine.
Thanks so much, Gerald (Gera2ld)!

------
meagher
Another cool one is [https://swimlanes.io](https://swimlanes.io)

------
thereyougo
That's awesome!

Do you have examples for cool this you did with it? I'd like to get some
inspiration

------
robbintt
I noticed it doesn’t handle quotes correctly, try the following and the quote
will become a child node.

``` # header

Body

>quote ```

------
chvid
Buggy on Safari (SVG doesn't always show / updates correctly).

Otherwise great work.

------
baq
i like that it's done in JS.

i've been using this for a while: [https://plantuml.com/mindmap-
diagram](https://plantuml.com/mindmap-diagram)

------
tunesmith
Can a child have multiple parents?

------
cyptus
nice! would be awesome to export the input markdown again from the
downloadable html file.

------
Jahak
That's awesome!

------
aurelien
Really great Thanks!

------
bojanvidanovic
Really nice tool!

------
ValisTuring
Great work!

------
lappet
beautiful! I love it.

------
motohagiography
Calling them mind maps recalls why they failed, when they are really digraphs,
taxonomies, and basic ontologies.

Having worked with these for a while, some people actually think their job is
to be the stewards and gatekeepers of knowledge that can in fact be easily
encoded into a taxonomy and ontology to make it scale.

I love these, and every tool like this is fundamentally subversive. Just don't
be surprised when someone tries to discredit it.

