Diagram-List

Diagram

  • 2019-excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams.

Flow Diagram

Chart

  • Echarts #Project#: A powerful, interactive charting and visualization library for browser.

  • AntV #Project#: AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

  • d4 #Project#: Data-Driven Declarative Documents

  • ChartJS #Project#: 简单灵活响应式的 HTML 图表库

  • Reacharts #Project#: Redefined chart library built with React

  • Frappé Charts #Project#: GitHub-inspired simple and modern SVG charts for the web with zero dependencies.

  • 2015-react-vis #Project#: A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

  • roughViz.js #Project#: Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

  • 2020-visx #Project#: visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

  • 2021-charts.css #Project#: Open source CSS framework for data visualization.

Realtime(实时图表)

热力图(Heatmap)

Graph & Network

  • 2018-Cytoscape.js #Project#: Graph theory / network library for analysis and visualisation.

  • react-network-diagrams #Project#: Contains ESnet network mapping and circuit rendering code, as used in the ESnet portal.

  • mxGraph #Project#: mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor.

MindMap | 思维脑图

Graph Editor | 图编辑器

  • 2014-mxGraph #Project#: mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.

  • 2014-bpmnjs #Project#: A BPMN 2.0 rendering toolkit and web modeler.

  • 2014-jsPlumb #Project#: jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG and runs on all browsers from IE9 and later.

  • 2014-jsWorkFlow #Project#: jsWorkflow, a jsPlumb based workfow API, helps to create JavaScript based workflow diagrams for various applications. It abstracts all the complexities involved in designing and managing workflows.

  • 2017-diagramjs #Project#: A toolbox for displaying and modifying diagrams on the web.

  • 2018-GGEditor #Project#: A visual graph editor based on G6 and React.

  • 2018-rete #Project#: JavaScript framework for visual programming and creating node editor.

  • floweditor #Project#: Standalone flow editing tool designed for use within the RapidPro suite of messaging tools.

  • 2020-react-flow #Project#: Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams.

Map | 地图

  • 2017-maptalks.js: An open-source javascript library for map applications.

  • 2018-deck.gl #Project#: deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.

Application

Handwriting & Signature

  • Signature Pad #Project#: Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square.

  • Rough.js #Project#: Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

  • atrament.js #Project#: Tiny JS library for beautiful drawing and handwriting on the HTML Canvas

Icons