Create Flowchart for Landing Page

[webberwang]

• Add label too flowchart, only for the commented version

---

Codelab.ai

We’re looking to create a flowchart to showcase our no-code platform’s unique feature.

The idea is simple, we take external api data & connect it to the user interface that you configure using our platform.

You can also modify the data coming in before it is displayed in the UI.

—

I made a preliminary idea using Lucidchart, we’ll want to use some premade graphics here (use https://icons8.com/, I have paid version)

https://lucid.app/lucidchart/f221363b-da29-4de6-bcb7-2de785ec02be/edit?invitationId=inv_dc79e1c8-9779-4042-a313-0bcacc6fc0cf

On the left side we have the data sources, these are names of paid services https://graphcms.com/, https://hasura.io/, https://airtable.com. You can google their svg logo to add to here

For the rest of the icons, you could use something like https://icons8.com/, I have a subscription if you need.

Query means the act of getting data. So like data fetching, api request.

Middleware means we are processing the data

Finally, the processed data arrives at the actual user interface.

Mutation means we’re modifying the data

—

Some examples for design inspiration

https://hasura.io/static/remote-schema-arch-e6d7622f4c6c6b4888304e5016df091a.svg found here https://hasura.io/graphql/production-ready-existing-apis/

https://graphcms.com/_next/image?url=https%3A%2F%2Fmedia.graphcms.com%2Fresize%3Dfit%3Aclip%2Cwidth%3A960%2FCd1wPvORc62FlCwOT1gY&w=3840&q=100 found here https://graphcms.com/use-cases/content-federation

Some examples of web design styles we like

https://uibakery.io/
https://airtable.com/
—-

For each node:

Text label underneath
Square container
Icon

Of all the designs, I would put more weight on GraphCMS.

[webberwang]

This is the product https://www.figma.com/file/FEHnaOxE6bJ5MwUxS46cig/Codelab.ai-Flowchart?node-id=0%3A1