[HN Gopher] Generate Flowcharts from Text
___________________________________________________________________
Generate Flowcharts from Text
Author : tonerow
Score : 324 points
Date : 2021-03-01 15:41 UTC (7 hours ago)
(HTM) web link (flowchart.fun)
(TXT) w3m dump (flowchart.fun)
| yubrshen wrote:
| 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?
| MavropaliasG wrote:
| I wish mermaid was as easy
| jsmcgd wrote:
| 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.
| yardshop wrote:
| 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.
| bsldld wrote:
| There is an option to draw diagrams with Markdeep:
| https://casual-effects.com/markdeep
| chrisweekly wrote:
| Very nice! I've just started playing with Kroki.io (a "universal"
| API over many diagramming libs including mermaid and excalidraw).
| einpoklum wrote:
| 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/
| IncRnd wrote:
| 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.
| boksiora wrote:
| Really cool!! Can you post it on GitHub ? I can use it while
| making documentation
| xipho wrote:
| 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.
| augusto-moura wrote:
| 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/
| pionar wrote:
| I've had no problems with PlantUML's compilation time. How
| large are these documents?
| sorokod wrote:
| There is a plantuml intellij plugin with split screen for
| text || diagram. Changes in the text are rendered pretty much
| instantaneously
| augusto-moura wrote:
| 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
| touisteur wrote:
| 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.
| jazzex wrote:
| I like excalidraw. https://excalidraw.com/
|
| Exports to json or image.
| chrisallick wrote:
| Thats faster than Google Slides?
| msci100 wrote:
| 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.
| Tenal wrote:
| 404.
| josephjrobison wrote:
| 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
| cced wrote:
| 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/
| oneweekwonder wrote:
| 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
| tunesmith wrote:
| How do I link two parents to a child? This didn't work:
| node 1 child of node 1 node 2: (2)
| tjoff wrote:
| 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).
| kowlo wrote:
| Can achieve something similar in Jupyter Notebook with bockdiag
| https://datacrayon.com/posts/tools/jupyter/block-diagrams-wi...
| genericone wrote:
| 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)
| anonu wrote:
| 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.
| IncRnd wrote:
| Are you seriously counseling someone to run mitmproxy in
| order to puch a hole out of their employer's network?
| tonerow wrote:
| Here's the raw netlify domain - https://agitated-knuth-
| acd401.netlify.app/
| persedes wrote:
| https://www.wikihow.com/Use-Google-As-a-Proxy ?
| renlo wrote:
| How do you have a self referential edge? (ie, an edge to and from
| the same node) foo (1)
|
| looks a bit broken
| tonerow wrote:
| 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!
| silasb wrote:
| Would be cool if you modified the chart and it kept it's position
| when editing.
| awaythro15234 wrote:
| There is also Pikchr, made by Richard Hipp (creator of SQLite).
|
| https://pikchr.org/home/doc/trunk/homepage.md
| miguelmota wrote:
| Incredibly intuitive and simple. Bookmarked!
| pstuart wrote:
| 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
| jedimastert wrote:
| I've often given nested bullet point lists as an example of trees
| when I was tutoring freshmen-level CS. This is fun
| smusamashah wrote:
| 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.
| mysterydip wrote:
| Is there a way to tell which are downloadable/usable
| offline/locally vs which are websites without clicking through
| each one?
| smusamashah wrote:
| I needed these tools for quick in-browser use so they are
| mostly online. Only few of them can be used offline.
| Veuxdo wrote:
| 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.
| smusamashah wrote:
| This is amazing. Basically making architecture diagrams from
| yaml.
| yubrshen wrote:
| 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.
| ciceryadam wrote:
| One more to add: https://diagrams.mingrammer.com/
| smusamashah wrote:
| This needs to be installed and coded with a programming
| language. This list isn't about drawing with programming
| languages.
| breck wrote:
| I have some feedback. Would love to chat. My email is in
| profile.
| smusamashah wrote:
| Mine is profile name
|
| BTW mine is only a list and I won't mind any feedback here in
| comments.
| breck wrote:
| One main idea that would make your list 3x better: add a
| code snippet from each one.
| smusamashah wrote:
| 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?
| breck wrote:
| > 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.
| tijuco2 wrote:
| 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
| kleer001 wrote:
| 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.
| bleepbaboop wrote:
| 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)
| flanbiscuit wrote:
| 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
| monkeydust wrote:
| 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.
| robohoe wrote:
| I've started doing the same. Folks' reading comprehension is in
| the gutter these days. Bullet points help structure thoughts
| and ideas.
| enw wrote:
| Is reading comprehension in the gutter, or are people more
| resistant to emails full of badly-structured fluff?
| layer8 wrote:
| I'm surprised the line-number references don't auto-adjust when
| inserting/splitting/joining lines. That's not very practical.
| tonerow wrote:
| 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!
| beaconstudios wrote:
| 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).
| mooneater wrote:
| like graphviz does
| seph-reed wrote:
| 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)
| tonerow wrote:
| Oh, I like this implementation a lot! I'll paste it into
| github issue so I don't forget
| monstersinF wrote:
| Let the user create their own labels?
| sixti60 wrote:
| 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.
| splatzone wrote:
| Very nicely done. I'll be using this a lot!
| voxic11 wrote:
| Another similar tool that I have used in the past is
| https://mermaid-js.github.io/mermaid/#/
| flying_sheep wrote:
| Did you find a better one? :p Or just no longer making
| diagrams?
| enlightens wrote:
| 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-...
| teabee89 wrote:
| 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?
| 4b11b4 wrote:
| The nodes are free to drag around.
| zupreme wrote:
| 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.
| vasergen wrote:
| looks cool and easy, like it
| lifeisstillgood wrote:
| 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.
| yubrshen wrote:
| 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.
| orthoxerox wrote:
| 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.
| Veuxdo wrote:
| 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
| mumblemumble wrote:
| 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.
| yubrshen wrote:
| 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.
| joshspankit wrote:
| 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.
| plainoldcheese wrote:
| 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
| jacobmischka wrote:
| That is exactly what this link does, minus the color.
| codeulike wrote:
| 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...
| vjeux wrote:
| 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.
| stevesimmons wrote:
| 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.
| breck wrote:
| Love it!!!
| plainoldcheese wrote:
| 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.
| webdevatlurk wrote:
| 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.
| tonerow wrote:
| Thank you, that's a good suggestion. Making a note
| z92 wrote:
| Do it for all the selected lines, when multiple lines have
| been selected and tab pressed.
| bdorn wrote:
| This is nice! Wish it took over tab key for indentation though.
| tonerow wrote:
| Someone just fixed this in a PR!
| andy_ppp wrote:
| Wow, the use of this as a Twitter bot could be both awesome and
| horrendous...
| namuol wrote:
| Somewhat related: https://sketch.systems
|
| "Markdown for State Machines"
| zacharycohn wrote:
| Yup, I love it.
|
| Can you do a > relationship? Two boxes flowing into one.
| zacharycohn wrote:
| Figured it out! That was not super intuitive, but I've got it
| now.
| regus wrote:
| 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.
| JustSomeNobody wrote:
| Github link is at the bottom.
| taylodl wrote:
| 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!
| naebother wrote:
| 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
| beefman wrote:
| These aren't quite flowcharts.[1] Still looks like a useful tool.
| I like the syntax.
|
| [1] https://en.wikipedia.org/wiki/Flowchart
| Zhyl wrote:
| 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.
___________________________________________________________________
(page generated 2021-03-01 23:00 UTC)