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