gatsby-remark-plantuml-lite
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    gatsby-remark-plantuml-lite

    ci_icon codecov_icon npm_icon

    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 or gatsby-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 codeblocklang1 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:

    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.

    1. By default, the value of the alt is bound to codeblocklang; for example, set codeblocklang = 'uml' will cause alt = 'uml'

    Install

    npm i gatsby-remark-plantuml-lite

    DownloadsWeekly Downloads

    142

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • mogeko