Flowchart App
FAQ
Frequently Asked Questions
General
What is the Flowchart App?
The Flowchart App is a visual workflow designer within FlowState that allows you to create node-based diagrams. It's built on React Flow (@xyflow/react) and provides specialized node types for database schemas, process flows, AI agent architectures, and custom diagrams.
Who should use this app?
This app is designed for:
| User Type | Use Cases |
|---|---|
| Architects | Design system architectures, data models, and integration patterns |
| Developers | Visualize code structure, API flows, and component relationships |
| Product Managers | Create process flows, user journeys, and decision trees |
| Technical Writers | Document workflows and system interactions |
What makes this different from other diagramming tools?
The Flowchart App is integrated directly into FlowState, providing:
- Specialized nodes purpose-built for software development use cases
- Local-first architecture with offline capability (coming soon)
- Multi-tab editing for working on multiple diagrams simultaneously
- Built-in examples demonstrating common patterns
Features
How do I create a new flowchart?
To create a new flowchart:
- Click the New button in the toolbar, or
- Click Create New Flow from the welcome screen
A new tab will open with an empty canvas ready for editing.
See Getting Started for more details.
How do I add nodes to my diagram?
Nodes are added via the Node Palette on the left side of the editor:
- Locate the Node Palette (left sidebar)
- Click on the desired node type:
- Database Schema (blue, for data models)
- Process Action (green, for workflows)
- LLM Agent (purple, for AI systems)
- Custom (gray, for flexible diagrams)
- The node appears on the canvas
How do I connect nodes?
To create connections between nodes:
- Hover over a node to see its handles (small circles on the edges)
- Click and drag from a source handle (typically on the right)
- Release on a target handle of another node (typically on the left)
- An edge (line) is created connecting the two nodes
Can I work on multiple flowcharts at once?
Yes! The Flowchart App supports up to 10 simultaneous tabs. Each tab is an independent flowchart with its own nodes, edges, and viewport.
To switch between flowcharts, click on the desired tab in the tab bar below the toolbar.
How do I delete a node?
Node deletion is currently in development. As a workaround:
- Select the node
- Move it off-canvas if you want to exclude it visually
- Create a new flowchart without the unwanted nodes
Full delete functionality is coming in a future release.
Can I export my flowchart?
Export functionality is not yet implemented. Current options to preserve your work:
- Take screenshots of your diagrams
- Keep the browser tab open to maintain your session
Export to PNG, SVG, and JSON formats is planned for future releases.
Node Types
What are the different node types for?
| Node Type | Best Used For | Visual Style |
|---|---|---|
| Database Schema | Data models, table definitions, entity relationships | Blue theme, field listing |
| Process Action | Workflows, decision trees, business processes | Green/Yellow/Blue/Red by action type |
| LLM Agent | AI architectures, agent configurations | Purple theme, parameter display |
| Custom | Anything else, flexible key-value pairs | Gray theme, customizable |
Can I create custom node types?
The current release includes four pre-built node types. Custom node type creation through the UI is not yet available, but developers can extend the node types through code modifications.
Account & Access
How do I get access to the Flowchart App?
The Flowchart App is available to all FlowState users with database permissions. If you can access FlowState, you should be able to use the Flowchart App.
What permissions do I need?
You need the following permissions:
- database - Required for future save/load functionality
Contact your FlowState administrator if you're unable to access the app.
Technical
Which browsers are supported?
We support the latest versions of:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Not supported: Internet Explorer
Is my data secure?
The Flowchart App follows FlowState's security model:
- Data is scoped to your organization and workspace
- All communication uses encrypted connections
- Local-first architecture means your data stays on your device by default
Does the app work offline?
Offline support is in development. Currently, the app requires an active connection to FlowState. When RxDB persistence is fully integrated, offline editing will be supported with automatic sync when reconnected.
What is React Flow?
React Flow (@xyflow/react) is the open-source library powering the Flowchart App's canvas. It provides:
- High-performance node rendering
- Built-in pan, zoom, and minimap
- Keyboard navigation support
- Accessibility features
Data & Persistence
Where is my flowchart data stored?
Currently, flowchart data is stored in browser memory during your session. Persistent storage via RxDB is in development.
Can I recover a closed flowchart?
If you close a tab or the browser, the flowchart data is currently lost. Always keep important tabs open until save functionality is released.
Will my data sync across devices?
Multi-device sync is planned as part of the RxDB integration. When available, your flowcharts will sync across all devices where you're logged into FlowState.
Still Have Questions?
If your question isn't answered here:
- Check Troubleshooting for common issues and solutions
- Review Features & Capabilities for detailed functionality documentation
- Explore the built-in example flows to see the app in action