SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript Diagram Projects
-
vscode-drawio
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
-
-
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.
-
LogicFlow
A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。
-
-
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.
-
-
grafana-diagram
A Grafana plugin to visualize metrics in a diagram using flow charts, gantt charts, sequence diagrams, or class diagrams
-
text-to-diagram-site
Compare syntax, layouts, outputs between languages for generating diagrams with text.
-
-
-
-
nebulagraph-veditor
A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.
-
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09
Project mention: Replace bpmn-js and Let Frontend Developers Become More Familiar with Workflow Business In 2023🔥🔥🔥 | dev.to | 2023-08-07Since 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:
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:
Website: react-flow-chart GitHub page
Project mention: Ask HN: Guidelines for making clear architecture diagrams | news.ycombinator.com | 2024-05-01As far as guidelines, I have spent time looking as well an never came away with a good answer. One useful website for comparing some of the best tools is https://text-to-diagram.com/. My personal favorite is D2. Still lacking a few layout features that I want, but it gets me 90% of the way there. The syntax is great for projects big to small, and it strikes the perfect balance between "create a diagram fast" and "feature rich". But in terms of actual guidelines, I would agree with another user that C4 actually tries to lay out some sort of guidelines.
Creating the Halogen components would be simple enough if one takes inspiration from gojs-react. The issue is that there are no PureScript bindings for the GoJS types themselves, but GoJS does provide .ts.d declarations, which means I could use purescript-read-dts, but that library's maturity/usability seems somewhat ambiguous, according to an author's post from 3 years ago.
Project mention: Release Radar · April 2024 Edition: Major updates from the open source community | dev.to | 2024-05-03Flexibility and ease of use is important in the software development lifecycle. That's why Podlite was built; a lightweight block-oriented markup language designed for simplicity. It's a universal markup language, not bound by any specific domain, programming language, or concept. Podlite is the type of language that's perfect for documentation, educational materials, or blogging. Congrats to the team on shipping your first major version 🥳.
GitHub - github.com/rhinobase/fibr Docs - fibr.rhinobase.io
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 related posts
-
TSDiagram – Make Diagrams with TypeScript
-
TSDiagram - Diagrams as code with TypeScript
-
Show HN: TSDiagram – Diagrams as Code with TypeScript
-
Show HN: TSDiagram – Diagrams as Code with TypeScript
-
Nomnoml
-
Is there a tool to visualize related stories, tasks, bugs, etc?
-
VS Code Extension to map code flow output as a diagram
-
A note from our sponsor - SaaSHub
www.saashub.com | 1 Jun 2024
Index
What are some of the best open-source Diagram projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | vscode-drawio | 8,996 |
| 2 | react-diagrams | 8,400 |
| 3 | LogicFlow | 6,970 |
| 4 | vue-chartjs | 5,464 |
| 5 | X6 | 5,431 |
| 6 | react-lifecycle-methods-diagram | 3,845 |
| 7 | nomnoml | 2,649 |
| 8 | react-flow-chart | 1,424 |
| 9 | pintora | 1,023 |
| 10 | maxGraph | 734 |
| 11 | erd-editor | 721 |
| 12 | grafana-diagram | 429 |
| 13 | text-to-diagram-site | 393 |
| 14 | tsdiagram | 386 |
| 15 | gojs-react | 240 |
| 16 | flowgpt | 250 |
| 17 | d2-vscode | 199 |
| 18 | specfy | 125 |
| 19 | nebulagraph-veditor | 80 |
| 20 | podlite-desktop | 57 |
| 21 | flowchart-react | 40 |
| 22 | Code-Flow-Extension | 18 |
| 23 | fibr | 5 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com