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

  •        515

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.

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.

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.

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.

markdown-preview-enhanced - One of the 'BEST' markdown preview extensions for Atom editor!

  •    HTML

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown. Feel free to ask questions, post issues, submit pull request, and request new features.

StarUML - UML or MDA Platform

  •    Delphi

StarUML is a software modeling tool to develop fast, flexible, extensible, featureful UML/MDA platform running on Win32 platform. It is a good alternative to Rational Rose. StarUML provides simple and powerful plug-in architecture so anyone can develop plug-in modules in COM-compatible languages.

react-lz-editor - A multilingual react rich-text editor component includes media support such as texts, images, videos, audios, links etc

  •    Javascript

An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well and welcome you add your language supports. Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.

react-styleguidist - Isolated React component development environment with a living style guide

  •    Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

Open Diagram


Open Diagram is the definitive open source .net diagramming component library for the .Net framework winforms environment. Use Open Diagram to add interactive data visualizations to your .net applications.

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.