https://github.com/jasonbellamy/react-mermaid

A react component to display mermaid diagrams and flowcharts
https://github.com/jasonbellamy/react-mermaid

Last synced: 30 days ago
JSON representation

A react component to display mermaid diagrams and flowcharts

• Host: GitHub
• URL: https://github.com/jasonbellamy/react-mermaid
• Owner: jasonbellamy
• License: mit
• Created: 2015-08-27T21:02:53.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-12-14T18:42:09.000Z (almost 3 years ago)
• Last Synced: 2024-11-11T20:48:14.522Z (about 1 month ago)
• Size: 8.79 KB
• Stars: 78
• Watchers: 2
• Forks: 15
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md
  • Contributing: contributing.md
  • License: license

Awesome Lists containing this project

README

        
# React <Mermaid>

> A react component to display [mermaid](https://github.com/knsv/mermaid) diagrams and flowcharts.

## Getting Started

- Install with [NPM](https://www.npmjs.org/) - `npm install --save react-mermaid`

## Usage

```javascript

var React   = require('react');

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

var Component = React.createClass({

  render: function () {

    return (

      

        graph TD;

          A-->B;

          A-->C;

          B-->D;

          C-->D;

      

    );

  }

});

```

## Options

Property | Type     | Argument     | Default   | Description

---------|----------|--------------|-----------|------------

name     | `string` | `` | `mermaid` | name of the diagram/flowchart

## Developing

[react-mermaid](https://github.com/jasonbellamy/react-mermaid) is built using **ES6**. Run the following task to compile the `src/` into `dist/`.

```bash

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 ](http://jasonbellamy.com)  

Licensed under the MIT license.