Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Flowchart Fun

A webapp for generating flowcharts from text @

screenshot of Flowchart Fun


Flowchart Fun is a webapp for generating flowcharts from text built with React and cytoscape.js.


Node A
  goes to: Node B
  and: Node C
    goes back to: (Node A)

example flowchart



Premium features including auth, hosted charts and permalinks are built using integrations with Vercel Functions, Supabase, Stripe and Sendgrid so you will need accounts with each of those services.

Getting Started

  1. Clone the repository
  2. Copy .env.example to .env and add env variables
  3. pnpm install and vercel dev

To run with login features:

vercel dev

To run without login features:

pnpm dev


Flowchart Fun uses Lingui for translations. These are the steps to follow:

  1. All text that should be translated should be wrapped in <Trans> component or t` template string. These are imported from @lingui/macro.
  2. Strings are extracted with pnpm -F app extract. Then translations can be added to .po files in /app/src/locales/[language]/messages.po
  3. When all translations are added, run pnpm -F app compile.


Unit Tests

  • You can run jest tests with pnpm test

E2E Tests

We use playwright for e2e tests. Playwright is always installed on the system so you need to globally install it at the correct version: 1.27.1. You can find the version in the github e2e workflow file.

  1. Make sure playwright version 1.27.1 is installed globally
  2. Start the app with vercel dev and then run pnpm -F app e2e (or for pnpm -F app e2e:debug debugging)

Analyze the Bundle

pnpm -F app build && pnpm -F app analyze


  1. Branch from dev to develop a feature
  2. Squash and merge the feature branch into dev
  3. (Repeat until happy)
  4. Update version in /app/package.json and commit directly to dev. Push.
  5. Open PR from dev to main
  6. Merge (do not squash!) PR and a new github release will be created


We always welcome contributions! Before opening a pull request with a new feature, consider opening an issue or discussion to gauge support and/or confirm your implementation.