Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

javascript

html

ajax

html5-canvas

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
Sign in to Comment

Related questions

How can I prevent users from voting more than once in 1 hour?
How can I modify a web page using google chrome content script before the DOM is processed?
Google Maps API load failure ("'google' is undefined") in IE8
How do I use UglifyJS from an Ant build? [closed]
Scala to JavaScript compilation effective?
How to draw rectangle on the website to highlight?
EaselJS line fuzziness
Is "\/" valid inside a javascript regex?
Mimicking Casting with Visual Studio's JavaScript IntelliSense
How do you reference Array.prototype.slice.call()?
download the text file instead of opening in the browser
Desktop application on JavaScript [closed]
How to organize complex jquery application?
Is there a way to access an array of col tags for a table in javascript?
Can cgi's start_html() method have multiple -script attributes?
JavaScript object creation
Using Dijkstra's algorithm to find a path that can carry the most weight
In terms of performance, what is the best method to show 1000 images on a page?
How to print arguments' list in javascript?
unit testing modular javascript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!