react-mermaid - A react component to display mermaid diagrams and flowcharts

  •        1468

A react component to display mermaid diagrams and flowcharts. react-mermaid is built using ES6. Run the following task to compile the src/ into dist/.


mermaid : ^0.5.1



Related Projects

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

  •    Javascript

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 - 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. - The open source embeddable online markdown editor (component).

  •    Javascript

The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked. It supports Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown). It has full-featured support for Real-time Preview, Image Upload, Code blocks / Tables insert, Search replace, Themes, Multi-languages and lot more.

react-lifecycle-methods-diagram - Interactive React Lifecycle Methods diagram.

  •    Javascript

An 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.

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.

jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc

  •    Ruby

Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship. Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

react-markdown - Markdown component for React

  •    Javascript

react-markdown is a Markdown component for React using remark. There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax.

reaflow - 🕸 React library for building workflow editors, flow charts and diagrams

  •    TypeScript

REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.

ReLaXed - Create PDF documents using web technologies

  •    Javascript

ReLaXed creates PDF documents interactively using HTML or Pug (a shorthand for HTML). It allows complex layouts to be defined with CSS and JavaScript, while writing the content in a friendly, minimal syntax close to Markdown or LaTeX. ReLaXed has support for Markdown, LaTeX-style mathematical equations (via MathJax), CSV conversion to HTML tables, plot generation (via Vega-Lite or Chart.js), and diagram generation (via mermaid). Many more features can be added simply by importing an existing JavaScript or CSS framework.

react-mde - React Markdown Editor

  •    TypeScript

A simple yet powerful and extensible Markdown Editor editor for React. React-mde is built on top of Draft.js. React-mde is a completely controlled component.

react-native-simple-markdown - 📜 React Native Markdown component (iOS & Android)

  •    Javascript

All you need to do is import the react-native-simple-markdown and then use the <Markdown /> component. <Markdown /> will apply its style by default. However you can pass a styles prop to customize it has you wish.

react-native-markdown - Markdown component for React Native

  •    Javascript

A component for rendering Markdown in React Native. Pull requests welcome. All you need is to require the react-native-markdown module and then use the <Markdown/> tag.

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.

tldraw - A tiny little drawing app.

  •    TypeScript

tldraw is a tiny little drawing app. It helps to Draw diagram, Create flow charts. Entire app can be used as a react component. Diagram can be exported to SVG, PNG, JPG, WEBP.

react-remarkable - A React component for rendering Markdown with remarkable

  •    Javascript

A React component for rendering Markdown with remarkable. Shortly you'll see that markdown syntax highlighting is enabled.

markdown-to-jsx - 🏭 The most lightweight, customizable React markdown component.

  •    Javascript

The most lightweight, customizable React markdown component. Any HTML tags rendered by the compiler and/or <Markdown> component can be overridden to include additional props or even a different HTML representation entirely.

plantuml - Generate UML diagram from textual description

  •    Java

PlantUML is a component that allows to quickly write : * sequence diagram, * use case diagram, * class diagram, * activity diagram, * component diagram, * state diagram * object diagram

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.