npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-remark-plantuml-lite

v0.3.2

Published

A Gatsby plugin to transform PlantUML code blocks into SVG images

Downloads

165

Readme

gatsby-remark-plantuml-lite

build_icon codeql_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 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:

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'