MarineObservationsDemo - Demo based on JointJS and Rappid toolkit

  •        117

Demo based on JointJS and Rappid toolkit


backbone : ~1.1.2
lodash : ~2.2.1



Related Projects

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.

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.

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 for more information, demos and documentation.

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.

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.

js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

  •    Javascript

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work... Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

Diagram Ring


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

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.

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

graphpath - Graphpath generates an ASCII network diagram from the route table of a Unix/Linux

  •    Shell

Graphpath generates an ASCII network diagram from the route table of a Unix/Linux router. It's a BSDRP's tool. None: it's just a shell script using standards tools (route, arp, ifconfig on *BSD and ip on Linux).

Dia - Visio alternative

  •    GTK+

Dia is inspired by the commercial Windows program Visio, though more geared towards informal diagrams for casual use. It can be used to draw many different kinds of diagrams. It currently has special objects to help draw entity relationship diagrams, UML diagrams, flowcharts, network diagrams, and many other diagrams. It is also possible to add support for new shapes by writing simple XML files, using a subset of SVG to draw the shape.

drawio-desktop - Official electron build of

  •    Javascript

draw-io desktop uses 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.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

jquery.flowchart - JQuery plugin that allows you to draw a flow chart.

  •    Javascript

jquery.flowchart.js is an open source javascript jQuery ui plugin that allows you to draw and edit a flow chart. This project is part of a bigger one, UltIDE which allows you to have a complete interface managing a flowchart and custom properties. Though it is still WIP, you are welcome to give it a try and contribute. A screenshot is shown below.

shenzhen-go - Experimental visual Go environment

  •    Go

SHENZHEN GO (working title) is an experimental visual Go environment, inspired by programming puzzle games such as TIS-100 and SHENZHEN I/O.SHENZHEN GO provides a UI for editing a "graph," where the nodes are goroutines and the arrows are channel reads and writes. (This is analogous to multiple "microcontrollers" communicating electrically in a circuit.) It can also convert a graph into pure Go source code, which can be compiled and run, or used as a library in a regular Go program.

vizceral - WebGL visualization for displaying animated traffic graphs

  •    Javascript

Intuitive animated traffic graph visualization using webgl. If a graph of nodes and edges with data about traffic volume is provided, it will render a traffic graph animating the connection volume between nodes.

DiagrammeR - Graph and network visualization using tabular data in R

  •    R

With the DiagrammeR package you can create, modify, analyze, and visualize network graph diagrams. The output can be incorporated into RMarkdown documents, integrated with Shiny web apps, converted to other graph formats, or exported as image files. This package is made possible by the htmlwidgets R package, which provides an easy-to-use framework for bringing together R and JavaScript.

Suvi: A Graph Visualization Framework

  •    Java

Suvi is a Java-library for graph visualization and a framework for developing graph visualization algorithms.

ruby-heap-viz - An interactive Ruby Object Graph Visualization

  •    Javascript

Ruby Heap Viz is an interactive Ruby object graph visualization. Use IRB and watch how Ruby's object graph responds! This is intended to a) be fun and b) serve as a learning tool for people to learn about objects, references and garbage collection. This visualization is used at Dev Bootcamp during our unit on Ruby and its memory model.