Creating Charts & Diagrams With HTML5 in LucidChart

Do you get frustrated with rich webapps that take forever to load or require Flash to run? There are many drawing and charting webapps, but the majority are relatively slow and powered by Flash. Today we’ll look at the HTML5 powered app LucidChart, for creating rich charts, mockups and diagrams.

LucidChart is one of the many webapps that let you create charts and diagrams online, but it sets itself apart by using native web technology which makes it run faster than its Flash based competitors. It also lets you do more than just plain flow charts. You can use it to make mind-maps, mockups of the iPhone app you’re designing, or the standard org charts and diagrams usually made with Visio. Let’s see how you can put this to use to get charts and diagrams made for your projects.

Getting Started

First, you’ll need to signup for an account. LucidChart offers several plans to fit everyone’s needs, ranging from a free account with up to 5Mb of storage and 2 collaborators to a $25/month plan for 5Gb of storage and unlimited collaborators.

Just select the account you think’s right for your team; you can try it out for free for 2 weeks and then switch to a different plan depending on your needs. The free plan is plenty to get started with LucidChart and this is a nice option for home users looking for a nice, free tool for making professional charts.

Choose the plan that will fit your team's needs and budget

Choose the plan that will fit your team's needs and budget

You won’t need much info to create an account, just enter your name, password, and email, or alternately just signup with your Google account in one click. LucidChart is also in the Chrome Web Store, so you can install it into Chrome and integrate it with your Google account in one click there.

Enter your info or just connect with your Google Account to register

Enter your info or just connect with your Google Account to register

The first time you open your account, you’ll be prompted to either continue your free trial or begin paying for the subscription. Feel free to simply continue your free trial, as you can easily pay later to keep your Pro account.

Choose whether to keep using the trial or go Pro

Choose whether to keep using the trial or go Pro

Creating a New Diagram

Once your account’s created, you’ll be ready to login and get some new diagrams created. You’ll see the main My Documents page each time you login to your account. To start making diagrams, just click New Document.

Create a new diagram from your dashboard

Create a new diagram from your dashboard

Enter a name for the document you want to create, then select a blank page or choose from one of the bundled templates. There are included templates for a wide variety of purposes, including UI wireframes for webapps and iPhone apps, sample mindmaps, process charts, and more. Click Start Drawing to start editing.

The first time you create a new document, LucidChart will offer to take you on a tour of the interface, which can be helpful when you’re getting started. After that you’ll be ready to start creating the diagrams you need.

Create a blank document or get started with one of the many included templates

Create a blank document or get started with one of the many included templates

LucidChart’s interface looks similar to a Microsoft Office app, with a toolbar on the top and pallets on the sides. To edit a part of the diagram, simply double click the element. Or, drag a object from the left sidebar to add a new flowchart, textbox, container, org chart, or user interface element to the drawing.

LucidChart uses an intuitive interface that makes it easy to use

LucidChart uses an intuitive interface that makes it easy to use

Even if you have a hard time lining things up, you’ll find it easy to create professional charts in LucidChart. The main document background shows gridlines you can use to line up your elements and then as you’re adding new sections you’ll see orange crosshairs that will help you get sections lined up with others you’ve already placed.

Line everything up with gridlines

Line everything up with gridlines

As you’re editing, the interface will adapt to fit your needs. The toolbar will change to only show the items you can use in the section you’re editing. For example, here we’re editing the text in an element, and only the font editing tools are visible in the toolbar. Once you click outside the element, the other options will re-appear.

Menus change depending on what you're editing, similar to the Microsoft Office Ribbon

Menus change depending on what you're editing, similar to the Microsoft Office Ribbon

To connect one section to another, drag from one of the brown circles in the middle of an object you’ve already added. Then, a small popup will open at the end of the arrow, where you can select a similar object to add to your diagram. This makes it incredibly quick to create mindmaps and diagrams without having to jump back and forth between the toolbars and the editing page.

Drag lines from the edge of elements, the add new elements from the popup toolbox

Drag lines from the edge of elements, the add new elements from the popup toolbox

If you’ve filled up your canvas, you don’t need to go create another new document to store the rest of your info. Just press the plus button on the top of the toolbar. This will let you select options for a new page, which will open in a new tab along the top. Now you can create a flowchart of how your iPhone app will work, then create a diagram of the app itself, all in the same document.

Add new pages to save all your data in the same document

Add new pages to save all your data in the same document

