[HN Gopher] Convert Markdown to a Mind Map
___________________________________________________________________
Convert Markdown to a Mind Map
Author : gera2ld
Score : 420 points
Date : 2020-04-10 08:10 UTC (14 hours ago)
(HTM) web link (markmap.js.org)
(TXT) w3m dump (markmap.js.org)
| speedgoose wrote:
| 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.
| markstos wrote:
| Would be nice if it supported circular references.
| ericax wrote:
| 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 wrote:
| They are using only d3
| ericax wrote:
| 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.
| bojanvidanovic wrote:
| Really nice tool!
| lappet wrote:
| beautiful! I love it.
| grafwiz wrote:
| 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 wrote:
| > 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 - 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 wrote:
| 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 wrote:
| 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/
|
| [2] https://raw.githubusercontent.com/piotrklibert/awesome-
| confi... (made with Gliffy)
| chrisweekly wrote:
| Related tangent: Roam^1 is a graph-based webapp that supports
| hierarchies, bidirectional linking, and an interactive graph
| view. Dunno about the step to get it into svg, but you may
| find it useful for any number of things. HTH
|
| 1. https://roamresearch.com
| klibertp wrote:
| Interesting, thanks!
| thereyougo wrote:
| That's awesome!
|
| Do you have examples for cool this you did with it? I'd like to
| get some inspiration
| webjockey wrote:
| This looks cool. Is anyone planning to create a SaaS based on
| this?
| baq wrote:
| i like that it's done in JS.
|
| i've been using this for a while: https://plantuml.com/mindmap-
| diagram
| melicerte wrote:
| 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
| YohAsakura wrote:
| +1 When the right side stopped updating the buttons at the top
| (usage, about etc.) also stopped responding. Both issues are
| gone after refreshing the page.
| kljuka wrote:
| Same problem (TypeError: t.children is undefined). And none of
| the navigation links work then any more. I'm using Firefox on
| Windows 10.
| pisipisipisi wrote:
| Reminds me a neat Windows program from beginning of the century:
| https://www.mind-mapping.org/index.php?title=B-liner_2002
| chvid wrote:
| Buggy on Safari (SVG doesn't always show / updates correctly).
|
| Otherwise great work.
| [deleted]
| fsiefken wrote:
| Org-mode has an exporter for the Freemind mindmapping tool.
| Freeplane is a fork of Freemind
| https://www.freeplane.org/wiki/index.php/Home
| robenkleene wrote:
| I make an app for macOS that makes it easy to make offline
| viewers for documents like this (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 wrote:
| Thanks for the input! I'm also looking at supporting Mermaid
| diagramming 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.
| gardenfelder wrote:
| https://github.com/mermaid-js
| rmateu wrote:
| Mermaid was the first thing I looked for. Looks very
| interesting. Will keep an eye out, congrats!
| edraferi wrote:
| Yup!
|
| Every time I see something like this, my thought process is:
|
| "Cool, that could be useful for X"
|
| "Hmm X is proprietary. I'm not typing into some random
| website."
|
| "Can I run this locally?"
|
| "Nope, not natively. Is it worth my time to hack it?"
| rgoodwintx wrote:
| Down for this also. If you have a way to sign up for testers
| etc I'd be up. (Down, up, what is language? :) )
| sailfast wrote:
| Yes. In fact, I was wondering if I could "just" run the REPL
| from the MarkMap website locally. Would make things a lot
| easier.
| ValisTuring wrote:
| Great work!
| brna wrote:
| 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!!
| stared wrote:
| 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).
| faraggi wrote:
| Pretty cool! I suggest adding a github link to
| https://github.com/gera2ld/markmap-lib in the about page and
| homepage.
| stats111 wrote:
| This is great. Is there anyway to have it set vertically?
| GhostVII wrote:
| 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.
| dnpp123 wrote:
| Cool!
|
| Slightly related, I also like: https://www.diagram.codes/
| Heliosmaster wrote:
| I guess it was done on purpose, but essentially it reminds me
| of the syntax for graphviz: https://graphviz.org/
| mikeholler wrote:
| 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 wrote:
| I use it too but I wouldn't mind a non-ugly layout
| renderer!
| WorldMaker wrote:
| 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.
| winter_blue wrote:
| Wow, this is an amazing tool. Great, succinct docs as well.
|
| (It seems like 'Mind Map' referred to by the OP is just the
| Horizontal Tree Layout of this tool.)
| jjice wrote:
| This will save me so much time next semester. As someone who
| types their notes for ease of search and quality, this will be
| a game changer.
| BiteCode_dev wrote:
| I just discovered that there are so many of those. Here is a
| list supported by asciidoctor as an extension:
| https://asciidoctor.org/docs/asciidoctor-diagram/
|
| Mairmaid looks nice
| airstrike wrote:
| This is fantastic, thanks for sharing. Worthy of its own
| submission IMHO
|
| Having said that, I really wish this was available as a library
| rather than just a website and a desktop app, but I suppose the
| best things in life aren't free
| flarg wrote:
| Wow thanks for this, never heard of it before despite years of
| searching for a plantuml replacement!
| octygen wrote:
| @flarg, just curious, why do you need a Plant UML
| replacement? I just used it to make a bunch of sequence
| diagrams, component diagrams and wireframes :)
| Trufa wrote:
| Woooow also nice!!
|
| I will try it out! I have a use case for this that has
| thousands, will try both tools out to see if I get better
| results than with my current d3 script that I found laying
| around on the internet.
| flakron wrote:
| This tool looks really great. Thanks for sharing!
| m4r35n357 wrote:
| Pasted markdown into text area, nothing happened. No button to
| activate.
| ta999999171 wrote:
| Hit enter?
| aurelien wrote:
| Really great Thanks!
| sturza wrote:
| Can i create a mindmap from my notion pages?
| geekodour wrote:
| I made something several years back:
| https://markmymind.netlify.com
| robbintt wrote:
| I noticed it doesn't handle quotes correctly, try the following
| and the quote will become a child node.
|
| ``` # header
|
| Body
|
| >quote ```
| visarga wrote:
| These mind maps look like MindNode which I think are the best
| looking.
| ericax wrote:
| 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....
| indysigners wrote:
| It's absolutely fantastic and very timely for an new IA project
| of mine. Thanks so much, Gerald (Gera2ld)!
| cyptus wrote:
| nice! would be awesome to export the input markdown again from
| the downloadable html file.
| tunesmith wrote:
| Can a child have multiple parents?
| meagher wrote:
| Another cool one is https://swimlanes.io
| pimlottc wrote:
| Interesting. It would be good to have a more complex example as a
| guide for how the markdown should be structured.
| HumblyTossed wrote:
| 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 wrote:
| Had to go to other pages to find docs butt you can nest the
| lists too.
|
| - melon - test - test2
| - and more - and more
| Jahak wrote:
| That's awesome!
| cuillevel3 wrote:
| 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 wrote:
| It's my own pet peeve that basically all mind map software
| assumes acyclic structure. Makes it pretty useless to me.
| rohan1024 wrote:
| Cool project. One suggestion you could roll out an online service
| where one can publish mind maps using some random urls.
| Multicomp wrote:
| 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.
___________________________________________________________________
(page generated 2020-04-10 23:00 UTC)