Flowchart Fun

A webapp for generating flowcharts from text @ https://flowchart.fun

Summary

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

Example

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

Development

Prerequisites

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 pnpm start

To run with login features:

pnpm start

To run without login features:

pnpm dev

Translations

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.

Tests

• You can run jest tests with pnpm test
• For E2E tests, start the app with pnpm start and then run pnpm -F app e2e

Analyze the Bundle

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

Release

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

Contributing

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.