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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.