TypeScript Diagrams

Open-source TypeScript projects categorized as Diagrams

Top 18 TypeScript Diagram Projects

  1. excalidraw

    Virtual whiteboard for sketching hand-drawn like diagrams

    Project mention: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text | news.ycombinator.com | 2025-05-21
  2. 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.

    SurveyJS logo
  3. 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-21

    I 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/...

  4. jsoncrack.com

    ✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.

    Project mention: "10 Free Tools Every Developer Should Bookmark in 2025" | dev.to | 2025-05-16

    *JSONCrack * – Visualize JSON Like a Pro https://jsoncrack.com

  5. react-diagrams

    a super simple, no-nonsense diagramming library written in react that just works

  6. penrose

    Create beautiful diagrams just by typing notation in plain text.

    Project mention: Ask HN: What do you use to create diagrams? | news.ycombinator.com | 2025-03-12

    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.

  7. HedgeDoc

    HedgeDoc - Ideas grow better together

    Project mention: Project of the Week: HedgeDoc 🦔 | dev.to | 2025-05-16

    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.

  8. vue-chartjs

    📊 Vue.js wrapper for Chart.js

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

    InfluxDB logo
  10. 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.

  11. Mermaid

    Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

    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.

  12. reaflow

    🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.

  13. react-flow-chart

    🌊 A flexible, stateless, declarative flow chart library for react.

  14. 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-26

    Try 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!

  15. 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-10

    There 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

  16. text-to-diagram-site

    Compare syntax, layouts, outputs between languages for generating diagrams with text.

    Project mention: 021期--社交媒体儿童禁令 & 打造个人ip - FAV0周刊#021 | dev.to | 2024-11-10

    text-to-diagram

  17. tsdiagram

    Create diagrams and plan your code with TypeScript.

  18. d2-vscode

    VSCode extension for D2 files.

  19. d2-obsidian

    The official D2 plugin for Obsidian. D2 is a modern diagram scripting language thats turns text to diagrams.

  20. fibr

    Low Code Editor (by rhinobase)

  21. SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

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

TypeScript Diagrams discussion

Log in or Post with

TypeScript Diagrams related posts

  • Create Architecture Diagrams in Seconds with the Amazon Q Developer CLI Agent!

    2 projects | dev.to | 23 May 2025
  • Excalidraw

    1 project | news.ycombinator.com | 20 May 2025
  • Spain and Portugal Without Energy

    1 project | news.ycombinator.com | 28 Apr 2025
  • Unlock Six-Figure Salaries: Top 20 DevOps Skills You Need in 2025

    2 projects | dev.to | 23 Apr 2025
  • Mastering Mermaid: A Comprehensive Cheat Sheet

    1 project | dev.to | 18 Apr 2025
  • New to wireframing

    1 project | dev.to | 13 Apr 2025
  • Owning my own data, part 1: Integrating a self-hosted calendar solution

    2 projects | news.ycombinator.com | 10 Apr 2025
  • A note from our sponsor - SurveyJS
    surveyjs.io | 24 May 2025
    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 →

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

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?