Flowchart.js is a great tool for creating quick, simple flowcharts in a way that keeps you out of a WYSIWYG, and keeps your productive. No more drawing lines, no more determining how to draw a shape, no more deciding relative size and distance. Flowchart.js makes it easy to prototype new concepts and confirm product flows. Built in JavaScript, the library is complete with HTML rendering and a standard grammar and syntax for creating your flows.

https://app.egghead.io/api/v1/lessons/javascript-developer-friendly-flow-charts-with-flowchart-js/subtitles

Developer-friendly Flow Charts with flowchart.js

Instructor: [00:01] We're getting started today with a fairly simple index.html file. This pulls in all the dependencies we need from cdn. Rafael is a pre-requirement of the flowchart library.

[00:12] This is the flowchart library we're using, and axios is what we use to make xhr requests. There is a div here with id chart, and that is where we're going to render the flowchart.

[00:23] Now, taking a look at the flowchart data schema, this is an example set that I use to show the instance names and matched with their types -- so instance on the left, type on the right.

[00:35] All of these are basically variable assignments up here, and this is the actual flow. Start to operation to condition, we have a yes case, no case. Then we continue to the end. Let's see how simple it is to render this out.

[00:47] I like storing the data in a separate text file as I've shown. I just pull it in via xhr request, using whatever library you like. In this case, I'm using axios. Then, I'm going to grab the response. Inside that is a property called data. I'm actually going to destructure that.

[01:07] I'm going to create a flowchart instance, in case I want to do anything with it later. I'll parse the data, that'll give us our instance, then fc.drawSVG. Where it draws it is the chart container. That's the idea of the container we're drawing it in.

[01:25] We can run this very simply with a local http server. I'm going to use one that I have used for years, just to keep it simple. It's called httpster. Node-static is another good example. What this will just do is run a quick server out of our directory so we don't have to do any more configuration or thought to get this up and running.

[01:43] We do that, it's going to run at 3333. Let me just take a look in the browser. You can see we've got our example as we expected here. Flowchart does a nice job of making sure these lines connect up towards the end. It does a lot of the thinking for you in terms of how you'd want to draw a chart like this.

[02:02] Let's try a more complicated example where we actually create a user flow. We're going to start here with what is a more typical use case in my experience. I often use flowcharts in order to communicate and ensure product requirements with other developers and product managers.

[02:20] We're actually going to go through an authentication of flow for an application. We're going to start with a start, and we're going to use shorter variable names just to keep it simpler here. But the type is still of start, and its user would like to use the application.

[02:37] Then we're going to create the happy-end of type. "End user is authenticated." That's if everything goes right. Here's what I really like about flowcharts. You have the option to create situations where things don't go right, which is something that a lot of developers often forget.

[02:57] This is why it's very nice for talking about error cases and all the other snafus you can end up in. You don't need a line space here, I just use this to break up my variables. We're going to create our first operation, and this is going to say, "User logs in with email and password."

[03:19] From here, we're going to have two conditions. C1 says, "Email is valid?" C2, "Password is valid." Then, we're going to have io1, which is a type called input output. "Username or password is invalid, notify user."

[03:53] Let's take this into a comprehensive flow. We'll start always with the start, then we're going to go immediately to o1. In the case of o1, we go to c1. This is where we add our yes and no case. We have yes up top, and if username is valid, we're going to go to c2.

[04:17] In the no case, if it's not, we're going to go to io1, and io1 at e2. Same thing with c2. In the yes case, we proceed to e. C2 in the no case, we're going to proceed to e2. Just to go over the flow, we're going to start, we're going to try and login with email and password.

[04:46] We're going to get to a condition. If the condition's good, we're going to go to the next condition. If it's not, we're going to get an error, and ultimately, we're not going to be logged in. If we pass the next condition, we are going to be logged in. If not, we'll get the error in this case too.

[04:58] All we have to do is go over to script.js and replace element-sample with login-flow. That's going to pull in the new flowchart. Let's take a look over here. Refresh the page and we have our user flow.

[05:13] One of the things I'd like to point out is it's really nice the way it reuses this io and flows neatly from these two conditionals. You could do a lot of fancy stuff rendering this out to a pdf in some kind of node app.

[05:25] What I like to do with my team is take a quick screenshot and attach it right to the issue board.

Developer-friendly Flow Charts with flowchart.js

Share this video with your friends