SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript Diagram Projects
-
Project mention: Your Architecture Diagram Is a Screenshot. Your AI Agent Can't Read It. | dev.to | 2026-05-31
The format idea costs you nothing to adopt today: export from excalidraw.com with "Embed scene" on, commit the .excalidraw.png, reference it as a normal image. It renders everywhere and stays editable.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
mermaid
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
In milestones 3 and 4 I implemented the React whiteboard (Excalidraw) and the Svelte Mermaid diagram each as a remote. For both I proceeded the same way: first the standalone app, then placed the federation configuration on top. That way I could develop and test Excalidraw or the Mermaid diagram in isolation before the remote was integrated into the shell. The same UI project (react, svelte) continues to run under its own port as a standalone app and can at the same time be loaded by the host as a remote — for the federation loading, however, the built JavaScript chunks plus remoteEntry.json as static assets are sufficient, a running dev server is not necessary (only for the standalone test).
-
jsoncrack.com
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML and CSV into interactive graphs.
Copy this JSON and paste it into jsoncrack.com or any JSON tree visualizer. You'll see your AST as an interactive tree diagram. Click around. Explore the structure. See how factorial(n - 1) is represented. See how the if-expression contains three sub-expressions. Every node, every connection - it's all there.
-
-
-
Project mention: HedgeDoc – self-hosted real-time collaborative Markdown notes | news.ycombinator.com | 2025-11-03
-
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: Reverse Engineer Any Database into dbdiagram.io, PlantUML, Mermaid, or QuickDBD - Then Keep Designing | dev.to | 2026-05-30
Mermaid for GitHub, GitLab, Notion, and the Mermaid Live Editor
-
-
likec4
Visualize, collaborate, and evolve the software architecture with always actual and live diagrams from your code
Project mention: Stop Drawing, Start Coding: Modern AWS Architecture with LikeC4 | dev.to | 2025-12-17As a software architect working extensively with AWS and complex distributed systems, I have found that certain tools dramatically improve documentation efficiency. This is my opinionated list of the core advantages that make LikeC4 the preferred choice for C4 modeling.
-
-
gg
The diagramming tool for flowcharts, mindmaps, user flows, network & cloud diagrams, and more! (by jodigiordano)
-
CodeVisualizer
CodeVisualizer is a powerful VS Code extension that provides two main visualization capabilities: function-level flowcharts for understanding code control flow, and codebase-level dependency graphs for analyzing project structure and module relationships.
Project mention: Show HN: VS Code extension to visualize code and dependencies | news.ycombinator.com | 2025-11-10 -
-
text-to-diagram-site
Compare syntax, layouts, outputs between languages for generating diagrams with text.
Project mention: D2 (text to diagram tool) now supports ASCII renders | news.ycombinator.com | 2025-08-19Thank you, made an issue: https://github.com/terrastruct/text-to-diagram-site/issues/6...
-
realworld-design-patterns
Design Patterns with real world examples in TypeScript, practical diagrams and unit tests ✅
Firstly, finding a project under hacktoberfest topic can be overwhelming, but somehow i found this design pattern repository. So i found the issue about the Memento pattern and made a Pull Request. I did get learning experiences that i was not expecting.
-
-
d2-obsidian
The official D2 plugin for Obsidian. D2 is a modern diagram scripting language thats turns text to diagrams.
-
-
AsciiCanvas
The native visual interface for LLMs. Infinite canvas, multi-byte support, copy-pasteable architecture. Build diagrams AI can actually read.
-
scryer
Visual architecture modeling for AI agents. Edit C4 diagrams in a drag-and-drop editor. AI reads, modifies, and implements the same model through built-in MCP server.
Project mention: Show HN: Scryer – Visual architecture modeling for AI agents | news.ycombinator.com | 2026-03-16 -
overflow-ui
Open-source collection of ready-to-use UI components for building node-based user interfaces with React Flow.
Project mention: Overflow: React Flow component library for user-friendly diagrams and flows | news.ycombinator.com | 2026-01-13 -
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
-
Your Architecture Diagram Is a Screenshot. Your AI Agent Can't Read It.
-
Reverse Engineer Any Database into dbdiagram.io, PlantUML, Mermaid, or QuickDBD - Then Keep Designing
-
What 10 University Visits in Cameroon Taught Me About Building AI for the Real World, and Why Gemma 4 Was the Answer
-
Frankenstein Meeting Room: Three Apps in One Browser Tab
-
The SDK You Pick Matters More Than the Model — A 13-LLM Benchmark on the Same Agentic Task
-
Martin Fowler: Technical, Cognitive, and Intent Debt
-
Setting Up a GCP Landing Zone for Organizations with Strict Regulatory Requirements
-
A note from our sponsor - SaaSHub
www.saashub.com | 8 Jun 2026
Index
What are some of the best open-source Diagram projects in TypeScript? This list will help you:
| # | Project | Stars |
|---|---|---|
| 1 | excalidraw | 124,606 |
| 2 | mermaid | 88,430 |
| 3 | jsoncrack.com | 44,080 |
| 4 | react-diagrams | 9,401 |
| 5 | penrose | 7,945 |
| 6 | HedgeDoc | 7,212 |
| 7 | vue-flow | 6,638 |
| 8 | Mermaid | 6,579 |
| 9 | vue-chartjs | 5,719 |
| 10 | likec4 | 3,377 |
| 11 | react-flow-chart | 1,551 |
| 12 | gg | 700 |
| 13 | CodeVisualizer | 589 |
| 14 | tsdiagram | 570 |
| 15 | text-to-diagram-site | 546 |
| 16 | realworld-design-patterns | 317 |
| 17 | d2-vscode | 312 |
| 18 | d2-obsidian | 303 |
| 19 | vscode-mermaid-preview | 233 |
| 20 | AsciiCanvas | 232 |
| 21 | scryer | 63 |
| 22 | overflow-ui | 48 |
| 23 | fibr | 14 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com