@interrogate/rehype-plugin-plantuml

Transform PlantUML diagrams into SVG during HTML transformation with Rehype.

Quick reference

• Package: @interrogate/rehype-plugin-plantuml
• Maintained by: interrogate-io
• Issues: GitHub Issues

Installation

npm install @interrogate/rehype-plugin-plantuml

For optimal use with Markdown processing, also install:

npm install @interrogate/remark-plugin-plantuml

What is this?

A Rehype plugin that converts PlantUML diagram nodes into SVG during HTML transformation. It works in conjunction with @interrogate/remark-plugin-plantuml to provide a complete Markdown-to-HTML transformation pipeline for PlantUML diagrams.

When should I use this?

• When you need to convert PlantUML diagrams to SVG in your HTML processing pipeline
• When you're using Rehype for HTML transformations
• As part of a documentation system that includes PlantUML diagrams
• In combination with @interrogate/remark-plugin-plantuml for Markdown processing

Usage

Basic usage with Rehype:

import rehype from "rehype"
import rehypePlantuml from "@interrogate/rehype-plugin-plantuml"

const result = await rehype().use(rehypePlantuml).process(/* your HTML */)

Output Structure

For code blocks, the default output structure is:

<figure>
  <pre><code class="language-plantuml"><!-- PlantUML source --></code></pre>
  <svg><!-- Generated diagram --></svg>
</figure>

For images (.puml files), the default output structure is:

<figure>
  <svg><!-- Generated diagram --></svg>
</figure>

API

rehype().use(rehypePlantuml[, options])

Transform PlantUML diagram nodes into SVG during the HTML transformation process.

Options

{
  // Show PlantUML source code for image references (default: false)
  includeCodeForImages?: boolean,

  // Place the diagram before the code block (default: false)
  placeDiagramFirst?: boolean
}

Example with Options

import rehype from "rehype"
import rehypePlantuml from "@interrogate/rehype-plugin-plantuml"

// Show source code for images and place diagrams first
const result = await rehype()
  .use(rehypePlantuml, {
    includeCodeForImages: true,
    placeDiagramFirst: true,
  })
  .process(/* your HTML */)

License

MIT © James Lafferty