This plugin adds diagrams using pintora during server-side rendering. So you don't have to include a runtime dependency of pintora.

Pintora is faster than Mermaid.js in CLI, since you don't have to start a headless browser to generate images.

In your gatsby project:

npm install --save gatsby-remark-pintora @pintora/cli

This plugin processes markdown code blocks. If you have any other plugins which do that such as syntax highlighters, make sure you import this before those plugins.

Add the plugin to your gatsby-config.js.

{
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-pintora',
            options: {
              // language: 'pintora',
              // theme: 'default',
              // backgroundColor: '#ffffff',
            }
          }
        ]
      }
    }
  ]
}

Now you can use pintora in your markdown:

```pintora
activityDiagram
  start
  :Install Plugin;
  :Configure;
  :Make beautiful and structured diagrams;
  end

And it will be replaced with inline svg:

• Github: @hikerpig

This plugin is inspired by gatsby-remark-mermaid | Gatsby.

This README was generated with ❤️ by readme-md-generator