Workflow: Creating a Flowchart

Overview

This guide walks you through creating a complete flowchart from scratch, including adding nodes, connecting them, and organizing your diagram.

Time Required: 5-10 minutes Skill Level: Beginner

Prerequisites

• Access to the Flowchart App
• A modern web browser
• Basic understanding of the diagram you want to create

Steps

Step 1: Create a New Flow

Start by creating a new flowchart canvas.

1. Click the New button in the toolbar (plus icon), or
2. If you see the welcome screen, click Create New Flow
3. A new tab opens with an empty canvas

Tip: The tab bar shows your open flowcharts. You can have up to 10 tabs open simultaneously.

Step 2: Choose Your Node Types

Before adding nodes, decide which node types fit your diagram:

Step 3: Add Your First Node

Add the starting point of your flowchart.

1. Locate the Node Palette on the left side of the editor
2. Identify the node type you need:
   • Database (blue): For database tables
   • Process (green): For workflow steps
   • Agent (purple): For AI components
   • Custom (gray): For anything else
3. Click on the desired node type
4. The node appears in the center of your canvas

Step 4: Position Your Nodes

Arrange nodes to create a clear visual flow.

1. Click and hold on a node to select it
2. Drag the node to your desired position
3. Release to place the node
4. Repeat for additional nodes

Layout Tips:

Best Practice Layouts:

Left-to-Right (for processes):
[Start] --> [Step 1] --> [Step 2] --> [End]

Top-to-Bottom (for hierarchies):
       [Parent]
      /        \
 [Child 1]  [Child 2]

Radial (for relationships):
        [Node 1]
           |
[Node 4]--[Center]--[Node 2]
           |
        [Node 3]

Step 5: Connect Nodes with Edges

Create relationships between nodes by drawing edges.

1. Hover over a node to reveal its handles (small circles on the edges)
2. Click and hold on a source handle (typically on the right side)
3. Drag the connection line toward another node
4. Release on the target handle of the destination node (typically on the left side)
5. An edge (arrow/line) now connects the two nodes

Connection Rules:

• Edges flow from source (right) to target (left) by convention
• Nodes can have multiple incoming and outgoing connections
• Self-loops (connecting a node to itself) are not supported

Step 6: Add More Nodes

Expand your diagram by adding additional nodes.

1. Return to the Node Palette
2. Click on the next node type you need
3. Position the new node appropriately
4. Connect it to existing nodes as needed
5. Repeat until your diagram is complete

Example: Building a Data Flow

Step-by-step progression:

1. Add Database node "Users"
2. Add Database node "Orders"
3. Connect Users --> Orders (foreign key)
4. Add Database node "Products"
5. Connect Products --> Orders (foreign key)
6. Add Process node "Order Processing"
7. Connect Orders --> Order Processing

Step 7: Navigate Large Diagrams

Use the canvas controls to work with larger flowcharts.

Navigation Controls:

The minimap in the bottom-right corner provides an overview of your entire diagram. The highlighted rectangle shows your current viewport.

Step 8: Organize and Review

Final steps to clean up your flowchart.

1. Align nodes by dragging them into visual alignment
2. Space evenly to improve readability
3. Check connections to ensure all relationships are represented
4. Zoom to fit to see the complete diagram

Review Checklist:

• [ ] All entities are represented as nodes
• [ ] All relationships are shown as edges
• [ ] Layout flows logically (left-to-right or top-to-bottom)
• [ ] Node types are appropriate for the content
• [ ] Diagram is not overcrowded

Expected Results

After completing this workflow, you should have:

• A new tab containing your flowchart
• Multiple nodes positioned on the canvas
• Edges connecting related nodes
• A clear visual representation of your concept

Troubleshooting

Issue: Node doesn't appear when clicked

Solution: Ensure you have an active tab. If the toolbar buttons are grayed out, create a new flow first.

Issue: Cannot connect two nodes

Solution: Make sure you're dragging from a source handle (right side) to a target handle (left side). Also verify you're not in example view mode (read-only).

Issue: Canvas feels cramped

Solution: Use zoom out (scroll wheel down) to see more of your diagram, or use the minimap to navigate.

Issue: Accidentally created wrong node type

Solution: Node editing and deletion are coming in future releases. For now, create the correct node type and position it over the incorrect one, or start a new flowchart.

Tips for Effective Flowcharts

1. Start with the main entities - Add the key nodes first, then supporting elements
2. Use consistent flow direction - Pick left-to-right or top-to-bottom and stick with it
3. Group related nodes - Keep related elements close together
4. Minimize crossing edges - Reposition nodes to reduce visual clutter
5. Use appropriate node types - Match node types to the data they represent

Related Workflows

• Getting Started - Initial app setup and overview
• Features & Capabilities - Complete feature documentation