See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
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
            '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:


© 2022 Gatsby, Inc.