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

  •        50

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.



babel-core : 6.24.1
babel-generator : ^6.25.0
babel-plugin-add-module-exports : ^0.2.1
babel-plugin-transform-es2015-destructuring : ^6.23.0
babel-plugin-transform-es2015-spread : ^6.22.0
babel-plugin-transform-object-rest-spread : ^6.23.0
babel-traverse : ^6.25.0
babel-types : ^6.25.0
babylon : ^6.17.4
commander : ^2.12.1
deepmerge : ^1.5.1
global : ^4.3.2
npm-name-cli : ^1.2.0
remove : ^0.1.5
string-width : ^2.1.1
xml-escape : ^1.1.0



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.

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.

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.

AngularJS-FlowChart - An example/template WebUI control for visualizing and editing flow charts

  •    Javascript

A WebUI control for visualizing and editing flow charts. This isn't designed to be completely general purpose, but it will be a good basis if you need an SVG flowchart and you are willing to work with AngularJS.

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

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.

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.

webpack-library-starter - Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library)

  •    Javascript

Have in mind that you have to build your library before publishing. The files under the lib folder are the ones that should be distributed.

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

QuickFlow - SharePoint Workflow Enhancement and Flowchart Designer


A simple and powerfull workflow engine on SharePoint. It provider a flowchart flowcontainer to make the development of complex sharepoint workflow more easy. It's based on WF3.5 not WF4.

textures - Textures.js is a JavaScript library for creating SVG patterns

  •    Javascript

Textures.js is a javascript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization. Read more on http://riccardoscalco.github.io/textures/.

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.

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

react-native-pathjs-charts - Android and iOS charts based on react-native-svg and paths-js

  •    Javascript

This library is a cross-platform (iOS/Android) library of charts/graphs using react-native-svg and paths-js based on the excellent work done by Roman Samec in the react-pathjs-chart library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices. Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.

displacy - :boom: displaCy.js: An open-source NLP visualiser for the modern web

  •    Javascript

⚠️ As of v2.0.0, the displaCy visualizers are now integrated into the core library. See here for more details on how to visualize a Doc object from within spaCy. We're also working on a new suite of tools for serving and testing spaCy models. The code of the standalone visualizers will still be available on GitHub, just not actively maintained. displaCy.js is a modern and service-independent visualisation library. We hope this makes it easy to compare different services, and explore your own in-house models. If you're using spaCy's syntactic parser, displaCy should be part of your regular workflow. Because spaCy's parser is statistical, it's often hard to predict how it will analyse a given sentence. Using displaCy, you can simply try and see. You can also share the page for discussion with your team, or save the SVG to use elsewhere. If you're developing your own model, you can run the service yourself — it's 100% open source.

paths-js - Generate SVG paths for geometric shapes :bar_chart:

  •    Javascript

Paths.js is a library to generate SVG paths, allowing you to create your own charts using a functional and testable API. It provides the primitives to create various shapes and charts starting from raw data, but it does not prescribe how you render these charts. This means you can use Paths.js to build components for your favorite frontend framework, and works even server-side on NodeJS. Paths.js offers three APIs, of increasing abstraction. The lowest level is a chainable API to generate an arbitrary SVG path. On top of this, paths for simple geometric shapes such as polygons or circle sectors are defined. At the highest level, there is an API to generate some simple graphs (pie, line chart, radar...) for a collection of data, assembling the simple shapes.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

bounty - Javascript and SVG odometer effect library with motion blur

  •    Javascript

JavaScript odometer or slot machine effect library for smoothly transitioning numbers with motion blur. Library uses functional approach and ES7 Function Bind Syntax. Internally based on SVG. See the live version.