Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/konsumer/gatsby-remark-graph
Make nice graphs in your markdown files in gatsbyjs, using mermaid
https://github.com/konsumer/gatsby-remark-graph
Last synced: about 2 months ago
JSON representation
Make nice graphs in your markdown files in gatsbyjs, using mermaid
- Host: GitHub
- URL: https://github.com/konsumer/gatsby-remark-graph
- Owner: konsumer
- Created: 2017-11-15T01:07:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-06-17T07:21:22.000Z (over 1 year ago)
- Last Synced: 2024-10-23T04:17:47.386Z (about 2 months ago)
- Language: JavaScript
- Size: 85 KB
- Stars: 45
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-remark-graph
[](https://greenkeeper.io/)
[](https://travis-ci.org/konsumer/gatsby-remark-graph)
Make nice graphs in your markdown files in gatsbyjs, using [mermaid](https://mermaidjs.github.io/).
[Here](https://remark-graph-demo.netlify.com/graphdemo) is a basic demo, which also uses my [starter template](https://github.com/konsumer/gatsby-starter-bootstrap-netlify/).
## install
`npm install --save gatsby-transformer-remark gatsby-remark-graph`
## How to use
```js
// 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](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/).)
### 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:
