Flow

Warning This project is still in heavy development and is not ready for production use, expect data loss and breaking changes

Note This is a complete rewrite using pluv.io as the backend. The old version can be found here

Collaborate with your teammates and get started on projects right away, in real-time.

Flow is a web application that allows you to create, edit and share flowcharts. It is completely free and open-source.

You can use it to create flowcharts for your projects, plan your next vacation or even to create a mind map.

Live demo: flow.cstef.dev

• Node.js (v18.0.0 or higher)
• pnpm (v8.0.0 or higher)

1. Clone the repository

git clone https://github.com/cestef/flow.git
cd flow

2. Install dependencies

pnpm install

3. Register a new OAuth app on GitHub and set the callback URL to http://localhost:3000/api/auth/callback/github

4. Register a new OAuth app on Discord and set the callback URL to http://localhost:3000/api/auth/callback/discord

5. Create a .env file based on the .env.example in the root directory or copy the following:

# Github
GITHUB_ID="github-id"
GITHUB_SECRET="github-secret"

# Discord
DISCORD_CLIENT_ID="discord-client-id"
DISCORD_CLIENT_SECRET="discord-client-secret"

# next-auth
NEXTAUTH_URL="http://localhost:3000/api/auth" 
NEXTAUTH_SECRET="smash-the-keyboard-here"

# Pluv
PLUV_SECRET="smash-the-keyboard-again-here"
PLUV_WS_URL="ws://localhost:3001/api/pluv"
PLUV_AUTH_URL="http://localhost:3000/api/pluv/authorize" # The URL that the frontend requests
PLUV_INTERNAL_AUTH_URL="http://localhost:3001/api/pluv/authorize" # The URL that the backend requests when the request is proxied via NextJS's API

# Misc
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/flow"
APP_URL="http://localhost:3000"

# Optional - only needed for Umami analytics
UMAMI_WEBSITE_ID="get-this-from-umami"

6. Start the development server

pnpm dev

You can now access the app at localhost:3000

• Docker

You can use the provided docker-compose.yml file to run the app in production mode. It will automatically start a PostgreSQL database, a Next.js server and a WebSocket server.

An image is automatically built and pushed to the GitHub Container Registry on every version tag.

Follow Running Locally steps 1, 3, 4 and 5 to set up the OAuth apps and .env file.

and run the following command to start the app

docker-compose up

Note You can also start the app in detached mode with -d

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

If you need help with anything related to the project, feel free to join the Discord server and ask in the #support channel.

This project is licensed under the MIT License.

• Next.js - React framework
• tRPC - End-to-end typesafe API client and server
• Prisma - Database ORM
• next-auth - Authentication
• react-flow - React component for building node-based editors