JavaScript Diagrams

Open-source JavaScript projects categorized as Diagrams
Edit details
Flowchart JavaScript Diagram SVG TypeScript
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured

Top 9 JavaScript Diagram Projects

Diagrams

  • mermaid

    Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

    Project mention: Extending AstroJS Markdown Processing With Remark and Rehype Plugins | dev.to | 2024-08-17

    Lets, assume we want to add rendered Mermaid diagrams to our page by transforming the source code in fenced code blocks like the following:

  • InfluxDB

    Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

    InfluxDB logo

  • flowy

    The minimal javascript library to create flowcharts ✨

  • NN-SVG

    Publication-ready NN-architecture schematics.

    Project mention: NN-SVG | news.ycombinator.com | 2023-12-05

    Yeah, the github repo is a much better link for this, as it explains what it is. https://github.com/alexlenail/NN-SVG

  • kroki

    Creates diagrams from textual descriptions!

    Project mention: Vizdom: Diagrams as Code | news.ycombinator.com | 2024-09-01

    The L in DSL is "Language", so it's a programming language that is domain, or niche, specific. These are code.

    Diagramming is a domain, and within diagramming are any number of diagram type domains, leading to concise languages for particular niches.

    Compare 25+ of these niches here: https://kroki.io/

  • beautiful-react-diagrams

    💎 A collection of lightweight React components and hooks to build diagrams with ease 💎

  • mermaid-cli

    Command line tool for the Mermaid library

    Project mention: Mermaid Gantt diagrams are great for displaying distributed traces in Markdown | news.ycombinator.com | 2024-07-22

    I was going to point to https://github.com/mermaid-js/mermaid-cli, but it uses puppeteer and chromium under the hood. That seems...excessive, to render an SVG.

  • grafana-flowcharting

    Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io

  • SaaSHub

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

    SaaSHub logo

  • DgrmJS

    Dgrm.net - flowchart editor. Works on desktop, phone and tablet. Has no dependency. Pure JavaScript.

  • d2-playground

    An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

    Project mention: Vizdom: Diagrams as Code | news.ycombinator.com | 2024-09-01
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).

JavaScript Diagrams discussion

Log in or Post with

JavaScript Diagrams related posts

Index

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

Project Stars
1 mermaid 70,396
2 flowy 11,191
3 NN-SVG 4,492
4 kroki 2,841
5 beautiful-react-diagrams 2,643
6 mermaid-cli 2,325
7 grafana-flowcharting 953
8 DgrmJS 905
9 d2-playground 71

Sponsored
Purpose built for real-time analytics at any scale.
InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.
www.influxdata.com

Did you konow that JavaScript is
the 3rd most popular programming language
based on number of metions?