Generate Flowcharts from Text | Hacker News Reader

Generate Flowcharts from Text

flowchart.fun

484 pointstonerow132 comments

I have come to the conclusion there are two kinds of audience and two kinds of diagram, abs they almost exactly overlap

1. Engineering diagrams, explaining concepts to other engineers who are using the diagram as a jumping off point to deeper explorations

2. "Business" diagrams - the sort of thing we want to see in a Medium article or presentation. The style and correct placement matters far more than engineering.

The first is very amenable to markdown style production - often we want to spend no more than a few minutes creating the diagram. We get (60?) 80% of the way there with 20% effort.

But with every markdown approach I have tried the remaining 20% is flat out days of work. There is almost always a need to place that box there and have this one below and to the right and dammit the layout engine will not agree.

What I would ideally like is a combo - markdown to get me most of the way there, and then drop into some vector format that lets me tweak.

I'm curious if you could get from an 80% solution to a 90% solution by just adding some markup to say things like, "This node should be to the left of this other one?"

Often I use invisible subgraphs to accomplish this sort of thing in GraphViz, but the markup for doing so is complicated and non-obvious.

PlantUML provides such extra "perusation" to the layout. It works often.

But PlantUML's documentation is too scattered that it's hard to know how much it supports.

Overall, to me, PlantUML is one of the more promising trade-off for userability and sophistication.

I wonder if we could pool our resource together to help one reach to more userability.

I would love to see an integration with excalidraw where you write text to seed the diagram and then do the touch ups with something like excalidraw. That would solve I think your workflow.

Please give me a combination between Excalidraw and Graphviz, with stylesheets, and layouts generated via a straightforward Python API, immediately displayable in a Jupyter notebook, with a display widget having hooks to move items around, giving auto-updating a Python property dict.

This kind of thing is exactly why we need to normalize complex examples.

Have the simple ones front and centre, but also go full pedal to the medal and show flesh out the really complex ones.

Recent and related shout-out: Neo4J has thankfully included some on their API documentation.

I agree. I looked at migrating our technical documentation out of MS Office documents into some diffable format and it were the diagrams that killed the initiative.

Tables are a pain, but most technical docs do not require rowspan and other things that are impossible to maintain in Markdown/reST/Asciidoc.

Diagrams are just a shitshow. PlantUML is the biggest player, and it tries to do the right thing by separating semantics and presentation, but kinda fails when your diagram grows too large.

I wish there was some tool that you could feed three separate human-readable inputs:

- styles, which let you define what your elements look like - semantics, which let you describe your elements and relationships - layout, which lets you manually rearrange the elements on your diagram (and is generated by a WYSIWYG tool)

Pikchr generates nice diagrams, but it's an all-in-one dialect. At least when I am reading well-written PlantUML I can understand the meaning of the diagram without seeing the rendered image.

The tool in the OP is nice, but it doesn't let you describe the layout at all.

Ilograph fulfills 2 out of 3: diagrams are broken up into a model (resources) and perspectives (their relations). The layout is always automatic, though. As a plus, though, this allows them to be interactive and dynamic.

Disclosure: I'm the dev

