TypeScript Diagrams

Open-source TypeScript projects categorized as Diagrams

Top 10 TypeScript Diagram Projects

  • excalidraw

    Virtual whiteboard for sketching hand-drawn like diagrams

    Project mention: Pravljenje AWS strukturnog diagrama | /r/programiranje | 2023-06-07
  • react-diagrams

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

    Project mention: Visual Gherkin Manager - devlog#2 | dev.to | 2022-11-27

    The library react-diagrams is very extensive, allowing easy customization of all necessary components styles and behaviors. For example, It were necessary to create custom node and label components to contemplate the desired needs.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • penrose

    Create beautiful diagrams just by typing mathematical notation in plain text.

    Project mention: Penrose Create beautiful diagrams just by typing math notation in plain text | news.ycombinator.com | 2023-03-22
  • vue-chartjs

    📊 Vue.js wrapper for Chart.js

    Project mention: Vuesalize officially supports Vue 3! | /r/vuejs | 2023-02-27
  • Mermaid

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

    Project mention: FOSS ER-Diagram drawing tool? | /r/selfhosted | 2023-06-02

    I've been using Mermaid. https://github.com/mermaid-js/mermaid-live-editor

  • 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: Interactive Nodes-and-edges graph in Vue | /r/vuejs | 2023-03-21

    For some use cases, I think vue-flow would count as a graph library. In your case, this is probably a good library to use.

  • reaflow

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

    Project mention: jsoncrack.com - what do they use for the graph visuals? | /r/webdev | 2023-05-15

    Looks like https://reaflow.dev/

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • text-to-diagram-site

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

    Project mention: Is there a tool to visualize related stories, tasks, bugs, etc? | /r/devops | 2023-06-01

    If you can get enough data out of the ticket system, maybe something like https://text-to-diagram.com/ will help.

  • d2-vscode

    VSCode extension for D2 files.

    Project mention: Extension for creating beautiful software architecture diagrams with text | /r/vscode | 2023-01-19
  • d2-obsidian

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

    Project mention: Can I create this kind of visual algorithms? | /r/ObsidianMD | 2023-03-22

    obsidian + d2 is a pretty pleasant experience; the sketch mode is really nice too.

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). The latest post mention was on 2023-06-07.

TypeScript Diagrams related posts

Index

What are some of the best open-source Diagram projects in TypeScript? This list will help you:

Project Stars
1 excalidraw 49,302
2 react-diagrams 7,788
3 penrose 5,685
4 vue-chartjs 5,144
5 Mermaid 2,548
6 vue-flow 1,635
7 reaflow 1,633
8 text-to-diagram-site 280
9 d2-vscode 136
10 d2-obsidian 123
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com