8 ms·
Show HN: Code2flow – easy flowcharts with no mouse, no dragging and no hassle
- RushPL 10y agoHey y'all, I've been working on this part time for a couple of years now. Recently it started getting more traffic so I thought I'd try sharing this project with hacker news. If it's useful to you, and the free app is good for most use cases, then hopefully it will reach wider audience. Cheers.
- erichocean 10y agoLooks great! I couldn't get any of the Download options to work, but following the links from the Share menu to, e.g. the PDF version, did work.
- achikin 10y agoDo you use a handwritten parser for input?
- RushPL 10y agoAfter trying hand-written approach and later perl's Parse::RecDescent I ended up using peg.js (http://pegjs.org http://pegjs.org) parser generator. It was probably the most flexible and performant out of all the options I tried.
- mplewis 10y agoPeg.js is excellent. I'm working on a browser IDE for it to help people learn how to build programming languages.
- fourthark 10y agoIs the layout using https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre ?
- Fiahil 10y agoI hope your pricing model ($100-$300/month) is meant as a joke, and you're not really serious about it. It's extremely expensive. I can drag and drop text boxes in google docs just fine and it's not costing me a dime. The added productivity would be worth it if I was doing this all day long, but it's not the case (as a software engineer).
- kareemm 10y agoIgnore this feedback. You have validated that customers will pay what you're charging, which means what they're getting is less valuable than what they're paying. Keep it up!
- kareemm 10y agoToo late to edit but if it wasn't I would have corrected the above to "what they're getting is MORE valuable than what they're getting."
- RushPL 10y agoYou're welcome to use the free trial version and I can assure you that the SaaS paid version will be very affordable. As for $100/$300 pricing, these are on premise business/enterprise versions meant to be used by bigger teams where data confidentiality is crucial.
- d0m 10y agoI think the feedback you should get from that comment isn't that the price is too big, but that the pricing page may not be as clear as you think. I.e. you never intended that dev to pay 100$/month but he/she took it that way. I think this is a great execution of a time consuming problem, good job!
- ljw1001 10y agoConsider repricing to $99 and $299, respectively. It seems like a cheap trick but (a) it's been shown many times to work, and (b) especially with the former, you may just put yourself inside someone's purchasing limit.
- grownseed 10y agoHi, just wanted to say you've built something very nice! I just tried it out by re-making a fairly complex diagram and it took me like 10 minutes, including learning the syntax, very nice idea, done well! I did notice one annoying bug, as I change and break the code sometimes, the editor just stops working and it's hard to tell what's happening (the loading indicator just stays there). Opening the dev tools, it appears you're not catching all errors when your parser (peg.js) fails. SyntaxError: Expected ":" or [^\t\n\r :;[\]] but "\n" found.↵ at peg$buildStructuredError (https://code2flow.com/worker-flow.js:2:12222)↵ at Object.peg$parse [as parse] (https://code2flow.com/worker-flow.js:5:1413)↵ at exports.FlowWorker.onUpdate (https://code2flow.com/worker-flow.js:5:4410)↵ at callback (https://code2flow.com/worker-flow.js:2:8619)"
- viklas 10y agoLike everyone else...well done. Great concept, easy to learn, nice results. I'll probably be a paying customer one day. Font-resizing would be nice on the visual view. And killer feature would be two way interaction, but I can imagine that's a tricky one. Here's a generic "SaaS subscription workflow" I made up in about 20 mins. https://code2flow.com/NDIQIf https://code2flow.com/NDIQIf Love it!
- staticautomatic 10y agoOh man this looks really neat. Thanks for building it.
- daw___ 10y agoThis is just great. Are you planning to introduce an "Export as GraphML [0]" function? My ideal workflow would be to use code2flow to quickly build up the core of a flowchart, and then importing it into a full blown flowchart editor like yEd for the fine tuning. [0] GraphML https://en.wikipedia.org/wiki/GraphML https://en.wikipedia.org/wiki/GraphML
- RushPL 10y agoInteresting idea, I'll definitely look into it and let you know. :)
- notheguyouthink 10y agoThis is awesome! Any chance it can somehow output to a text based chart? This is basically what has been preventing me from using https://monodraw.helftone.com/ https://monodraw.helftone.com/ - i didn't want to draw simple flowcharts. If this can output text for a sane price, you've got a customer! (though, i would prefer an offline app, fwiw)
- RushPL 10y agoBy text-based do you mean ascii-art? Right now you can output graphics alongside with text to PNG, PDF or SVG - https://code2flow.com/8qRgzO.code.png https://code2flow.com/8qRgzO.code.png https://code2flow.com/8qRgzO.code.pdf https://code2flow.com/8qRgzO.code.pdf https://code2flow.com/8qRgzO.code.svg https://code2flow.com/8qRgzO.code.svg
- notheguyouthink 10y agoYea i meant Ascii art - Monodraw is an amazing program, and as much as i want to buy it, i haven't because i don't want to draw the flow charts. Your solution is something i've literally talked about here before, so it's welcome to see! But i still need/want ascii. I suppose i don't need it.. i just like being able to view things in CLI/etc.
- rprameshwor 10y agoThis is beautiful. Thank you !!
- zokier 10y agoI like the concept! But there is one thing that seems really weird to me: Edges connecting to other edges instead of nodes. I don't recall seeing that before, at least not very often. I suppose there might be some cases where it helps the layout but I still would make it optional and maybe even default off.
- RushPL 10y agoHey, I'm not sure what you mean but if you can post a link to a broken flowchart I could try fixing it.
- alcari 10y agoThe front page demo does it with the while loop.
- RushPL 10y agoI see, this arguably makes such loops easier to follow. I'll look into making it optional though.
- philsnow 10y agoI've seen this before but the edges join together cleanly: one of the edges "merges" (like a freeway on-ramp) with the other edge. In the demo on the front page, there's clearly a pseudo-node that the edges stop at, and it's jarring. edit: this thing: http://snap.philsnow.io/2016-11-18T11-19-57.mpfpkk55hj0dunqfi8dn.png http://snap.philsnow.io/2016-11-18T11-19-57.mpfpkk55hj0dunqf...
- RushPL 10y agoIndeed, it does look a bit weird in that case. On the other hand check out this flowchart https://code2flow.com/KdNVeJ https://code2flow.com/KdNVeJ - the same thing looks very clear here.
- karmelapple 10y agoGreat idea! My brain jumps from the code being psuedocode to instead being actual Swift, and the chart would be displayed in the output section of an Xcode playground. Anyone know if something like that exists? Or if it may be easy to port an idea like this to inside a Playground?
- gerry_shaw 10y agoCool to see this on HN. I've been using for at least a year to help document some specific use cases in our code. I appreciate the stable URLs that make this possible.
- Procrastes 10y agoNicely Done! I played with a simple OAuth2 flow and it worked great. I'm going to see about using it for all of our documentation. Business is probably too steep for us and we wouldn't want on-prem anyway. A Saas Pro plan might be interesting if it's affordable. Note: Download to PDF failed silently for me. Printing worked great. I haven't tested SVG or PNG yet.
- RushPL 10y agoI'm glad you like it. I just deployed a fix that should address the download problem. Cheers.
- bmh100 10y agoI run a small business, and for $3,600/year (unbranded), I will easily choose to stay with Inkscape. I understand the importance of branding, so "white label" is a necessity. My use case is to document process flow in systems, which remain unchanged for months at a time. Contact me if you want to talk about a pricing model that would make sense for my market segment. Maybe per-chart pricing.
- RushPL 10y agoI just wrote you an email but I'm replying here as well. If you just need to make some flowcharts they will not have a code2flow stamp in any of the pricing tiers. Maybe except free trial, but it does not watermark the output either yet. You are welcome to use the free trial until we have a paid SaaS or buy the basic self-hosted version. The enterprise version is for companies embedding code2flow in their own products. Many thanks!
- Raphmedia 10y agoAdd it on your pricing grid. "No watermark" could be enough for some people to switch over from free to paid.
- endergen 10y agoI've been playing with a real time visualization of various graph visualizations that have nice text DSLs. Current progress is open source and includes an Atom Package for editing and visualizing results on the fly, as well as a command line tool for generating SVGso from the textual representations. https://atom.io/packages/diagrams https://atom.io/packages/diagrams and https://www.npmjs.com/package/diagrams https://www.npmjs.com/package/diagrams Desktop oriented for offline use.
- RushPL 10y agoNice, thanks for sharing. :)
- otahi 10y agoLooks great! I think StackEdit is another tool to create flowcharts and sequence diagrams. https://stackedit.io/editor https://stackedit.io/editor https://github.com/benweet/stackedit/blob/master/public/res/WELCOME.md#uml-diagrams https://github.com/benweet/stackedit/blob/master/public/res/... We can create a flow chart with following markdown. ```flow st=>start e=>end st->e ```
- endergen 10y agoThis is awesome!
- Meph504 10y agoI love your idea, and I think it seems like a nice implementation. But feel your price point will push this well beyond its value.
- RushPL 10y agoThere is Sass version in the works that will be probably $10/mo - still working on the features and billing.
- Davidp00 10y agoLooks cool! Can you share a really complex flowchart that uses most of the options?
- RushPL 10y agoI don't have anything large at hand that I can share. Here is a small real-world use case https://code2flow.com/wclEvF https://code2flow.com/wclEvF - and this is another https://code2flow.com/KdNVeJ https://code2flow.com/KdNVeJ In the latter example, please note that "Update failed: flash error" generates only one node in the flowchart. The most complex flowcharts were created by customers and testers but I don't want to expose their data. They have hundreds of lines of code resulting in huge diagrams.
- mthoms 10y agoCool tool. How does this compare to http://flowchart.js.org http://flowchart.js.org ?
- simple10 10y agoAfter trying both, Code2flow is much easier to use for quick diagrams but not as feature rich. Flowchart.js has a bit of a learning curve IMO but much more powerful. Code2flow has free and paid options. Flowchart.js open source.
- deleted 10y ago[deleted]
- siliconc0w 10y agoI actually built like the same tool for internal use at the last company I worked for.
- mmgutz 10y agoAnother alternative is [PlantUML](http://plantuml.com/activity-diagram-legacy http://plantuml.com/activity-diagram-legacy) which also has sequence, class ... diagrams
- problems 10y agoThis seems really cool, but why do they have packages with like 6 difference licenses on their download page?
- chamakits 10y agoI haven't tried an exhaustive list of UML and diagramming tools, but every other year I try a new one. PlantUML was one of the first I've ever tried, and nothing beats it so far. Sometimes it's not as flexible as I would want it to be, but maybe that's why I like it so much? I think I've almost learned to use it to only care about being able to express what I want to, and if it doesn't look exactly how I want it to look, but it still lets me express what I want to, I'm happy enough.
- jbob2000 10y agoStay the hell away. We had to use this at my last job and it drove people nuts.
- mmgutz 10y agoKind of surprised. My team uses it and the fact that it is all text driven (works with git) has them all sold. We mostly use class and sequence diagrams.
- achr2 10y agoI don't know what you are using as a graph layout engine, but if it can export to a few standard layout formats (dot file, GraphML etc.) I would use this all the time.
- sedachv 10y agoIf you are looking for a way to generate flowchart diagrams from a DSL description, the classic is Brian Kernighan's PIC: http://doc.cat-v.org/unix/v8/picmemo.pdf http://doc.cat-v.org/unix/v8/picmemo.pdf I am surprised at the amount of people that have never heard of it. It is probably already installed on your Unix system. There are several implementations with various improvements, such as https://ece.uwaterloo.ca/~aplevich/dpic/ https://ece.uwaterloo.ca/~aplevich/dpic/
- rhardih 10y agoMaybe it's just me, but if it takes more than five minutes, to figure out how to go from the example chart to a png, perhaps there's a reason no-one knows it.
- rhardih 10y agoThis took quite some time to dig up. In case anyone else was wondering, this produces a png (assuming foo.pic contains the example pic instructions): $ pic foo.pic | pic2graph > foo.png
- ephemeris 10y agothere was figr a web based realtime version. I think it is dead now last known location http://figr.bzero.se http://figr.bzero.se
- WhitneyLand 10y agoHow do you arrive at the pricing model for this? $100 per month $300 per month? How is that justified? Also how do you win against competitors? Is this project something that couldn't be duplicated in a week or so? No disrespect intended, maybe there is more to it that I'm seeing.
- RushPL 10y agoLet me start by saying that the free trial is perfectly functional and you can use the product totally for free and you are welcome to! The pricing for individuals is gonna be published soon along with the SaaS product. It's probably gonna be something like $10/mo but still couple more features need to be built to justify that (like permanent links which content can be edited) As for the $100/mo - we do have business/enterprise customers who find lots of value in it. I guess the price has been initially verified by the market so should I justify it? I guess I can justify the price by saying that the project has taken numerous hours of engineering, testing and experimenting. I think this is natural in pricing models that bigger customers pay more. If you can do the same in a week than good for you. Peace and take care :)
- RushPL 10y agoAlso, if this product can save more than 3 engineering hours per month for your whole company than I'd say the self-hosted product is totally worth it. Simple math. :)
- bbcbasic 10y agoIf only companies thought that way. It's all about budgets.
- mgkimsal 10y agohow much time you put in to it really doesn't matter. the 'justification' is people paying for it. if they find value, they pay, there's the justification.
- WhitneyLand 10y ago
- bbcbasic 10y agoWhat would be cool is to paste in actual code e.g. Java and produce a flowchart based on some conventions e.g. convert camel case to sentences.
- hacker_9 10y ago1. Smart. Plays to the strengths of the keyboard by using text input, vs awkward dragging of elements with the mouse (especially with big graphs). 2. Is 'pseudo code' the best description to use? Even the word 'code' can put non-technical people off as they associate it with complexity. 3. The pricing: hosting and support are good reasons to pay, but 'full confidentiality'? It seems you are going out of your way to make the product insecure because the user is not paying. It comes across as a bit money-grabbing. 4. The gif on the front page works well to show off the product simplicity in an intuitive way. My only thoughts is the flowchart could do with looking a bit more 'web 2.0'; SVG elements so you can have rounded corners, shadow effects, colours that work together, arrows that look more professional etc.
- RushPL 10y agoGreat feedback. Thank you. 2) Probably not good for nontechnical people but on the other hand most accurate for technical people. 3) Your point sounds reasonable. How would you describe the need of some companies need to host 100% of their data? Medical companies for example. This is the point I was trying to convey in the pricing. 4) Square is the new web 3.0 :)
- hacker_9 10y agoI suppose it depends if you selling flowchart software to mainly technical people? Else if it is more like Excel users, you may want to go with 'as intuitive as Word' or something similiar. I'd just list 'fully secure' or 'encrypted' as one of the features, and not put it in the price plan at all. True enough on the Web 3.0 look! I'd recommend using one of the many colour palette tools on the Web though, just to get a more natural softer look between the various hues.
- perfmode 10y agoBy full confidentiality I believe they mean that customers host the software themselves.
- 10y ago
- partycoder 10y agoSeems very productive. Definitively worth trying. I've used graphviz for a bit, which is similar in mindset, and I can see myself using this, as a product. Now I think the pricing can be a little bit too much.
- RushPL 10y agoThe free version is perfectly functional. :) Saas version will be affordable once it's done and once it has more features. Current paid versions are more for bigger teams and companies requiring on premise solution.
- jxy 10y agoIt's a huge price for interactive use, and I don't see much here that truly beats graphviz. I prefer echo "digraph G {Hello->World}" | dot -Tpng >hello.png For a stretched example http://www.graphviz.org/Gallery/gradient/cluster.html http://www.graphviz.org/Gallery/gradient/cluster.html
- eosrei 10y agoThese amazing Graphviz examples by AT&T research are linked in the docs, but now only on archive.org: https://web.archive.org/web/20130514141942/http://www2.research.att.com/~yifanhu/GALLERY/GRAPHS/index.html https://web.archive.org/web/20130514141942/http://www2.resea...
- z3t4 10y agoThis is very cool! I would however just want to draw it all by hand, like a paint tool. Also it could look a bit better.
- teleclimber 10y agoCheck out drawexpress. It works best with a stylus. I use it on my Lenovo yoga book and it's brilliant. I can put something that I have in my head onto a neat looking graph amazingly fast.
- ephemeris 10y agoheh I knew them lines looked familiar digraph { "Hey" [shape=circle] "Welcome to graphiz" [shape=box] "You are new" [shape=diamond] "How are you" [shape=box] "It's super easy" [shape=box] "write plain english thats code like" [shape=box] "wanna do a condition" [shape=diamond] "editing"[shape=diamond] "Hey" -> "Welcome to graphiz" -> "You are new" "You are new" -> "It's super easy"[label=True] "You are new" -> "How are you"[label=False] "It's super easy" -> "write plain english thats code like" -> "wanna do a condition" "wanna do a condition" -> "Just write an if"[label=True] "wanna do a condition" -> "editing"[label=False] "Just write an if" -> "editing" "editing" -> "How are you"[label=False] "editing" -> "see stuff update via entr"[label=True] "see stuff update via entr" -> "editing" "How are you" -> "goodbye" } Now I want to study up on parsing to build my own ast to dot generator
- jxy 10y agoRight. That depends on your target customers. You need to design a simple DSL that tailored for your customers and make them pay!
- eosrei 10y agoYes! I just made a massive digraph last week with http://graphviz.org/ http://graphviz.org/ Render above to PNG with: dot above.gv -Tpng -oout.png
- ontoillogical 10y agoDon't listen to the feedback you're getting here about pricing. It looks like you're used by people in healthcare, and they pay primarily for self-hosting. My suggestion: replace "Data not confidential" with "HIPPA compliant" and double your prices. The free version works for 99% of people who just want to draw a flow-chart, and you charge reasonable prices to healthcare orgs that have to be extra careful because of regulations.
- jv22222 10y agoI completely agree. Start high and work your way down until you get consistent conversion ratios that match up with your personal goals. OR start low and then keep increasing the price until you hit a conversion wall. Both ways work! This is an amazing read on the subject: https://training.kalzumeus.com/newsletters/archive/saas_pricing https://training.kalzumeus.com/newsletters/archive/saas_pric...
- ecesena 10y agoNot really sure why, but have issues seeing the screencast.gif on Safari 10.0.1 (11602.2.14.0.7), El Capitan.
- deleted 10y ago[deleted]