Mermaid - Generation of diagram and flowchart from text in a similar manner as markdown

•    Javascript

---

Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code? This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

diagram markdown flowchart sequence-diagram gantt class-diagram git-graph visio-alternative chart

flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram

•    Javascript

---

Draws simple SVG flow chart diagrams from textual representation of the diagram

flowchart diagram svg client script

joint - JavaScript diagramming library

•    Javascript

---

JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders. Please see http://jointjs.com for more information, demos and documentation.

diagram svg html5 flowchart graph visualization

drawio-desktop - Official electron build of draw.io

•    Javascript

---

draw-io desktop uses draw-io. draw.io uses the mxGraph library as the base of the stack, with the GraphEditor example from mxGraph as the base of the application part.

javascript-applications electron-app graphics diagram-editor draw.io diagram flowchart uml

vue-chartjs - 📊 Vue.js wrapper for Chart.js

•    Javascript

---

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. You can use vue-chartjs directly in the browser without any build setup. Like in this codepen. For this case, please use the vue-chartjs.min.js which is the minified version. You also need to add the Chart.js CDN script.

vue chart chartjs visualisation vuejs vuejs2 doughnut pie diagram diagrams wrapper charts

g6 - A Graph Visualization Framework in JavaScript

•    Javascript

---

G6 is a graph visualization framework. It provides a set of base mechanisms, help developers to build your own graph visualization analysis application or graph visualization edit application.

graph-drawing tree network mind graph diagram g6 relational-data graph-visualization graph-editor graph-analysis

react-lifecycle-methods-diagram - Interactive React Lifecycle Methods diagram.

•    Javascript

---

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built in React, obviously. I did my best to make the diagram fully accessibile, both for keyboard navigation and screen readers for visually impaired people.

react react-lifecycle diagram cheatsheet

BRL-CAD - Solid Modeling System

•    Java

---

BRL-CAD is a powerful cross-platform constructive solid geometry solid modeling system that includes an interactive geometry editor, ray-tracing for rendering amp; geometric analyses, network distributed framebuffer support, image & signal-processing tools.

cad solid-modelling geometry modelling computer-graphics autocad-alternative diagram machine-diagram engineering-diagram

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

•    Javascript

---

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

html diagram flowchart orgchart layout graph typescript chart tree uml bpmn editor drawing canvas svg hierarchy family-tree decision-tree mindmap treeview genogram ivr-tree parse-tree concept-map visualization entity-relationship er-diagram radial sankey pert gantt timeline swimlane workflow flow process state sequential-function grafcet sequence circuit dataflow data-flow planogram floorplan seating pipes tree-layout force-directed layered hierarchical circular fishbone ishikawa treemap tree-map subgraph network library js html5

CloudMapper - Analyze your Amazon Web Services (AWS) environments

•    Javascript

---

CloudMapper helps you analyze your Amazon Web Services (AWS) environments. The original purpose was to generate network diagrams and display them in your browser. It now contains much more functionality. Duo built CloudMapper to generate interactive network diagrams of AWS accounts and is releasing it as an open-source tool to the larger developer community.

aws cytoscape diagram security aws-tools aws-visualization visualization

Mermaid - Generation of diagram and flowchart from text in a similar manner as markdown

•    Javascript

---

Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.

charting-tool charts javascript-charts flowchart markdown diagram sequence-diagram gantt-chart pie-chart

chartify - React.js plugin for building simple animated draggable charts

•    Javascript

---

The source for this module is in the main repo.Container prop is a class that will be added to the chart container element. This is important in case you have more than one chart on your page.

chart charts react barchart linechart timeline timesheet films music-library music-visualizer react-plugins customizable-charts cinematography movie-collection visualization draggable-elements draggable film-ratings rank reactjs react-js react-chart scale items dataset kinopoisk line-chart bar-chart marks axis calendar-view pyramid progress-chart showreel visualisation diagram graph

nomnoml - The sassy UML diagram renderer

•    Javascript

---

Hello, this is nomnoml, a tool for drawing UML diagrams based on a simple syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings. Created by Daniel Kallin. Contributions by Alexander Moosbrugger and korroz.

nomnoml diagram uml

wavedrom - :ocean: Digital timing diagram rendering engine

•    Javascript

---

WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics. WaveJSON is an application of the JSON format. The purpose of WaveJSON is to provide a compact exchange format for digital timing diagrams utilized by digital HW / IC engineers.

svg diagram waveform verilog rtl

Diagramo - Create Flowchart using HTML5

•    PHP

---

Diagramo is pure HTML5 (canvas) flowchart software, No Flash, no Java or other plugins. You can export diagrams in SVG, Gif of JPEG format.

flowchart flowchart-diagram chart diagram

diagram - CLI app to convert ascii arts into hand drawn diagrams.

•    Go

---

Diagram is a CLI tool to generate hand drawn diagrams from ASCII arts. It's a full featured CLI application which converts the ASCII text into hand drawn diagrams. The CLI part is based on gocui and the ascii to png conversion is done using the gg library.

cli terminal drawing ascii ascii-art canvas gocui termbox-go diagram

reftree - Automatically generated diagrams and animations for Scala data structures

•    Scala

---

Behold, automatically generated diagrams and animations for your data! reftree is a Scala and Scala.js library that allows you to create data structure visualizations with very little effort.

data-structures diagram animation visualization

Open Diagram

•    

---

Open Diagram is the definitive open source .net diagramming component library for the .Net framework winforms environment. Use Open Diagram to add interactive data visualizations to your .net applications.

diagram diagramming control flowchart

Circuit Diagram

•    CSharp

---

Circuit Diagram enables you to make electronic circuit diagrams and export them as images.

circuit diagram coursework diagram-maker digital electronic-circuit

Diagram Ring

•    

---

Advanced diagram editor for Flowcharts, Class Diagrams, DFDs, ERDs, Pie charts, Bar charts and etc. It's been developed in WPF , C#

diagram diagram-editor erd flowchart charting dfd diagram-maker