Show HN: Code2flow – easy flowcharts with no mouse, no dragging and no hassle

by RushPL • 10 years ago

238 85 10 years ago

RushPL17• 10 years ago

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.

erichocean• 10 years ago

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.

achikin• 10 years ago

Do you use a handwritten parser for input?

RushPL17• 10 years ago

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.

fourthark• 10 years ago

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

Fiahil• 10 years ago

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

kareemm2• 10 years ago

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!

RushPL17• 10 years ago

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.

mSparks2• 10 years ago

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.

grownseed• 10 years ago

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

viklas• 10 years ago

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!

staticautomatic• 10 years ago

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

daw___• 10 years ago

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

RushPL17• 10 years ago

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

notheguyouthink2• 10 years ago

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)

RushPL17• 10 years ago

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

notheguyouthink2• 10 years ago

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.

rprameshwor• 10 years ago

This is beautiful. Thank you !!

zokier• 10 years ago

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.

RushPL17• 10 years ago

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

alcari• 10 years ago

The front page demo does it with the while loop.

karmelapple• 10 years ago

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?

gerry_shaw• 10 years ago

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.

Procrastes• 10 years ago

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.

RushPL17• 10 years ago

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

bmh100• 10 years ago

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.

RushPL17• 10 years ago

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!

Raphmedia• 10 years ago

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

endergen2• 10 years ago

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.

RushPL17• 10 years ago

Nice, thanks for sharing. :)

otahi• 10 years ago

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

```

endergen2• 10 years ago

This is awesome!

Meph504• 10 years ago

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.

RushPL17• 10 years ago

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

Davidp00• 10 years ago

Looks cool!

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

RushPL17• 10 years ago

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.

mthoms• 10 years ago

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

simple10• 10 years ago

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.

siliconc0w• 10 years ago

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

mmgutz2• 10 years ago

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

problems• 10 years ago

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

chamakits• 10 years ago

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.

jbob2000• 10 years ago

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

mmgutz2• 10 years ago

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.

achr2• 10 years ago

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.

sedachv• 10 years ago

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/

rhardih2• 10 years ago

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.

rhardih2• 10 years ago

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

ephemeris2• 10 years ago

there was figr a web based realtime version.

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

WhitneyLand2• 10 years ago

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.

RushPL17• 10 years ago

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

RushPL17• 10 years ago

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

mgkimsal• 10 years ago

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.

WhitneyLand2• 10 years ago

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.

rgrieselhuber• 10 years ago

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

antisthenes• 10 years ago

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)

bbcbasic2• 10 years ago

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.

hacker_93• 10 years ago

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.

RushPL17• 10 years ago

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

hacker_93• 10 years ago

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.

taspeotis• 10 years ago

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

The phrase "data sovereignty requirements" comes to mind.

partycoder• 10 years ago

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.

RushPL17• 10 years ago

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.

jxy2• 10 years ago

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

eosrei2• 10 years ago

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

z3t4• 10 years ago

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.

teleclimber• 10 years ago

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.

ephemeris2• 10 years ago

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

jxy2• 10 years ago

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

eosrei2• 10 years ago

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

dot above.gv -Tpng -oout.png

ontoillogical• 10 years ago

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.

jv22222• 10 years ago

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

ecesena• 10 years ago

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

Show HN: Code2flow – easy flowcharts with no mouse, no dragging and no hassle

Related Stories