One of the few things we found confusing about the interface was saving documents. Unlike many webapps, LucidChart doesn’t automatically save your file as you’re editing. You’ll need to press the Save button in the top blue toolbar, or alternately click Save through the file menu. If you’d rather save a hard copy to your computer, press Publish to download your design in PDF or common image formats.

Save your document from the top right menu

Save your document from the top right menu

Sharing Your Documents

One of the major problems with traditional desktop applications is that only one person can use them at once. If you’re, for example, designing a chart in Visio, you can’t collaborate on the design with your coworkers in real-time. LucidChart, on the other hand, lets you share your charts with others so the whole team can work together. Collaborators can view, edit, or have full permissions over a document, depending on your needs.

Invite others to help edit your charts and drawings

Invite others to help edit your charts and drawings

Now you and all the team members you’ve invited can edit the document at the same time. You’ll see everyone that’s online from the Collaborators tab on the bottom left, and can chat with everyone about the design. This is a great way to brainstorm with a mindmap together or discuss the UI changes you’re planning for the company’s website.

Chat with coworkers and edit diagrams together in real-time

Chat with coworkers and edit diagrams together in real-time

You can also share your designs with the world via LucidChart’s community. You can create template documents that others can easily use, or take advantage of the templates others have already created. There’s a wide variety of high-quality mockups and chart templates already available, which will help you make charts even quicker.

Share your designs or find premade templates you can use

Share your designs or find premade templates you can use

Design and Usability

While there are many chart and diagramming apps available today, LucidChart did a great job making their app feel unique. The interface is easy to navigate and changes based on your needs. Additionally, it is much more fluid and responsive than many similar Flash-powered diagramming apps. Creating new diagrams is a breeze with the popup toolbar, which makes it very quick to create complex diagrams.

Unfortunately, though, it’s not quite as easy to save and share your documents. We’re so used to webapps automatically saving your documents that we almost deleted our design without saving it. Once they’re saved, however, it’s fairly easy to keep up with the documents you’ve made and work on them together with others. LucidChart doesn’t integrate with other chart apps, either, so you can’t import older drawings you’ve made in Visio or other chart applications.

Conclusion

LucidChart is one of the nicest chart and diagram apps we’ve used, online or off. We were very impressed at how good it worked, and it continued to run fast even when our internet connection was slow. If your team is looking for a great way to collaboratively edit diagrams or design new apps, this is a great option. Or, if you’re looking for a free chart tool for home use, the LucidChart free plan just might be what you’re looking for.


Summary

LucidChart is an HTML5 webapp that makes it easy to create diagrams, charts, and mockups in your browser. Create quickly from premade templates, then collaborate with coworkers in real-time to get your charts perfect.

8
  • http://lucidchart.com LucidChart

    Thanks for the write up! Easily the most thorough one we’ve had so far. There are just two items of clarification though. Our auto-save works like Google spreadsheets where you have to save it first before the auto-save clicks on. Even if you delete a document before saving it though, the next time you open up a new document it will ask you if you want to open that previously unsaved document. Once it is saved though, the document is auto-saved after every action to multiple data centers.

    As far as Visio import is concerned. We are VERY close to finishing this difficult feature (there are few instances where this has been done correctly and no other online diagramming apps currently have this) and we’re excited to be releasing it to the masses relatively soon.

    Best,
    LucidChart

    • http://techinch.com/ Matthew Guay

      Thanks for chiming in, and looking forward to the updates!

      • http://www.lucidchart.com Dave @ LucidChart

        After beta testing it with a group of our users and working out some of the issues, Lucidchart has now launched Visio import (.vdx files) to everyone.

        The feature will remain in beta in the near future as we continue to work through issues, but the response has been overwhelmingly positive!

  • Georges Liam

    It dosen’t work on the iPad. I’m afraid to say, I see no reason why Flash, better technology for “such an application”, wasn’t implemented. Especially if this HTML5 app doesn’t work on the iPad.

    • http://www.lucidchart.com Dave @ LucidChart

      Georges, I’d encourage you to try it again on the iPad. There were a few minor issues related to recent updates that affected the usability on the iPad but these have been resolved. We plan to continue to make the offering on the iPad more robust in the near future and will be adding some exciting features to it.

  • http://www.iconfinder.com Martin LeBlanc

    I really love LucidChart – fast and easy to use.

  • Pingback: LucidChart Buzz – December Roundup

  • Pingback: LucidChart: Awesome Charting Got Even Better (plus a giveaway!)

  • Pingback: Best of AppStorm in June

  • Pingback: Best of AppStorm in June | Android.AppStorm

  • Pingback: Best of AppStorm in June | iPad.AppStorm

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow