gitbook-plugin-plantuml-svg

Inject PlantUML into GitBook as an SVG element.

This is inspired by dy93's work plugin-plantuml-cloud. There're already several PlantUML plugins for GitBook out there. However, most of them relies on a local PlantUML & Graphviz.

The plugin-plantuml-cloud uses the public PlantUML services. It saves people's effort to maintain the local plantuml.jar.

This plugin makes 2 additional improvements

1. Insert <object data="..." type="image/svg+xml"> instead of <img>, so that the links in SVG still work.
2. Support standalone PlantUML file.

Setup

# With NPM 
$ npm install gitbook-plugin-plantuml-svg
 
# With Yarn 
$ yarn add gitbook-plugin-plantuml-svg

In your book.json, add plantuml-svg to the plugin list

{
  "plugins": ["plantuml-svg"]
}

Usage

Standalone PlantUML file

Say, you have graph/my-chart.puml.

@startuml
object Hello
object World
Hello --> World
@enduml

In your Markdown document, put following lines.

{% uml src="graph/my-chart.puml" %}
{% enduml %}

By default, the file path is relative to the project root. If you want the path to be relative to current document, do

{% uml src="graph/my-chart.puml", relativeTo=file %}
{% enduml %}

Inline PlantUML

The standalone PlantUML file is recommended for large graphs. However, for simple graphs, you can also use inline plugin PlantUML.

{% uml %}
@startuml
object Hello
object World
Hello --> World
@enduml
{% enduml %}