react-mermaid

A react component to display mermaid diagrams and flowcharts.

Usage no npm install needed!

<script type="module">
  import reactMermaid from 'https://cdn.skypack.dev/react-mermaid';
</script>

README

React <Mermaid>

A react component to display mermaid diagrams and flowcharts.

Getting Started

  • Install with NPM - npm install --save react-mermaid

Usage

var React   = require('react');
var Mermaid = require('react-mermaid');

var Component = React.createClass({
  render: function () {
    return (
      <Mermaid name="diagram">
        graph TD;
          A-->B;
          A-->C;
          B-->D;
          C-->D;
      </Mermaid>
    );
  }
});

Options

Property Type Argument Default Description
name string <optional> mermaid name of the diagram/flowchart

Developing

react-mermaid is built using ES6. Run the following task to compile the src/ into dist/.

npm run build

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality.

License

Copyright (c) 2015 Jason Bellamy
Licensed under the MIT license.