Diagram

Open-source projects categorized as Diagram
Edit details
Language: + JavaScript + TypeScript + Python + HTML + PlantUML + Rust + Go + Shell
Topics: Flowchart SVG Uml 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
Sponsored

Top 23 Diagram Open-Source Projects

  • draw.io

    draw.io is a JavaScript, client-side editor for general diagramming.

    • Project mention: Show HN: Open source database diagram editor | news.ycombinator.com | 2024-04-06

    At first I thought this was drawio: https://www.drawio.com/ with which you can generate a schema diagram from SQL. Is this the other way around.

  • diagrams

    :art: Diagram as Code for prototyping cloud system architectures

    • Project mention: Diagrams as Code | news.ycombinator.com | 2024-02-16

  • 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

  • vscode-drawio

    This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

  • 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.

  • 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:

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo

  • C4-PlantUML

    C4-PlantUML combines the benefits of PlantUML and the C4 model for providing a simple way of describing and communicate software architectures

    • Project mention: Documentation as Code for Cloud - C4 Model & Structurizr | dev.to | 2023-11-02

    C4-PlantUML: Export your model as C4-PlantUML diagrams.

  • cloudmapper

    CloudMapper helps you analyze your Amazon Web Services (AWS) environments.

  • vue-chartjs

    📊 Vue.js wrapper for Chart.js

  • 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

  • react-lifecycle-methods-diagram

    Interactive React Lifecycle Methods diagram.

  • svgbobrus

    Convert your ascii diagram scribbles into happy little SVG

    • Project mention: Pikchr: A PIC-like markup language for diagrams in technical documentation | news.ycombinator.com | 2024-01-06

    I recently had to draw some diagrams for documenting something. After looking at various Markdown-friendly options I landed on svgbob[1]. I believe it's a superior solution to these kinds of graph drawing tools for Markdown for one specific reason: the code is still readable. When I go to look at a Markdown file I don't always open the output. I will commonly open up a README file in Vim or just cat it to the terminal. In this case diagrams like those in this post is next to useless. I'm not going to read through some complex drawing definitions and try to visualise the results. With svgbob (or Typograms[2] or any of the other similar options) you can still read the Markdown text document and see the diagrams which is great!

    Of course this comes with a tradeoff, drawing the diagrams can be a bit of a pain. But I believe this can be solved by a good Markdown editor or editor plugin. Alternatively a spec like this could be converted into an svgbob-compatible diagram.

    [1]https://ivanceras.github.io/svgbob-editor/

  • rover

    Interactive Terraform visualization. State and configuration explorer.

    • Project mention: Can Visualising Terraform help in enabling a dry run / readonly modes for Developers planning their Terraform? | /r/Terraform | 2023-06-28

    Rover:

  • vis-network

    :dizzy: Display dynamic, automatically organised, customizable network views.

  • wavedrom

    :ocean: Digital timing diagram rendering engine

    • Project mention: WaveDrom draws your Timing Diagram or Waveform | news.ycombinator.com | 2023-10-23

  • awesome-diagramming

    A curated collection of diagramming tools used by leading software engineering teams

    • Project mention: What diagrams do you use as a software engineer? | news.ycombinator.com | 2023-07-24

  • 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:

  • beautiful-react-diagrams

    💎 A collection of lightweight React components and hooks to build diagrams with ease 💎

  • quiver

    A modern commutative diagram editor for the web.

  • hook-flow

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

  • blast-radius

    Interactive visualizations of Terraform dependency graphs using d3.js

    • Project mention: Top Terraform Tools to Know in 2024 | dev.to | 2024-03-26

    ‍Blast Radius is a tool designed to provide interactive visualizations of Terraform dependency graphs. It's particularly useful for understanding and communicating the architecture and potential impact of changes in Terraform-managed infrastructure.

  • 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
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).

Diagram related posts

Index

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

Project Stars
1 draw.io 38,625
2 diagrams 34,870
3 vscode-drawio 8,970
4 react-diagrams 8,335
5 jsplumb 7,713
6 GoJS, a JavaScript Library for HTML Diagrams 7,423
7 LogicFlow 6,787
8 C4-PlantUML 6,028
9 cloudmapper 5,830
10 vue-chartjs 5,436
11 X6 5,353
12 butterfly 4,158
13 react-lifecycle-methods-diagram 3,832
14 svgbobrus 3,718
15 rover 2,902
16 vis-network 2,835
17 wavedrom 2,768
18 awesome-diagramming 2,689
19 nomnoml 2,628
20 beautiful-react-diagrams 2,626
21 quiver 2,324
22 hook-flow 2,102
23 blast-radius 1,991

Sponsored
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.
www.influxdata.com