https://github.com/sandeepbalachandran/workflow-visualizer

Free and open source customizable workflow visualizer
https://github.com/sandeepbalachandran/workflow-visualizer

css javascript nextjs reactjs styled-components tailwindcss typescript workflow-management

Last synced: 11 months ago
JSON representation

Free and open source customizable workflow visualizer

• Host: GitHub
• URL: https://github.com/sandeepbalachandran/workflow-visualizer
• Owner: SandeepBalachandran
• Created: 2022-07-26T19:06:45.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-08-08T17:13:38.000Z (almost 3 years ago)
• Last Synced: 2025-06-11T02:50:53.866Z (about 1 year ago)
• Topics: css, javascript, nextjs, reactjs, styled-components, tailwindcss, typescript, workflow-management
• Language: TypeScript
• Homepage: https://workflow-visualizer.vercel.app
• Size: 22.4 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          


Workflow Visualizer


### Free and open source customizable workflow visualizer



[![](https://img.shields.io/github/stars/SandeepBalachandran/workflow-visualizer?style=for-the-badge)](#stars)

[![](https://img.shields.io/github/forks/SandeepBalachandran/workflow-visualizer?style=for-the-badge)](#forks)

[![Workflow Visualizer - Create your workflow | Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=407405&theme=light)](https://www.producthunt.com/posts/workflow-visualizer?utm_source=badge-featured&utm_medium=badge&utm_source=badge-workflow-visualizer)

👉   [Workflow Visualizer](https://workflow-visualizer.vercel.app/)  👈



### Technologies

- [React - 18.2](https://reactjs.org/)

- [Next JS](https://nextjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [React Flow](https://reactflow.dev/)

- [Zustand](https://github.com/pmndrs/zustand)

- [React Icons](https://react-icons.github.io/react-icons/)

- [Tailwindcss](https://tailwindcss.com/)

- [Styled Components](https://styled-components.com/)

- [Eslint](https://eslint.org/)

### For development

- `git clone https://github.com/SandeepBalachandran/workflow-visualizer.git`

- `npm i`

- `npm run dev`

### Node details

| Node Type     | Purpose                      | Handles                       |

| ------------- | ---------------------------- | ----------------------------- |

| Start Node    | Denote start of the workflow | 2 source handles              |

| Process Node  | Denote steps in the workflow | 2 source and 2 target handles |

| Decision Node | Denotes Conditions           | 2 source and 2 target handles |

| End Node      | Denote end of the workflow   | 2 target handles              |

## Help Improve

Found a bug or an issue with this? [Open a new issue](https://github.com/SandeepBalachandran/workflow-visualizer/issues) here on GitHub.

## Contribute

Please check the [**Contributing Guidelines**](https://github.com/SandeepBalachandran/workflow-visualizer/blob/master/CONTRIBUTING.md) before contributing.

### Please consider staring the repository before you move on . That means a lot to me.

![](https://visitor-badge.glitch.me/badge?page_id=workflow-visualizer)