Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What do I need to learn to build interfaces similar to LucidChart

Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.

I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.

Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces

Cheers

like image 311
dassouki Avatar asked Sep 19 '11 14:09

dassouki


People also ask

What is equivalent to Lucidchart?

Microsoft Visio is often compared in its functionality to that of Lucidchart. The application is a powerful diagramming tool that provides a great deal of flexibility to its users so that you can have the liberty to create diagrams you want and represent data in a vivid, visual format.

Is there anything better than Lucidchart?

Tool #1: Visme. The first tool on the list of Lucidchart alternatives is Visme. This all-in-one design tool offers a large variety of options for creating flowcharts and diagrams, either on their own or as part of a bigger project.

Does Google have something like Lucidchart?

Lucidchart is the best and simplest drawing program on the market. Plus, it's completely integrated with Google Apps.

Is Lucidchart better than Visio?

Lucidchart is a far superior product to the more traditional flowchart software, Visio. The simple layout, easy sharing, and the ability to build complex flowcharts make Lucidchart the best out there.


2 Answers

There's draw.io, a very similar tool, but with the source on github.

like image 117
Geff Attree Avatar answered Nov 15 '22 08:11

Geff Attree


To build such a rich user interface is a big task. Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:

  • Sproutcore
  • Cappuccino
  • ExtJS
  • Dojo
  • jQuery UI

Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.

Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.

like image 22
limptwiglet Avatar answered Nov 15 '22 08:11

limptwiglet