What flowdi?

- Flowdi is an interactive tool that allows users to quickly draw ideas by transforming users’ doodles into well-defined shapes.



- It aims makes drawing charts, tutorials and mind maps intuitive and tireless.


Why flowdi?



our team has been talking about updating our documentation...


And with the Hackathon around, what better way to make use of Hackathon time to creating an experimental documentation tool? 

Why flowdi?

There are 2 main ways to draw diagrams,

  • Code like syntax like graphviz to capture your logic in text and give up control on how the components are presented. 


  • draw.io with drag and drop but if you have used it, you would know that it is a tiring process


What if we can draw components on screen and have it transformed to flow diagram in real time?

How flowdi?

When the user has completed their drawing, the FE sends 2 items, an image and an array of waypoints to the BE

1. BE first sends waypoints to google's autodraw api to identify what object is drawn.

2. From the top 20 results, we look for certain objects we are interested in, like circles, squares, etc.

3. If the result contains our interested object, we will pass the image to our neural-network.

4. We start with an opensource pre-trained model called mobile net and applied a k nearest neighbour to it.

5. We trained the top layer of this neural net with our own data set.

- objects not identified by our neural net are rendered as it is. So for example if we were to draw a squiggle, we can still move it about as it is


By Chong Jia Wei


  • 298