AI flowchart generator: A Step-by-Step Guide to Creating AI Flowchart with Figjam AI
Stop Moving Boxes, Start Writing Prompts. The Future of Flowcharting with Figjam AI
Over the past three years, I have extensively researched and tested how product designers can use generative AI technology to improve efficiency and accuracy in their design workflow.
Although we are only in the first steps, designers must integrate AI into our design process today. This integration will enable us to work more efficiently and with greater precision.
Common AI tools on the market are ChatGPT, Gemini, Midjourney, and more, showcasing key features of artificial intelligence technology. In addition, many new tools are launched every day.
Apart from the new AI tools, we have tools that are not originally AI, like Figma and Miro. These tools have started to add AI capabilities, and now we can use them to work better.
In this article, I want to show you how you can use FigJam AI, as an efficient AI flowchart maker, to create flowcharts.
How do designers say it? “Stop moving rectangles and invest in creativity.”
This is exactly what I want to show you.
What is FigJam AI?
FigJam AI is an AI tool that Figma added to FigJam. It helps you cluster information, generate design thinking workshops, organize information, summarize information, and more.
Check out my article about FigJam AI for a more detailed look at this AI feature.
Before designers move rectangles, now they must write in detail what they want
When I show my students how to use AI, one of the first concepts I explain is that telling the AI exactly what you want is important. If not, you will not get the results you wish.
This underlines a significant difference from traditional work processes.
Often, we don’t start with a clear end solution; instead, we experiment, adjust designs, move rectangles, and slowly refine our vision during the process. However, AI requires precise instructions from the beginning.
In the examples I show here, you can feel it well. During the process, I made small changes in the prompt so you can see how they affected the results and why specifying clearly what you want is the key to this process.
One note: The AI model also affects the results, but the examples show that the prompt must be accurate.
Generate flowchart from text
I conducted several tests with Figjam AI, and here are three that I believe will be most helpful in understanding the process. I started with simple prompts and gradually moved to more sophisticated approaches.
Test 1: Happy flow
I started with the simple flow of buying a T-shirt in an online store to see if the AI could generate a full flow from it.
Here is the prompt:
Act like a product designer and create a Flow chart for the process of buying a t-shirt in an e-commerce store:
-Visit homepage.
-Select the T-shirt category.
-Filter and sort.
-Pick a T-shirt.
-Choose size and color.
-Add to cart.
-Review cart.
-Checkout.
-Fill in shipping and payment.
-The user adds a promo code.
-Confirm order.
Create only this flow. Do not add anything else.Here is the the result:
My notes
- FigJam AI created exactly what I asked.
- The AI made the creation process more efficient by eliminating the need to manually adjust “ rectangles, “ streamlining the diagram creation.
Test 2: Flow with one error
In the second test, I wanted to see if the AI could add a condition to the flow for cases where one thing does not work correctly.
To do it, I added a case where the user added an incorrect promo code to the flow.
The prompt is the same, but I added this line to it: “Take into account the error case: ‘Promo Code does not work.’”
Here is the prompt:
Act like a product designer and create a Flow chart for the process of buying a t-shirt in an e-commerce store:
-Visit homepage.
-Select the T-shirt category.
-Filter and sort.
-Pick a T-shirt.
-Choose size and color.
-Add to cart.
-Review cart.
-Checkout.
-Fill in shipping and payment.
-The user adds a promo code.
-Confirm order.
Take into account the error case: Promo Code does not work.
Create only this flow. Do not add anything else.Here is the the result:
My notes
- Figjam AI accomplished the task exactly as requested and added the error case to the flowchart creation.
🌟 Master AI Skills (Including ChatGPT) in My Forthcoming Training!
Attend my next online workshop to improve your effectiveness in product design using AI methods (featuring ChatGPT).
Test 3: Flowchart diagram with three errors
The next step was to see if I could add three error cases to the prompt and whether the AI would understand them.
I added to the prompt these error cases:
- The promo Code does not work.
- The color is out of stock.
- The payment declined.
Here is the prompt:
Act like a product designer and create a Flow chart for the process of buying a t-shirt in an e-commerce store:
-Visit homepage.
-Select the T-shirt category.
-Filter and sort.
-Pick a T-shirt.
-Choose size and color.
-Add to cart.
-Review cart.
-Checkout.
-Fill in shipping and payment.
-The user adds a promo code.
-Confirm order.
Take into account these error cases:
-The promo Code does not work.
-The color is out of stock.
-The payment declined.
Create only this flow. Do not add anything else.Here is the the result:
My notes
Figjam AI accomplished the task but with some issues:
- All the error cases were added at the end of the flow, which made it difficult to understand.
- The visual was chaotic, with lines above lines and disorganized. You can see how it looks in the image.
- The error case “Is the payment declined?” was negative, so if the answer is NO, the payment is OK. I do not like this because it can be confusing. Writing “Is the payment approved?” is better, so the YES leads to success.
- If the payment is declined, the AI suggests contacting customer support. This is OK, but maybe you want to show an error message and write “Use another payment method,” so here, it also needs to be more precise about the solution.
Instead of making the changes manually, I wanted to test the AI’s capabilities by writing a better prompt. My goal was to see if an improved prompt could help get all the errors in the workflow correctly.
What I changed:
- I wrote the error cases as questions.
- I added the question near the steps and not at the end.
- I explained to the AI assistant exactly what I wanted to happen after each case.
Here is the prompt:
Act like a product designer and create a Flow chart for the process of buying a t-shirt in an e-commerce store:
-Visit homepage.
-Select the T-shirt category.
-Filter and sort.
-Pick a T-shirt.
-Choose size and color. Ask, "Is the color in stock?" If yes, continue to the next step. If no, write "Notify me by email. "
-Add to cart.
-Review cart.
-Checkout.
-Fill in shipping and payment.
-The user adds a promo code. Ask, "Does the promo code work?" If yes, continue to the next step. If no, write "Promo code does not work " and connect it to the step "The user adds a promo code."
-Confirm order. Ask, "Is the payment approved?" If yes, the next step is Done. If no, write "Contact customer support "
Create only this flow. Do not add anything else.Here is the the result:
You can take a look at the flow in Figma.
My notes
- All the error cases were added correctly.
- The AI assistant did exactly what I asked.
- The flow is much more legible and easy to understand.
Key insights from the tests
- If the flow is simple, the prompt is easier to write; when it involves complex processes, you must spend more time writing it.
- Clarity in prompts leads to better outcomes. The more detailed and clear your text instructions are, the more accurately the AI can generate the desired flowchart, reducing the need for revisions.
- Experimenting with various ways of writing your prompts leads to the most effective approach for communicating with the AI, especially for complex scenarios.
- For error cases, it is important to write the question as a positive one. Thus, the “YES” leads to the correct step.
- Show the chat how to continue. If you show an error case, explain exactly what you want to happen for the “positive” results and for the negative results.
- You can also generate the happy path, create error cases separately, and paste them into the flow.
- Using AI to create flow charts is great, but sometimes, manually adjusting parts of the diagram can be quicker than spending a lot of time writing the perfect prompt for AI.
To summarize
In this article, I showed you how to use FigJam AI as an AI flowchart tool to create flowcharts and diagrams.
I demonstrated three tests I did with the tool. The first was a happy path flowchart, and the second was a flowchart with one error case.
Then, we looked at a more complex flowchart with three error cases. I shared how the AI did not fully understand what I wanted from the first prompt, so I needed to rewrite the prompt again, and then I got the results I wanted.
At the end of the article, I shared some key insights I understood from the process.
To read more
If you want to read more about flowcharts, consider reviewing my articles.
🚀 Boost Your Efficiency: Uncover AI Techniques (Including ChatGPT) in My Upcoming Course!
Join my upcoming workshop to elevate your productivity as a product designer, learn AI techniques (including ChatGPT), and explore essential AI tools.
Thank you for reading the article. I hope this article helped you understand how to create flowcharts with FigJam AI. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.
If you enjoyed my article, I suggest you follow me so you’ll receive an email whenever I post.
You can also follow me on Linkedin, where I share tips several times a week.
