Flowchart

Open-source projects categorized as Flowchart
Edit details
Language: + TypeScript + JavaScript + HTML + Shell
Topics: Diagram JavaScript TypeScript Diagrams Graph
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured

Top 23 Flowchart Open-Source Projects

  • mermaid

    Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

    • Project mention: AsciidocFX: The Asciidoc Editor for documentation and authoring | dev.to | 2024-05-02

    Mermaid Diagram - Create diagrams using text and code

  • xyflow

    React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.

    • Project mention: Svelte Flow – a library for rendering interactive node-based UIs | dev.to | 2023-11-06

    We are the xyflow team*, the creators of React Flow and Svelte Flow. We've been maintaining the React Flow library and its ecosystem since 2019. Earlier this year we were inspired by the Svelte community, and created a prototype of what our tool could look like if it was built in Svelte. This lead to us abstracting the core of React Flow to vanilla js and porting the library to Svelte, improving the performance of both libraries along the way.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • editor.md

    The open source embeddable online markdown editor (component).

  • flowy

    The minimal javascript library to create flowcharts ✨

  • react-diagrams

    a super simple, no-nonsense diagramming library written in react that just works

    • Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09

  • jsplumb

    Visual connectivity for webapps

    • Project mention: How to make beautiful flowchart with Angular ? | /r/Frontend | 2023-07-27

    ❔jsPlumb - Seems like JointJS

  • GoJS, a JavaScript Library for HTML Diagrams

    JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

    • Project mention: Burning money on paid ads for a dev tool – what we've learned | news.ycombinator.com | 2023-09-29

    Have spent six figures yearly on ads, mostly for reach for the developer-focused diagram library GoJS (https://gojs.net)

    > Each experiment will need ~$500 and 2 weeks

    I would add a zero if you want serious data. I would also double the timescale. $5,000 over 4 weeks

    I second the uselessness of Google Display, it might look like conversions numbers are good but they are 100% too good to be true. As soon as you look into them you find the sources are things like "ad from HappyFunBabyTime Android app". You have to ruthlessly prune daily for months to get anything real, and even then I'm skeptical of value. For a developer tool with very strict conversion metrics!

    But I disagree on Google Search:

    > Good for conversion, bad for awareness.

    Before we were popular it was excellent for awareness. Post popularity its much more arguable.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo

  • js-code-to-svg-flowchart

    js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.

    • Project mention: JS2flowchart – convert any JavaScript code into beautiful SVG flowchart | news.ycombinator.com | 2023-05-12

  • LogicFlow

    A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。

    • Project mention: Replace bpmn-js and Let Frontend Developers Become More Familiar with Workflow Business In 2023🔥🔥🔥 | dev.to | 2023-08-07

    Since we are going to replace bpmn-js, we need to find a flowchart editing tool that offers better support for customization and higher maintainability. After searching online, we chose LogicFlow for the following reasons:

  • X6

    🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

  • butterfly

    🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)

    • Project mention: FLaNK AI Weekly 25 March 2025 | dev.to | 2024-03-25

  • Drawflow

    Simple flow library 🖥️🖱️

    • Project mention: How to make beautiful flowchart with Angular ? | /r/Frontend | 2023-07-27

    ❌📄Drawflow - Seems nice, but no docs, and last commit was a year ago

  • wireflow

    Wireflow - user flow chart real-time collaborative tool

    • Project mention: Wireflow – free, online, open source tool for creating user-flow prototypes | news.ycombinator.com | 2023-12-20

    At first glance, this looks great but is it being maintained? Their main branch on GitHub hasn't been updated in years: https://github.com/vanila-io/wireflow

  • imove

    INACTIVE: Move your mouse, generate code from flow chart

  • flowchart-fun

    Easily generate flowcharts and diagrams from text ⿻

    • Project mention: Ask HN: Anyone use a code to mindmap/flowchart tool? | news.ycombinator.com | 2024-02-24

    https://flowchart.fun recently helped a lot with a project.

  • vue-flow

    A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.

    • Project mention: Show HN: Svelte Flow – a library for creating node-based UIs | news.ycombinator.com | 2023-11-09

  • nomnoml

    The sassy UML diagram renderer

    • Project mention: ChatCraft Adventures #10 | dev.to | 2024-03-22

    To support nomnoml rendering, I am using the skanaar/nomnoml library. However, my feature is not perfect. For one, sometimes the LLM can return bad nomnoml syntax (at least when using GPT-3.5). Other times, the nomnoml render does not fit within the React Card:

  • hook-flow

    A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf

  • reaflow

    🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.

    • Project mention: reaflow VS rete - a user suggested alternative | libhunt.com/r/reaflow | 2023-06-09

  • react-flow-chart

    🌊 A flexible, stateless, declarative flow chart library for react.

    • Project mention: The top 11 React chart libraries for data visualization | dev.to | 2023-10-05

    Website: react-flow-chart GitHub page

  • X-Flowchart-Vue

    基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.

  • grafana-flowcharting

    Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io

  • sequential-workflow-designer

    Customizable no-code component for building flow-based programming applications. 0 external dependencies.

    • Project mention: Show HN: New visual language for teaching kids to code | news.ycombinator.com | 2023-11-21

    For example https://github.com/nocode-js/sequential-workflow-designer is designed in this way, that you program some logic by setting predefined actions in a proper order. You program at the high level.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

Flowchart related posts

  • Creating Animated Diagrams for LinkedIn

    3 projects | dev.to | 22 Apr 2024

  • ChatCraft Adventures #13, UI Changes

    3 projects | dev.to | 12 Apr 2024

  • Building a Mermaid.js Gantt Chart in a FileMaker Web Viewer

    1 project | dev.to | 8 Apr 2024

  • ChatCraft Adventures #10

    3 projects | dev.to | 22 Mar 2024

  • Ask HN: Anyone use a code to mindmap/flowchart tool?

    14 projects | news.ycombinator.com | 24 Feb 2024

  • Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

    1 project | news.ycombinator.com | 16 Feb 2024

  • Mermaid: Diagramming and Charting Tool

    1 project | news.ycombinator.com | 4 Jan 2024
  • A note from our sponsor - SaaSHub
    www.saashub.com | 3 May 2024
    SaaSHub helps you find the best software and product alternatives Learn more →

Index

What are some of the best open-source Flowchart projects? This list will help you:

Project Stars
1 mermaid 67,034
2 xyflow 21,182
3 editor.md 13,571
4 flowy 10,962
5 react-diagrams 8,344
6 jsplumb 7,713
7 GoJS, a JavaScript Library for HTML Diagrams 7,439
8 js-code-to-svg-flowchart 7,002
9 LogicFlow 6,832
10 X6 5,381
11 butterfly 4,174
12 Drawflow 4,160
13 wireflow 3,852
14 imove 3,749
15 flowchart-fun 3,005
16 vue-flow 2,925
17 nomnoml 2,635
18 hook-flow 2,102
19 reaflow 1,931
20 react-flow-chart 1,424
21 X-Flowchart-Vue 1,335
22 grafana-flowcharting 934
23 sequential-workflow-designer 880

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com