Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure. Learn more →
Top 23 TypeScript Diagram Projects
-
-
SurveyJS
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.
-
LogicFlow
A flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。
-
vscode-drawio
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
-
-
-
-
References: 1.https://www.javatpoint.com/react-component-life-cycle 2.https://www.geeksforgeeks.org/reactjs-lifecycle-components/ 3.https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm 4.https://react.dev/reference/react/Component 5.https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
-
Stream
Stream - Scalable APIs for Chat, Feeds, Moderation, & Video. Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.
-
-
-
-
Project mention: Mindmap Generator: How to Draw SVG-Based Graphs with AI-Generated Text and Images Using the Agent Approach | dev.to | 2025-01-25
Libraries for generating mindmaps from tree-structured text, such as Mermaid and Pintora, are well-known. However, Mermaid does not work on Node.js, and Pintora, which uses native code, is difficult to run as a serverless function. Therefore, I had to write a Web API from scratch to generate SVG diagrams of mindmaps from text.
-
-
maxGraph is a TypeScript library which can display and allow interaction with vector diagrams.
-
text-to-diagram-site
Compare syntax, layouts, outputs between languages for generating diagrams with text.
text-to-diagram
-
-
grafana-diagram
A Grafana plugin to visualize metrics in a diagram using flow charts, gantt charts, sequence diagrams, or class diagrams
-
-
-
-
-
gantt
Svelte Gantt chart component – lightweight, customizable, interactive, and fast. (by svar-widgets)
-
nebulagraph-veditor
A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.
-
-
InfluxDB
InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
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).
TypeScript Diagram discussion
TypeScript Diagram related posts
-
How to build a reliable web application with Elm, GraphQL, PostGraphile and PostgreSQL
-
Owning my own data, part 1: Integrating a self-hosted calendar solution
-
Looking Ahead: maxGraph in 2025
-
[Practical] Create a Dynamic Infographic in 10 Minutes
-
Mindmap Generator: How to Draw SVG-Based Graphs with AI-Generated Text and Images Using the Agent Approach
-
"Performance Has Improved!" Can You Really Prove It?
-
Portfolio of a 4-Year Frontend Developer
-
A note from our sponsor - Stream
getstream.io | 11 Jul 2025
Index
What are some of the best open-source Diagram projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | tldraw | 40,698 |
| 2 | LogicFlow | 10,071 |
| 3 | vscode-drawio | 9,282 |
| 4 | react-diagrams | 8,978 |
| 5 | X6 | 6,096 |
| 6 | vue-chartjs | 5,659 |
| 7 | react-lifecycle-methods-diagram | 3,927 |
| 8 | nomnoml | 2,777 |
| 9 | react-flow-chart | 1,526 |
| 10 | dgmjs | 1,308 |
| 11 | pintora | 1,164 |
| 12 | erd-editor | 1,094 |
| 13 | maxGraph | 994 |
| 14 | text-to-diagram-site | 511 |
| 15 | tsdiagram | 460 |
| 16 | grafana-diagram | 456 |
| 17 | flowgpt | 296 |
| 18 | d2-vscode | 275 |
| 19 | gojs-react | 243 |
| 20 | vscode-mermaid-preview | 178 |
| 21 | gantt | 146 |
| 22 | nebulagraph-veditor | 86 |
| 23 | flowchart-react | 45 |
Sponsored
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor
Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.
surveyjs.io