Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nayalsaurav/ai360/llms.txt

Use this file to discover all available pages before exploring further.

The Flowchart Generator converts plain-English process descriptions into interactive flowcharts. Gemini 2.5 Flash interprets your input and returns a structured JSON object containing nodes and edges, which @xyflow/react (React Flow) renders on a live canvas. Every node is draggable, every edge is connectable, and the canvas ships with a minimap, zoom controls, and a background grid out of the box. Click Reset at any time to clear the canvas and start over.

​
How to use

1

Open the tool

Navigate to /utilities/flowchart-generator in your AI360 app.
2

Describe your process

Type a plain-English description of the process, workflow, or algorithm you want to visualise in the input field at the top of the page — for example, "Stripe payment flow".
3

Generate the chart

Click Generate. A loading overlay appears on the canvas while Gemini 2.5 Flash produces the node/edge JSON.
4

Interact with the chart

Once rendered, drag nodes to rearrange them, zoom with the scroll wheel, and pan by clicking and dragging the background. The minimap in the corner shows a bird’s-eye view.
5

Reset

Click Reset to clear all nodes and edges from the canvas so you can generate a new chart.

​
Node types

Gemini can produce six node types. Every valid flowchart must contain exactly one start node and one end node, with all other paths terminating there.
TypeDescription
startEntry point of the flow — every chart begins here
endTerminal point — every path in the chart must eventually reach this node
processA single discrete action step (e.g., “Create Payment Intent”)
decisionA yes/no branch — must have exactly two outgoing edges labelled yes and no
inputRepresents a data-input step (e.g., “Enter credit card details”)
outputRepresents a data-output step (e.g., “Display confirmation receipt”)

​
Example prompts

These prompts are drawn from the route’s own system prompt examples and are known to produce well-structured flowcharts:
  • "Stripe payment flow" — models the full payment lifecycle including 3D Secure branching
  • "User login and authentication process" — covers credential entry, validation, MFA, and session creation
  • "E-commerce order fulfillment pipeline" — maps order receipt through picking, packing, shipping, and delivery

​
API integration

Call the endpoint directly to embed AI-generated flowchart data in your own applications. 
const response = await fetch('/api/utilities/flowchart-generator', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: 'Stripe payment flow' })
})
const { nodes, edges } = await response.json()
// nodes: ReactFlow Node[]
// edges: ReactFlow Edge[]

​
Response structure

The API returns a JSON object that maps directly to React Flow’s nodes and edges props. Node positions are calculated automatically with 150 px vertical increments. The following is the example output from the Stripe payment flow: 
{
  "nodes": [
    { "id": "start", "type": "start", "data": { "label": "Start" }, "position": { "x": 0, "y": 0 } },
    { "id": "create_intent", "type": "process", "data": { "label": "Create Payment Intent" }, "position": { "x": 0, "y": 150 } },
    { "id": "check_3ds", "type": "decision", "data": { "label": "Is 3D Secure Required?" }, "position": { "x": 0, "y": 300 } },
    { "id": "auth_flow", "type": "process", "data": { "label": "Perform 3DS Auth" }, "position": { "x": 200, "y": 300 } },
    { "id": "capture_payment", "type": "process", "data": { "label": "Capture Payment" }, "position": { "x": 0, "y": 450 } },
    { "id": "end", "type": "end", "data": { "label": "End" }, "position": { "x": 0, "y": 600 } }
  ],
  "edges": [
    { "id": "start-create_intent", "source": "start", "target": "create_intent", "animated": "true" },
    { "id": "create_intent-check_3ds", "source": "create_intent", "target": "check_3ds", "animated": "true" },
    { "id": "check_3ds-capture_payment", "source": "check_3ds", "target": "capture_payment", "label": "no", "animated": "true" },
    { "id": "check_3ds-auth_flow", "source": "check_3ds", "target": "auth_flow", "label": "yes", "animated": "true" },
    { "id": "auth_flow-capture_payment", "source": "auth_flow", "target": "capture_payment", "animated": "true" },
    { "id": "capture_payment-end", "source": "capture_payment", "target": "end", "animated": "true" }
  ]
}

​
Validation & safety

The route’s system prompt instructs Gemini to reject requests that are not a process, workflow, or algorithm — and to refuse unsafe, malicious, illegal, or off-topic input. In those cases the model returns an error JSON such as {"error": "Invalid or unsafe request. Please provide a valid process or workflow to convert into a flowchart."}. If the model output cannot be parsed as valid JSON for any reason, the API responds with HTTP 500 and includes the raw model output under the raw field for debugging.

​
Limitations

  • Non-process requests are rejected. Prompts that are not a workflow, algorithm, or step-by-step process (e.g., asking for a poem or a recipe summary with no logical branching) will be refused by the model with an error response rather than a flowchart.
  • Very complex processes may exceed the token window. Extremely long or deeply nested flows can cause Gemini to truncate output or produce malformed JSON. Break large processes into smaller sub-flows if you run into this issue.
  • Node positions are auto-calculated. Gemini places nodes in a top-to-bottom layout with 150 px vertical spacing and offsets branching nodes horizontally. These positions are starting points — you can drag any node on the canvas to a more readable position after generation.

Build docs developers (and LLMs) love

Get started for freeTalk to us