gatsby-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
or
yarn add gatsby-remark-plantuml-lite
Dependencies
This plugin depends on:
gatsby-transformer-remark
orgatsby-plugin-mdx
And it will act as a plugin for gatsby-transformer-remark
/ gatsby-plugin-mdx
.
This plugin is implemented using pure TypeScript, using the Web Server API officially provided by PlantUML (or your own PlantUML server), 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.
{
resolve: `gatsby-remark-plantuml-lite`,
options: {
// Configuration options
imageType: `svg`,
},
},
`gatsby-remark-prismjs`,
],
},
},
// other plugins ...
];
// ...
This example uses gatsby-transformer-remark
.
If you want to use with gatsby-plugin-mdx
, please refer to the Gatsby remark plugins chapter of the official documentation.
Options
Configure this plugin:
// other plugins ...
{
resolve: `gatsby-remark-plantuml-lite`,
options: { // Configuration options
imageType: `svg` // `svg` or `png`, default is `svg`
server: `https://www.plantuml.com/plantuml`, // Customize PlantUML server
}
},
// other plugins ...
Details of configuration options:
Name | Values | Default | Description |
---|---|---|---|
imageType |
svg or png |
svg |
Type of PlantUML image returned from Web Server. |
server |
url (string) | https://www.plantuml.com/plantuml |
PlantUML server to generate UML diagrams on-the-fly. |
codeBlockLang |
string | plantuml |
Name of the codeblock languange. |
title |
string or null | null |
Specifies the title property of the generated PlantUML image. |
alt |
string | Same with codeblocklang 1 |
Specifies the alt property of the generated PlantUML image. |
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
```
This plugin will replace PlantUML code blocks with PlantUML image.
like this:
More PlantUML syntax can be learned in the official PlantUML documentation.
License
The code in this project is released under the MIT License.
- By default, the value of the
alt
is bound tocodeblocklang
; for example, setcodeblocklang = 'uml'
will causealt = 'uml'
↩