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.
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.
@flarg, just curious, why do you need a Plant UML replacement? I just used it to make a bunch of séquence diagrams, component diagrams and wireframes :)
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
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.
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!)
Definitely! There’s an email sign up at the bottom of the page here https://repla.app/
The app is already available to download and try, with a couple of interesting use cases you can read about on the site. We're also shipping a Markdown preview that's in testing now shortly. The next plugins we're looking at after that are Mermaid (https://mermaid-js.github.io/mermaid/#/) and now Markmap too.
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.
Mermaid can be plugged into Pandoc, so you can create decent PDF docs in Markdown that include diagrams. We store the Markdown files in git and have a Makefile that converts to PDF.
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.
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.
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.
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.
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
My pleasure!
(Wish I could account for the unexpected downvoting on my comment which was relevant, intended to be helpful, and - at least to you - was confirmed to be so.)
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.
+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.
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.
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.
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.
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.
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.
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.
Slightly related, I also like: https://www.diagram.codes/