33 ms·
Generate Flowcharts from Text
- MavropaliasG 6y agoI wish mermaid was as easy
- augusto-moura 6y agoI 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/ https://plantuml.com/
- pionar 6y agoI've had no problems with PlantUML's compilation time. How large are these documents?
- augusto-moura 6y agoPretty 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 6y agoAre 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.
- augusto-moura 6y agoIt only recompiles whenever I hit save, pretty sure the delay is from java startup time
- touisteur 6y agoThat'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...
- sorokod 6y agoThere is a plantuml intellij plugin with split screen for text || diagram. Changes in the text are rendered pretty much instantaneously
- layer8 6y agoI’m surprised the line-number references don’t auto-adjust when inserting/splitting/joining lines. That’s not very practical.
- tonerow 6y agoI 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 6y agoalternatively 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 6y agolike graphviz does
- tonerow 6y agoadded 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)
- beaconstudios 6y agoNice - 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!
- monstersinF 6y agoLet the user create their own labels?
- bsldld 6y agoThere is an option to draw diagrams with Markdeep: https://casual-effects.com/markdeep https://casual-effects.com/markdeep
- cced 6y agoI 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/ https://js.cytoscape.org/demos/colajs-graph/
- teabee89 6y agoThis 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 6y agoThe nodes are free to drag around.
- vasergen 6y agolooks cool and easy, like it
- webdevatlurk 6y agoThis 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.
- xipho 6y agoI'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.
- splatzone 6y agoVery nicely done. I'll be using this a lot!
- Zhyl 6y agoI 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.
- jsmcgd 6y agoIt 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 6y agoThe 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.
- silasb 6y agoWould be cool if you modified the chart and it kept it's position when editing.
- tijuco2 6y agoI'd like to suggest this one here too https://asciiflow.com/ https://asciiflow.com/. I've been using it to share ideas with engineers and everybody likes it
- kleer001 6y agoGorgeous! 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.
- monkeydust 6y agoA 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 6y agoI’ve started doing the same. Folks’ reading comprehension is in the gutter these days. Bullet points help structure thoughts and ideas.
- enw 6y agoIs reading comprehension in the gutter, or are people more resistant to emails full of badly-structured fluff?
- monkeydust 6y agoWhat 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!
- regus 6y agoI 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 6y agoGithub link is at the bottom.
- oneweekwonder 6y agodefinitely 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 http://blockdiag.com [1]: http://blockdiag.com/en/blockdiag/demo.html http://blockdiag.com/en/blockdiag/demo.html [2]: https://graphviz.org https://graphviz.org
- kowlo 6y agoCan achieve something similar in Jupyter Notebook with bockdiag https://datacrayon.com/posts/tools/jupyter/block-diagrams-with-blockdiag/ https://datacrayon.com/posts/tools/jupyter/block-diagrams-wi...
- awaythro15234 6y agoThere is also Pikchr, made by Richard Hipp (creator of SQLite). https://pikchr.org/home/doc/trunk/homepage.md https://pikchr.org/home/doc/trunk/homepage.md
- pstuart 6y agoAnother somewhat similar tool (from the team at SQLite, and used to make the diagrams contained therein): https://pikchr.org/home/doc/trunk/homepage.md https://pikchr.org/home/doc/trunk/homepage.md
- smusamashah 6y agoA list I compiled of 40+ similar text to diagram tools. https://xosh.org/text-to-diagram/ https://xosh.org/text-to-diagram/ Input in this one is very simple and cool.
- Veuxdo 6y agoMissing Ilograph: https://app.ilograph.com/ 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 6y agoThis is amazing. Basically making architecture diagrams from yaml.
- yubrshen 6y agoIt'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 6y agoOne more to add: https://diagrams.mingrammer.com/ https://diagrams.mingrammer.com/
- smusamashah 6y agoThis needs to be installed and coded with a programming language. This list isn't about drawing with programming languages.
- breck 6y agoI have some feedback. Would love to chat. My email is in profile.
- smusamashah 6y ago
- breck 6y agoLove it!!!
- jazzex 6y agoI like excalidraw. https://excalidraw.com/ https://excalidraw.com/ Exports to json or image.
- genericone 6y agoUnfortunately 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)
- persedes 6y agohttps://www.wikihow.com/Use-Google-As-a-Proxy https://www.wikihow.com/Use-Google-As-a-Proxy ?
- anonu 6y agosetup 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/ 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 6y agoAre you seriously counseling someone to run mitmproxy in order to puch a hole out of their employer's network?
- tonerow 6y agoHere's the raw netlify domain - https://agitated-knuth-acd401.netlify.app/ https://agitated-knuth-acd401.netlify.app/
- genericone 6y agoThat works perfectly, thank you.
- bleepbaboop 6y agoImplementing 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 6y agoThis 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
- voxic11 6y agoAnother similar tool that I have used in the past is https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
- flying_sheep 6y agoDid you find a better one? :p Or just no longer making diagrams?
- enlightens 6y agoI'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-mermaid-js https://www.luminoslabs.com/insights/text-based-charts-with-...
- bdorn 6y agoThis is nice! Wish it took over tab key for indentation though.
- tonerow 6y agoSomeone just fixed this in a PR!
- andy_ppp 6y agoWow, the use of this as a Twitter bot could be both awesome and horrendous...
- chrisallick 6y agoThats faster than Google Slides?
- yubrshen 6y agoVery 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?
- chrisweekly 6y agoVery nice! I've just started playing with Kroki.io (a "universal" API over many diagramming libs including mermaid and excalidraw).
- msci100 6y agoThis 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 6y ago404.
- jedimastert 6y agoI've often given nested bullet point lists as an example of trees when I was tutoring freshmen-level CS. This is fun
- beefman 6y agoThese aren't quite flowcharts.[1] Still looks like a useful tool. I like the syntax. [1] https://en.wikipedia.org/wiki/Flowchart https://en.wikipedia.org/wiki/Flowchart
- renlo 6y agoHow do you have a self referential edge? (ie, an edge to and from the same node) foo (1) looks a bit broken
- tonerow 6y agoI 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!
- lifeisstillgood 6y agoI 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.
- mumblemumble 6y agoI'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 6y agoPlantUML 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.
- vjeux 6y agoI 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.
- 6y ago
- zupreme 6y agoEvery 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.
- namuol 6y agoSomewhat related: https://sketch.systems https://sketch.systems "Markdown for State Machines"
- IncRnd 6y agoThis 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.
- taylodl 6y agoI use Mermaid (https://mermaid-js.github.io/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 6y agoAnd if you're using Sphinx to document, you can also just inline the diagrams in your .rst docs: https://github.com/mgaitan/sphinxcontrib-mermaid https://github.com/mgaitan/sphinxcontrib-mermaid
- zacharycohn 6y agoYup, I love it. Can you do a > relationship? Two boxes flowing into one.
- zacharycohn 6y agoFigured it out! That was not super intuitive, but I've got it now.
- tjoff 6y agoJust 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).
- plainoldcheese 6y agoyou 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.
- boksiora 6y agoReally cool!! Can you post it on GitHub ? I can use it while making documentation
- miguelmota 6y agoIncredibly intuitive and simple. Bookmarked!
- einpoklum 6y agoThis is silly, just use graphviz: http://graphviz.org/ 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/ https://edotor.net/ or here: https://dreampuf.github.io/GraphvizOnline/ https://dreampuf.github.io/GraphvizOnline/
- josephjrobison 6y agoLove 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
- tunesmith 6y agoHow do I link two parents to a child? This didn't work: node 1 child of node 1 node 2: (2)
- DougWebb 6y agonode 1 child of node 1 node 2 : (2)
- asimjalis 6y agoI 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.
- rckrd 6y agoI 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 https://github.com/r2d4/virgo) seem more appropriate for this task
- prosaic-hacker 6y agoBox line Text sort of does what I want. https://github.com/jncraton/box-line-text 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.
- hardwaresofton 6y agoA 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.
- deleted 6y ago[deleted]
- yboris 6y agoTangentially related: generate a call graph from TypeScript files - a "flow chart" for code :) https://github.com/whyboris/TypeScript-Call-Graph https://github.com/whyboris/TypeScript-Call-Graph
- cosmonaughty 6y agoNice and simple.
- slimbods 6y agoLucidchart does similar for sequence diagrams, works well: https://lucidchart.zendesk.com/hc/en-us/articles/208029986 https://lucidchart.zendesk.com/hc/en-us/articles/208029986
- Jennifer9918910 6y agoI'm available for sex, Please just follow my link https://rebrand.ly/sexygirls007 https://rebrand.ly/sexygirls007