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 chartJointJS 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 visualizationdraw-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 umlvue-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 chartsG6 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-analysisAn 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 cheatsheetBRL-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-diagramGoJS 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 html5quiver is a modern, graphical editor for commutative and pasting diagrams, capable of rendering high-quality diagrams for screen viewing, and exporting to LaTeX via tikz-cd. Creating and modifying diagrams with quiver is orders of magnitude faster than writing the equivalent LaTeX by hand and, with a little experience, competes with pen-and-paper.
editor latex diagram category-theory tikz commutative-diagrams tikzcd tikz-cd pasting-diagrams commutativeCloudMapper 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 visualizationMermaid 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-chartThis unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. You can directly edit and save .drawio.svg and .drawio.png files. These files are perfectly valid svg/png-images that contain an embedded Draw.io diagram. Whenever you edit such a file, the svg/png part of that file is kept up to date.
diagram vscode-extension hacktoberfest drawio diagrams.net visio architecture uml code-linkNetwork is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering. A basic example on loading a Network is shown below. More examples can be found in the examples directory of the project.
diagram network visjs hacktoberfest vis visualization web-based browser-based typescript chart graph browserDiagram Maker is a library to display an interactive editor for any graph-like data. Following is a screenshot from one of the consumers of this library, AWS IoT Events Console with Diagram Maker in action.
visualization editor aws workflow cloud canvas state-machine graph diagram interactive drag drop diagrams flowchart diagram-editor diagram-maker interactive-demos visualizatonDiagrams lets you draw the cloud system architecture in Python code. It was born for prototyping a new system architecture without any design tools. You can also describe or visualize the existing system architecture as well. Diagram as Code allows you to track the architecture diagram changes in any version control system.
graphviz diagram architecture diagram-as-code system-architecture flow-chart system-diagramThe 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 graphHello, 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 umlWaveDrom 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
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.