diagrams.net (formerly draw.io) have an xml format that seems fairly open and they can also read/write a bunch of other formats (see here https://www.diagrams.net/blog/import-formats ) so something that gives you their xml format as a starting point might make sense.

discussion of format: https://stackoverflow.com/questions/59416025/format-of-draw-...

Looks like they have an api too: https://jgraph.github.io/mxgraph/docs/js-api/files/index-txt...

agreed it would be nice if the markdown just generated a standard svg that you could then edit, or even just an html canvas where you can drag them around a bit more and add some color before exporting as an image

That is exactly what this link does, minus the color.

Have you tried PlantUML? It provides means of adjusting the layout. I use it often, most of the time the adjustment is good enough for engineering communication within minutes of adjustment. It could be better if there is more cohesive documentation of its support for the adjustment. I had to search on Google many times to figure out how to add the adjustment. The adjustment consists of directives of placement and direction of links, the length of links, grouping of notes, etc. I feel that it's very promising with more popular support.

Is there a javascript/clientside library which implements the plantuml visualizations? Viz.js is linked on plantuml page but it appears to be archived.

I have not seen the layout adjustment features, but I’ve very recently been using pandoc and plantuml for all my design docs at work. I find it to be highly productive, though I still end up uploading the resultant word file to one drive for collaboration and review since that’s what everyone else uses.

This tool (flowchart.fun) does let you download the SVG. You can then edit it in Inkscape.

Is this not exactly what you want?

You can write the markdown and then drag and drop boxes (or directly edit the SVG).

Just use SVG plus d3. Only trick is coming up with a pipeline to convert this into a pdf or png so that it is easier to use outside the web.

I only throw in D3 because it does have some features which make SVGs more maintainable and easy to write, but I've written many SVGs by hand over the years and it really isn't nearly as bad as many people think it is. I suspect a lot of people think it is very difficult because they only look at the terrible SVGs generated by GUI tools.

Could you elaborate on the best way to get started with this specifically? Any articles/tutorials you'd recommend?

I've been meaning to forever but both svgs and d3 are complex enough I'm not sure where to start.

I would recommend starting with plain SVG and then exploring D3 after. It's best to think of D3 as a combination of jQuery and a geometry library.

For starting with SVGs, just look for a simple tutorial like https://www.w3schools.com/graphics/svg_intro.asp to get a simple template, but focus on learning the path element. The path element is both foundational to a lot of custom SVG stuff and isn't too complicated, sort of like the Basic of graphics.

Thanks! Really appreciated.

I've gotten the hang of SVGs, is MBostock's blog still the best place to start with D3?

Only trick is the solution to entire problem statement.

restofthefuckingowl.jpg

For (1), I am sold on goat. ASCII art to SVG, from the command line:

https://github.com/blampe/goat

Embed diagrams in source code comments; build script greps through and writes out an SVG. A caveat is that to be adequately productive, you need rectangle-oriented editing, such as with Emacs’ “M-x string-rectangle”.

Wow, I didn’t know I was looking for this before you shared it! Thank you so much and huge kudos to the authors, this is a fantastic tool.

I recently stumbled over a project which tries to do such an approach for graphs in scientific papers, to avoid people manually editing them and them getting disconnected from data sources. They do it by offering export of modified code generating the tweaked variant: https://pylustrator.readthedocs.io/en/latest/

Just a thought / realisation.

"A picture paints a thousand words", so why should we expect it possible to describe some pictures with less words.

Some paintings can be described effectively with "four tins of campbells tomato soup, one in each quadrant".

Other pictures cannot - "Adam reaching out to touch Gods finger"

Maybe we just need to paint sometimes, and maybe learn the difference between the two kinds - when we need to escape from code.

Input text in https://www.bpmn-sketch-miner.ai/doc/00-intro.html to create a BPMN, download it and edit in Camunda Modeler?

Minder is quick, flexible and exports to Mermaid and PlantUML https://github.com/phase1geo/Minder

A list I compiled of 40+ similar text to diagram tools. https://xosh.org/text-to-diagram/

Input in this one is very simple and cool.

Missing Ilograph: https://app.ilograph.com/

It's heavier-duty compared to most of the others you have listed, but should appeal to engineers who want something more robust.

This is amazing. Basically making architecture diagrams from yaml.

It's much more sophisticated! It might be very powerful to have some wordsmith support in the authoring of the text, for example, in the org-mode of emacs, especially, the collapse (folding) of sub-trees.

One more to add: https://diagrams.mingrammer.com/

This needs to be installed and coded with a programming language. This list isn't about drawing with programming languages.

I have some feedback. Would love to chat. My email is in profile.

Mine is profile name

BTW mine is only a list and I won't mind any feedback here in comments.

One main idea that would make your list 3x better: add a code snippet from each one.

This is a really good idea, thanks. Snippet won't be enough to cover the usages though. Most of these tools use varying syntax for different diagrams.

Anyone looking for a specific need can go through the links to find out which one is better.

Go through some of them. It's hard to summarize a tools function in a single snippet. Same goes for screenshots. How would you do that?

> Anyone looking for a specific need can go through the links to find out which one is better.

98% of people don't have time for that. If a snippet or tiny screenshot can't reveal some of the essence of the language it's probably not very good.

Is there a way to tell which are downloadable/usable offline/locally vs which are websites without clicking through each one?

I needed these tools for quick in-browser use so they are mostly online. Only few of them can be used offline.

Meh, one more: https://structurizr.com/

I use Mermaid (https://mermaid-js.github.io/mermaid/#/). The killer feature for me - you can write Mermaid scripts in your code comments and there's a plugin available for VS Code that will render it. It's awesome!

And if you're using Sphinx to document, you can also just inline the diagrams in your .rst docs: https://github.com/mgaitan/sphinxcontrib-mermaid

There is also Pikchr, made by Richard Hipp (creator of SQLite).

https://pikchr.org/home/doc/trunk/homepage.md

I have now used this to explain some of our architecture to a client over Teams.

If you guys haven't tried building up a diagram, live, step by step like an ad-hoc slideshow, I seriously recommend it.

I'm in love. I want this as part of an assertion workflow for some of the graph building interfaces we're envisioning for biological data. For example you could allow lines to call from autocompletes, and store some metadata (e.g. extensions of labels) so that the whole widget could be embedded in your tool.

A lot of my emails are becoming like this - structured, bullet points, 'if-then-else' like statement although not that explicit. This could be a nice way to add visualisation to it. Maybe - although everytime I have tried to do something too different with email it has failed.

I’ve started doing the same. Folks’ reading comprehension is in the gutter these days. Bullet points help structure thoughts and ideas.

Is reading comprehension in the gutter, or are people more resistant to emails full of badly-structured fluff?

What I find odd is that some of my best engineers write the worst emails (no structure, very verbose, emotive).

That might be their outlet perhaps after a spending a day being acutely focused on cutting code!

I would love to see this as a cli, I'm tired of PlantUML's[1] document compilation time. Guess even the plain text tools are made in React nowadays, sigh

[1]: https://plantuml.com/

I've had no problems with PlantUML's compilation time. How large are these documents?

Pretty small actually, they don't take like hours, but just a few seconds, the problem is the preview feedback, I like to keep a entr and feh open while a edit the document to give a live preview of my changes, the problem is that the 3-4 seconds latency really mess this up

Are you thinking of the default java gui for previewing plantuml docs? I think there's a timer down there to avoid polling the FS too often. Using a simple editor where everystroke recompiles, red warning in status bar while syntax is not OK (while still displaying the last good one), a 100loc canvas display window, done.

It only recompiles whenever I hit save, pretty sure the delay is from java startup time

That's why I'm saying to avoid the start time and to have editor and generator run in the same JVM. Ah if local serverless was a thing...

There is a plantuml intellij plugin with split screen for text || diagram. Changes in the text are rendered pretty much instantaneously

I’m surprised the line-number references don’t auto-adjust when inserting/splitting/joining lines. That’s not very practical.

I totally had this thought too when making it. The logic is super simple as-is, so I was scared if I went down the rabbit whole of trying to auto increment/decrement line numbers I might muddy things up. I'll see if add that functionality cleanly at some point (or if you'd like to feel free to take out a PR!) Thanks for the feedback!

alternatively you could link to nodes by referencing their label? You might just also want an option to not render that label (ie have it be for the writer's benefit only).

like graphviz does

added the concept of node ids and linking directly to them last night! now you can do something like

  [custom id] hello world
   child 1
    child 2
     (custom id)

Nice - that's a great feature. I'm working on a graph based project and have to semi regularly visualise different kinds of directed graph and your project could really come in handy!

Let the user create their own labels?

Id's would be more than good enough, and super easy to implement. Something like this

   1. hello
   2.   [foo] This line is Foo
   3.   This line is Bar and connects to Foo
   4.     (foo)

Oh, I like this implementation a lot! I'll paste it into github issue so I don't forget

I disagree. The simplicity here is a cool and rare feature.

This tool is amazing, and its coolness comes from the fact it's really simple. If you add "auto-adjusting" features that rewrite the code for you while writing, you're on the road to lose the simplicity and KISS aspect.

Please don't add new features, it's like gold as it is, @tone_row. The beauty and magic resides in the minimalism.

Another similar tool that I have used in the past is https://mermaid-js.github.io/mermaid/#/

Did you find a better one? :p Or just no longer making diagrams?

I've been using that lately for project documentation. The reduction of context-switching has been incredibly helpful.

https://www.luminoslabs.com/insights/text-based-charts-with-...

This seems really nice as a sketchpad for small flowcharts. I'd definitely use it to map out a small piece of work, because I'm terrible at laying out flowcharts on scrap paper without wasting space or painting myself into a corner.

One minor annoyance: I can't use tab/shift+tab to indent or dedent lines.

Thank you, that's a good suggestion. Making a note

Do it for all the selected lines, when multiple lines have been selected and tab pressed.

Every so often a utility feels so intuitive that one thinks, "They finally got it right".

Present feeling: They finally got it right. This is how flowcharts should be made, by default.

This is really cool. I frequently have to build reference architectures for work. I would love to add a feature where if you put quotes around a word, it would search for a folder of logos and add the tool's logo to the square.

For example, typing "Redshift" adds a Redshift db icon to the box.

Implementing the use of a '?' in order to generate a diamond shaped "if/else" would be nice. For example:

Some text(2) Yes: (line num) No: (line num)

This would be nice.

You can do it now with full nodes but would be nice to have a specific node type for that

  This is my chart
   This is a conditional statement
    Yes: Do thing A
    No: Do thing B

Box line Text sort of does what I want. https://github.com/jncraton/box-line-text

The blank or edit file can be saved locally as URL or .HTM file and can be reloaded and continue to be edited.

The UI is missing help, its only on the github page. Since its just a html file I embedded the help in a comment in the page. I just view source to look it up. It only adds a few hundred byte to each file.

Some functions don't work for me. When I get a round tuit I will will try to figure out how it works.

In spite of this it is enough to create impromptu drawings to support a lecture. I save them and give it to the students as part of the notes.

I like excalidraw. https://excalidraw.com/

Exports to json or image.

I'd like to suggest this one here too https://asciiflow.com/. I've been using it to share ideas with engineers and everybody likes it

Gorgeous!

I bet there's a lost history (or oral history, but they're the nearly same after 60+ years) of tools exactly like this that goes back to the times of the PDP-1 and super early hacker culture.

And I bet there's been a version of it written for every operating system at some point. It just seems so necessary and relatively straight forward.

definitely cool for being a spa!

Alternatives is blockdiag[0] with a online demo[1], and then of course graphviz[2] shipped with most distro(s).

[0]: http://blockdiag.com

[1]: http://blockdiag.com/en/blockdiag/demo.html

[2]: https://graphviz.org

I love when underlying data structures boil down to directed graphs. Turns out that indentation is a bad way to represent graphs (as someone who has tried many times to encode large Kubernetes service topologies in YAML). A language like dot or virgo (https://github.com/r2d4/virgo) seem more appropriate for this task

It would be great to have an option to be able to save the text to a file, and load text from a file.

Also an ability to click a line and create a connected node.

Also it would be great to drive the app from the diagram, ie generate text from the diagram.

Anyway I like it. I've used Linux Mint's built in Web Apps tool to create an offline version.

The text lines are just a single textarea element, you can copy from and paste into it. But saving and loading files would be convenient too.

Unfortunately my corporate firewall/IT-Policy blocks this page, possibly due to the *.fun domain. Any other way to try this out for those working in an office? ( I know I'm an outlier at this time)

https://www.wikihow.com/Use-Google-As-a-Proxy ?

setup a web-based proxy in the cloud - make sure its in front of a .com domain (that does not have the word "proxy" in it) and get your SSL certs right.

Here's a popular package: https://mitmproxy.org/ You might have to add some basic auth layer to it so as not to make it open to the world.

or just use your cellphone.

Are you seriously counseling someone to run mitmproxy in order to puch a hole out of their employer's network?

Here's the raw netlify domain - https://agitated-knuth-acd401.netlify.app/

That works perfectly, thank you.

I love this idea.

It would be great to have this as a command line tool.

I can envision a lot of cool features for this, like being able to add color via text markup, or being able to use circles instead of boxes for the nodes.

Github link is at the bottom.

Very nice! I've just started playing with Kroki.io (a "universal" API over many diagramming libs including mermaid and excalidraw).

Just today I was browsing around for a while for something like this.

But I just can't stand using a website for it, defeats half the purpose of it. I want to be able to commit it to version control and regenerate it on the fly if needed.

In the end I settled with latex+tikz. And was promptly reminded of how clunky it can be, an unnecessary time-sink for a quick sketch (but cool if you need something polished).

Somewhat related: https://sketch.systems

"Markdown for State Machines"

How do you have a self referential edge? (ie, an edge to and from the same node)

  foo
    (1)

looks a bit broken

I agree, this could really be improved. I'm going to make a github issue so I remember to see if there's a solution to this in the coming days. Thanks for the feedback!

I took a look at the demo of the graphing library that is used and it seems there are some performance issues. Does anyone know how these might be fixed?

https://js.cytoscape.org/demos/colajs-graph/

Can achieve something similar in Jupyter Notebook with bockdiag https://datacrayon.com/posts/tools/jupyter/block-diagrams-wi...

Another somewhat similar tool (from the team at SQLite, and used to make the diagrams contained therein): https://pikchr.org/home/doc/trunk/homepage.md

Lucidchart does similar for sequence diagrams, works well: https://lucidchart.zendesk.com/hc/en-us/articles/208029986

Tangentially related: generate a call graph from TypeScript files - a "flow chart" for code :)

https://github.com/whyboris/TypeScript-Call-Graph

This is a great idea! Thank you for sharing.

I noticed an issue for lines that are referenced by links. When I insert a new line above the linked line, the diagram loses linkages.

For example, in the example at flowchart.fun, inserting a new line above the first will destroy the diagram.

I love it. One thing that would be nice is lines and boxes that look like they are hand-drawn. Like Excalidraw. And maybe comic sans font. Or a way to enable that. Because that would be more fun in a brainstorming session.

This is really simple but edge from 6 to 1 should not cross node 4 in the visualization. Also it would be useful to show how to escape or if escaping works at all: how to escape ":" or "(1)"? multiline?

The nodes are free to drag around.

Very interesting. It might be very powerful to somehow integrate with emacs/vim so that their wordsmith capability can facilitate the little discipline in text editing.

How do I export the diagram generated?

There is an option to draw diagrams with Markdeep: https://casual-effects.com/markdeep

you can do a similar thing with PIC and groff, though thats not always as convenient as having it right inside your markdown document.

you can even define more specific placement if you need to.

A bit of a bug -- in FF if you scroll on the right side of the page (the diagram) it disappears and doesn't re-appear.

I've often given nested bullet point lists as an example of trees when I was tutoring freshmen-level CS. This is fun

How do I link two parents to a child? This didn't work:

  node 1
    child of node 1
  node 2: (2)

    node 1
      child of node 1
    node 2
      : (2)

Would be cool if you modified the chart and it kept it's position when editing.

Really cool!! Can you post it on GitHub ? I can use it while making documentation

Wow, the use of this as a Twitter bot could be both awesome and horrendous...

This is nice! Wish it took over tab key for indentation though.

Someone just fixed this in a PR!

These aren't quite flowcharts.[1] Still looks like a useful tool. I like the syntax.

[1] https://en.wikipedia.org/wiki/Flowchart

Yup, I love it.

Can you do a > relationship? Two boxes flowing into one.

Figured it out! That was not super intuitive, but I've got it now.

Very nicely done. I'll be using this a lot!

Incredibly intuitive and simple. Bookmarked!

Thats faster than Google Slides?

Nice and simple.

Love it!!!

I wish mermaid was as easy

looks cool and easy, like it

404.

Love this interface, slight deviation but related question:

If I wanted to hire a web developer to build a web app that let the user quickly build marketing funnels, what type of person would I be looking for? Front end JavaScript developer?

Essentially like LucidChart lite

This is silly, just use graphviz:

http://graphviz.org/

it's widely-used, more feature-full and more flexible, at the price of perhaps a slightly less intuitive format (though even that's debatable).

Online editing + rendering:

https://edotor.net/

or here:

https://dreampuf.github.io/GraphvizOnline/

Reply on news.ycombinator.com