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

  •        1078

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.

Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs to be spent on documenting, as a separate and laborious task.

Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology".

https://mermaid-js.github.io/mermaid
https://github.com/mermaid-js/mermaid

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability. If you are looking for node-based graphs, checkout reaflow.

XChart - Light weight Java library for plotting data

  •    Java

XChart is a light-weight and convenient library for plotting data designed to go from data to chart in the least amount of time possible and to take the guess-work out of customizing the chart style.

Diagram Ring

  •    

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


XCL-Charts - Android图表库(XCL-Charts is a free charting library for Android platform

  •    Java

Android图表库(XCL-Charts is a free charting library for Android platform.),基于Android Canvas来绘制各种图表,使用简便,定制灵活。目前支持3D/非3D/背向式/横向/竖向柱形图(Bar Chart)、3D/非3D饼图(Pie Chart)、堆叠图(Stacked Bar Chart)、面积图(Area Chart)、 折线图(Line Chart)、曲线图(Spline Chart)、环形图(Dount Chart)、南丁格尔玫瑰图(Rose Chart)、仪表盘(Dial Chart)、刻度盘(Gauge Chart)、雷达图(Radar Chart)、漏斗图(Funnel Chart)、圆形图(Circle Chart)、弧线比较图、散点图(Scatter Chart)、气泡图(Bubble Chart)、范围条形图(RangeBar Chart)等图表。其它特性还包括支持图表缩放、手势移动、点击响应、动画效果、多轴显示、图表参考线、混合图表及同数据源不同图表类型切换等。

Chart.js - HTML5 charts for your website

  •    Javascript

Easy, object oriented client side graphs for designers and developers. Visualise your data in different types Line chart, Pie chart, Bar chart, Radar chart, Polar area charts, Doughnut charts.

Orson Charts - A 3D chart library for Java applications (JavaFX, Swing or server-side)

  •    Java

Orson Charts is a 3D chart library for the Java(tm) platform that can generate a wide variety of 3D charts for use in client-side applications (JavaFX and Swing) and server-side applications (with export to PDF, SVG, PNG and JPEG).

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.

jCharts - Java based charting utility

  •    Java

jCharts is a 100% Java based charting utility that outputs a variety of charts. Servlets, JSP's, and Swing application could use this library to generate charts. It could generate charts of type Area, Area Stacked, Bar, Bar Clustered, Bar Clustered Horizontal, Bar Horizontal, Bar Stacked, Bar Stacked Horizontal, Combo, Hi/Low Open/Close, Line, Pie 2D, Pie 3D, Point, Radar, XY Plot and lot more.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

ember-charts

  •    Javascript

A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation. Unfortunately, this version of Ember Charts is out of date, and the current maintainers of Ember Charts at Addepar have not been able to update it recently.

Highcharts - Interactive Javascript Charts

  •    Javascript

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types.

muze - Composable data visualisation library for web with a data-first approach now powered by WebAssembly

  •    Javascript

Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations. It uses a data-first approach to define the constructs and layers of the chart, automatically generates cross-chart interactivity, and allows you to over-ride any behavior or interaction on the chart.

uvCharts - Simple yet powerful JavaScript Charting library built using d3.js

  •    Javascript

Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of minutes. To learn more about uvCharts and how to use it, read the wiki page or the 5 minute quick start guide.

jFreeChart - Java and .NET chart library

  •    Java

jFreeChart is a widely used open source charting library. Its flexible design is easy to extend and targets both server-side and client-side applications. It supports many output types, including Swing components, image files (PNG and JPEG) and vector graphics file formats (including PDF, EPS and SVG).

mermaid-live-editor - Edit, preview and share mermaid charts/diagrams

  •    Svelte

If you want to speed up the progress for mermaid-live-editor, join the slack channel and contact knsv. Edit, preview and share mermaid charts/diagrams.






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.