grg

gatsby-remark-graph

Make nice graphs in your markdown files in gatsbyjs, using mermaid

Showing:

Popularity

Downloads/wk

77

GitHub Stars

45

Maintenance

Last Commit

7mos ago

Contributors

4

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Gatsby Graph

Readme

gatsby-remark-graph

Greenkeeper badge

Travis Status

Make nice graphs in your markdown files in gatsbyjs, using mermaid.

Here is a basic demo, which also uses my starter template.

install

npm install --save gatsby-transformer-remark gatsby-remark-graph

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-graph',
          options: {
            // this is the language in your code-block that triggers mermaid parsing
            language: 'mermaid', // default
            theme: 'default' // could also be dark, forest, or neutral
          }
        }
      ]
    }
  }
]

Make sure you put it before other plugins (especially those that work with code blocks, like prism.)

Usage in Markdown

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

Will give you a graph that looks like this:

diagram

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial