Community Plugin
View plugin on GitHub
See starters using this

gatsby-remark-plantuml-lite

Test and Build

A light Gatsby plugin to transform PlantUML code blocks into SVG/PNG images(without Java and Graphviz).

Install

npm install --save gatsby-remark-plantuml-lite gatsby-transformer-remark

or

yarn add gatsby-remark-plantuml-lite gatsby-transformer-remark

Dependencies

This plugin depends on:

  • gatsby-transformer-remark

And it will act as a plugin for gatsby-transformer-remark.

This plugin is implemented using pure TypeScript, using the Web Server API officially provided by PlantUML, and does not need to depends on Java and Graphviz locally.

How to use

After installed, Configure in gatsby-config.js:

// gatsby-config.js
// ...
plugins: [
  // other plugins ...
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-code-titles`,
        // Please make sure the order of `gatsby-remark-plantuml-lite`
        // before the `gatsby-remark-prismjs` and 
        // after the `gatsby-remark-code-titles`.
        // If they exist.
        {
          resplve: `gatsby-remark-plantuml-lite`,
          options: { // Configuration options
            imageType: `svg`
          }
        },
        `gatsby-remark-prismjs`,
      ],
    },
  },
  // other plugins ...
]
// ...

Options

Configure this plugin:

// other plugins ...
{
  resplve: `gatsby-remark-plantuml-lite`,
  options: { // Configuration options
    imageType: `svg` // `svg` or `png`, default is `svg`
  }
},
// other plugins ...

Details of configuration options:

Name Values Default Description
imageType svg or png svg Type of PlantUML image returned from Web Server

Use in Markdown

Then write PlantUML in the code block of Markdown, and specify the language type of plantuml in the code block.

For example:

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
```

PlantUML Example

More PlantUML syntax can be learned in the official PlantUML documentation.

License

The code in this project is released under the MIT License.