A React 16.8+ (using Hooks) component to display mermaid diagrams, flowcharts, gantt charts, etc.

Source : https://mermaid-js.github.io/mermaid/#/

• Install with NPM

npm install --save react-mermaid2

or

yarn add react-mermaid2

import React from "react"
import Mermaid from "react-mermaid2"

export default Component = () => {
  return (
    <Mermaid chart={`
        graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
        `}/>
  )
}

react-mermaid2 is built using ES6+ with React v16.8 (with Hooks) using babel 7+.

After cloning the repo, go to the local copy, then install dependencies.

npm install

or

yarn

Run the following task to compile from src/ to dist/Mermaid.js.

npm run package

or

yarn package

This repository proposes a React demonstration appication with component demonstration using a chart collection from a separate `collection.js' file.

You can fork/download the repo and launch the demo app to see the component in action.

npm start

or

yarn start

If you want to contribute to this project please take care to maintain the existing coding style.

Feel free to add unit tests for any new or changed functionality.

Copyright (c) 2020 e-Attestations
Licensed under the MIT license.