Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more. Learn more →
Top 18 TypeScript Diagram Projects
-
Project mention: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text | news.ycombinator.com | 2025-05-21
-
SurveyJS
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
-
mermaid
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Project mention: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text | news.ycombinator.com | 2025-05-21I don't see the infrastructure for that, rather it seems to be relying on d3 and DAG renderers targeting it https://github.com/mermaid-js/mermaid/blob/mermaid%4011.6.0/...
-
jsoncrack.com
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.
*JSONCrack * – Visualize JSON Like a Pro https://jsoncrack.com
-
-
Semi, aside, but I'm desperate for a better way to make math diagrams (WYSIWYG style, not TeX). I asked about this a while ago and nothing is really doing it for me: https://news.ycombinator.com/item?id=38351370. Although since then I have heard about https://penrose.cs.cmu.edu/ as well. Right now I use Excalidraw because there's a fork (never landed... ugh) which supports TeX in labels. But its actual drawing tools are quite limited, not to mention janky. There are some other options not mentioned in that thread which I've found in since then, but I still haven't seen anything satisfactory.
If you made math stuff easy to draw I'd use your tool in a heartbeat.
-
HedgeDoc is an open-source collaborative markdown editor that allows real-time collaboration, similar to Google Docs but with markdown support. The project has been online since 2016 (originally called CodiMD) and has gathered significant attention from developers looking for self-hosted, privacy-focused document collaboration. With over 6,000 GitHub stars and contributions from 163 developers, HedgeDoc has established itself as a popular choice for collaborative note-taking and documentation.
-
-
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.
-
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: Create Architecture Diagrams in Seconds with the Amazon Q Developer CLI Agent! | dev.to | 2025-05-23
The resulting diagram that Amazon Q Developer created can be viewed by pasting the resulting code into the Mermaid Live Editor.
-
reaflow
🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
-
-
gg
The diagramming tool for flowcharts, mindmaps, user flows, network & cloud diagrams, and more! (by jodigiordano)
Project mention: Show HN: Create diagrams of complex data flows in software systems | news.ycombinator.com | 2024-07-26Try cleaning your browser local storage for https://gg-charts.com.
There is currently a bug in the app that let someone inject a JS snippet to execute (to confirm) in the URL "file" property. The app then save the content of that "file" property in the local storage, so every time you open https://gg-charts.com, it loads this data from local storage and re-execute the JS snippet.
I'll fix that today, sorry for the inconvenience. :-/ The web is the far west!
-
likec4
Visualize, collaborate, and evolve the software architecture with always actual and live diagrams from your code
Project mention: Common Mistakes in Architecture Diagrams (2020) | news.ycombinator.com | 2025-02-10There is some interesting new working the C4 space at https://likec4.dev/
This is a less prescriptive model than structurizr but keeps the goals of C4
-
text-to-diagram-site
Compare syntax, layouts, outputs between languages for generating diagrams with text.
text-to-diagram
-
-
-
d2-obsidian
The official D2 plugin for Obsidian. D2 is a modern diagram scripting language thats turns text to diagrams.
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
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 Diagrams discussion
TypeScript Diagrams related posts
-
Create Architecture Diagrams in Seconds with the Amazon Q Developer CLI Agent!
-
Excalidraw
-
Spain and Portugal Without Energy
-
Unlock Six-Figure Salaries: Top 20 DevOps Skills You Need in 2025
-
Mastering Mermaid: A Comprehensive Cheat Sheet
-
New to wireframing
-
Owning my own data, part 1: Integrating a self-hosted calendar solution
-
A note from our sponsor - SurveyJS
surveyjs.io | 24 May 2025
Index
What are some of the best open-source Diagram projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | excalidraw | 99,987 |
| 2 | mermaid | 79,373 |
| 3 | jsoncrack.com | 37,640 |
| 4 | react-diagrams | 8,935 |
| 5 | penrose | 7,737 |
| 6 | HedgeDoc | 6,029 |
| 7 | vue-chartjs | 5,650 |
| 8 | vue-flow | 5,109 |
| 9 | Mermaid | 5,010 |
| 10 | reaflow | 2,315 |
| 11 | react-flow-chart | 1,513 |
| 12 | gg | 695 |
| 13 | likec4 | 519 |
| 14 | text-to-diagram-site | 503 |
| 15 | tsdiagram | 459 |
| 16 | d2-vscode | 270 |
| 17 | d2-obsidian | 242 |
| 18 | fibr | 12 |
Sponsored
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor
Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
surveyjs.io