Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liudonghua123/gatsby-remark-sequence
✨🐢🚀✨
https://github.com/liudonghua123/gatsby-remark-sequence
Last synced: 7 days ago
JSON representation
✨🐢🚀✨
- Host: GitHub
- URL: https://github.com/liudonghua123/gatsby-remark-sequence
- Owner: liudonghua123
- License: mit
- Created: 2017-12-12T01:24:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-10T03:18:24.000Z (over 4 years ago)
- Last Synced: 2024-09-30T23:12:29.439Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 6
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-remark-sequence
Make nice graphs in your markdown files in gatsbyjs, using [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/).
## install
`npm install --save gatsby-transformer-remark gatsby-remark-sequence`
## How to use
```js
// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: `gatsby-remark-sequence`,
options: {
// see more details on https://github.com/bramp/js-sequence-diagrams
'theme': 'hand',
}
},
]
}
}
]
```
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
```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
Will give you a graph that looks like this:
