Show HN: Lekh Diagram, sketch recognition diagramming app for ipad | Hacker News Reader

Show HN: Lekh Diagram, sketch recognition diagramming app for ipad

itunes.apple.com

87 pointsrajeevk53 comments

Very nicely done! But I wish you could have watched over my shoulder as I bumbled around at the UI. Since I bought the export function and therefore own you as a developer to execute my every whim delivered as free updates until eternity ends[1]…

• If you can attach text to a bezier connection, I couldn't make it happen. I want this. Code faster, sleep less.[2]

• I kept trying to move objects a little bit without the double pump of first selecting. This makes tiny fly dropping lines which have to be undone or deleted. I think a short, brief gesture from the center of an object might be safely interpreted as a drag. You must already be deciding if it is a connection or a line. What's one more logic branch?[3]

• I'd like to select several objects of a class and have the option to "make same shape" in order to tidy up. Say, grab 3 rectangles and make them the same dimensions. Easy context menu item, but you have to figure out how to select 3 arbitrary rectangles first. Perhaps in select mode a brief touch adds or removes from the set of selected objects?

• For reshaping rectangles and ovals, I think a horizontal or vertical pinch should change just that dimension, diagonal can still resize preserving aspect ratio. This gives a natural way to change aspect ratio without all the mode-i-ness of the vertex.

• I find myself wanting to connect more than 4 things to a rectangle, I want them to come in at right angles to a side, but not overlap their lines on the way in. That will take a day of thinking to imagine a solution to rendering that. Having them spaced pleasingly, near the center of the side, in an order to minimize crossovers would be lovely. Good luck.

• I keep making fly specks on my drawing by touching the surface. I want that not to happen, but I suppose I might eventually want to make a tiny line too. Please resolve my ambiguous actions like an oracle. I expect this to be done so well I never realize you are doing it.

• Xcode-esque snap to other stuff on the page would be nice, particularly snapping to "things I am connected to" would help keep those horizontal and vertical lines tidy.

• I think adding "shake to undo" would be nice. That undo button is so far up in the corner, it feels like a context switch to me to go hit it, while a shake is just part of my flow. How strange is that?

Well that should keep you busy until December 1st. I'll get back to you with my next set of demands then.

EOM

[1] I kid, But I don't get to be the "user" end of these very often and I'm going all out.

[2] The Omni Group NSBezierPath extensions might be helpful here, they have a getPositionForPoint: method that tells how far along the path a point is, and a corresponding getPointForPosition: so you could glue the text to a relative position along the curve. They also have hit testing for NSBezierPath, but you already crossed that bridge. https://github.com/omnigroup/OmniGroup/blob/master/Framework... [4]

[3] Plus a time machine so you can draw the feedback as a line or drag without knowing if it is going to be short or brief. Your problem. Not mine.

[4] You realize if you give me this I am going to come back and ask for the ability to drag the text along the bezier curve, right? Best plan for that from the start.

Thanks for such wonderful comment. This is just 1st version release. I had to cut many things to get the v1 out. There are lot of scope for improvement. Releasing the v1 and getting feedback like yours will make sure that I will be doing right set of features from now.

Just wanted to say this is the best, most helpful yet humorous feedback I have ever read for any app ever. Thank you!

Rajeevk - please please create a version of this app that is modified into a virtual whiteboard so that two or more people can update the same plan at the same time. I have engineers spread over multiple offices and find it hard to do meetings that should be whiteboard sessions if everyone was in the same office. Meeting rooms could then have a couple of ipads with styluses for my guys to use. This is an app I would buy in a heartbeat!

Thanks jimparkins for liking the app and suggesting the new idea.

The real time collaboration using this app is a killer idea. This was suggested by many people sometime ago (in pre launch demo). But honestly, this feature will take some time to implement.

Here is youtube demo: http://www.youtube.com/watch?v=xvPLRRt79uo

For more info: http://www.avabodh.com/lekh

Rajeevk, this is absolutely fantastic, great job!

But… why don't you support DOT as an export type? It would be so unbelievably awesome for me to prototype in Lekh and then finess with DOT.

Anyway congratulations on the release!

Thanks darrhiggs..

I was not aware of DOT format. Just now goggled and found the wiki page of DOT. Looks interesting. Probably in next release/update I will add DOT support.

Brilliant!

Let me know if I can help you in any way.

Edit: spelling

Could you please send me your contact detail on avabodh02@gmail.com

App Store marketing suggestion: say what makes you distinct as near as possible to the beginning of the description text.

Which here I think means, get your sketch-recognition feature as near to the beginning of your description as possible. Only the first sentence or two show up in the web and desktop-iTunes store (don't have ipad with me now), until you hit "...More" to expand the description.

Maybe replace "with extreme ease" with something along the lines of "simply by sketching shapes with your finger".

You could also use the first screenshot slot to show a nice illustration of the UI procedure. For example, a photo montage of a finger sketching a freehand shape, and then that shape re-rendered by your app.

The icon too, could be used for some rendering of the freehand concept.

Maybe I'm missing what makes Lekh distinct, but if it's this, show it off as much as possible -- don't bury it in text!

Thanks mike_h for valuable marketing suggestion. This is my first app, so there many mistakes here and there.. Will address these with next update

Just some stuff to consider. I wasn't thinking of them as "mistakes"; that's up to you. Congrats on the nice work and feedback session!

Instaviz does the same thing, but yours is free, and your execution is better, great job...

<sarcasm>Cue to patetent lawyers in 3...2...</sarcasm>

Free to download and draw diagram. You have to purchase export feature (In App Purchase) to export diagram in various formats.

And regarding the instaviz, this very restrictive. It does not allow you to rearrange the shape the way you want.

Hence your execution is better.

The sketch recognition might be patented (at a minimum there is previous art), and I know it is only one piece. But that is enough to create some unwelcome letters. And it is also the reason why I am against patents. This is a case where copyright is enough, and IP would be counter-productive

Instaviz author here. This is actually intentional, Instaviz is really optimized for quickly sketching out ideas and thoughts and not having to worry about layout. I'm planning a 2.0 version which will allow some reorganization of the nodes within a layout.

Kudos to you for figuring out shape recognition. It took me a long while to get my head around it.

Thanks pixelglow for taking a look at the Lekh Diagram. For me, writing the shape recognizer did not take much time. But designing/thinking the overall app usability took much more time.

It looks like your shape recognition is handled differently from Instaviz. Yours is more oriented toward general purpose drawing, whereas Instaviz is more tuned toward recognizing specific shapes.

Yes, the Lekh Diagram first recognizes a general shape which is matching to user's drawing then uses various heuristics to convert it to regular shapes like rectangle, parallelogram etc. There is setting that switches of most of second step (regularizing shapes). In the Misc->Settings, there is "regularize shape" switch

This is very good!

What I miss is a "snap to grid" feature.

Some comments:

- dragging object feels slow on iPad 3

- the line and text options give too much choices, maybe you could have an advanced toggle to enable fine-grained parameters, and a default with simpler options (like just 5-10 colors, no transparency and no line width)

Thanks for the feedback. Sanp to grid is a important feature. This will come in future release. Also there is plan to review whole of the UI for making it more simpler. Some of the future release will address all of your comments

Rajeevk, great job!! Things I'm looking forward to: - snap to grid - object grouping

Your app needs a bit more polish, and your icon could do with a bit more work, but for a first version its fantastic.

Your app has replaced grafio as my goto diagramming tool.

grafio is a close competitor to Lekh Diagram. Shape recognition and customization of shapes are much better in Lekh Diagram. What Lekh Diagram lacks (if you compare with grafio) is aesthetically good looking GUI. Apart from that the grafio recently added toolbox for flowchart shapes which is currently not in Lekh Diagram. But many of those toolbox shapes (like arrow) are easily recognized by Lekh Diagram.

As much as a good looking GUI would be nice, please don't do it at the expense of speed/performance and please don't over do it. There is something to be said for a clean simple, but polished look.

snap to grid and object grouping have top priority in the list of features of next release.

There is something very pleasurable about drawing flow charts like this. It hits a sweet spot between actual drawing and presentation programs/lucid chart. Great work!

Do you take into consideration the direction of the strokes? I can't seem to get it to recognize anything but a rectangle. Lefty here, hence the direction query.

No, there is no consideration of direction. I am not sure what's going wrong. I have tested all shapes in all directions. You have to draw a shape close to whatever shape you want to be recognized.

I would love to be able to export images as an SVG file. That way, this could be used for creating simple assets to integrate into a site design or wireframe.

You can export to SVG. These are formats that you can export to: JPG, PNG (transparent background), SVG, PDF and Lekh format. Diagram exported in lekh format can be opened by Lekh Diagram app.

I don't suppose you could add Visio format?

Have not investigated yet that if it is possible to export to Microsoft's propriety formats. Anyway this is in plan to investigate, if possible visio formats will be added to future release.

If you want to export to Visio, export to VDX which is the Visio Document XML format. IIRC it's documented on the Microsoft site, and I even wrote a VXD exporter for the Graphviz open source project which I then used for Instaviz. While developing your own exporter, you can use the free Microsoft Visio Reader to examine your output to see if it conforms.

cool.. thanks

Ah, ace. Thanks.

Great job!

Q1: What algorithm do you use to recognize the closest shape?

Q2: Which shapes are the most difficult to recognize?

I did not understand your Q1 for Q2: Identifying sequence of lines vs identifying bezier curve was toughest problem for me.

Q1: What algorithm do you use to identify the nearest shape? How do you know the user intends to draw a square, or a curve or a rectangle?

When user completes a stroke (touch up), then I take the path drawn by user, then divide the path such that each small sub path is very close to a line. Then I have combination of lines, Suppose I have four lines, then possibilities are that it can be a quadrilateral or circle, (if the end of last line is close to the start of the first line), then I use variance to determine which shape closely fits to the drawn stroke.

Once I know if this is quadrilateral, then uses various heuristics to find out if it is close to a rectangle or parallelogram etc.

Your screenshots don't have to be literal screenshots. At first glance, there doesn't seem to be anything special about your app. Its main feature is un-advertised!

I would suggest some sort of transitional photo. Show the sloppy drawing fading into the crisp flowchart. Maybe a little text on the image. "Draw flow charts in seconds!".

I second this. Use some of the frawing diagrams from the help view to show how shapes are created (I'd show at least a box and an arrow on one screenshot). It will also reduce first-use frustration trying to create shapes.

Thanks for good feedback, will address them with next update

Installed and very interested. Every once in a while I get the desire to diagram on my iPad. I don't do it often because I haven't found the right tool yet, so hopefully this is it. I like what I see and look forward to future updates.

Downloading now, but I'd change the description of the in-app purchase so people can read it on the app store; it currently truncates. Instead of 'Feature to enable export' just say 'Export diagrams'. Looking forward to trying it out.

Very awesome.

You may want to consider making the dash/color/fill tappable, instead of relying on the tiny disclosure button. It would definitely speed up access to those features.

edit: It feels a little naked without pinch-zoom.

Awesome! How do I create edges that connect to the node itself? Like the state diagram you show in the screenshots?

I could not get you exactly asked. Here is a youtube demo of how to connect shapes: http://www.youtube.com/watch?v=EKT_NqHM6Zk

I guess you asked connecting to itself.. right?

for that draw a independent bezier curve. You can easily move and modify the bezier curve by moving it's control points.

Any plan on android version?

Yeah, that is in plan, but it will take some time. Development not started yet.

I was going to use Grafio, but this is a much better alternative!

Can you copy-paste a shape?

You can duplicate a shape. This is equivalent to copy-paste in the same diagram. copy-paste shape across diagrams feature is currently not there.

Reply on news.ycombinator.com