Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Code2flow – easy flowcharts with no mouse, no dragging and no hassle (code2flow.com)
238 points by RushPL on Nov 18, 2016 | hide | past | favorite | 85 comments



If 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

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/


Maybe 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.


This 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


there was figr a web based realtime version.

I think it is dead now last known location http://figr.bzero.se


1. 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.


Great 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 :)


How would you describe the need of some companies need to host 100% of their data

The phrase "data sovereignty requirements" comes to mind.


I 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.


By full confidentiality I believe they mean that customers host the software themselves.


That is already made clear in a separate bullet point though.


Hey 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.


Hi, 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)"


Like 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

Love it!


Looks 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.


Is the layout using https://github.com/cpettitt/dagre ?


Do you use a handwritten parser for input?


After trying hand-written approach and later perl's Parse::RecDescent I ended up using peg.js (http://pegjs.org) parser generator. It was probably the most flexible and performant out of all the options I tried.


Peg.js is excellent. I'm working on a browser IDE for it to help people learn how to build programming languages.


I 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).


Ignore 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!


Too 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."


You'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.


I 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!


Consider 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.


Not even sure using graphvis in this way is legal. I certainly wont be paying $300 a month for a free download. At&t certainly wont be pleased.


Graphviz is under the Eclipse Public License, which allows commercial use.


But requires "royality free" distribution. so charging per month and limiting to internal use only for self hosted product isnt in agreement with the licence.


heh 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


Yes! I just made a massive digraph last week with http://graphviz.org/ Render above to PNG with:

dot above.gv -Tpng -oout.png


Right. That depends on your target customers. You need to design a simple DSL that tailored for your customers and make them pay!


Another alternative is [PlantUML](http://plantuml.com/activity-diagram-legacy) which also has sequence, class ... diagrams


I 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.


This seems really cool, but why do they have packages with like 6 difference licenses on their download page?


Stay the hell away. We had to use this at my last job and it drove people nuts.


Kind 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.


How 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.


I like it when developers charge real money for the products they build. Are there competitors that do this in the same way?


Let 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 :)


Sorry I wasn't questioning your ethics. I meant how do you justify the strategy that it will be a successful business model, or what was your thought process in coming to that price.

I absolutely support you charging as much as people will pay! It sounds like you have already started to prove the model. Wish you success.


Also, 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. :)


If only companies thought that way. It's all about budgets.


how 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.


To take the capitalist/libertarian side of things, which I rarely do: feel free to make a clone of it and charge $99/month?

Generally, you can charge whatever you want in capitalism so the pricing structure is justified apriori until it fails.

*Clarification: in the software market, which is generally very low barrier to entry (provided you already have programming knowledge)


I'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

and

https://www.npmjs.com/package/diagrams

Desktop oriented for offline use.


Looks great!

I think StackEdit is another tool to create flowcharts and sequence diagrams.

https://stackedit.io/editor

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

```


This is awesome!


Nice, thanks for sharing. :)


Don'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.


I 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_pric...


This 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


Interesting idea, I'll definitely look into it and let you know. :)


This 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/ - 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)


By 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.pdf https://code2flow.com/8qRgzO.code.svg


Yea 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.


Cool tool. How does this compare to http://flowchart.js.org ?


After 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.


I 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.


Hey, I'm not sure what you mean but if you can post a link to a broken flowchart I could try fixing it.


The front page demo does it with the while loop.


I see, this arguably makes such loops easier to follow. I'll look into making it optional though.


I'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.mpfpkk55hj0dunqf...


Indeed, it does look a bit weird in that case. On the other hand check out this flowchart https://code2flow.com/KdNVeJ - the same thing looks very clear here.


Seems 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.


It'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


These 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.resea...


The 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.


Cool 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.


I 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.


I 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.


I 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!


Add it on your pricing grid. "No watermark" could be enough for some people to switch over from free to paid.


Nicely 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.


I'm glad you like it. I just deployed a fix that should address the download problem. Cheers.


This 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.


Check 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.


Great 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?


I actually built like the same tool for internal use at the last company I worked for.


Oh man this looks really neat. Thanks for building it.


I love your idea, and I think it seems like a nice implementation. But feel your price point will push this well beyond its value.


There is Sass version in the works that will be probably $10/mo - still working on the features and billing.


Not really sure why, but have issues seeing the screencast.gif on Safari 10.0.1 (11602.2.14.0.7), El Capitan.


Looks cool!

Can you share a really complex flowchart that uses most of the options?


I don't have anything large at hand that I can share. Here is a small real-world use case https://code2flow.com/wclEvF - and this is another 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.


This is beautiful. Thank you !!


What 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.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: