Community Plugin
View plugin on GitHubgatsby-remark-plantuml-lite
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
```
More PlantUML syntax can be learned in the official PlantUML documentation.
License
The code in this project is released under the MIT License.