A React (>v16.8) component for Mermaid js (https://mermaid-js.github.io/)
npm install react-mermaid2> A React 16.8+ (using Hooks) component to display mermaid diagrams, flowcharts, gantt charts, etc.
!https://mermaid-js.github.io/mermaid/img/new-diagrams.png
Source : https://mermaid-js.github.io/mermaid/#/
- Install with NPM
``bash`
npm install --save react-mermaid2
or
`bash`
yarn add react-mermaid2
`javascript
import React from "react"
import Mermaid from "react-mermaid2"
export default Component = () => {
return (
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
}/>`
)
}
| Property | Type | Argument | Default | Description |
| -------- | -------- | ------------ | --------- | ----------------------------------------------------- |
| chart | string | | mermaid | The mermaid code of your chart. Check Mermaid js documentation for details. |string
| name | | | | On optional name of your mermaid diagram/flowchart/gantt etc. |object
| config | | | | On optional object with one of several Mermaid config parameters. Check Mermaid js documentation for details.
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.
`bash`
npm install
or
`bash`
yarn
Run the following task to compile from src/ to dist/Mermaid.js.
`bash`
npm run package
or
`bash`
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.
``bash`
npm start
or
`bash``
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.