render-plantuml Web Component

A web component capable of rendering PlantUML diagrams using an external server.

Installation

Enable the element on any web page using code similar to

<script type="module">
  import enableElement from "https://cdn.pika.dev/render-plantuml";
  enableElement();
</script>

Usage

<render-plantuml>
  <!--
    /' The diagram definition is inside an HTML comment as it contains
       characters (i.e. `>`) with meaning in HTML. This is not necessary in all
       cases, but some care should be taken when using these characters '/
    Bob -> Alice : Hello
  -->
</render-plantuml>

PlantUML diagram definitions containing HTML entities either need to have them escaped or be wrapped in a comment.

Attributes

• renderMode - Used to specify the output format. Should be one of img, png, svg or txt. Invalid values show an error. Defaults to svg.
• server - The address of the server to use for rendering the PlantUML diagrams. Defaults to the publicly available demo server at https://plantuml.com/plantuml.
• src - An absolute URI to a file containing a PlantUML description. The file needs to be available to the server that is used. Defining a src takes precedence over any PlantUML defined within the element! Relative URIs are allowed and treated as indicating files located on the active origin.