Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Make nice graphs in your markdown files in gatsbyjs, using js-sequence-diagrams.


npm install --save gatsby-transformer-remark gatsby-remark-sequence

How to use

// 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.)

Usage in Markdown

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:


© 2023 Gatsby, Inc.